Skip to main content

​
Overview

The Card component provides a flexible container with multiple subcomponents for building structured UI elements. It includes Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.

​
Components

​
Card

The main container component with rounded borders and shadow.
​
className
string
Additional CSS classes to apply to the card
​
ref
React.Ref<HTMLDivElement>
Ref to the underlying div element
​
children
React.ReactNode
Content to render inside the card

​
CardHeader

Container for the card’s header section with vertical spacing.
​
className
string
Additional CSS classes to apply to the header
​
ref
React.Ref<HTMLDivElement>
Ref to the underlying div element
​
children
React.ReactNode
Content to render inside the header

​
CardTitle

Displays the main title of the card with large, semibold text.
​
className
string
Additional CSS classes to apply to the title
​
ref
React.Ref<HTMLDivElement>
Ref to the underlying div element
​
children
React.ReactNode
Title text or content

​
CardDescription

Displays descriptive text with muted styling.
​
className
string
Additional CSS classes to apply to the description
​
ref
React.Ref<HTMLDivElement>
Ref to the underlying div element
​
children
React.ReactNode
Description text or content

​
CardContent

Main content area of the card with padding.
​
className
string
Additional CSS classes to apply to the content area
​
ref
React.Ref<HTMLDivElement>
Ref to the underlying div element
​
children
React.ReactNode
Content to render in the main area

​
CardFooter

Footer section with flex layout for actions or additional information.
​
className
string
Additional CSS classes to apply to the footer
​
ref
React.Ref<HTMLDivElement>
Ref to the underlying div element
​
children
React.ReactNode
Content to render in the footer

​
Usage

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@repo/ui'

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Main content of the card</p>
      </CardContent>
      <CardFooter>
        <button>Action</button>
      </CardFooter>
    </Card>
  )
}

​
Examples

​
Basic Card

<Card>
  <CardContent>
    Simple card content
  </CardContent>
</Card>

<Card>
  <CardTitle>Settings</CardTitle>
  <CardContent>
    <p>Configure your preferences</p>
  </CardContent>
  <CardFooter>
    <button>Save Changes</button>
  </CardFooter>
</Card>

​
Custom Styled Card

<Card className="max-w-md">
  <CardHeader>
    <CardTitle>Welcome</CardTitle>
    <CardDescription>Get started with your account</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your content here</p>
  </CardContent>
</Card>

​
Implementation

Source: /home/daytona/workspace/source/packages/ui/src/cardpanel/card.tsx

Build docs developers (and LLMs) love

Get started for freeTalk to us