Custom Shadcn Badge for React and Tailwind CSS. Badges are used to highlight items, notify users, or display statuses.
import { Badge } from "@/components/reui/badge"
export function Pattern() {Installation
pnpm dlx shadcn@latest add @reui/badge
Usage
import { Badge } from "@/components/reui/badge"<Badge>Badge</Badge>Examples
Secondary
import { Badge } from "@/components/reui/badge"
export function Pattern() {Destructive
import { Badge } from "@/components/reui/badge"
export function Pattern() {Success
import { Badge } from "@/components/reui/badge"
export function Pattern() {Info
import { Badge } from "@/components/reui/badge"
export function Pattern() {Warning
import { Badge } from "@/components/reui/badge"
export function Pattern() {Outline
import { Badge } from "@/components/reui/badge"
export function Pattern() {Primary Outline
import { Badge } from "@/components/reui/badge"
export function Pattern() {Destructive Outline
import { Badge } from "@/components/reui/badge"
export function Pattern() {Info Outline
import { Badge } from "@/components/reui/badge"
export function Pattern() {Success Outline
import { Badge } from "@/components/reui/badge"
export function Pattern() {Warning Outline
import { Badge } from "@/components/reui/badge"
export function Pattern() {Invert Outline
Component c-badge-12-1 not found in registry.
Primary Light
import { Badge } from "@/components/reui/badge"
export function Pattern() {Destructive Light
import { Badge } from "@/components/reui/badge"
export function Pattern() {Success Light
import { Badge } from "@/components/reui/badge"
export function Pattern() {Info Light
import { Badge } from "@/components/reui/badge"
export function Pattern() {Warning Light
import { Badge } from "@/components/reui/badge"
export function Pattern() {Size
import { Badge } from "@/components/reui/badge"
export function Pattern() {Full Radius
import { Badge } from "@/components/reui/badge"
export function Pattern() {With Icon
import { Badge } from "@/components/reui/badge"
import { IconPlaceholder } from "@/app/(create)/customizer/icon-placeholder"With Icon Button
import { Badge } from "@/components/reui/badge"
import { Button } from "@/components/ui/button"With Dot
import { Badge } from "@/components/reui/badge"
export function Pattern() {With Link
import Link from "next/link"
import { Badge } from "@/components/reui/badge"
API Reference
This component follows the same API design as the Badge Component from shadcn/ui.
The key difference is that it uses extended color tokens such as --success, --info, --warning and --invert
for badge variants instead of utility classes.
This approach enables consistent, reusable state variants across the project without relying on custom Tailwind color utilities.
<Badge variant="success-light" size="sm">
Success
</Badge><Badge variant="outline" radius="full">
Pill
</Badge>Props
| Prop | Type |
|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "info" | "success" | "warning" | "invert" |
variant (Outline) | "primary-outline" | "warning-outline" | "success-outline" | "info-outline" | "destructive-outline" | "invert-outline" |
variant (Light) | "primary-light" | "warning-light" | "success-light" | "info-light" | "destructive-light" | "invert-light" |
size | "default" | "xs" | "sm" | "lg" | "xl" |
radius | "default" (per theme) | "full" (per-theme max: Vega/Nova/Maia/Mira rounded-full, Lyra rounded-none) |
More Shadcn Badge components
Browse 25 production-ready Shadcn Badge components for dashboards, forms, and product UI. These examples use Base UI primitives from @base-ui/react and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.
Browse all 25 Shadcn Badge components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.
On This Page