Schatten

A two-layer design system: framework-agnostic CSS + optional React components.

Schatten is designed to work without React. Use it as plain CSS classes (<button class="st-btn st-btn--primary">) in vanilla HTML, Astro, Vue, or Svelte — and optionally lean on the React component layer (<Button variant="primary">) for richer composition.

Inspired by shadcn/ui, customized for the Schatten brand. Where shadcn distributes copy-pasteable React source, Schatten ships a single installable package whose CSS class API is intended to outlive any one framework choice.

The React layer is built on Radix UI primitives and authored with class-variance-authority (CVA); styling ships as a raw-CSS .st-* class API. Tailwind CSS v4 is a dev-only dependency for the Storybook workbench — since the published dist/schatten.css is compiled Tailwind-free, consumers never need it.

Quick start

Vanilla HTML

The CSS bundle ships design tokens, the base reset, animation keyframes, and the full set of .st-* component classes for every lv1 component (see css-api.md). One <link> to schatten.css is enough — no Tailwind setup, no JavaScript runtime, no build step required.

<link
  href="https://cdn.jsdelivr.net/npm/@yasmro/schatten/dist/schatten.css"
  rel="stylesheet"
/>

<button class="st-btn st-btn--primary st-btn--md">Click me</button>

The size modifier is part of the minimum chain: sizing (height / padding / font-size) lives only on .st-btn--{sm,md,lg} — there is no default size on the bare .st-btn. Always write block + variant + size, exactly the chain the React layer emits.

Scope note: the stylesheet ships every lv1 component's visual classes, but it cannot ship behavior. In the matrix below, ✅ means the component works with CSS alone (static rendering, or the browser handles its state natively); ⚠️ means only the visual classes ship — the interactive behavior (opening, closing, positioning, selection; Avatar's image→fallback swap) requires the React layer or your own JavaScript.

Component	React	HTML + CSS only
Avatar	✅	⚠️
Badge	✅	✅
Button	✅	✅
Callout	✅	✅
Card	✅	✅
Checkbox	✅	✅
DateCalendar	✅	⚠️
Dialog	✅	⚠️
DropdownMenu	✅	⚠️
Field	✅	✅
FieldSet	✅	✅
Icon	✅	✅
Input	✅	✅
Popover	✅	⚠️
Radio	✅	✅
Select	✅	⚠️
Separator	✅	✅
Skeleton	✅	✅
Spinner	✅	✅
Switch	✅	✅

Composite (lv2) components are React-only — their .st-* classes ship for overriding, but rendering one without React is outside the contract; compose the lv1 classes instead.

Component (lv2)	React	HTML + CSS only
DatePicker	✅	❌
EmptyState	✅	❌

React

pnpm add @yasmro/schatten

import '@yasmro/schatten/schatten.css'
import { Button } from '@yasmro/schatten'

export function App() {
  return <Button variant="primary">Click me</Button>
}

Astro / Vue / Svelte

Import the CSS bundle once at your app entry, then write .st-* class chains directly on any element. No JavaScript import needed.

---
// src/pages/index.astro
import '@yasmro/schatten/schatten.css'
---

<button class="st-btn st-btn--primary st-btn--md">Click me</button>
<a href="/docs" class="st-btn st-btn--secondary st-btn--md">Docs</a>

<!-- Vue -->
<template>
  <button class="st-btn st-btn--primary st-btn--md">Click me</button>
</template>

<!-- Svelte -->
<button class="st-btn st-btn--primary st-btn--md">Click me</button>

The exported CVA variant functions (buttonVariants, badgeVariants, …) are still available from @yasmro/schatten/variants for cases where you want the class string computed programmatically — but for static markup the .st-* chain is the simpler path.

Two-layer architecture

Schatten ships two consumer-facing surfaces. Both reference the same underlying design tokens, so a project can mix layers freely or commit to one.

Layer A — Framework-agnostic CSS

The CSS bundle (@yasmro/schatten/schatten.css) ships design tokens (primitive → semantic) and, going forward, component classes following BEM (see css-api.md: prefix st-, modifiers as --variant, sub-elements as __name, e.g. <button class="st-btn st-btn--primary">). State is conveyed via HTML / ARIA attributes ([aria-invalid], [aria-busy], [data-state]), not modifier classes. No JavaScript runtime is required.

• Tokens: primitive scales, semantic tokens, base reset, animation keyframes
• Component classes (css-api.md — #58 Phase 2): every lv1 component is reachable via .st-* since v0.9.0
• Build: dist/schatten.css is compiled Tailwind-free by lightningcss (since #317) from plain-CSS sources — raw tokens, the hand-written @layer theme registrar, a vendored preflight, and the .st-* component rules. Tailwind v4 remains a dev-only dependency for the Storybook path and never ships. Consumers do not need to install Tailwind.

This is the beginning of the README. Read the rest at the original. Read the full README ↗