Card

EmptyBadge

Surface for grouping related content with optional media.

Source
S

Shopify

Start and grow your e-commerce business

f

fal

Start and grow your e-commerce business

Installation

pnpm dlx shadcn@latest add https://yea-ui.vercel.app/r/card.json

Usage

import { Card, CardDescription, CardHeader, CardImage, CardTitle } from "@/components/ui/card"
<Card>
  <CardImage className="aspect-[4/3]" />
  <CardHeader>
    <div className="min-w-0">
      <CardTitle>Shopify</CardTitle>
      <CardDescription>Start and grow your business</CardDescription>
    </div>
  </CardHeader>
</Card>

API reference

Card

Rounded secondary surface with 16px padding and gap.

CardImage

Media slot with an inset shadow overlay. Set the aspect ratio with a class.

CardHeader

Horizontal row for an avatar and the title block.

CardTitle

Single-line title that truncates.

CardDescription

Single-line secondary text that truncates.