Yami

Card

Displays a card with header, content, and footer.

Create project
Deploy your new project in one click.
Frame content with hairline borders.

Installation

Add the card component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/card.json

Usage

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

<Card className="w-72">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one click.</CardDescription>
  </CardHeader>
  <CardContent>Frame content with hairline borders.</CardContent>
  <CardFooter className="gap-2">
    <Button variant="outline" className="flex-1">Cancel</Button>
    <Button className="flex-1">Deploy</Button>
  </CardFooter>
</Card>

Examples

With action

CardHeader + CardAction
Notifications
You have 3 unread messages.
Card actions sit in the top-right of the header.

Code

import { SettingsIcon } from "lucide-react"

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

<Card className="w-72">
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
    <CardAction>
      <Button variant="ghost" size="icon-sm" aria-label="Settings">
        <SettingsIcon />
      </Button>
    </CardAction>
  </CardHeader>
  <CardContent>Card actions sit in the top-right of the header.</CardContent>
</Card>

Content only

No header or footer
A card can be just a bordered content surface.

Code

import { Card, CardContent } from "@/components/ui/card"

<Card className="w-72">
  <CardContent>
    A card can be just a bordered content surface.
  </CardContent>
</Card>