Card

Displays a container with header, content, and footer.

Deploy to production

Your changes are ready to go live. Deploy them with one click.

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Deploy to production</CardTitle>
    <CardDescription>
      Your changes are ready to go live. Deploy them with one click.
    </CardDescription>
  </CardHeader>
  <CardFooter>
    <Button>Deploy now</Button>
  </CardFooter>
</Card>

Installation

pnpm dlx cubix@latest add card --base radix

Usage

Import

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

Example

<Card>
  <CardHeader>
    <CardTitle>Card title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>...</CardContent>
  <CardFooter>...</CardFooter>
</Card>

Examples

With form

Cards pair naturally with Inputs and Buttons to build forms:

Create project

Deploy your new project in one-click.

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one-click.</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="grid gap-4">
      <Input placeholder="Name of your project" />
      <Input placeholder="Name of domain" />
    </div>
  </CardContent>
  <CardFooter className="flex-col gap-2">
    <Button className="w-full">Create project</Button>
    <Button variant="outline" className="w-full">Cancel</Button>
  </CardFooter>
</Card>

With action

Use CardAction to add an action element (like a button) in the top-right corner of the header:

Notifications

You have 3 unread messages.

Your deployment finished successfully.

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
    <CardAction>
      <Button variant="outline" size="sm">Mark all as read</Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <div className="flex items-start gap-3">
      <BellIcon className="mt-0.5 size-4 text-muted-foreground" />
      <p className="text-sm text-muted-foreground">
        Your deployment finished successfully.
      </p>
    </div>
  </CardContent>
</Card>

With icon

Compose the header with any element - an icon bubble draws attention to the title:

Pro plan

Unlock every component and priority support.

<Card className="w-full max-w-sm">
  <CardHeader>
    <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
      <SparklesIcon className="size-5" />
    </div>
    <CardTitle>Pro plan</CardTitle>
    <CardDescription>Unlock every component and priority support.</CardDescription>
  </CardHeader>
  <CardFooter>
    <Button className="w-full">Upgrade</Button>
  </CardFooter>
</Card>

API Reference

Note: Every part renders a data-slot attribute (card, card-header, ...) for targeting in tests and parent selectors.

Card

The Card component displays a container with header, content, and footer.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
...props	React.ComponentProps<'div'>	-	All native div attributes (role, id, aria-*, ...) are forwarded to the rendered element.

CardHeader

Displays the card header. When a CardAction is present it switches to a two-column grid automatically.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

CardTitle

Displays the title of the card.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

CardDescription

Displays the description or content of the card header.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

CardAction

Displays an action element (like a button) positioned in the top-right corner of the header.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

CardContent

Displays the main content of the card.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

CardFooter

Displays the footer of the card - ideal for actions.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).