Card

Installation

pnpm dlx shadcn@latest add @spaceui/primitives-card

Usage

import { Card, CardDescription, CardFooter, CardHeader, CardPanel, CardTitle } from '@/components/ui/card'

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

Anatomy

<Card>
  <CardHeader>
    <CardTitle />
    <CardDescription />
  </CardHeader>
  <CardContent />
  <CardFooter />
</Card>

Features

CardFrame with header action

Use CardFrame when you need a framed layout with an action button in the header (e.g. "Add", "Connect"):

import {
  CardFrame,
  CardFrameAction,
  CardFrameDescription,
  CardFrameHeader,
  CardFrameTitle,
  CardPanel,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { PlusIcon } from 'lucide-react'

export function FramedCardExample() {
  return (
    <CardFrame>
      <CardFrameHeader>
        <CardFrameTitle>Project</CardFrameTitle>
        <CardFrameDescription>Manage your project settings and configuration</CardFrameDescription>
        <CardFrameAction>
          <Button variant="outline">
            <PlusIcon />
            Add
          </Button>
        </CardFrameAction>
      </CardFrameHeader>
      <Card>
        <CardPanel>Content</CardPanel>
      </Card>
    </CardFrame>
  )
}

API Reference

Card Props

CardHeader Props

Header section container. Supports the render prop.

CardTitle Props

Title text for the card. Supports the render prop.

CardDescription Props

Description text for the card. Supports the render prop.

CardAction Props

Container for action buttons in the header. Automatically positions to the right. Supports the render prop.

CardPanel Props

Main content area of the card. Also exported as CardContent. Supports the render prop.

CardFooter Props

Footer section for the card. Supports the render prop.

CardFrame Props

Root container for the framed card layout. Supports the render prop.

CardFrameHeader Props

Header section for the frame. Contains title, description, and optionally CardFrameAction. Supports the render prop.

CardFrameTitle Props

Title text for the frame. Supports the render prop.

CardFrameDescription Props

Description text for the frame. Supports the render prop.

CardFrameAction Props

Container for action buttons in the header. Positioned in the top-right via CSS grid. Supports the render prop.

CardFrameFooter Props

Footer section for the frame. Supports the render prop.

Examples