║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Badge description: A small badge component with customizable variants and shiny animation effects.

<ComponentPreview name="badge-demo" className="" description="Interactive badge with default styling and animation" />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="badge" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<p> <code>badge.tsx</code> </p> <ComponentSource name="badge" />

<Step>Add util file</Step>

<p> <code>lib/utils.ts</code> </p> ```jsx import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }

</Steps>
  </TabsContent>
</Tabs>

<Step>Add Utilities</Step>

<p>
  <code>tailwind.config.ts</code>
</p>

```tsx
module.exports = { 
   theme: { 
     extend: { 
       keyframes: { 
         shine: { 
           '0%': { 'background-position': '100%' }, 
          '100%': { 'background-position': '-100%' }, 
         }, 
      }, 
       animation: { 
        shine: 'shine 5s linear infinite', 
       }, 
     }, 
    }, 
    plugins: [], 
 };

Usage

import { Badge } from "@/components/ui/badge";

<Badge variant="default" shiny={true}>Badge</Badge>

Examples

---

<Step>Default</Step>

<ComponentPreview name="badge-demo" className="" description="Default badge with primary color and shine effect" />

---

<Step>Secondary</Step>

<ComponentPreview name="badge-secondary" className="" description="Subtle badge with secondary color theme and shine" />

---

<Step>Destructive</Step>

<ComponentPreview name="badge-destructive" className="" description="High-contrast badge for warnings and errors" />

---

<Step>Outline</Step>

<ComponentPreview name="badge-outline" className="" description="Minimal badge with border and transparent background" />

API Reference

Badge

The Badge component creates a customizable label with variant styling and optional shiny animation effect.

Props

<PropsTable rows={[ { prop: "variant", type: "default" | "secondary" | "destructive" | "outline", default: "default", description: "Controls the visual style of the badge." }, { prop: "shiny", type: "boolean", default: "false", description: "Enables an animated shine effect." }, { prop: "shinySpeed", type: "number", default: "—", description: "Controls shine animation speed in seconds." }, { prop: "className", type: "string", default: "—", description: "Custom class names to style the badge." }, { prop: "...props", type: "HTMLDivElement attributes", default: "—", description: "Supports all standard div props and events." } ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║