The BorderBeam component wraps any content in a border traced by a travelling beam of light. It follows the container's rounded corners exactly, and nothing around it moves.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/border-beam.jsonEverything Border Beam accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | No default | Content rendered inside the bordered container |
| borderWidth | number | 1.5 | Thickness of the animated border, in pixels |
| duration | number | 6 | Seconds for the beam to travel once around the element |
| colorFrom | string | "#a855f7" | Leading colour of the beam |
| colorTo | string | "#22d3ee" | Trailing colour, faded out into the border |
| arc | number | 70 | Degrees of the border the beam covers; smaller reads as a sharper streak |
| glow | boolean | true | Paint a blurred copy underneath so the beam bleeds onto the page |
| className | string | '' | Additional CSS classes applied to the outer container |
A light travels the border to mark the card worth looking at, without moving anything on the page.