Card

Preview

Card Title

Card description goes here.

This is a simple card component with a header and content section.

npx shadcn@latest add @cubby-ui/card


import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/cubby-ui/card";


<Card>
  <CardHeader>
    <CardTitle />
    <CardDescription />
  </CardHeader>
  <CardContent />
</Card>

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.

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.

The Card is a custom component that does not extend Base UI.

Container component for grouping related content with optional header, body, and footer sections.

Prop

Type

Default