120k
New

卡片

PreviousNext

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

Base UIRadix UI
Login to your account
Enter your email below to login to your account
Forgot your password?
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 变量来控制各部分之间的间距以及卡片各部分的内边距。

Login to your account
Enter your email below to login to your account
Forgot your password?
"use client"

import * as React from "react"

使用 -mx-(--card-spacing) 负外边距让内容铺满边缘，同时保持与卡片内边距对齐。当贴边内容位于底部栏上方时，在 CardContent 上使用 -mb-(--card-spacing) 来移除分区间隔。

Terms of Service
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,

图片

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

Event cover
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"
classNamestring-

CardHeader

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

属性类型默认值
classNamestring-

CardTitle

CardTitle 组件用于卡片标题。

属性类型默认值
classNamestring-

CardDescription

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

属性类型默认值
classNamestring-

CardAction

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

属性类型默认值
classNamestring-

CardContent

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

属性类型默认值
classNamestring-

CardFooter

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

属性类型默认值
classNamestring-

更新日志

间距变量

如果你正在从旧版本的 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 上设置任意属性类来定制卡片间距：

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