saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Card

Card

A flexible container component for displaying content in a structured format.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/card

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

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

With Footer

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

With Action

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

With Description

Loading...
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

PropTypeDefaultDescription
classNamestring—Additional CSS classes.

On This Page

  • Installation
  • Usage
  • Examples
  • With Header
  • With Footer
  • With Action
  • With Description
  • Project Card
  • API Reference
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.

Notifications
You have 3 unread messages.

Check your inbox for the latest updates.

Confirm Action
Are you sure you want to proceed?

This action cannot be undone.

Settings
Manage your account settings.
Emailuser@example.com
RoleAdmin
Create Project
Set up a new project to organize your work. You can change these settings at any time.