Browse components
Glow Border
A comet of light orbits the element's border.
Installation
npx shadcn@latest add @glint-ui/glow-borderFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/glow-border.json
Usage
import { GlowBorder } from "@/components/ui/glow-border";
<GlowBorder>
<button className="px-6 py-3">Get started</button>
</GlowBorder>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content inside the border. |
| color | string | "#c6ff3d" | Glow color. |
| speed | number | 4 | Seconds per rotation. |
| thickness | number | 1 | Border width in px. |
| radius | number | 16 | Corner radius in px. |
| background | string | "#0a0a0a" | Inner fill. |
| className | string | — | Extra classes for the root element. |