Layers
How ViraUI's four Core layers stack into one coherent system.
Principles establish why ViraUI resists drift across tools. Composition is how four Core layers stack on that idea.
Each layer does a distinct job, and the stack only holds when every piece is present. Miss one and the others start to invent local rules: improvised tokens, generic markup, or timing that no longer feels like the same product. Your agent composes through this stack; you review whether every layer still holds.
AI-native by design
Skills, guides, and consumption metadata teach agents to ship real ViraUI — not generic markup dressed up as a design system.
Without this layer, agents improvise foundations and invent components that do not exist. Skills carries the playbooks.
Strong foundation
Design tokens and brandable foundations compile from source into the CSS custom properties components read. Change the substrate to shape a brand; keep the same @viraui/react building blocks.
Without it, every screen invents its own spacing, type, and color story. Start in Foundation.
UI components
Production building blocks with accessible patterns and documented props — they implement the foundation instead of fighting it.
Without them, each screen becomes a custom island and agents fill gaps with generic HTML.
Motion guidelines
Shared duration, easing, and reduced-motion rules keep feedback and transitions coherent. Functional first — orientation, continuity, press and hover feedback — evocative only when the moment earns it.
Without them, timing becomes local taste and the product stops feeling like one system. See Motion.
Last updated on