Web-native components
Custom elements that work across React, Vue, Svelte, Astro, or plain HTML — no framework lock-in.
v2.0 — Now stable
· What's new → Get started Browse components
A design system for serious product teams.
Nana UI ships accessible Web Components, a token-first design language, and framework-friendly delivery.
Trusted by product teams at Nana-Tec and growing.
- Components
- 12
- Tokens
- 137
- Frameworks
- Any
- Status
- Stable
Live preview
Everything you need, nothing you don't.
Every component shares the same token foundation. Swap a token, update the whole system.
Workspace
Design system health
Components 12
Tokens 137
Mode Light
Why Nana UI
Built the way professionals expect.
Token-led design
Color, spacing, radius, shadow and typography flow from one source of truth.
Accessible by default
Every component ships with ARIA roles, keyboard navigation, and focus management baked in.
Comprehensive docs
Attribute references, event tables, slot specs, and interactive examples for every component.
ESM & CDN delivery
Import from npm or drop a script tag — whatever fits your build pipeline.
Semantic versioning
Strict semver and a maintained changelog — no surprises, no breaking changes without warning.
Ready to build with Nana UI?
Install the package, wire your tokens, and ship your first component in under five minutes.