Nusa UINusa UI

Card

Previous: CalendarNext: Chart

Displays a card with header, content, and footer.

registry/examples/card-demo.tsx
import {
  Card,
  CardContent,

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nusa-ui.vercel.app/r/card.json

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Examples

Simple Card

registry/examples/card-simple.tsx
import { Button } from "@/registry/ui/button"
import {
  Card,

API Reference

Card

ComponentDescription
CardThe main card container
CardHeaderContains the title and description
CardTitleThe card title
CardDescriptionThe card description
CardActionAction button area in header
CardContentThe main content area
CardFooterThe card footer
CalendarChart

On this page

InstallationUsageExamplesSimple CardAPI ReferenceCard