卡片

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

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" 属性将卡片尺寸设置为小。小尺寸变体使用更小的间距。

Small Card

This card uses the small size variant.

The card component supports a size prop that can be set to "sm" for a more compact appearance.

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

间距

除了 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 上设置任意属性类来定制卡片间距：

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

日历 Calendar 轮播图

安装使用方法组合示例尺寸间距图片 RTL API 参考 Card CardHeader CardTitle CardDescription CardAction CardContent CardFooter 更新日志间距变量