Free React Card Components

The card is the most overused element on the modern web, so each of these justifies itself with a mechanic you cannot get from border-plus-shadow: spotlight tracking, depth tilt, iris apertures, frost wipes, ledger flips, liquid gauges, receipt tear-offs, stack shuffles. They are containers with intent, pick the mechanic that matches your content (a gauge card for a metric, a receipt card for an order, a dossier drawer for a profile) rather than decorating everything equally.

17 components · MIT licensed · installable with the shadcn CLI

Constellation Card

A card whose border is a constellation, seeded stars joined by hairline segments that twinkle in slow sequence, then re-wire into a new star graph on hover. The frame is the show.

Frost Wipe Card

A condensation card for React, the pane mists over with canvas breath, your pointer squeegees it clear, droplets run, and it slowly re-fogs. Tailwind token colors throughout.

Iris Aperture Card

A React card with a working camera iris, token-surface blades pivot through real f-stops to unveil the pane on hover, under a live mono aperture readout. Tailwind tokens, mechanical spectacle.

Liquid Gauge Card

A React metric card filled with token-tinted liquid, pointer motion sloshes the spring-driven meniscus while the fill height plots the real value. Tailwind-only material gauge.

Magnetic Cluster

A cluster of small cards with social physics, hover one and its neighbors lean two to three degrees toward it on springs, deferring to the focus. The group reacts as a field.

Moire Veil Card

A React card veiled by two hairline plates whose misalignment breeds moiré bands, pointer drift shears the top plate so interference sweeps the surface. Pure Tailwind tokens.

Refraction Card

Content behind a simulated glass pane, token-built backdrop ghosts split a pixel apart against the pointer, fringing like dispersion under a gliding specular band. Glass without WebGL.

Time Echo Card

Hover slides two ghosted past states out from behind the card, prior values at fading opacity with mono timestamps, so one metric wears its history. Temporal depth, not decoration.

Depth Tilt Card

Card that tilts toward the pointer while kicker, keyline, and content ride separate translateZ planes, quiet 3D depth capped at 6 degrees, glare-free by design.

Drawer Card

Card whose bottom edge is a drawer, hover or focus slides a hidden action row up from behind a hairline, click-through safe and permanently open on touch.

Hover Index Card

Editorial cards fronted by a giant mono index numeral that fills from outline to solid ink on hover or focus, a zero-movement hover language built on clip-path, solid by default on touch.

Ledger Flip Card

Card that flips to its ledger side, a mono spec table, on an explicit flip button, with aria-pressed state and a reduced-motion crossfade instead of 3D rotation.

Receipt Card

Content set as a printed receipt, perforated top edge, dashed mono ledger lines, an accountant's rule before the total, and a stamp that rotates in once after the rows print.

Signal Card

Status card with a live keyline, one short accent segment circulates the card perimeter via SVG pathLength, slow and steady, built for dashboards and monitor pages.

Spotlight Card

Card with a primary-tinted spotlight that follows the pointer while the hairline border brightens beneath it. Touch and keyboard users get a designed fallback glow.

Stack Shuffle Card

A fanned deck of three to five cards where explicit controls shuffle the next card forward on a spring arc, inert back faces, arrow-key support, and polite position announcements.

Window Frame Card

Card as a window, a static hairline frame around an aperture where a token-built scene shifts up to 6px against the pointer, under a mono sill caption. Calm depth with zero tilt.