Card

Content containers with headers, actions, and flexible layouts for organizing information.

Installation

npx shadcn@latest add @preskok/card

Usage

import { Button } from "@/components/ui/preskok-ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/preskok-ui/card"

export function CardDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here.</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  )
}

Components

The root card container.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

CardHeader

Card header section with optional title and description.

Prop	Type	Default	Description
`title`	`string`	-	Header title
`description`	`string`	-	Header description
`className`	`string`	-	Additional CSS classes

CardTitle

Standalone card title component.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

CardDescription

Standalone card description component.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

CardAction

Card action area, typically placed in the header.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

CardContent

Main content area of the card.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

CardFooter

Card footer section for actions or additional content.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Examples

Features

Flexible layout - Compose cards with different sections
Optional elements - Use only the components you need
Consistent spacing - Built-in spacing between sections
Responsive design - Adapts to different screen sizes
Customizable styling - Full control over appearance
Semantic structure - Proper HTML structure for accessibility

Release readiness

Checkout redesign launch checklist

QA passComplete

Rollout20%

OwnerGrowth

Team capacity

Engineering coverage for this week

Available reviewers across three squads.

Installation

npx shadcn@latest add @preskok/card

Usage

import { Button } from "@/components/ui/preskok-ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/preskok-ui/card"

export function CardDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here.</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  )
}