Tailwind CSS Border Effect Components

Dev Design Library indexes 29 Tailwind CSS border effect components from 16 open-source UI libraries, with the most coming from Aceternity UI, Velora UI, Shadcn Space, Spectrum UI and Magic UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Border effect components belong to the Effects group.

• Border BeamMagic UI · ReactAn animated beam of light which travels along the border of its container.
• B
  Border BeamLibraries.dev · ReactAnimated border beam effect for React
• Beam CardSpectrum UI · ReactA card wrapped in an animated border beam, traveling or breathing, in four color palettes.
• Flow ButtonSpell UI · ReactA button with animated flowing dashed border on hover.
• Glow Border CardVengeance UI · ReactCard with animated glow border
• Shine Border-01 - BasicShadcn Space · ReactShine Border component
• Card Decoratorcnblocks · SvelteDecorative card component with visual effects
• Border BeamAnimations (Svelte) · SvelteA component for creating animated border beam effects around elements with customizable gradients, duration, and…
• Border BeamBadtz UI · ReactDisplays an animated border effect with a glowing beam around the content that adapts to the size of the container.
• Chrome Border ButtonRewamp UI · React
• Liquid Badgeglasscn · ReactA liquid-glass badge wrapper that keeps the base badge fill and applies the effect to the border.
• Subscribe Shine ButtonMicroKit · ReactA dark subscribe pill with a rotating highlight that traces its edge on hover.
• Border BeamVelora UI · ReactA beam of light traveling around any border.
• Liquid Metal BorderSpaceUI · ReactLiquid metal shader as a border wrap. Put any registry component inside.
• Glow CardReactFrame · ReactA card with an animated rotating conic-gradient glow border, customizable colors, text position, and an optional…
• Background GradientAceternity UI · React
• Shine BorderMagic UI · ReactShine border is an animated background border effect.
• M
  Metal FxLibraries.dev · ReactLiquid metal shader effects for React: rings, buttons, metal text and badges, with glow, proximity reflections and…
• Beam Search BarSpectrum UI · ReactA search bar whose bottom edge lights up with a traveling beam while it has focus.
• Border BeamVengeance UI · React
• Shine Border 06 - Focus FrameShadcn Space · ReactA camera focus-lock shine border with pulsing corner brackets instead of a continuous glowing ring, wrapping a simple…
• Shine BorderAnimations (Svelte) · SvelteA component that adds a shining animated border effect with customizable colors, duration, and border width.
• Split CTA with product visualVelora UI · ReactTwo-column CTA card with a benefit list and a dashboard mock-up, traced by an animated border beam.
• Glowing EffectAceternity UI · React
• Shine Border 07 - Marching DashesShadcn Space · ReactA marching dashes shine border with a crisp animated dashed outline continuously travelling around the edge, wrapping…
• Glowing EffectVelora UI · ReactBorder glow that follows the pointer around a card's edge as it comes near.
• Hover Border GradientAceternity UI · React
• Moving BorderVelora UI · ReactA light laps the button's border via offset-path.
• Moving BorderAceternity UI · React

Libraries with Tailwind CSS border effect components

• Aceternity UI
• Velora UI
• Shadcn Space
• Spectrum UI
• Magic UI

Related categories

• Border Effect Components
• React Border Effect Components
• Animated Border Effect Components
• Tailwind CSS Effect Components
• Tailwind CSS Marquee Components
• Tailwind CSS Transition Components
• Tailwind CSS Cursor Effect Components
• Tailwind CSS Image Effect Components
• Tailwind CSS Mask Effect Components
• Tailwind CSS Reveal Wrapper Components
• Tailwind CSS Glow Effect Components
• Tailwind CSS Tilt Effect Components
• Tailwind CSS Spotlight Effect Components
• Tailwind CSS Blur Overlay Components
• Tailwind CSS Confetti Components