# Border beam

> A light that travels around an element's border.

Component · Pro · https://lodeui.com/components/border-beam

## When to use

- Drawing the eye to one card: the recommended plan, a new feature.

## When not to use

- More than one element per view.

## Installation

```bash
npx shadcn@latest add @lode/border-beam
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="example.tsx"
import { BorderBeam } from "@/components/ui/border-beam";

export function Highlight() {
  return <BorderBeam className="rounded-xl p-6">Pro</BorderBeam>;
}
```

## API reference

### BorderBeam

A light that travels around the border.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| duration | `number` | `6` | Seconds per lap. |
| color | `string` | `var(--brand)` | Beam color. |

## Accessibility

- Decorative and aria-hidden; static under reduced motion.

## Motion

- A conic gradient rotates around the border.

## Responsive behavior

- Follows the element's radius.

## Performance

- Pure CSS with an animated custom property.

## Notes for AI

- Give it a border radius class.

## Related

- [Spotlight card](https://lodeui.com/components/spotlight-card) — A card lit by a spotlight that follows the pointer, border included.
- [Shimmer text](https://lodeui.com/components/shimmer-text) — Text with a light sweep, for thinking and loading states.