Components

Border Beam

Wraps its child with a luminous beam endlessly traveling around the border: a rotating conic gradient (bright head, transparent tail) is masked down to the border ring via the padding-box/border-box mask composite trick, so only the ring ever lights up.

Always in transit

A lumen head with a fading tail laps the border ring once every six seconds — only the ring ever lights up.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add border-beam

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { BorderBeam } from "@lumora/ui/components/border-beam";
// or from the barrel:
import { BorderBeam } from "@lumora/ui";

Props worth knowing

Wrap a single child; the wrapper is rounded at radius-lg by default, so match the child's radius (or override via className). duration is seconds per lap (default 6), beamWidth the painted ring in px (default 2), and color picks "lumen" or "dusk". Reduced motion leaves a static gradient ring. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.