Border beam

Highlight an action, input or card with a moving border. Try beam shapes and palettes, then copy the React component.

See it in action

Choose an example to try, then make it your own below.

Make it yours

React code

import { BorderBeam } from '@/components/livenui/beam'

<BorderBeam
  size={"md"}
  colorVariant={"ocean"}
  duration={4}
  active={true}
  theme={"light"}
>
  <button type="button">Your content</button>
</BorderBeam>

Studio

Tune live effects, save presets and export portable configurations.

Thinking orbs

Show searching, listening and composing with a particle orb. Compare states and copy a progress indicator for your app.