Scale ships as framework-agnostic <sc-*> web
components with built-in theming and design tokens. Install the package once, then
import only the components you use — each file registers its own custom element, and
Inter is bundled in, so there’s no font setup.
Add the package to your project with your package manager of choice.
The fastest way to a running app — scaffold a pre-wired Vite + TypeScript project with theming, tokens, and a sample page already set up.
Import a component straight into any page. The import registers its custom element, so the markup just works — no build step or wrapper required.
Every component is also exported from the package root, so you can pull in several at once — or register the whole set with a single side-effect import.
Per-component imports keep your bundle small (only what you use is shipped); the root barrel is the quickest way to prototype. Every component page lists its own import line under Install, plus live examples you can copy.
Visual properties come from CSS custom properties. The semantic brand variables resolve
to a primitive brand scale (--sc-color-brand-100–900) — in the light theme:
Retheme by overriding the --sc-color-brand-* primitives —
sc-logo and every component follow automatically. The dark
theme picks different steps from the same scale, so both themes retheme at once and honour
prefers-color-scheme. See Color
for the full token reference.
<sc-*>
elements with live examples, guidelines and APIs.