Overview
Pick a ViraUI category by the job on the screen, then open a part or brief your agent.
Components groups @viraui/react by what a piece does on the screen: commit work, collect a value, interrupt the flow, float beside a trigger, and similar jobs. Start here when you know the region of the UI but not which family owns it.
Name the job first, then open that category. Each part page explains when to reach for it, when to skip it, and how it sits next to siblings. Skills and package specs stay the live surface your agent reads while composing.
With your agent
Describe the screen by region and intent (footer actions, form fields, in-page tabs, a confirm dialog). Your agent maps those jobs to ViraUI parts; you use these docs to choose a family, settle a doubt between siblings, or review what came back. Paste a screen brief below when you want a scoped recommendation before compose starts.
Actions
Controls that commit work or flip a binary choice on the page.
Dialogs
Focused interruptions and short-lived feedback that claim attention without owning the route.
Effects
Decorative motion and atmosphere layered on real content, kept ornamental.
Inputs
Typed values and choices that share field chrome for labels and errors.
Layout
Structure, spacing, and surfaces so rhythm stays on the theme scale.
Loading
Hold space while data arrives so layout stays stable during fetch.
Navigation
Move through content in place without leaving the page.
Overlays
Contextual actions and hints that float beside a trigger.
Typography
Body, headings, and text treatments for readable hierarchy.
Widgets
Compact status at a glance that sits beside content without stealing focus.
Ask your agent
I'm building a settings screen with a sidebar tab list, form fields, and a footer action row.
Which ViraUI families fit each region — when should I use in-page tabs versus route navigation, text fields versus dropdowns, labeled buttons versus icon-only actions? Keep the answer scoped to this screen.Last updated on