Chuyển tới nội dung
werewolf-ui
Component

Card

Bordered surface for grouping related content. Uses radius-container and a border; no shadow (shadows are for floating layers only).

Xem trước

Project

Last edited 2 hours ago.

Design tokens and components for vibe coders.

Props

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

<Card>
  <CardHeader>
    <CardTitle>Project</CardTitle>
    <CardDescription>Last edited 2 hours ago.</CardDescription>
  </CardHeader>
  <CardContent>Design tokens and components for vibe coders.</CardContent>
  <CardFooter>
    <Button variant="secondary">Cancel</Button>
    <Button>Save</Button>
  </CardFooter>
</Card>

Cách dùng

Khi nào dùng

  • Group related content about one subject, such as a project with its title, a short description and its actions.
  • Give the group a header, a body and at most one main action, in the footer.

Khi nào không dùng

  • A single line of text or a lone value. Use a list row.
  • Content that is already inside a card. Use a divider or spacing instead.
  • A surface that acts as one button. Card is not a button; to make the whole card clickable, stretch one link over it and put no other buttons or links inside.

Ví dụ

Default

Project

Last edited 2 hours ago.

Design tokens and components for vibe coders.
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>Project</CardTitle>
    <CardDescription>Last edited 2 hours ago.</CardDescription>
  </CardHeader>
  <CardContent>Design tokens and components for vibe coders.</CardContent>
  <CardFooter>
    <Button variant="secondary">Cancel</Button>
    <Button>Save</Button>
  </CardFooter>
</Card>

With action

Project

Last edited 2 hours ago.

Design tokens and components for vibe coders.
import { Button } from "@/components/ui/button"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>Project</CardTitle>
    <CardDescription>Last edited 2 hours ago.</CardDescription>
    <CardAction>
      <Button variant="secondary" size="sm">Share</Button>
    </CardAction>
  </CardHeader>
  <CardContent>Design tokens and components for vibe coders.</CardContent>
</Card>

Nên và không nên

Nên

  • Use Card to group related content. Give it one primary action at most, in the footer.
  • To make the whole card clickable, stretch one link over it, use color-overlay-hover on hover and show the focus ring on the card. Then don't put any other button inside.
  • Use a border, not a shadow. Shadows are for menus, popovers and dialogs.

Không nên

  • Don't put a card inside a card. Use a divider (color-border) or spacing instead.
  • Don't use a card for a single line of text or a lone value. Use a list row.
  • Don't restyle the fill through className. If the surface color is wrong, open an issue instead of overriding it.

Props

Slot

TênBắt buộcMô tả
headerkhôngOptional header: title, description, and an optional CardAction.
contentkhôngMain body content.
footerkhôngOptional footer actions or meta.

Cấu tạo

PhầnMô tả
rootThe card surface: border, radius-container, background-surface.
headerTop block for title and description. Becomes a two-column grid when it holds an action.
actionOptional slot at the top right of the header (a button or menu), next to the title and description.
titlePrimary label of the card.
descriptionSupporting text under the title.
contentMain body of the card.
footerActions or meta row at the bottom.

Khả năng truy cập

Role: generic

  • Root is a plain div with no role. If a card needs to be announced as a group, add role="group" and aria-labelledby pointing at the CardTitle at the call site.
  • Card is not interactive by itself. Put buttons and links inside; do not make the whole card a button.
  • If the whole card is clickable, use one link stretched over the card (an ::after on the link with absolute inset-0; the root is relative) and no other buttons or links inside.
  • Title should be a heading level that fits the page outline (h2 or h3 in most views).

Cài đặt

npx shadcn add https://werewolf-ui.vercel.app/r/card.json

Lệnh này thêm luôn styles/werewolf.css, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau @import "tailwindcss", với đường dẫn tính từ file CSS đó (từ app/globals.css là @import "../styles/werewolf.css").