Card

Displays a card with header, content, and footer sections.

Usage

tsx

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

<Card size="default">...</Card>

<Card size="default">...</Card>

Light

Dark

Default

Metrics

Perimeter Api

size

Notifications

You have 3 unread messages.

Check your inbox for the latest updates.

Compact Card

Smaller padding and text.

Great for dense layouts.

Confirm Action

Are you sure you want to proceed?

Install

$ pnpm dlx shadcn@latest add @perimeter/card