Components
Loading preview...
A label that emphasizes an element that requires attention, or helps categorize with other similar elements.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/badge-1import { Badge } from "@/components/ui/badge-1";
export default function DefaultDemo() {
return (
<div className="flex flex-col gap-2">
<div className="flex gap-1">
<Badge variant="gray">gray</Badge>
<Badge variant="gray-subtle">gray-subtle</Badge>
</div>
<div className="flex gap-1">
<Badge variant="blue">blue</Badge>
<Badge variant="blue-subtle">blue-subtle</Badge>
</div>
<div className="flex gap-1">
<Badge variant="purple">purple</Badge>
<Badge variant="purple-subtle">purple-subtle</Badge>
</div>
<div className="flex gap-1">
<Badge variant="amber">amber</Badge>
<Badge variant="amber-subtle">amber-subtle</Badge>
</div>
<div className="flex gap-1">
<Badge variant="red">red</Badge>
<Badge variant="red-subtle">red-subtle</Badge>
</div>
<div className="flex gap-1">
<Badge variant="pink">pink</Badge>
<Badge variant="pink-subtle">pink-subtle</Badge>
</div>
<div className="flex gap-1">
<Badge variant="green">green</Badge>
<Badge variant="green-subtle">green-subtle</Badge>
</div>
<div className="flex gap-1">
<Badge variant="teal">teal</Badge>
<Badge variant="teal-subtle">teal-subtle</Badge>
</div>
<div className="flex gap-1">
<Badge variant="inverted">inverted</Badge>
</div>
<div className="flex gap-1">
<Badge variant="trial">trial</Badge>
</div>
<div className="flex gap-1">
<Badge variant="turbo">turborepo</Badge>
</div>
</div>
);
}