Border Beam vs similar

3 options side by side. Our @design-infra pieces render live under the design system you choose; upstream pieces show their live demo where the host allows embedding, otherwise a screenshot with a link to the real thing. Pick or pass, then copy the feedback for your agent.

• ABorder Beammagicuilive (upstream)
  loop — subtlewrapperFuturisticRefinedPlayful

  motion · medium cost · ignores reduced motion

  Light travelling around a card's border; subtle way to highlight one pricing tier or the hero screenshot. colorFrom/colorTo default orange/purple — pass var(--primary). Parent needs `relative overflow-hidden rounded-*`.

  $npx shadcn@latest add @magicui/border-beam

  Gallery pageOpen live demo

  Pick PassAdd to shortlist
• BBorder Beamsmoothuiimage
  No preview yetOpen live demo ↗
  loop — mediumwrapperFuturisticRefinedPlayful

  motion + svg · medium cost · respects reduced motion

  A BorderBeam component for SmoothUI.

  $npx shadcn@latest add @smoothui/border-beam

  Gallery pageOpen live demo

  Pick PassAdd to shortlist
• CBorder Beamlibrariesdevlive (upstream)
  loop — mediumwrapperFuturisticPlayful

  css · low cost · respects reduced motion

  Use on ONE live element per screen. Wrapped by @oc/beam-card. theme prop defaults to dark — set theme='light' on light surfaces.

  $pnpm add border-beam

  Gallery pageOpen live demo Docs

  Pick PassAdd to shortlist

From design-infra compare — Border Beam vs similar:
(no picks yet)

Compare: https://www.owencoonahan.xyz/design-infra/compare?ids=magicui/border-beam,smoothui/border-beam,librariesdev/border-beam&label=Border+Beam+vs+similar