Badge

FREE

Small pill label for status and tags.

Playground

Change the props and watch the component and its code update live.

PRO

Props

Label

Variant

Icon

Code

import { Sparkles } from "lucide-react";
import { Badge } from "@/components/ui/badge";

<Badge variant="accent">
  <Sparkles />PRO
</Badge>

Terminal

npx @bloxa/cli add badge
# or: npx shadcn@latest add @bloxa/badge

Packages installed automatically: class-variance-authority

FREEPROv0.1

Every component also accepts the props of the element it renders.

Prop	Type	Default	Description
variant	"default" \| "accent" \| "outline"	"default"	Visual style.