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 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/foundation only when you pick a built-in theme

Setup

Install skills

Skills are playbooks the agent loads from the project. Install them before any bootstrap prompt, then reload the editor (or restart the agent session) so viraui-setup registers.

Install ViraUI skills
npx skills add vira-soft/viraui-skills

Bootstrap 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.

  1. Install @viraui/react, React / React DOM, and @base-ui/react.
  2. Choose the brand look: built-in or custom. Import the fonts that match: built-in theme fonts, or your custom fonts.
  3. Import theme CSS, then fonts, then @viraui/react/preflight.css, in that order at the app root.
  4. Mount the Dialog, Tooltip, and Toast root providers once in the app shell.
  5. 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

Layers

How ViraUI's four Core layers stack into one coherent system.

What is a theme

How ViraUI theme CSS, tokens, and data-mode turn one stylesheet into your app’s look.

On this page

RequirementsSetupInstall skillsBootstrap with your agentManual fallback