@scalar/components
v0.12.17Scalar 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 normalizescalar-components
: complex component stylesscalar-utilities
: utility styles likeflex