Custom Shadcn Badge for React and Tailwind CSS. Badges are used to highlight items, notify users, or display statuses.
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.
import { Badge } from "@/components/reui/badge"<Badge>Badge</Badge>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>import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge>Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="secondary">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="destructive">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="success">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="info">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="warning">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="outline">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="primary-outline">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="destructive-outline">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="info-outline">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="success-outline">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="warning-outline">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="primary-light">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="destructive-light">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="success-light">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="info-light">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return <Badge variant="warning-light">Badge</Badge>
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return (
<div className="flex items-center gap-2.5">
<Badge size="sm">Small</Badge>
<Badge size="default">Default</Badge>
<Badge size="lg">Large</Badge>
</div>
)
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return (
<div className="flex flex-col items-center justify-center gap-6">
<div className="flex items-center gap-2.5">
<Badge size="sm" radius="full">
3
</Badge>
<Badge size="default" radius="full">
3
</Badge>
<Badge size="lg" radius="full">
3
</Badge>
</div>
<div className="flex items-center gap-2.5">
<Badge size="sm" radius="full">
New
</Badge>
<Badge radius="full">New</Badge>
<Badge size="lg" radius="full">
New
</Badge>
</div>
<div className="flex items-center gap-2.5">
<Badge size="sm" radius="full" variant="outline">
New
</Badge>
<Badge radius="full" variant="secondary">
New
</Badge>
<Badge size="lg" radius="full" variant="success-light">
New
</Badge>
</div>
</div>
)
}
import { Badge } from "@/components/reui/badge"
import { CheckIcon } from 'lucide-react'
export function Pattern() {
return (
<Badge variant="outline">
<CheckIcon />
Badge
</Badge>
)
}
import { Badge } from "@/components/reui/badge"
import { Button } from "@/components/ui/button"
import { XIcon } from 'lucide-react'
export function Pattern() {
return (
<Badge variant="outline" className="gap-0.5">
Badge
<Button
variant="ghost"
size="icon"
className="size-3 hover:bg-transparent"
>
<XIcon />
</Button>
</Badge>
)
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return (
<Badge variant="info-light">
<span className="ms-0.25 size-1.25 rounded-full! bg-[currentColor]" />{" "}
Badge
</Badge>
)
}
import { Badge } from "@/components/reui/badge"
export function Pattern() {
return (
<Badge variant="outline" render={<a href="#" />}>
Badge
</Badge>
)
}