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

Contributing

All pull requests should include the following checklist:

## Component Checklist

- [ ] Exported from `@scalar/components`
- [ ] Has JSDocs for all:
  - [ ] Components (with examples)
  - [ ] Props
  - [ ] Slots
  - [ ] Emits
  - [ ] Functions
  - [ ] Types
- [ ] Allows overriding of Tailwind classes where applicable (see useBindCx)
- [ ] Has stories showcasing any applicable variants
- [ ] Has unit tests covering any applicable interactions

Package detail