A
Airy

Card

Displays a card with header, content, and footer.

Source

Preview

Create project
Deploy your new project in one-click.

Installation

Install the package using your preferred package manager:

npx shadcn@latest add @airy/card

Usage

Import the component from the package:

import { Card } from "@/components/ui/card"

Then use it in your application:

<Card />

Examples

Default

Create project
Deploy your new project in one-click.

Compact size

Compact card
Use size="sm" for tighter spaces like list rows and side panels.

Great for dense UIs where cards need less vertical padding.