A thin beam of light travels around the border of a dark button and brightens on hover.
npx shadcn@latest add https://hyperblur.dev/r/border-beam-button.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/border-beam-button.tsx.
import { BorderBeamButton } from "@/components/hyperblur/border-beam-button"
<BorderBeamButton duration={3}>Upgrade plan</BorderBeamButton>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Button label. |
| color | string | "#2f7bff" | Head color of the beam. |
| secondary | string | "#19c3f5" | Tail color of the beam. |
| duration | number | 3 | Seconds for one lap around the border. |
| borderWidth | number | 1.5 | Beam thickness in pixels. |
| rounded | number | 9999 | Corner radius in pixels. The default makes a pill. |
| size | "sm" | "md" | "lg" | "md" | Font size and padding preset. |