Installation
Add this component to your project using the npui CLI:
npx npui add cardVariants & Examples
Basic Card
A simple card with a title, description, and content area.
Card Title
Card description goes here.
This is the content of the card. You can put any information here.
1import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
2
3export function MyCard() {
4 return (
5 <Card className="w-[350px]">
6 <CardHeader>
7 <CardTitle>Card Title</CardTitle>
8 <CardDescription>Card description goes here.</CardDescription>
9 </CardHeader>
10 <CardContent>
11 <p>This is the content of the card. You can put any information here.</p>
12 </CardContent>
13 </Card>
14 )
15}Props
These are the available props for the Card component:
| Prop | Type | Description | Default |
|---|---|---|---|
| className | string | Additional CSS classes for styling. | - |
| children | React.ReactNode | The content of the card. | - |