Ravox Kit / Get started

Theme

No Kit component has a hard-coded color or size: they all read CSS variables. Changing the theme means changing those variables, and the components follow, in light and dark.

1Pick a theme22 ready themes, each made for a kind of business, plus the community ones.See the themes 2Tweak it in the editorColors, fonts, shadow and sizes, with a live preview on the components and contrast checks.Open the editor 3Paste the CSSTailwind 4 goes in globals.css. Without Tailwind, the plain CSS becomes your theme.css.See an example

Start with one of these

All themes

Ravox

Enviar

Ravox

Enviar

Ravox

Planilha

Enviar

Planilha

Enviar

Planilha

Padaria

Enviar

Padaria

Enviar

Padaria

Terminal

Enviar

Terminal

Enviar

Terminal

The default theme

Installing any component already brings the Ravox theme. To install only the theme (and swap it later):

npx @ravox-ui/cli init

The variables

The colors, with the Ravox theme values in light and dark. Names follow shadcn, so the Kit lives alongside its components.

Variable	What it paints	Light · Dark
--background	Page background
--foreground	Text and primary button
--card	Cards, menus, dialogs
--muted	Secondary backgrounds, hover
--muted-foreground	Muted text, hints, placeholder
--border	Borders, dividers, field outline
--ring	Keyboard focus ring
--marca	Your brand color
--vault-lima	Success
--vault-amarelo	Warning
--vault-rosa	Error and destructive action
--vault-azul	Info
--radius	Corners: rounded-sm to rounded-3xl come from it
--spacing	The spacing unit: heights, paddings and gaps (h-10 = 10 ×)
--text-*	The type scale, from text-xs to text-4xl
--font-sans / --font-heading	Body and heading fonts
--shadow-sm/md/lg	The shadows

Light and dark

Light lives in :root and dark in .dark. Switching mode means adding or removing the class on <html>; every theme in the gallery ships both, with the contrast of each pair checked.

document.documentElement.classList.toggle("dark");