State is depth. A tactile React component library where every interactive state maps to physical elevation: pressed things depress, active things rise, inputs are recessed wells, and overlays float with real penumbra. Every shadow derives from one movable light source — two CSS variables — so the entire interface re-lights in pure CSS.

35 components. Distributed as TypeScript source through a shadcn-compatible registry: one command and the code lands in your repo. No runtime package, no version to chase. MIT.

Requires React 19 and Tailwind CSS v4.

// components.json
{ "registries": { "@emboss": "https://embossui.vercel.app/r/{name}.json" } }

npx shadcn@latest add @emboss/button @emboss/knob

Or with zero configuration, directly by URL:

npx shadcn@latest add https://embossui.vercel.app/r/button.json

The design tokens merge into your stylesheet with the first component. Theme the whole system with five variables on :root — --light-x, --light-y, --depth, --accent-h, --radius-scale.

• Depth is the state machine — and never the only channel. Every state is mirrored by color, a glyph, or text, with contrast enforced by an automated WCAG matrix in both schemes.
• One light. Elevation recipes are calc() expressions of the light vector; nothing ships a hardcoded shadow.
• One physics. Five springs drive all motion; the CSS linear() easings are generated from the same constants as the JS springs.
• Crisp, not soft. Every recipe keeps a machined 1px edge; the radius scale is deliberately clamped.

pnpm install
pnpm dev            # site + docs at localhost:3000
pnpm check          # every gate: format, lint, types, tests, knip,
                    # token/easing sync, registry validation, build,
                    # consumer install smoke test, e2e

The registry is defined in registry.json and built to public/r/ by pnpm registry:build. scripts/validate-registry.ts proves every item installs into a clean consumer project and compiles under strict TypeScript.

MIT — see LICENSE.