Animated React card and layout components

Bento grids, spotlight, tilt, glare and wobble cards, marquees, docks, focus and hover grids, expandable and draggable cards. Pointer effects are decorative; content and links stay accessible.

21 components · free and MIT licensed · install any of them with the shadcn CLI

Deploy succeeded

Animated List

Looping feed that springs each item in, newest on top.

MCMaya Chen, Design engineer

TOTom Okafor, Frontend lead

SLSofia Lindqvist, Indie hacker

DRDan Romero, CTO

Animated Tooltip

Avatar row with springy name tooltips on hover.

MCMaya ChenTOTom OkaforSLSofia LindqvistDRDan Romero+2kand 2,400 more

Avatar Circles

Stacked initials avatars with a +N badge — zero images.

Patterns

Maskable backdrops.

Meteors

Streaks of light.

Bento Grid

Feature bento with hover-reveal CTAs and rich backgrounds.

• QuickstartInstall the CLI and add your first component in under a minute.
• ThemingRe-skin every component by changing seven CSS variables.
• AccessibilityKeyboard support, reduced motion and screen reader notes for each part.
• RegistryPull components straight into your codebase with the shadcn CLI.
• ExamplesCopy-paste sections built from the library, ready to adapt.
• ChangelogEvery release, what changed, and how to upgrade safely.

Card Hover Effect

Link-card grid with a highlight that glides to whichever card you hover or focus.

“Swapped three separate animation libraries for Velora and the bundle got smaller.”

Dana Whitfield

“The size on every docs page is the reason we shipped it without a review meeting.”

Marco Elias

“Reduced-motion worked out of the box. That never happens.”

Priya Raman

Card Stack

Deck that shuffles the top card to the back on a timer.

After

Before

Compare Slider

Before/after wipe with a keyboard-accessible divider.

Hover me

Enters from your edge

Direction Aware Hover

Overlay enters from the edge the cursor actually crossed.

Dock

macOS-style dock with cursor magnification.

Moraine Lake

Above the clouds

Northern lights

Red rock road

Forest light

Draggable Card

Scattered photo cards you can fling around with inertia, tilt and bounds.

Velora

Evervault Card

Card that reveals shuffling brand-tinted characters through a mask following the pointer.

Animations with receiptsClick to expand

Expandable Card

Expands into a centred panel with shared-layout transitions.

• components
  • velora
    • marquee.tsx
    • dock.tsx
  • ui
    • button.tsx

File Tree

Collapsible tree for documenting project structure.

• 

• 

• 

• 

• 

• 

Focus Cards

Image grid where the hovered card stays sharp while the others blur and step back.

Glare Card

Move the cursor across this card.

Glare Card

Sheet of light tracking the cursor, like a foil trading card.

GlasshausOffice · RotterdamHarbor HouseResidence · MaineAtelierStudio · LisbonMeridian TowerCommercial · Chicago

Layout Grid

Bento grid of image tiles that expand in place to reveal rich content.

AstroNext.jsRemixViteNuxtSvelteKit

AstroNext.jsRemixViteNuxtSvelteKit

AstroNext.jsRemixViteNuxtSvelteKit

AstroNext.jsRemixViteNuxtSvelteKit

Marquee

Seamless scrolling loop — horizontal, vertical, hover-pause.

Orbiting Circles

Items evenly distributed on rotating orbital rings.

Move your cursor here

The glow follows the pointer across the card surface.

Spotlight Card

A radial glow that follows the cursor across the card.

Tilt me

3D perspective that tracks your cursor.

Tilt Card

3D perspective tilt that tracks the cursor.

Launch week

Ship previews for every pull request

Each branch gets its own URL, so reviewers click instead of cloning.

Wobble Card

Colored card that drifts toward the pointer, with parallax content and grain.