nessra uinessra ui

Card

Previous: CalendarNext: Chart

Displays a card with header, content, and footer.

Loading...
import {
  Card,
  CardContent,

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-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

Loading...
import { Button } from "@/components/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