design-infraReport a problem or share feedback← Catalog
Beam card
curatedtheme-awarefreeoc/beam-card
Theme-aware card wrapped in libraries.dev's animated border beam — for the one 'live' thing on screen.
$
npx shadcn@latest add @design-infra/beam-cardnpm deps: border-beam
Our notes
♥ The user explicitly asked to keep Beam Card in the homepage examples while replacing the underwhelming loader. Retain its subtle beam emphasis.Live demo — under each design system
brutalist-mono
Writing…Generating pricing section
The one live thing on screen gets the beam.
Everything else stays calm.
editorial
Writing…Generating pricing section
The one live thing on screen gets the beam.
Everything else stays calm.
linear-dark
Writing…Generating pricing section
The one live thing on screen gets the beam.
Everything else stays calm.
soft-glass
Writing…Generating pricing section
The one live thing on screen gets the beam.
Everything else stays calm.
- Source
- oc
- Kind
- component
- Categories
- card, agent-ui
- Use as
- drop-in — replaces your component
- Applies to
- cardagent-ui
- Motion
- on loop · medium · css · low cost · respects reduced motion
- Tags
- oc, librariesdev/border-beam
- Live demo
- www.owencoonahan.xyz
Similar
Compare all 4 →- Approval Cardbeui/approval-cardA human-in-the-loop decision surface for approvals, single or multiple-choice questions, custom responses, and multi-step review flows.
- Approval Cardbeautifui/approval-cardHuman-in-the-loop 'agent wants to do X — approve?' card. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).
- Agent Suggest Card Stackcult-ui/agent-suggest-card-stackStack of suggestion cards for AI agent responses