Card
A versatile container component with header and content areas
Preview
Card Title
Card description goes here.
This is a simple card component with a header and content section.
Installation
npx shadcn@latest add @cubby-ui/card
Usage
import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/cubby-ui/card";
<Card> <CardHeader> <CardTitle /> <CardDescription /> </CardHeader> <CardContent /> </Card>
Examples
With Footer and Action
Cards can include footers with buttons and header actions.
Team Meeting
Scheduled for tomorrow at 2:00 PM
Discuss Q4 roadmap and project priorities with the team.
Variants
The Card component supports different visual variants.
Default Card
Clean and simple design.
This is the default card variant with minimal styling.
Inset Card
Nested border effect.
This is the inset variant with an outer and inner border design.
API Reference
Prop
Type
Default
Sub-components
The Card component is composed of several sub-components:
Card: The main container elementCardHeader: Header section (optional)CardTitle: Title text componentCardDescription: Description text componentCardAction: Action button container in header (optional)CardContent: Main content areaCardFooter: Footer section (optional)