Card - Saturation UI

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/card.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). 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.

API Reference

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.

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 https://ui.saturation.io/r/card.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). 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