Your workspace
Everything you need in one place.
3 members
Card
A flexible content card with a title, description, body, and footer.
Installation
bunx shadcn@latest add https://ui.razeev.com/r/card.jsonUsage
tsx
import { Card } from "@/components/hangry-ui/components/card";
<Card title="New project" description="Start with a blank canvas."><p>Your content here.</p></Card>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Room for your next idea" | Heading; use an empty string to hide it. |
description | string | "A simple starting point for something great. Make it yours." | Supporting text; use an empty string to hide it. |
children | ReactNode | — | Card body content. |
footer | ReactNode | — | Content below the body, separated by a border. |
className | string | "" | Additional CSS classes on the component root. |
Native props | ComponentProps<"article"> | — | Forwards native article attributes, aria-* attributes, and event handlers. |
Setup notes
Use Tailwind CSS v4. Borders use the global border-border token. No rounded classes or additional packages are required. Customize content with props and styling with className.