Badge

Small status indicators and labels

Preview

Default

Secondary

Destructive

Outline

Prop

Type

import { Badge } from "@/components/ui/badge"

<Badge variant="secondary">In Progress</Badge>

npx shadcn add @bonsai/badge

Alert

Alert messages with default and destructive variants

EmptyState

Ghost placeholders that mimic the shape of real content, with an optional action overlay