Introduction
ViraUI is a complete AI-centric design system — not another UI kit.
ViraUI is not another React UI toolkit, and it is not a shelf of fancy components that look sharp in a demo and drift in production. It is a complete, AI-centric design system — an all-inclusive design framework for teams ready to leave the old assemble-your-own workflow behind.
Tokens, @viraui/react components, and consumer skills share one contract. Your agent composes against that contract; you review the result against these docs. Skills and published package specs carry the live API agents should read, so the running interface stays the product instead of a parallel mock. Customization has deliberate limits; that is the compromise — ease, speed, stability, and predictable AI composition over infinite knobs.
ViraUI Core
ViraUI Core ships as npm packages arranged in four layers that lock together. Foundation compiles brand into CSS custom properties; components implement those names instead of inventing local styles; motion keeps timing consistent; skills teach agents to ship real ViraUI rather than generic markup dressed up as a design system.
Foundation
Design tokens compiled from source — change the substrate to shape a brand without rewriting components.
React components
Typed @viraui/react building blocks on Base UI, modern CSS, and production interaction patterns.
Motion
Shared duration, easing, and reduced-motion rules so feedback and transitions feel like one system.
AI-native
Consumer skills and package specs steer agents toward real composition — not improvised HTML.
How those layers stack and what breaks when one is missing lives in Layers & composition.
ViraUI Pro
Coming later this year
ViraUI Pro sits on top of Core. Waitlist to get a special price at launch on viraui.dev.
App Studio
Create, preview, share, and export themes and brands on a live component canvas.
Prompts
Directory of LLM-oriented interface prompts that land on ViraUI patterns.
Last updated on
