---
name: "@cardcn"
slug: "cardcn"
description: "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."
category: "Niche/single-purpose"
tags: ["accessibility", "cards", "components", "media"]
framework: "react"
license: "MIT"
author: "Ali-Hussein-dev"
website: "https://cardcn.dev"
github: "https://github.com/Ali-Hussein-dev/cardcn"
registry: "https://cardcn.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 46
component_count: 27
generated_at: "2026-07-28T08:59:05.895Z"
---

# @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.

## Links

- Website: https://cardcn.dev
- GitHub: https://github.com/Ali-Hussein-dev/cardcn
- Registry JSON: https://cardcn.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/cardcn
- This file: https://sh4dcn.vercel.app/md/cardcn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://cardcn.dev/r/registry.json
pnpm dlx shadcn@latest add https://cardcn.dev/r/registry.json
bunx shadcn@latest add https://cardcn.dev/r/registry.json
# clone the source repo
git clone https://github.com/Ali-Hussein-dev/cardcn.git
# fetch the raw registry index
curl -s https://cardcn.dev/r/registry.json
```

## Components (27)

| name | type | description | install |
| --- | --- | --- | --- |
| card-1 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-1.json` |
| card-2 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-2.json` |
| card-3 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-3.json` |
| card-4 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-4.json` |
| card-5 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-5.json` |
| card-6 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-6.json` |
| card-7 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-7.json` |
| card-8 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-8.json` |
| card-9 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-9.json` |
| card-10 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-10.json` |
| card-11 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-11.json` |
| card-12 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-12.json` |
| card-13 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-13.json` |
| card-14 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-14.json` |
| card-15 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-15.json` |
| card-16 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-16.json` |
| card-17 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-17.json` |
| card-18 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-18.json` |
| card-19 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-19.json` |
| card-20 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-20.json` |
| card-21 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-21.json` |
| card-22 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-22.json` |
| card-23 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-23.json` |
| card-24 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-24.json` |
| card-25 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-25.json` |
| card-26 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-26.json` |
| card-27 | registry:component | Card component | `npx shadcn@latest add https://cardcn.dev/r/card-27.json` |

## For AI agents

```text
You are adding components from @cardcn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/cardcn.md) for the component list.
2. Fetch the machine-readable index: https://cardcn.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: cardcn).
```