Card
Displays structured content in a visually distinct bordered container with optional header, content, and footer sections, ideal for dashboards, settings panels, and data display.
Default
A basic
Card with CardHeader, CardContent, and CardFooter sections. The header contains a CardTitle and CardDescription for structured metadata, while the footer typically holds action buttons.Simple
A minimal
Card using only the root container without CardHeader or CardFooter. Use the Class parameter to add padding directly when sub-components are not needed. This pattern is useful for quick callouts and informational boxes.With Image
Place an
<img> at the top of a Card before CardHeader to create a media card. Use overflow-hidden on the card and rounded-t-lg is handled automatically. This pattern works well for blog posts, product listings, and portfolio items.Header and Footer
A
Card with a clear header/footer separation. The CardHeader holds a CardTitle, CardDescription, and a CardAction for top-right controls. The CardFooter contains a row of action buttons and secondary text. This layout is typical for settings panels and detail views.Custom Variant
Use the
Class parameter to apply custom Tailwind CSS classes for project-specific styling. Override borders, backgrounds, and shadows with gradients, custom colours, or unique border treatments to match your design system or create visual hierarchy.With Form
A
Card containing a form layout. CardContent holds the form fields while CardFooter contains the action buttons. Use the Class parameter on sub-components like CardContent and CardFooter to apply spacing and alignment utilities.Notification
A
Card styled as a notification list. CardDescription provides a summary count, while CardContent renders individual notification items. The CardFooter contains a full-width action button for bulk actions like marking all as read.Stats
Multiple
Card components arranged in a responsive grid to display statistics. Each card reverses the order of CardDescription and CardTitle within CardHeader to place the label above the value, a common dashboard pattern for KPI displays.