Two packages, two apps, one cascade. Tokens flow into UI, UI flows into Storybook and the public showcase — all wired at install time, no copy-paste between repos.
apps/storybook
component docs
apps/showcase
this site
packages/ui
42 React components on Radix
packages/tokens
1184 OKLCH design tokens
Figma plugin
Token Bridge
Each workspace has one job. Tokens publish raw values; UI publishes typed components; Storybook documents them; Showcase puts them in front of the world. No package reaches across — all dependencies flow upward through @wyliedog/*.
@wyliedog/tokens
The single source of truth. Source JSON files plus a Style Dictionary config that emits tokens.css with primitive, semantic, and component tiers as CSS custom properties.
@wyliedog/ui
42 typed React components, each a forwardRef wrapper around a Radix primitive with CVA variants. Imports tokens.css and re-exports it as @wyliedog/ui/styles.
@wyliedog/storybook
Component documentation and the pattern playground. Every export from @wyliedog/ui has a story; every story is its own a11y harness, prop matrix, and visual diff target.
@wyliedog/showcase
The page you're reading. A Next.js 16 App Router site that consumes @wyliedog/ui as its only component dependency — the marketing site eats its own design system.
Source files describe the design intent in human terms. Style Dictionary expands them into raw values, role aliases, and component-specific surfaces — all emitted as a single tokens.css that Tailwind 4 reads at build time.
render
Tier 1 · primitive
Raw OKLCH ramps. --color-violet-500 doesn't know what it'll be used for — it just is.
Tier 2 · semantic
Role aliases. --color-interactive-primary maps to violet-500 in light, violet-400 in dark, and re-resolves under any future theme.
Tier 3 · component
Surface-specific. --color-button-primary-bg points at the semantic role — never at the primitive directly.
Turbo orchestrates the graph. Tokens build first, UI rebuilds against the new CSS, and Storybook + Showcase pick up the changes through their workspace symlinks. No package republishes — everything resolves through pnpm.
Build dependency graph
Reads JSON source files, resolves aliases, emits tokens.css with all 1184 custom properties plus JS and TypeScript types.
Picks up the fresh tokens.css via workspace symlink. Vite bundles all 42 components into a tree-shakeable ESM output.
Turborepo cache hit — no input files changed, no rebuild needed. Stories stay live against the new token values.
Next.js build also cached. The public site reflects the new token values without a full rebuild.
No bespoke component shapes. Every export from @wyliedog/ui is a forwardRef wrapper around a Radix primitive, with CVA drives variants, Tailwind drives the prose, and an asChild escape hatch through Slot.
forwardRef-first wrapper types
Every component accepts a ref, enabling integration with form libraries and animation tools without wrapper divs.
CVA variants, compact type strings
Class variance authority keeps variant logic co-located with the component, generating precise TypeScript types automatically.
className merges, static class strings
cn() merges caller className last so any consumer can override without !important or specificity battles.
Base classes: component + token
Base styles use semantic token variables — bg-(--color-interactive-primary) — so every component automatically respects the active theme.
asChild via @radix-ui/react-slot
Pass asChild to render any element or component as the root, preserving all Radix accessibility behavior without an extra DOM node.