Border Beam Card

Renders a card with a border beam effect. It has a rounded shell and inner curve, with layered shadows and balanced text. Use for visually distinct cards with a subtle highlight.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/border-beam-card

npx layro-cli add @nolly-studio/border-beam-card

npx layro-cli add @nolly-studio/border-beam-card

bunx layro-cli add @nolly-studio/border-beam-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client"

/**
 * Cult-pro wrapper: [`border-beam`](https://www.npmjs.com/package/border-beam) around the same
 * compound API as `@/components/ui/card` (`BorderBeamCard` + `BorderBeamCardHeader`, …).
 *
 * The package sets `overflow: hidden` on the beam root; we set `overflow: visible` so the bloom
 * (especially `beamSize="line"`) is not clipped.
 *
 * Defaults: same concentric-radius shell as `HaloSelectTrigger` — outer `rounded-2xl` + `p-px`,
 * inner `rounded-[calc(1rem-1px)]` so the beam curve matches the card (not a smaller radius than
 * `Card`’s `rounded-2xl`). Layered shadow on the card; `text-balance` / `text-pretty` on title and
 * description wrappers.
 */