Card
A flexible container component for displaying content in a structured format.
This is the card content area where you can place any content.
Installation
npx shadcn@latest add https://ui.saturation.io/r/card.jsonUsage
1600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import {2 Card,3 CardHeader,4 CardTitle,5 CardDescription,6 CardContent,7 CardFooter,8} 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@/components/ui/card"9 10600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">export 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">default 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">function Example() {11 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">return (12 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">> 13 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">> 14 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>Title600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400"> >15 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>Description600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400"> >16 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>17 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">> 18 Content goes here
19 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>20 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">> 21 Footer content
22 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>23 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400">>24 )25}Examples
With Header
Use CardHeader with CardTitle to add a header to your card.
You have 3 unread messages.
With Action
Use CardAction to add an action button in the header area.
With Description
Use CardDescription to add supporting text below the title.
Project Card
A practical example showing how to create a project card with a gradient background and metadata.
Sypher Studios
Edited 9 months ago
API Reference
Card
The main container component. Extends div element.
CardHeader
Container for the card header content. Typically contains CardTitle and CardDescription.
CardTitle
The title of the card.
CardDescription
Supporting text that appears below the title with muted styling.
CardAction
Container for action buttons in the header area. Positioned in the top-right corner.
CardContent
The main content area of the card.
CardFooter
Container for footer content, typically used for action buttons.