Command Palette

Search for a command to run...

[Explore]
[Search]
[Handbook]
[Saved]

Terms of Service Privacy Policy

Badge – shadcn/ui Component by vernostudio | shadcnregistry

Registries
vernostudio
Badge

Badge

ui

A label for the metadata a reader scans rather than reads. Eight hues with a low-contrast pair each, plus inverted and the house gradient, in three sizes with room for an icon.

Provided by vernostudio

Open in https://v0.dev/Open in

class-variance-authority

Installation

Install directly from the provider.

pnpm dlx shadcn@latest add "https://verno-studio.vercel.app/r/badge.json"

Files

Styles

Light Mode

--badge-amber:

oklch(81.87% 0.1969 76.46)

--badge-amber-subtle:

oklch(96.81% 0.0495 90.24)

--badge-amber-subtle-foreground:

oklch(52.79% 0.1496 54.65)

--badge-blue:

oklch(57.61% 0.2508 258.23)

--badge-blue-subtle:

oklch(96.29% 0.0195 250.59)

--badge-blue-subtle-foreground:

oklch(53.18% 0.2399 256.99)

--badge-gray:

oklch(0.562 0 0)

--badge-gray-subtle:

oklch(0.94 0 0)

--badge-gray-subtle-foreground:

oklch(0.205 0 0)

--badge-green:

oklch(54.59% 0.1616 147.27)

--badge-green-subtle:

oklch(96.92% 0.037 147.15)

--badge-green-subtle-foreground:

oklch(51.75% 0.1453 147.65)

--badge-pink:

oklch(59.41% 0.238 1.01)

--badge-pink-subtle:

oklch(95.71% 0.0321 353.14)

--badge-pink-subtle-foreground:

oklch(53.5% 0.2058 2.84)

--badge-purple:

oklch(55.5% 0.3008 306.12)

--badge-purple-subtle:

oklch(96.73% 0.0228 309.8)

--badge-purple-subtle-foreground:

oklch(47.18% 0.2579 304)

--badge-red:

oklch(59.23% 0.2394 23.03)

--badge-red-subtle:

oklch(95.41% 0.0299 14.25)

--badge-red-subtle-foreground:

oklch(54.99% 0.232 25.29)

--badge-teal:

oklch(55.05% 0.0982 181.95)

--badge-teal-subtle:

oklch(97.06% 0.0347 180.66)

--badge-teal-subtle-foreground:

oklch(52.08% 0.1251 182.93)

Dark Mode

--badge-amber:

oklch(81.87% 0.1969 76.46)

--badge-amber-subtle:

oklch(24.95% 0.0642 64.78)

--badge-amber-subtle-foreground:

oklch(77.21% 0.1991 64.28)

--badge-blue:

oklch(57.05% 0.2141 258.23)

--badge-blue-subtle:

oklch(25.45% 0.0811 255.8)

--badge-blue-subtle-foreground:

oklch(71.7% 0.1648 250.79)

--badge-gray:

oklch(0.562 0 0)

--badge-gray-subtle:

oklch(0.239 0 0)

--badge-gray-subtle-foreground:

oklch(0.946 0 0)

--badge-green:

oklch(54.61% 0.161 147.27)

--badge-green-subtle:

oklch(27.12% 0.0895 150.09)

--badge-green-subtle-foreground:

oklch(73.1% 0.2158 148.29)

--badge-pink:

oklch(59.37% 0.2346 1.01)

--badge-pink-subtle:

oklch(26.2% 0.0859 356.68)

--badge-pink-subtle-foreground:

oklch(69.36% 0.2223 3.91)

--badge-purple:

oklch(55.5% 0.2186 306.12)

--badge-purple-subtle:

oklch(25.91% 0.0921 314.41)

--badge-purple-subtle-foreground:

oklch(69.87% 0.2037 309.51)

--badge-red:

oklch(59.03% 0.2234 23.03)

--badge-red-subtle:

oklch(25.93% 0.0834 19.02)

--badge-red-subtle-foreground:

oklch(69.96% 0.2136 22.03)

--badge-teal:

oklch(55.05% 0.0983 181.95)

--badge-teal-subtle:

oklch(25.06% 0.062 178.76)

--badge-teal-subtle-foreground:

oklch(74.56% 0.1765 182.8)

Theme

--color-badge-amber:

var(--badge-amber)

--color-badge-amber-subtle:

var(--badge-amber-subtle)

--color-badge-amber-subtle-foreground:

var(--badge-amber-subtle-foreground)

--color-badge-blue:

var(--badge-blue)

--color-badge-blue-subtle:

var(--badge-blue-subtle)

--color-badge-blue-subtle-foreground:

var(--badge-blue-subtle-foreground)

--color-badge-gray:

var(--badge-gray)

--color-badge-gray-subtle:

var(--badge-gray-subtle)

--color-badge-gray-subtle-foreground:

var(--badge-gray-subtle-foreground)

--color-badge-green:

var(--badge-green)

--color-badge-green-subtle:

var(--badge-green-subtle)

--color-badge-green-subtle-foreground:

var(--badge-green-subtle-foreground)

--color-badge-pink:

var(--badge-pink)

--color-badge-pink-subtle:

var(--badge-pink-subtle)

--color-badge-pink-subtle-foreground:

var(--badge-pink-subtle-foreground)

--color-badge-purple:

var(--badge-purple)

--color-badge-purple-subtle:

var(--badge-purple-subtle)

--color-badge-purple-subtle-foreground:

var(--badge-purple-subtle-foreground)

--color-badge-red:

var(--badge-red)

--color-badge-red-subtle:

var(--badge-red-subtle)

--color-badge-red-subtle-foreground:

var(--badge-red-subtle-foreground)

--color-badge-teal:

var(--badge-teal)

--color-badge-teal-subtle:

var(--badge-teal-subtle)

--color-badge-teal-subtle-foreground:

var(--badge-teal-subtle-foreground)

CSS

No CSS found.