Components

Card

A flexible content container. Use it to group related content and actions.

example.tsx

Card Title

This is a card description. It typically contains short, descriptive text.

This is the card content area where you can add more information.

Card footer content

Import

tsx

import {
  AppCard,
  AppCardHeader,
  AppCardTitle,
  AppCardDescription,
  AppCardAction,
  AppCardContent,
  AppCardFooter,
} from "@/components/primitives/AppCard"

Examples

Login form

Compose a login form inside a card using AppCardContent for inputs and AppCardFooter for actions.

example.tsx

Enter your credentials to access your account.

Password

With action

Use AppCardAction inside the header to place a button or link opposite the title.

example.tsx

Notifications

You have 3 unread messages.

Your call has been confirmed.

1 hour ago

You have a new message!

1 hour ago

Your subscription is expiring soon!

2 hours ago

With image

Place an image before AppCardHeader and add overflow-hidden to the card to clip it to the card's border radius.

example.tsx

Featured

Design systems meetup

Join us for an evening of talks on design tokens, component APIs, and cross-platform consistency.

Stats grid

Render multiple compact cards in a grid for dashboard-style metric displays.

example.tsx

Total Revenue

$45,231.89

+20.1% from last month

Active Users

2,350

+180 from last month

New Signups

+12,234

+19% from last month

Active Now

573

+201 since last hour

Sub-components

Component	Description
AppCard	The root container. Accepts className for sizing and spacing overrides.
AppCardHeader	Groups title, description, and optional action. Uses CSS grid internally.
AppCardTitle	Heading element. Renders as a styled h3 by default.
AppCardDescription	Secondary text below the title. Muted foreground color.
AppCardAction	Slot in the header for a button or link, aligned to the trailing edge.
AppCardContent	Main body area with standard padding.
AppCardFooter	Footer row with flex layout for action buttons.

Source

src/components/primitives/AppCard.tsx

import {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
} from "../ui/card"

function AppCard(props: React.ComponentProps<typeof Card>) {
  return <Card {...props} />
}

function AppCardHeader(props: React.ComponentProps<typeof CardHeader>) {
  return <CardHeader {...props} />
}

function AppCardTitle(props: React.ComponentProps<typeof CardTitle>) {
  return <CardTitle {...props} />
}

function AppCardDescription(props: React.ComponentProps<typeof CardDescription>) {
  return <CardDescription {...props} />
}

function AppCardAction(props: React.ComponentProps<typeof CardAction>) {
  return <CardAction {...props} />
}

function AppCardContent(props: React.ComponentProps<typeof CardContent>) {
  return <CardContent {...props} />
}

function AppCardFooter(props: React.ComponentProps<typeof CardFooter>) {
  return <CardFooter {...props} />
}

export {
  AppCard,
  AppCardHeader,
  AppCardTitle,
  AppCardDescription,
  AppCardAction,
  AppCardContent,
  AppCardFooter,
}