Card

A flexible surface for grouping related content, actions, and supporting copy with interchangeable designs.

Installation

bunx @swift-rust/ui add card

Usage

tsx

1import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
2 
3<Card design="glass">
4  <CardHeader>
5    <CardTitle>Team plan</CardTitle>
6    <CardDescription>For growing product teams.</CardDescription>
7  </CardHeader>
8  <CardContent>Unlimited projects and shared workspaces.</CardContent>
9  <CardFooter>Manage plan</CardFooter>
10</Card>

Composition

Card is composed of these parts:

Card
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter

Examples

flat

design="flat"

soft

design="soft"

3d

design="3d"

glass

design="glass"

neo

design="neo"

brutal

design="brutal"

← Calendar Carousel →