@scalar/components NPM | npm.io

0.12.63 • Published 8 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

8 months ago

Scalar Components

This library is designed to work seamlessly with our theming system, but it’s also flexible enough for standalone use by setting CSS variables manually. For a list of available variables, please refer to the variable legend below.

Installation

pnpm i @scalar/components

Usage

To get started, import the CSS styles in your main setup file (e.g., main.ts, index.ts, or App.vue):

import '@scalar/components/style.css'

Then, you can use the components in your Vue components. Here’s an example:

<script setup lang="ts">
import { ScalarButton, ScalarTextField } from '@scalar/components'
</script>

<template>
  <main class="col-1 items-center justify-center">
    <div
      class="col w-full max-w-md items-center gap-4 rounded-lg bg-b-3 p-8 shadow">
      <h1 className="text-lg font-bold">Sign in to your account</h1>

      <ScalarTextField
        class="w-full"
        label="Email Address" />
      <ScalarButton fullWidth>Login</ScalarButton>
    </div>
  </main>
</template>

CSS Layers

This package exports its Tailwind styles using CSS cascade layers to avoid any conflicts with existing CSS. The layers are organized as follows:

scalar-base: reset and normalize
scalar-components: complex component styles
scalar-utilities: utility styles like flex

@floating-ui/utils @floating-ui/vue @headlessui/vue @vueuse/core cva nanoid radix-vue tailwind-merge vue @scalar/code-highlight @scalar/themes @scalar/use-toasts

@everything-registry/sub-chunk-810 @scalar/use-codemirror @scalar/api-reference @scalar/client-app @scalar/api-client @scalar/api-client-modal @readyapi/api-client bunny_devlopdoc flow-devlopdoc

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

8 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

12 months ago

1 year ago

11 months ago

1 year ago

1 year ago

1 year ago

11 months ago

1 year ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

11 months ago

11 months ago

1 year ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

10 months ago

1 year ago

1 year ago

12 months ago

10 months ago

12 months ago

10 months ago

12 months ago

10 months ago

12 months ago

10 months ago

10 months ago

10 months ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago