Badge

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

Installation

npx shadcn@latest add @scrollxui/badge

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

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

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

Property	Type	Default	Description
`variant`	"default" \| "secondary" \| "destructive" \| "outline-solid"	`"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.