design-infraReport a problem or share feedback← Catalog
Border Beam
curatedfreemagicui/border-beam
An animated beam of light which travels along the border of its container.
$
npx shadcn@latest add @magicui/border-beamnpm deps: motion
Our notes
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-*`.- Source
- Magic UI
- Kind
- component
- Categories
- misc
- Use as
- wrapper — wraps your existing element
- Applies to
- cardbuttoninput
- Motion
- on loop · subtle · motion · medium cost · ignores reduced motion
- Tags
- motion
- Licence
- MIT (magicuidesign/magicui). Magic UI Pro templates are a separate paid product — not catalogued.
- Live demo
- magicui.design
- Docs
- magicui.design
Similar
Compare all 4 →- Border Beamsmoothui/border-beamA BorderBeam component for SmoothUI.
- Shine Bordermagicui/shine-borderShine border is an animated background border effect.
- Border Beamlibrariesdev/border-beamUse on ONE live element per screen. Wrapped by @oc/beam-card. theme prop defaults to dark — set theme='light' on light surfaces.