Vibra theme

The white page and its neutral greys: three planes, two ink tiers, one accent in six roles, status and chart tokens.

The install adds exactly what Vibra adds on top of the shadcn token set, light and dark: --surface, --faint-foreground (the second text tier, for eyebrows and meta), --brand with its -foreground and -muted, --rule and --chart-grid (the two line weights below a border), --overlay, --shadow-sheet/-float/-modal, --success/--warning/--danger/--info (each with -foreground and -muted), --chart-1..8 and the --chart-positive/-negative/-neutral/-axis aliases. It never writes --background, --foreground, --primary, --card, --popover, --border, --input, --ring, --radius or --sidebar-* in cssVars, so on screen your own palette survives; --chart-1 and the tone aliases point at tokens the item does ship. It also brings a css block — tabular figures on cells, keycaps and value slots, --font-display resolved to the sans (load a face of your own under that name and every title follows), the motion tokens every transition is timed on (--duration-fast/-base/-slow and --ease-standard/-emphasized/-exit, the durations zeroed under prefers-reduced-motion and under [data-motion="reduced"]), and the panel/frame/elev-1/elev-2 and focus-ring/focus-ring-inset/focus-outline/focus-outline-inset and type-eyebrow/label/numeral/display utilities — plus the type scale and tracking as theme variables, so a page you build reads the way the docs site does. The one place that block does reach the base tokens is @media print: under .dark it forces the light paper ladder, --background, --primary, --border and --sidebar-* included, so a page printed from dark mode comes out on white rather than as a sheet of ink. Arriving as another item's dependency it only fills in variables you do not have; installing it by name sets all of them. The full Vibra palette, base neutrals included, is on the Theming page to paste.

Install

npx shadcn@latest add @vibra/theme-vibra

Needs the @vibra registry in your components.json — set it up once.

Examples

Chart

chart-1

chart-2

chart-3

chart-4

chart-5

chart-6

chart-7

chart-8

Status

success

success-muted

warning

warning-muted

danger

danger-muted

info

info-muted

Surface

surface

muted

import { cn } from "@/lib/utils"

type Swatch = { label: string; className: string }

// Literal class names only (never `bg-${x}` template strings) — Tailwind's
// scanner reads this file's source text directly and needs each utility to
// appear verbatim somewhere in it.
const CHART_SWATCHES: Swatch[] = [
  { label: "chart-1", className: "bg-chart-1" },
  { label: "chart-2", className: "bg-chart-2" },
  { label: "chart-3", className: "bg-chart-3" },
  { label: "chart-4", className: "bg-chart-4" },
  { label: "chart-5", className: "bg-chart-5" },
  { label: "chart-6", className: "bg-chart-6" },
  { label: "chart-7", className: "bg-chart-7" },
  { label: "chart-8", className: "bg-chart-8" },
]

const STATUS_SWATCHES: Swatch[] = [
  { label: "success", className: "bg-success" },
  { label: "success-muted", className: "bg-success-muted" },
  { label: "warning", className: "bg-warning" },
  { label: "warning-muted", className: "bg-warning-muted" },
  { label: "danger", className: "bg-danger" },
  { label: "danger-muted", className: "bg-danger-muted" },
  { label: "info", className: "bg-info" },
  { label: "info-muted", className: "bg-info-muted" },
]

const SURFACE_SWATCHES: Swatch[] = [
  { label: "surface", className: "bg-surface" },
  { label: "muted", className: "bg-muted" },
]

function SwatchGroup({ title, swatches }: { title: string; swatches: Swatch[] }) {
  return (
    <div className="flex flex-col gap-2">
      <h3 className="text-xs font-medium text-foreground">{title}</h3>
      <div className="grid grid-cols-4 gap-2">
        {swatches.map((swatch) => (
          <div key={swatch.label} className="flex flex-col gap-1.5">
            <div className={cn("h-10 rounded-md border", swatch.className)} />
            <span className="text-xs text-muted-foreground font-mono">{swatch.label}</span>
          </div>
        ))}
      </div>
    </div>
  )
}

export default function ThemeVibraDemo() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-5 panel p-4">
      <SwatchGroup title="Chart" swatches={CHART_SWATCHES} />
      <SwatchGroup title="Status" swatches={STATUS_SWATCHES} />
      <SwatchGroup title="Surface" swatches={SURFACE_SWATCHES} />
    </div>
  )
}