Components / Layout
Card
Groups related content and actions.
Preview
Project summary
Updated just now
18 of 24 tasks are complete.
1import {2 Card,3 CardContent,4 CardHeader,5 CardTitle,6} from "@/components/ui/card"7
8export function CardDemo() {9 return (10 <Card>11 <CardHeader>12 <CardTitle>Project summary</CardTitle>13 </CardHeader>14 <CardContent>18 of 24 tasks are complete.</CardContent>15 </Card>16 )17}flat
The flat style of this component.
Project summary
Updated just now
18 of 24 tasks are complete.
1import {2 Card,3 CardContent,4 CardHeader,5 CardTitle,6} from "@/components/ui/card"7
8export function CardDemo() {9 return (10 <Card>11 <CardHeader>12 <CardTitle>Project summary</CardTitle>13 </CardHeader>14 <CardContent>18 of 24 tasks are complete.</CardContent>15 </Card>16 )17}elevated
The elevated style of this component.
Project summary
Updated just now
18 of 24 tasks are complete.
1import {2 Card,3 CardContent,4 CardHeader,5 CardTitle,6} from "@/components/ui/card"7
8export function CardDemo() {9 return (10 <Card>11 <CardHeader>12 <CardTitle>Project summary</CardTitle>13 </CardHeader>14 <CardContent>18 of 24 tasks are complete.</CardContent>15 </Card>16 )17}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/cardUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.