Card - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/card

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Examples

With Header

Use CardHeader with CardTitle to add a header to your card.

With Footer

Use CardFooter to add action buttons or additional information at the bottom of the card.

With Action

Use CardAction to add an action button in the header area.

With Description

Use CardDescription to add supporting text below the title.

Project Card

Sypher Studios

Edited 6 months ago

A practical example showing how to create a project card with a gradient background and metadata.

Semantic Heading

Use `asChild` on CardTitle or CardDescription to render as a semantic element (h2/h3/p) for SEO without duplicating styles.

API Reference

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`asChild`	`boolean`	—	On CardTitle and CardDescription, renders the child element (e.g. an h2/h3) with merged props instead of a div. Defaults to false.

Scene 12A

Interior

Coffee Shop - Dialogue Sequence

2 Pages | 1/8 Page

Est. 3 hours

Lead actors arrive at coffee shop. Discussion about the case.

Installation

pnpm dlx shadcn@latest add @saturation-ui/card

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Examples

With Header

Notifications

You have 3 unread messages.

Check your inbox for the latest updates.

Use CardHeader with CardTitle to add a header to your card.

With Footer

Confirm Action

Are you sure you want to proceed?

This action cannot be undone.

Use CardFooter to add action buttons or additional information at the bottom of the card.

With Action

Settings

Manage your account settings.

Emailuser@example.com

RoleAdmin

Use CardAction to add an action button in the header area.

With Description

Create Project

Set up a new project to organize your work. You can change these settings at any time.