design-infraReport a problem or share feedback← Catalog
Border Beam
freesmoothui/border-beam
A BorderBeam component for SmoothUI.
$
npx shadcn@latest add @smoothui/border-beamnpm deps: motion
- Source
- SmoothUI
- Kind
- component
- Categories
- misc
- Use as
- wrapper — wraps your existing element
- Applies to
- cardbuttoninput
- Motion
- on loop · medium · motion + svg · medium cost · respects reduced motion
- Tags
- spring, complexity-medium
- Licence
- MIT ("MIT License — Copyright (c) 2024 Eduardo Calvo", github.com/educlopez/smoothui).
- Live demo
- smoothui.dev
- Docs
- smoothui.dev
Similar
Compare all 4 →- Border Beammagicui/border-beamLight 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-*`.
- 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.