Roadmap

ZynaUI is in active beta. Every milestone and deliverable on the path to v1.0.0 is tracked here.

Phase
02
of 10
Status Beta: Phase 2 Shipped
Next up v0.3.0: Chart Expansion
Target v1.0.0 Stable · Jan 1, 2027
v0.2.0-beta — CSS variable API is now locked. The 83 public tokens (--zyna, --z-*, --btn-*, --badge-*, --card-*, --alert-*) will not be renamed or removed without a major version bump. Component class names and internal tokens (--zp-*, --z-btn-*) remain subject to change until v1.0.0. See the CSS API reference.

v0.2.0-beta: What Shipped

v0.2.0 locks the public CSS variable API under a semver guarantee, ships 7 new genres (Corporate, Phosphor, Military, Blueprint, Washi, Laboratory, Atelier), adds automated visual regression testing via Playwright, and publishes full-text search and a versioned API reference in the docs.

4
ComponentsBtn · Badge · Card · Alert
5
ChartsWaffle · Timeline · Nightingale · Lollipop · Orbital
9
GenresOps · Cyberpunk · Corporate · Phosphor · Military · Blueprint · Washi · Laboratory · Atelier
60
Genre tokensin the Ops baseline
3
Token tiersPrimitive · Genre · Element
8
ARIA patternsFull APG audit passed

Milestones at a Glance

Detailed Roadmap

Phase 01 / 10
v0.1.0

Beta Foundation

Released · March 2026
Shipped
  • Button: 4 variants, 3 sizes, 4 shapes, icon mode
  • Badge: 7 variants, pulse, outline, 4 shapes
  • Card: 4 variants, 2 shapes, composable header/body/footer
  • Alert: 6 variants, 2 sizes, 2 shapes
  • Waffle, Timeline, Nightingale, Lollipop, Orbital charts
  • Ops + Cyberpunk genres
  • Genre Builder: interactive editor with live preview
  • 3-tier CSS variable token architecture
  • Full ARIA APG compliance audit: 8 patterns
  • TypeScript declarations (types/index.d.ts + types/charts.d.ts)
  • Vitest unit + snapshot test suite
  • Docs site: components, charts, genre builder
  • prefers-reduced-motion coverage across all animations
Phase 02 / 10
v0.2.0

API Hardening & Distribution

Released · Apr 2026
Shipped
  • Semver API stability contract: public CSS variable surface locked
  • npm sub-path exports (zynaui/charts, zynaui/genres, zynaui/plugin)
  • CDN bundle via jsDelivr / unpkg
  • Genre: Corporate: clean, minimal, professional palette
  • Genre: Terminal: retro phosphor-green monochrome
  • Genre: Military: tactical olive / earth tone palette
  • Automated visual regression suite (Playwright)
  • Docs: full-text search
  • Docs: changelog page + versioned API reference
  • Genre Builder: export genre as JSON + CSS snippet
  • Genre: Blueprint "SCHEMATIC": technical drafting, prussian blue on blueprint white
  • Genre: Washi "BRUSHWORK": Japanese washi paper, warm cream and cinnabar red
  • Genre: Laboratory "LABBOOK": lab notebooks and instruments, clinical white and cobalt
  • Genre: Atelier "MAISON": luxury editorial, warm ecru and 22K gold
  • Hive: network nodes classified onto 2–6 radial linear axes; edges arc between axes encoding connections; deterministic layout, no force simulation
  • Tension: two ranked columns connected by curved lines angled and colored by rank-change direction and magnitude; built for before/after ordered-list comparison
  • Rupture: area chart that fractures visually when a threshold is crossed; fill character, color, and glow shift at the breach point
  • Pulse Sequence: stacked horizontal ECG-style tracks, one per entity, each with its own zero baseline; reads like a seismograph score of simultaneous signals
  • Resonance. Radial deviation diagram: spokes radiate from a mean center, length encodes distance from mean, fill encodes direction above/below; encodes deviation as a first-class visual, not absolute values
  • Cascade. Hierarchical split waterfall: a total breaks through successive levels, each level showing proportional splits as stacked layers connected by fill paths
  • Stratum: entity rows where internal segment heights encode time-period values in a geological core sample format; cross-entity patterns emerge from the stacked strata profile across the grid
  • Delta Ring. Paired concentric arcs per category: outer arc = current value, inner arc = baseline; the annular gap is colored by gain or loss
  • Flow Density: each time period rendered as a vertical density curve; curves flow left-to-right revealing how the full distribution shape shifts over time
  • Needs Gap: paired arc chart showing humanitarian need vs response per category; the gap is colored by coverage ratio
