Setup
Install ViraUI skills, reload the editor, then bootstrap the React app with an agent prompt.
ViraUI bootstrap wires a React app to the design system: packages and peers, a theme choice, global styles in a fixed order, and one root shell for overlays.
The agent does that work through viraui-setup. Install the skills pack and reload the editor before any bootstrap prompt. What each playbook covers lives on Skills.
Requirements
- A React app with React and React DOM as platform peers
- A Node-capable package manager
- A coding agent that can edit the repo and run installs
- Base UI (
@base-ui/react) as the only required peer beyond React / React DOM @viraui/foundationonly when you pick a built-in theme
Setup
Install skills
Skills are playbooks the agent loads from the project. Install the pack before any bootstrap prompt, then reload the editor (or restart the agent session) so viraui-setup registers.
npx skills add https://skills.sh/p/IQZPjm9biEMkAZOPBootstrap with your agent
Paste the Setup prompt after skills are loaded. You choose the brand look: a built-in preset or a custom theme. Font import follows that choice: fonts that ship with the built-in theme, or your own for a custom brand.
Use Verify when wiring finishes so the agent smoke-checks the same outcomes you would look for by hand.
Set up ViraUI in this project using viraui-setup skill. Ask which brand or theme look I want if I haven't said yet, then wire the app for that choice so fonts load for it, the UI looks themed, overlays (dialogs, tooltips, toasts) work, and a simple sample control shows the design system styling.Manual fallback
Only when you must wire by hand after skills are installed. Prefer the prompts above.
- Install
@viraui/react, React / React DOM, and@base-ui/react. - Choose the brand look: built-in or custom. Import the fonts that match: built-in theme fonts, or your custom fonts.
- Import theme CSS, then fonts, then
@viraui/react/preflight.css, in that order at the app root. - Mount the Dialog, Tooltip, and Toast root providers once in the app shell.
- Optional: add viewport helpers when markup must branch (Breakpoints), or RTL context (Direction).
Verify by hand: the app looks themed, light/dark resolves if wired, overlays open and dismiss, and a sample control picks up design-system styling.
Last updated on