React Spotlight Effect Components

Dev Design Library indexes 21 React spotlight effect components from 13 open-source UI libraries, with the most coming from React Bits, Velora UI, Lobe UI, Aceternity UI and Vengeance 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 targets React. Spotlight effect components belong to the Effects group.

• Magic BentoReact Bits · ReactInteractive bento grid tiles expand + animate with various options.
• 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.
• Awesome SpotlightLobe UI · React
• 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
• 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 CardReact Bits · ReactDynamic spotlight follows cursor casting gradient illumination.
• Awesome Spotlight CardLobe 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
• True FocusReact Bits · ReactApplies dynamic blur / clarity based over a series of words in order.
• Spotlight CardVelora UI · ReactA radial glow that follows the cursor across the card.

Libraries with React spotlight effect components

• React Bits
• Velora UI
• Lobe UI
• Aceternity UI
• Vengeance UI

Related categories

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