Themes
22 named palettes beside the one Vibra ships with. Each is a complete theme — every token, both modes, the same contrast floors — scoped to data-preset, so it repaints a page from <html> or from any wrapper. Apply one here and the whole site wears it; the choice is remembered.
- Light & dark mode
- 22 palettes
- One data-preset attribute
- Two densities
- CSS variables only
- Export to your codebase
One palette, every block
The same revenue dashboard, repainted. Pick a palette; nothing else on the page changes.
Every palette
Each card is drawn in its own palette. Open one for the frame, the install command and the whole stylesheet.
Folio
A warm linen ground with ink text and one iris accent — the paper look, for a dashboard that should read like a well-set report.
Graphite
Cool graphite greys with a low-chroma blue. Built for the dark mode, with a slate light mode beside it.
Paper
Warm off-white, ink text and an ochre accent. Built for the light mode; after dark the neutrals stay warm charcoal.
Mono
The paper ground with no accent at all: the brand is the ink, and colour is left to data and status.
Phosphor
Near-black with a phosphor-green accent, an amber warning and hairlines drawn in the accent instead of white.
shadcn
The shadcn/ui default: a neutral zinc ladder with the ink as its accent — the palette everyone starts from, on every Vibra token.
Noir
Pure black on white and white on black, no middle ground: developer-first chrome, an amber first series, a blue second.
Emerald
An emerald green on near-white, deepened to the shade that reads as a word, with a warm grey ladder behind it.
Indigo
Cool violet-grey chrome: quiet planes, an indigo accent in the light mode and near-white after dark.
Terracotta
Terracotta on parchment: a warm cream ground, a clay accent, and charts in clay and violet.
Claymorphism
Soft clay: a grey ground with lifted white cards, generous radii, and an indigo accent that runs the whole chart palette.
Amber
One warm amber accent over a strictly neutral ladder, deepened so it carries text; the chart palette walks from amber to umber.
Cleanslate
A cool blue-white slate with an indigo accent — the plainest of the lot, and the easiest to build on.
Citrus
Lime and teal on a bright neutral ground: the lime deepened until it reads, the teal kept as the second series.
Falcon
Slate blues throughout — an indigo-grey accent in the light mode, a sage-teal one after dark, and a cool grey ladder.
Modern
A single vivid blue on white and nothing else that isn't grey; the chart palette is the blue at five depths.
Alpine
A night ski lodge: alpine-night ink, a cobalt accent with a coral companion in the charts, and a faint blush canvas.
Violet
Fintech-editorial: a white canvas, navy ink, one violet-blue action colour, and neutrals tinted cool blue, never warm.
Ocean
Deep teal-blue water: a cool ground, a sea accent, and charts that read like a tide chart.
Ruby
A crimson accent on a neutral ground — warm-blooded, for a product that wants its one colour to be red.
Sand
Desert light: a warm sand ground, a terracotta accent, and ink with a little sun in it.
Arctic
A polar night: slate-blue ground and a frost accent, built for the dark mode with a cool light mode beside it.
Start with a page
One command, and the page — its parts, its sample data, its server actions — is source in your repository. No account, no license key, nothing to keep in step with a release.
npx shadcn@latest add @vibra/theme-vibra