@cardcn

A focused registry of beautifully styled shadcn/ui Card-component variations built with React, Tailwind CSS, and TypeScript. Each card variant is individually copy-pasteable. Built using TanStack Start, deployed on Cloudflare Workers. Free and open source. Use for: browsing and pulling distinct card layout patterns (stat cards, profile cards, etc.) when the default shadcn Card is too plain for a design.

27 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://cardcn.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://cardcn.dev/r/registry.json

bun bunx shadcn@latest add https://cardcn.dev/r/registry.json

fetch registry curl -s https://cardcn.dev/r/registry.json

Components

27 total

Card 1 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-1.json

Card 2 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-2.json

Card 3 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-3.json

Card 4 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-4.json

Card 5 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-5.json

Card 6 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-6.json

Card 7 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-7.json

Card 8 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-8.json

Card 9 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-9.json

Card 10 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-10.json

Card 11 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-11.json

Card 12 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-12.json

Card 13 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-13.json

Card 14 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-14.json

Card 15 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-15.json

Card 16 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-16.json

Card 17 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-17.json

Card 18 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-18.json

Card 19 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-19.json

Card 20 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-20.json

Card 21 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-21.json

Card 22 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-22.json

Card 23 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-23.json

Card 24 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-24.json

Card 25 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-25.json

Card 26 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-26.json

Card 27 component

Card component

npx shadcn@latest add https://cardcn.dev/r/card-27.json