Skip to content
ui.anuragroy.dev

Browse components

← All components

Card

Surface card with header, body, and footer slots.

Install
npx shadcn@latest add https://ui.anuragroy.dev/r/card.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal
npx shadcn@latest add https://ui.anuragroy.dev/r/card.json

GitHub fallback if the website is down:

Terminal
npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/card.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/card.

Import
import {  Card,  CardContent,  CardDescription,  CardFooter,  CardHeader,  CardTitle} from "@/components/ui/card"
example.tsx
import { Button } from "@/components/ui/button"import {  Card,  CardContent,  CardDescription,  CardFooter,  CardHeader,  CardTitle,} from "@/components/ui/card"export function Example() {  return (    <Card>      <CardHeader>        <CardTitle>Card title</CardTitle>        <CardDescription>Soft surface card with large radius.</CardDescription>      </CardHeader>      <CardContent>Use the full card composition.</CardContent>      <CardFooter>        <Button size="sm">Action</Button>      </CardFooter>    </Card>  )}

API Reference

Card

Styled `div` surface. Compose with Header / Content / Footer.

PropTypeDefault
classNamestring—