What's planned

Roadmap

Cedar v1 and v2 are both shipped — 21 components documented with live React demos. v2c features and Data Grid are the remaining scope.

v1 — Shipped

Current
Token pages: Color, Spacing (+ Grid/Layout responsive collection), Radius, Typography, Border
Color palette synced to Foundations: primary→teal, secondary (was amber)→blue, accent (was sienna)→green, success→muted green
WCAG AA contrast fix — status/success now uses success/700 on success/100 bg (5.66:1)
Component pages: Button, Input, Checkbox, Badge, Card, Alert, Status (Spinner + Progress Bar), Tabs
Live React demos for all v1 components with full keyboard accessibility
Built with Cedar — DayLog real-world usage
Roadmap page (this page)
Deployed to Vercel

v2a — Components

Shipped

Six components with no prior doc page, prioritised by Cedar Ops coverage gaps.

Modal — portal dialog with focus trap, Escape, and backdrop close
Toast — context-based notification stack with 5 variants and auto-dismiss
Tooltip — positioned overlay with getBoundingClientRect placement
Breadcrumb — nav landmark with aria-current="page" on active item
Pagination — ellipsis compression, keyboard nav, prev/next controls
Menu — dropdown with keyboard navigation, dividers, labels, destructive items

v2b — Components

Shipped

Six components following patterns already established in v1 — lower urgency, same quality bar.

Select — full combobox ARIA pattern with aria-activedescendant and SelectField wrapper
Toggle — role="switch" binary control in sm/md with animated thumb
Radio — native input pattern mirroring Checkbox; RadioGroup with fieldset+legend
Icon Button — square button sharing Button's variant × color system; aria-label required
Avatar — initials with deterministic color palette, status dot, AvatarGroup stacking
Divider — horizontal/vertical, 3 variants, optional centered label

v3 — Components

Future

Architecturally distinct from a standard component page — Data Grid is a product feature with two Figma architectures (row-oriented and column-oriented), instance-swap cell content, toolbar, footer, and pagination integration. Scoped separately to reflect the build investment.

Data Grid

v2c — Features

Up next

Dark mode

Figma semantic layer already has one mode — adding a second is the design work. CSS variables make the implementation straightforward.

Interactive prop editor

Live knobs panel on component pages — change size, color, state without editing code.

Typography specimen page

Full typeface showcase with Inter weight samples and Fira Code ligature examples.

Token export (CSS, JSON)

Download Cedar tokens as CSS custom properties or W3C design token JSON.

Search

Full-text search across token names, component names, and descriptions.

Figma embed

Live Figma frame embeds on component pages for design—dev comparison.

Storybook integration

Auto-generated stories from Cedar component props. Best added once all v2 React components exist.