Get Started
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- React Hook Form
- Hover Card
- Input
- Input OTP
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll-area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Installation
BadgeSecondaryDestructiveOutline
Verified89920+
import { AlertCircleIcon, BadgeCheckIcon, CheckIcon } from "lucide-react" import { Badge } from "@/components/ui/badge" export function BadgeDemo() { return ( <div className="flex flex-col items-center gap-2"> <div className="flex w-full flex-wrap gap-2"> <Badge>Badge</Badge> <Badge variant="secondary">Secondary</Badge> <Badge variant="destructive">Destructive</Badge> <Badge variant="outline">Outline</Badge> </div> <div className="flex w-full flex-wrap gap-2"> <Badge variant="secondary" className="bg-blue-500 text-white dark:bg-blue-600" > <BadgeCheckIcon /> Verified </Badge> <Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"> 8 </Badge> <Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums" variant="destructive" > 99 </Badge> <Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums" variant="outline" > 20+ </Badge> </div> </div> ) } Installation
pnpm dlx shadcn@latest add badge
Usage
import { Badge } from "@/components/ui/badge"<Badge variant="default |outline | secondary | destructive">Badge</Badge>Link
You can use the asChild prop to make another component look like a badge. Here's an example of a link that looks like a badge.
import { Link } from "next/link" import { Badge } from "@/components/ui/badge" export function LinkAsBadge() { return ( <Badge asChild> <Link href="/">Badge</Link> </Badge> ) }Deploy your shadcn/ui app on Vercel
Trusted by OpenAI, Sonos, Adobe, and more.
Vercel provides tools and infrastructure to deploy apps and features at scale.
Deploy to Vercel