Card

import { Button } from "@/components/ui/button"
import {
  Card,

Installation#

pnpmnpmyarnbun
bunx --bun shadcn@latest add @ondo-ui/card
Copy

Usage#

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

Copy<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Composition#

Use the following composition to build a Card:

CopyCard
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter

Examples#

Size#

Use the size="sm" prop to set the size of the card to small. The small size variant uses smaller spacing.

import { IconChevronRight } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"

Spacing#

In addition to the size prop, you can use the --card-spacing CSS variable to control the spacing between sections and the inset of card parts.

"use client"

import * as React from "react"

Use negative margins with -mx-(--card-spacing) to make content go edge to edge while keeping it aligned with the card inset. When the edge-to-edge content sits above a footer, use -mb-(--card-spacing) on CardContent to remove the section gap.

Image#

Add an image before the card header to create a card with an image.

Featured

Design systems meetup

A practical talk on component APIs, accessibility, and shipping faster.

View Event

Copy

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {

View Code

API reference#

Card#

The Card component is the root container for card content.

CardHeader#

The CardHeader component is used for a title, description, and optional action.

CardTitle#

The CardTitle component is used for the card title.

CardDescription#

The CardDescription component is used for helper text under the title.

CardAction#

The CardAction component places content in the top-right of the header (for example, a button or a badge).

CardContent#

The CardContent component is used for the main card body.

CardFooter#

The CardFooter component is used for actions and secondary content at the bottom of the card.