byronwade/ui

byronwade/ui · app-only design system

Calm app UI, enforced by agents.

An app-only design system for building calm, dense, agent-native product interfaces — dashboards, admin panels, developer tools, AI workbenches, resource lists, and object-detail workflows. Token-driven, published as a namespaced shadcn registry, re-skinned from one CSS variable.

One command installs the entire catalog.

229
components
12
layout archetypes
1
brand variable

Application-first · one foundation

Built for the surfaces people work in every day.

Alternate skins

Preview Linear or Polaris without leaving the registry.

Use the header Skin toggle for an in-place restyle, or open the sibling demo apps for full product chrome.

Why it exists

Token-driven

Every primitive is built on one foundation of CSS variables. No hardcoded colors, ever.

Re-skin from one variable

Override --brand and rings, charts, active states, and status all follow in light and dark.

App shells, not landing pages

Ships dense, operational page scaffolds — dashboards, master-detail, command centers — built for daily product work.

One knob re-skins everything

Change --brand. Rings, charts, focus, and status all follow.

For your agent

Design rules for AI

A drop-in rule you install like any component. One command writes .cursor/rules/byronwade-ui.mdc (or paste it into Claude, Copilot, Codex, Windsurf…). After that your agent knows the system's laws on every edit, which components to reach for, which tokens to use, and how re-skinning works.

  • Use installed @byronwade/ui components, add missing ones with shadcn, don't rebuild from scratch.
  • Style with semantic tokens only (bg-brand, text-muted-foreground), never hardcode hex or Tailwind colors.
  • Re-skin through --brand only, rings, charts, and success states follow automatically.

229 components. One install.

Lead with application UI — shells, tables, resource lists, AI workbenches — then make it yours from a single variable.