Skip to content

Border Beam

A light that travels around the edge of a card.

Roaster’s pick

A new lot every month, chosen by the people who roast it.

import { BorderBeam, Button } from '@brand-studio/ui';

export default function BorderBeamDemo() {
  return (
    <BorderBeam style={{ width: '100%', maxWidth: 360, padding: 24, background: 'var(--bs-elevated)', border: '1px solid var(--bs-line)' }}>
      <h3 style={{ margin: '0 0 8px', fontSize: 18 }}>Roaster’s pick</h3>
      <p style={{ margin: '0 0 20px', color: 'var(--bs-muted)' }}>A new lot every month, chosen by the people who roast it.</p>
      <Button>Subscribe</Button>
    </BorderBeam>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, BorderBeam } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { BorderBeam } from '@brand-studio/ui';

<BorderBeam style={{ padding: 24 }}>…</BorderBeam>

Accessibility

Decorative only. The beam is drawn in CSS and stops under reduced motion.

API Reference

Prop	Type	Default
`duration?`	`number`	`6`

Also accepts every HTMLAttributes<HTMLDivElement> attribute.