# card

Featured Components⚛ TSX Live preview

Spotlight Glow Card

Card with a radial glow that tracks the cursor plus a 1px gradient border-light that follows the pointer.

HTMLCSSJavaScriptAdvanced

11.8k78.4k12.4kOpen

Featured Components⚛ TSX Live preview

3D Perspective Tilt Card

Pricing card that rotates in 3D toward the cursor with layered translateZ depth and a moving shine.

HTMLCSSJavaScriptAdvanced

10.2k55.6k10.9kOpen

Featured Components⚛ TSX Live preview

3D Flip Reveal Card

A card that flips on its Y axis in 3D to show a gradient back face — works on hover and on tap for touch.

HTMLCSSJavaScriptAdvanced

7.3k39.2k8.1kOpen

Spotlight Border Card

A glass card whose gradient border and inner glow follow the cursor position — mask-composite trick, no canvas.

34400Open

Animations Live preview

Aurora Traveling Border Card

A conic-gradient border light that endlessly orbits the card using @property angle animation and blur glow.

30200Open

3D Flip Card Reveal

Three cards that rotate on the Y axis on hover — front face has a glyph, back face carries the details.

31800Open

Spotlight tilt pricing card

Glass pricing card that tilts in 3D toward the cursor while a radial spotlight glow chases the pointer.

49800Open

Featured UI Elements Live preview

Rotating conic glow border card

A 2px conic-gradient border slowly spins around a glass card via @property angle animation — pro upgrade cards.

44500Open

Direction-aware hover glow card

A 300px radial light follows the cursor and snaps in from the edge the pointer entered from.

37600Open

Glass lift cards with light tracking

Frosted stat cards that lift on hover while a soft light pool tracks the cursor along their top edge.

34800Open

Featured UI Elements Live preview

Orbiting border beam card

A bright light travels around the card's border via an animated conic-gradient mask and @property angle.

46500Open

Holographic iridescent tilt card

Trading-card style rainbow sheen (color-dodge) tracks the pointer over a 3D-tilting glass pass card.

47700Open

Glass Pricing Card · Ultra Violet

A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Ultra Violet palette.

23300Open

Glass Pricing Card · Cyber Lime

A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Cyber Lime palette.

35800Open

Glass Pricing Card · Sunset Amber

A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Sunset Amber palette.

52500Open

Glass Pricing Card · Rose Gold

A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Rose Gold palette.

31300Open

Glass Pricing Card · Ocean Sky

A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Ocean Sky palette.

23700Open

Glass Pricing Card · Mint Breeze

A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Mint Breeze palette.

36900Open

Glass Pricing Card · Candy Pink

A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Candy Pink palette.

70300Open

Glass Pricing Card · Royal Gold

A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Royal Gold palette.

11500Open

Gradient Profile Card · Rose Gold

A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Rose Gold palette.

85800Open

Gradient Profile Card · Ocean Sky

A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Ocean Sky palette.

52600Open

Gradient Profile Card · Mint Breeze

A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Mint Breeze palette.

23800Open

Gradient Profile Card · Candy Pink

A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Candy Pink palette.

53400Open

Gradient Profile Card · Royal Gold

A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Royal Gold palette.

20200Open

Gradient Profile Card · Crimson Heat

A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Crimson Heat palette.

17000Open

Gradient Profile Card · Deep Indigo

A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Deep Indigo palette.

69100Open

Gradient Profile Card · Aurora Teal

A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Aurora Teal palette.

50500Open

3D Tilt Glare Card · Candy Pink

A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Candy Pink palette.

49700Open

3D Tilt Glare Card · Royal Gold

A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Royal Gold palette.

68900Open

3D Tilt Glare Card · Crimson Heat

A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Crimson Heat palette.

24900Open

3D Tilt Glare Card · Deep Indigo

A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Deep Indigo palette.

14000Open

3D Tilt Glare Card · Aurora Teal

A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Aurora Teal palette.

73400Open

3D Tilt Glare Card · Mono Pearl

A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Mono Pearl palette.

36700Open

3D Tilt Glare Card · Ultra Violet

A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Ultra Violet palette.

73500Open

3D Tilt Glare Card · Cyber Lime

A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Cyber Lime palette.

15200Open

Aura Product Card · Ultra Violet

Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Ultra Violet palette.

23300Open

Aura Product Card · Cyber Lime

Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Cyber Lime palette.

69800Open

Aura Product Card · Sunset Amber

Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Sunset Amber palette.

52500Open

Aura Product Card · Rose Gold

Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Rose Gold palette.

77300Open

Aura Product Card · Ocean Sky

Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Ocean Sky palette.

44100Open

Aura Product Card · Mint Breeze

Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Mint Breeze palette.

59700Open

Aura Product Card · Candy Pink

Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Candy Pink palette.

78700Open

Aura Product Card · Royal Gold

Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Royal Gold palette.

45500Open

Site Templates Live preview

Lumen Rise — Fintech Landing

Fintech landing with balance card, transaction feed and security highlights.

Pricing Toggle Card

Monthly/yearly pricing card with a springy toggle that updates prices with a count-up.

Weather Widget

Weather card with condition icon, temperature, forecast strip and location.

UI Elements Live preview

Radio Card

Radio select styled as a card with ring highlight when chosen.