BaseMotion

Card

A content container for grouping related information.

Loading...
Loading code...

Installation

pnpm dlx shadcn@latest add @uitopia/card

Usage

import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardPanel,
  CardTitle,
} from "@/components/ui/card"
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardPanel>Content</CardPanel>
  <CardFooter>Footer</CardFooter>
</Card>

Comparing with shadcn

If you’re already familiar with shadcn/ui, this guide highlights the small differences and similarities so you can get started with ui/topia quickly.

Quick Checklist

  • Use CardPanel going forward; CardContent remains for legacy
ButtonCheckbox Group

On this page

Installation
Usage
Comparing with shadcn
Quick Checklist