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/r-badge
Usage
import { Badge } from "@/components/reui/r-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() {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() {Invert Light
Component c-badge-17-1 not found in registry.
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 follow the Radix UI implementation with accessible primitives from the Radix stack 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