卡片

显示带有页眉、内容和页脚的卡片。

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>

组合

使用以下组合来构建一个 Card：

Card
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter

大小

使用 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 { ChevronRightIcon } from "lucide-react"

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

间距

除了 size 属性外，还可以使用 --card-spacing CSS 变量来控制各个区块之间的间距以及卡片各部分的内边距。

Enter your email below to login to your account

"use client"

import * as React from "react"

使用 -mx-(--card-spacing) 设置负外边距，可以让内容延伸到边缘，同时保持与卡片内边距对齐。当边缘延伸的内容位于页脚上方时，在 CardContent 上使用 -mb-(--card-spacing) 来移除区块间距。

Review the terms before accepting the agreement.

These terms govern your use of the workspace, including access to shared documents, project files, and collaboration tools.

You are responsible for the content you upload and for ensuring that your team has the appropriate permissions to view or edit it.

We may update features or limits as the service evolves. When those changes materially affect your workflow, we will notify your workspace administrators.

By continuing, you agree to keep your account credentials secure and to follow your organization's acceptable use policies.

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 {

RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

تسجيل الدخول إلى حسابك

أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك

"use client"

import * as React from "react"

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`	-

更新日志

间距变量

如果你要从之前版本的 Card 组件升级，则需要应用以下更新以使用 --card-spacing 变量：

更新 Card 根元素的间距类。

将硬编码的间隙和垂直内边距替换为 --card-spacing，并在根元素上设置默认值和小尺寸值：

  className={cn(
-   "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+   "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
    className
  )}

更新 CardHeader 的间距类。

使用共享变量替换水平内边距和边框间距：

  className={cn(
-   "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+   "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
    className
  )}

更新 CardContent 和 CardFooter 的间距类。

使用 --card-spacing 设置内容内嵌间距和页脚内边距：

  function CardContent({ className, ...props }: React.ComponentProps<"div">) {
    return (
      <div
        data-slot="card-content"
-       className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+       className={cn("px-(--card-spacing)", className)}
        {...props}
      />
    )
  }

  className={cn(
-   "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+   "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
    className
  )}

应用这些更改后，你可以通过在 Card 上设置任意属性类中的 --card-spacing 来自定义卡片间距：

function Example() {
  return <Card className="[--card-spacing:--spacing(6)]">...</Card>
}

日历轮播图

安装用法组合大小间距图片 RTL API 参考 Card CardHeader CardTitle CardDescription CardAction CardContent CardFooter 更新日志间距变量