Card
shadcn/uiDisplays a card with header, content, and footer.
Notifications
You have 3 unread messages.
This is a sample card with header, content, and footer sections.
Notifications
You have 3 unread messages.
This is a sample card with header, content, and footer sections.
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from "@/registry/optics/card";import { Button } from "@/registry/optics/button";<Card className="w-[350px]"> <CardHeader> <CardTitle>Notifications</CardTitle> <CardDescription>You have 3 unread messages.</CardDescription> <CardAction> <Button size="icon-sm" variant="ghost"> <Bell /> </Button> </CardAction> </CardHeader> <CardContent> <p className="text-sm"> This is a sample card with header, content, and footer sections. </p> </CardContent> <CardFooter> <Button className="w-full">Mark all as read</Button> </CardFooter></Card><Card className="w-[350px]" decorations> <CardHeader> <CardTitle>Notifications</CardTitle> <CardDescription>You have 3 unread messages.</CardDescription> <CardAction> <Button size="icon-sm" variant="ghost"> <Bell /> </Button> </CardAction> </CardHeader> <CardContent> <p className="text-sm"> This is a sample card with header, content, and footer sections. </p> </CardContent> <CardFooter background className="justify-end"> <Button size="sm">Mark all as read</Button> </CardFooter></Card>import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from "@/registry/optics/card";import { Button } from "@/registry/optics/button";<Card className="w-[350px]"> <CardHeader> <CardTitle>Notifications</CardTitle> <CardDescription>You have 3 unread messages.</CardDescription> <CardAction> <Button size="icon-sm" variant="ghost"> <Bell /> </Button> </CardAction> </CardHeader> <CardContent> <p className="text-sm"> This is a sample card with header, content, and footer sections. </p> </CardContent> <CardFooter> <Button className="w-full">Mark all as read</Button> </CardFooter></Card><Card className="w-[350px]" decorations> <CardHeader> <CardTitle>Notifications</CardTitle> <CardDescription>You have 3 unread messages.</CardDescription> <CardAction> <Button size="icon-sm" variant="ghost"> <Bell /> </Button> </CardAction> </CardHeader> <CardContent> <p className="text-sm"> This is a sample card with header, content, and footer sections. </p> </CardContent> <CardFooter background className="justify-end"> <Button size="sm">Mark all as read</Button> </CardFooter></Card>Installation
pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/card.json
Props
<Card />
Name
Type
className
string
decorations
boolean (default: false)
<CardHeader />
Name
Type
className
string
<CardTitle />
Name
Type
className
string
<CardDescription />
Name
Type
className
string
<CardAction />
Name
Type
className
string
<CardContent />
Name
Type
className
string
<CardFooter />
Name
Type
className
string
background
boolean (default: false)