Skip to content
ui.anuragroy.dev

Browse components

← All components

Badge

Compact status badge with solid and soft variants.

Install
npx shadcn@latest add https://ui.anuragroy.dev/r/badge.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal
npx shadcn@latest add https://ui.anuragroy.dev/r/badge.json

GitHub fallback if the website is down:

Terminal
npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/badge.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/badge.

Import
import { Badge } from "@/components/ui/badge"
example.tsx
import { Badge } from "@/components/ui/badge"export function Example() {  return (    <>      <Badge>Primary</Badge>      <Badge variant="secondary">Secondary</Badge>      <Badge variant="success">Success</Badge>    </>  )}

API Reference

Badge

PropTypeDefault
variant"primary" | "secondary" | "success" | "success-soft" | "warning" | "destructive" | "destructive-soft" | "outline" | "soft""primary"

Notes

  • Soft success/warning variants use optional `--success` and `--warning` theme tokens.