Card Component

A flexible container component for grouping related content. Perfect for displaying information in a structured, visually appealing way.

Basic Card

A simple card with header, content, and footer sections.

This is a description of what this card contains.

This is the main content of the card. It can contain any type of content including text, images, forms, or other components.

Different card styles for various use cases.

Standard card appearance

More prominent border

No border or shadow

Background color variant

Different padding sizes for various content densities.

Compact content

Standard spacing

Generous spacing

Maximum spacing

Common card patterns used in applications.

Software Engineer

Building beautiful user interfaces with React and TypeScript.

+12%

2,543

Active this month

New dashboard analytics

Get insights into your application performance with our new analytics dashboard.

npx shadcn@latest add https://catppuccin-components.vercel.app/r/card.json