Built-in themes

@viraui/foundation ships ready-made brand presets as one CSS entry per brand, plus JSON and TypeScript surfaces for tooling. It does not ship font files — each preset only names families in --font-family-*; you install and import the matching Fontsource packages yourself. @viraui/react does not pull foundation or fonts in for you. Add foundation when you want a built-in brand; skip it when you ship your own theme CSS — Studio export, agent-built sheet, or hand-authored. Components only need a compatible theme stylesheet, not this package. See Custom themes.

How a preset wires in

Each preset is a single theme CSS file. Load one at the app root — switching brands means changing that import and the Fontsource packages that match, not stacking several theme sheets. Import order is fixed: theme CSS → fonts → @viraui/react/preflight.css. Light and dark live inside each sheet via light-dark(); you do not load a second dark file. See What is a theme for how data-mode resolves those pairs.

During Setup, viraui-setup stops at the theme gate and asks which preset you want before it installs foundation or fonts. You can paste the prompt below anytime you need to wire or switch a built-in brand.

Wire a built-in ViraUI theme in this project. Ask which preset I want if not stated: vira, vira-condensed, sunburst, or cinder. Install @viraui/foundation and the matching @fontsource-variable/* packages for that preset. Add JS side-effect imports at the app root in order: @viraui/foundation/<preset>.css → Fontsource wght.css for each family the theme names → @viraui/react/preflight.css. Do not @import preflight from a stylesheet. Do not load more than one theme CSS. Do not install @viraui/foundation when the project uses a custom theme sheet. Report packages added and import paths.

Presets

Each built-in brand pairs one foundation stylesheet with specific Fontsource packages — install those families and import their wght.css files after the theme CSS and before preflight. The tabs below show the exact packages and import paths per preset.

pnpm add @viraui/foundation

Fonts for the preset you pick:

pnpm add @fontsource-variable/geist @fontsource-variable/geist-mono

CSS imports at the app root (theme → fonts → preflight):

import '@viraui/foundation/vira.css';
import '@fontsource-variable/geist/wght.css';
import '@fontsource-variable/geist-mono/wght.css';
import '@viraui/react/preflight.css';

For a brand you own instead of these presets, see Custom themes.