Tailwind CSS Spotlight Effect Components

Dev Design Library indexes 17 Tailwind CSS spotlight effect components from 12 open-source UI libraries, with the most coming from Velora UI, Aceternity UI, Vengeance UI, UI Lab and Spectrum 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. Spotlight effect components belong to the Effects group.

• Magic CardMagic UI · ReactA spotlight effect that follows your mouse cursor and highlights borders on hover.
• SpotlightAmicro Micro Transitions · ReactMasked spotlight highlighting container content on hover.
• Spotlight CardsKokonut UI · ReactFeature card grid with ambient aurora glow, magnetic 3D tilt and focus dimming on hover, built with React, Tailwind…
• Wordmark Spotlight FooterSpectrum UI · ReactA full-bleed wordmark lit by a spotlight that follows the pointer.
• Magnetic Spotlight MarqueeVengeance UI · ReactInteractive full-screen marquee with spotlight cursor effect
• Magic CardAnimations (Svelte) · SvelteA spotlight effect that follows your mouse cursor and highlights borders on hover.
• Cursor CardsBadtz UI · ReactInteractive cards with animated gradient borders that respond to cursor movement and proximity. Inspired by Cursor's…
• HighlightButtonEvil Buttons · ReactA button with a cursor spotlight, a border that lights up near the pointer, and a ripple from wherever you click.
• Spotlight CardSona UI · ReactA card with a radial spotlight glow that follows the cursor.
• Feature SpotlightUI Lab · ReactA camera zooms into the part of the product screenshot each feature describes as you scroll past it.
• Card Hover EffectVelora UI · ReactLink-card grid with a highlight that glides to whichever card you hover or focus.
• Card Hover EffectAceternity UI · React
• Spotlight NavbarVengeance UI · ReactNavbar with animated spotlight effect
• Spotlight CardUI Lab · ReactThe cursor is a lamp: cards catch its glow and their icons cast shadows away from it.
• Logo gridVelora UI · ReactBordered grid of customer logos with a cursor spotlight per cell, beside a heading and stories link.
• Card SpotlightAceternity UI · React
• Spotlight CardVelora UI · ReactA radial glow that follows the cursor across the card.

Libraries with Tailwind CSS spotlight effect components

• Velora UI
• Aceternity UI
• Vengeance UI
• UI Lab
• Spectrum UI

Related categories

• Spotlight Effect Components
• React Spotlight Effect Components
• Animated Spotlight 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 Border Effect Components
• Tailwind CSS Glow Effect Components
• Tailwind CSS Tilt Effect Components
• Tailwind CSS Blur Overlay Components
• Tailwind CSS Confetti Components