卡片

显示带有头部、内容和底部的卡片。

Enter your email below to login to your account

import { Button } from "@/components/ui/button"
import {
  Card,

安装


pnpm dlx shadcn@latest add card

用法

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

<Card>
  <CardHeader>
    <CardTitle>卡片标题</CardTitle>
    <CardDescription>卡片描述</CardDescription>
    <CardAction>卡片操作</CardAction>
  </CardHeader>
  <CardContent>
    <p>卡片内容</p>
  </CardContent>
  <CardFooter>
    <p>卡片底部</p>
  </CardFooter>
</Card>

示例

尺寸

使用 size="sm" 属性将卡片尺寸设置为小。小尺寸使用较小的间距。

Scheduled reports

Weekly snapshots. No more manual exports.

Choose a schedule (daily, or weekly).
Send to channels or specific teammates.
Include charts, tables, and key metrics.

import { Button } from "@/components/ui/button"
import {
  Card,

图片

在卡片头部之前添加图片，创建带图片的卡片。

Featured

Design systems meetup

A practical talk on component APIs, accessibility, and shipping faster.

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {

API 参考

Card

Card 组件是卡片内容的根容器。

属性	类型	默认值
`size`	`"default" \| "sm"`	`"default"`
`className`	`string`	-

CardHeader

CardHeader 组件用于标题、描述和可选操作。

属性	类型	默认值
`className`	`string`	-

CardTitle

CardTitle 组件用于卡片标题。

属性	类型	默认值
`className`	`string`	-

CardDescription

CardDescription 组件用于标题下方的辅助文本。

属性	类型	默认值
`className`	`string`	-

CardAction

CardAction 组件将内容放置在头部右上角（例如按钮或徽章）。

属性	类型	默认值
`className`	`string`	-

CardContent

CardContent 组件用于卡片的主要内容区域。

属性	类型	默认值
`className`	`string`	-

CardFooter

CardFooter 组件用于卡片底部的操作和次要内容。

属性	类型	默认值
`className`	`string`	-

Calendar 轮播图 Carousel

安装用法示例尺寸图片 API 参考 Card CardHeader CardTitle CardDescription CardAction CardContent CardFooter