Shine Border
Wrapper that draws an animated gradient border around its content. Install Shine Border from the VLLNT UI registry with the shadcn CLI.
Supported platforms:Web
2 storiesView componentBorder Beam
Animated accent beam that travels around the border of a highlighted surface. Install Border Beam from the VLLNT UI registry with the shadcn CLI.
Supported platforms:Web
What it is and when to use
Border Beam is a decorative overlay that animates a glowing gradient beam traveling around an element's border. Drop it inside a relatively positioned container and it fills the border with a conic-gradient beam masked to the edge, looping continuously. Props control borderWidth, duration, delay, the from and to colors, and a reverse direction. It is aria-hidden and pointer-events-none, so use it to highlight cards, buttons, or panels without affecting interaction.
UtilityPreview
Switch between light and dark to inspect the embedded Storybook preview.
Animated accent beam that travels around the border of a highlighted surface. Part of the utility family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0 | Browser rendering, DOM events, and ARIA semantics |
| Native | — | Not available |
Installation
Add Border Beam to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/border-beam.jsonSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Border Beam?
- Border Beam is a React decorative component from VLLNT UI that animates a glowing gradient beam around the border of a highlighted surface. It renders an aria-hidden overlay and does not capture pointer events.
- How do I add Border Beam?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/border-beam.json` to install Border Beam via the shadcn CLI. Place it inside a relatively positioned element to draw the animated border.
- How do I customize Border Beam's animation?
- Adjust the duration and delay props to time the loop, set reverse to flip its direction, tune borderWidth, and pass colorFrom and colorTo to change the gradient. Defaults derive from the primary and ring theme colors.