Card

A composable card component with header, content, and footer sections.

Installation

bash

npx @smicolon/cli add card

Run init once per project before adding components. See Installation.

Preview

Your order is on its way

Arrives tomorrow before 6 pm.

Order 4821 contains three items.

Simple Card

We’ll message you when your order status changes.

Props

Every part takes these props, and any div prop: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter.

Prop	Type	Default	Description
`children`	`ReactNode`	—	The part’s content.
`className`	`string`	—	Extra classes for the part.

Usage

tsx

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Your order is on its way</CardTitle>
        <CardDescription>Arrives tomorrow</CardDescription>
      </CardHeader>
      <CardContent>Order details</CardContent>
      <CardFooter>Track order</CardFooter>
    </Card>
  )
}