Badge

A small badge component with customizable variants and shiny animation effects.

Badge

Installation

npx shadcn@latest add https://scrollx-ui.vercel.app/registry/badge.json

Add Utilities

tailwind.config.ts

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

Default

Badge

Secondary

Destructive

Outline

API Reference

Badge

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

Props

Property	Type	Default	Description
`variant`	"default" \| "secondary" \| "destructive" \| "outline"	`"default"`	Controls the visual style of the badge.
`shiny`	boolean	`false`	Enables an animated shine effect.
`shinySpeed`	number	`—`	Controls shine animation speed in seconds.
`className`	string	`—`	Custom class names to style the badge.
`...props`	HTMLDivElement attributes	`—`	Supports all standard div props and events.