Phase 04 / 10
v0.4.0

Form Foundation

Target · Jul 2026
Planned
  • Input: text, number, search, password with show/hide toggle
  • Textarea: auto-resize variant, character count
  • Select: native styled with custom arrow
  • Checkbox: custom styled, indeterminate state
  • Radio Group: styled, roving tabindex keyboard nav
  • Toggle / Switch: animated, role="switch"
  • Slider: styled range input with live value readout
  • Form layout: label, helper text, error state, validation patterns
  • All form components: full ARIA APG + genre CSS variable API
Phase 05 / 10
v0.5.0

Overlays & Feedback

Target · Aug 2026
Planned
  • Modal / Dialog: focus trap, aria-modal, Escape close
  • Drawer: slide-in side panel, animated open/close
  • Dropdown Menu: keyboard navigation, aria-expanded
  • Tooltip: hover + focus trigger, non-interactive
  • Popover: interactive, position-aware
  • Toast / Notification: stacked, auto-dismiss, live region
  • Progress Bar: determinate + indeterminate states
  • Skeleton Loader: animated shimmer placeholder
  • Spinner / Loading indicator
Phase 06 / 10
v0.6.0

Navigation & Data Display

Target · Sep 2026
Planned
  • Tabs: ARIA tablist, keyboard nav, animated indicator
  • Accordion: custom, keyboard accessible, animated
  • Table: sortable columns, fixed header, row selection
  • Pagination
  • Breadcrumb: standalone reusable component
  • Stat / Metric card: number, trend delta, label
  • Empty state component
  • Separator / Divider
  • List / Menu list
Phase 07 / 10
v0.7.0

BI Platform Adapters

Target · Oct–Nov 2026
Planned
  • Shared ChartRenderContext API: decouple all chart render functions from Web Components
  • Looker adapter: all charts as custom visualization JS files
  • Tableau Viz Extension adapter: all charts with .trex manifests
  • Power BI Custom Visual adapter: all charts as TypeScript visuals
  • Light / dark theming support on all three platforms
Phase 08 / 10
v0.8.0

DX & Tooling

Target · Nov 2026
Planned
  • VS Code extension: CSS variable autocomplete, snippets, hover docs
  • Figma community file: all components + genre swatches
  • Interactive playground in docs: live CSS var editor per component
  • CLI: npx zynaui add <component>
  • Tailwind v4 native support
  • Per-component tree-shaking verified + bundle sizes published
Phase 09 / 10
v0.9.0

Performance & Production QA

Target · Dec 2026
Planned
  • WCAG 2.1 AA full audit with published screen reader test results
  • Performance benchmarks: bundle size per component, paint metrics
  • Cross-browser matrix: Chrome, Firefox, Safari, Edge (last 2 major)
  • LCP / CLS / INP targets met and validated for all docs pages
  • Complete migration guide: beta to v1
  • Changelog automation and release workflow
  • Full documentation: every token, every variant, every modifier
Phase 10 / 10
v1.0.0

Production Release

Target · Jan 1, 2027
Goal

v1.0.0 is the stable release. Once it ships, the public CSS variable API is locked under a semver guarantee: no breaking changes without a new major version bump. LTS support begins here.

  • 20+ components
  • 15+ charts
  • 9+ genres
  • React, Vue, and Svelte adapters
  • TypeScript-first
  • Full WCAG 2.1 AA documentation with screen reader testing notes
  • Stable API guarantee: semver contract enforced
  • LTS support commitment: 2 years minimum