Components
Loading preview...
Simple, and beautifully styled badges that support both light and dark themes. Inspired by Shadcn/UI.
@devetaigabbai
npx shadcn@latest add https://21st.dev/r/devetaigabbai/beautiful-simple-badgesimport { Badge } from "@/components/ui/beautiful-simple-badges";
export default function DemoOne() {
const variants = [
"default",
"secondary",
"destructive",
"outline",
"warning",
"info",
"neutral",
"positive",
"negative",
] as const;
return (
<div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 p-6">
{variants.map((variant) => (
<div
key={variant}
className="flex flex-col items-center justify-center gap-2 border border-border rounded-2xl p-4 bg-background shadow-sm hover:shadow-md transition-shadow"
>
<span className="text-sm font-medium text-muted-foreground capitalize">
{variant}
</span>
<Badge variant={variant}>{variant}</Badge>
</div>
))}
</div>
);
}