Badge Shine

Status badge with an automatic shining light sweep. Three variants: default, pro, and new. Pure CSS.

DefaultProNew

Code

import { BadgeShine } from "@/components/ui/badge-shine"

export default function Example() {
  return (
    <div className="flex gap-3">
      <BadgeShine variant="default">Default</BadgeShine>
      <BadgeShine variant="pro">Pro</BadgeShine>
      <BadgeShine variant="new">New</BadgeShine>
    </div>
  )
}

Installation

$npx particleui-cli add badge-shine

Usage

TSX

import { BadgeShine } from "@/components/ui/badge-shine"

export default function Example() {
  return (
    <div className="flex gap-3">
      <BadgeShine variant="default">Default</BadgeShine>
      <BadgeShine variant="pro">Pro</BadgeShine>
      <BadgeShine variant="new">New</BadgeShine>
    </div>
  )
}

Props

Prop	Type	Default	Required
children	React.ReactNode	—	yes
className	string	—	no
variant	"default" \| "pro" \| "new"	`"default"`	no

Details

Source filecomponents/ui/badge-shine.tsx

Typeui

Categorieslayout, particles

npm dependencies

Registry deps

Claude skill—