The Yuno Dashboard component library
Same components used by the real Dashboard, agentic from day one. Describe what you want in Claude Code and the kit's atoms, patterns, organisms and templates build it for you.
Prototypes are not built from this site anymore: Prototype Garden hosts every Dashboard prototype, branches them from a shared baseline and hands Claude Code the prompt. This site documents the components.
Templates
Full page starters. Fastest way to arrive at a working prototype.
Sidebar + top bar + empty content. The starting shell for any Dashboard page.
KPI cells, chart cards and tables. For data dashboards.
Card grid of provider connections with add / detail flows.
Rule list, condition editor and provider ordering.
Reconciliation rate cards, filters and drill-down.
Checkout method picker with drag-to-reorder and preview.
Organisms
Whole screen sections: sidebar, top bar, page header, filter bar.
Left navigation with grouped items and collapsed states.
Global top bar with search, account chip and environment switcher.
Eyebrow + title + description + actions row that opens most pages.
Filter row with chips, date range and clear-all.
Sticky save / publish bar for edit flows.
Account dropdown with profile, settings and sign out.
Patterns
Small groups of atoms that solve one job: KPI card, empty state, chart card.
Big number with delta and optional sparkline.
Chart wrapped in a card with title, legend and actions.
Icon + title + description + optional CTA for zero-data screens.
Tile with icon, title and description that links to a longer flow.
Compact tile for a quick action on a home or launcher page.
Section title row with the mt-8 / mb-6 rhythm baked in.
Components
The atoms. shadcn base with Yuno tokens on top.
Foundations
Design tokens and systemic decisions the whole kit consumes.
Primary, semantics, surfaces, tokens.
Type scale, weights, line-height.
Phosphor Icons weights and sizing.
4-based scale used across layouts.
sm / md / lg / xl per surface.
xs, sm, lg. Restrained on purpose.
Animation tokens, transitions, staggers, reduced motion.