← Back to compare

Compare

Card

5 implementations across libraries. Tap one's viewport pills to compare on different screen sizes.

shadcn/ui

Card

Bordered container with header/content/footer slots.

9:41●●● 100%
shadcn Card
Bordered container with composable slots.

Use for product cards, dashboard tiles, settings panels — anywhere you need a bordered region.

npx shadcn@latest add card
Origin UI

Origin Card (gradient header)

Card with gradient header and dual-action footer.

9:41●●● 100%

Premium

Pro Plan

Unlimited projects, priority support.

$24/mo
  • Unlimited workspaces
  • Advanced analytics
  • Priority email support
npx shadcn add https://originui.com/r/card-5.json
Magic UI

Magic UI Magic Card

Card with animated gradient that follows mouse hover.

9:41●●● 100%
Magic UI

Magic Card

See how this card responds to your cursor — the gradient follows your pointer in real time.

Hover anywhere inside this card to see the effect.
npx shadcn add https://magicui.design/r/magic-card.json
Aceternity UI

Aceternity 3D Card

Card that tilts in 3D on mouse hover.

9:41●●● 100%
Aceternity UI

Hover me — I tilt in 3D.

Move your mouse across this card to see a depth-based 3D tilt effect using Motion spring values.

rotateX + rotateY via useSpring
npx shadcn add https://ui.aceternity.com/registry/3d-card.json
AREA

AREA Card

Mobile-first card using @area/tailwind-preset tokens. Safe-area-aware bottom padding.

9:41●●● 100%

AREA Card

Workspace Overview

Active projects12

Mobile-first card using AREA token system — border, background, muted surfaces, safe-area-aware spacing.

(AREA local — workspace package, no install needed)