125k

Card

PreviousNext

ヘッダー、コンテンツ、フッターを含むカードを表示します。

BaseRadixReact Aria
アカウントにログイン
アカウントにログインするには、以下にメールアドレスを入力してください
パスワードをお忘れですか？
import { Button } from "@/components/ui/aria/button"
import {
  Card,

インストール

pnpm dlx shadcn@latest add card

使用法

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

構成

Card を構築するには、次の構成を使用します。

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

サイズ

size="sm" プロップを使用して、カードのサイズを小さく設定します。小さいサイズのバリエーションでは、より狭い間隔が使用されます。

スケジュールレポート
週次スナップショット。手動でのエクスポートはもう不要です。
  • スケジュールを選択（毎日または毎週）。
  • チャンネルや特定のチームメンバーに送信。
  • グラフ、表、主要な指標を含める。
import { ChevronRightIcon } from "lucide-react"

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

間隔

size プロップに加えて、--card-spacing CSS 変数を使用して、セクション間の間隔とカード パーツの差し込みを制御できます。

アカウントにログイン
アカウントにログインするには、以下にメールアドレスを入力してください
パスワードをお忘れですか？
"use client"

import * as React from "react"

-mx-(--card-spacing) で負のマージンを使用すると、コンテンツをカードの差し込み口と揃えたまま端から端まで移動させることができます。端から端までのコンテンツがフッターの上にある場合は、CardContent で -mb-(--card-spacing) を使用してセクションのギャップを削除します。

利用規約
同意する前に、規約の内容をご確認ください。

本規約は、共有ドキュメント、プロジェクトファイル、共同作業ツールへのアクセスを含む、ワークスペースのご利用に適用されます。

アップロードするコンテンツについてはご自身に責任があり、チームメンバーがそれを閲覧・編集するための適切な権限を持っていることを確認する責任も負います。

サービスの発展に伴い、機能や利用制限を更新することがあります。それらの変更がワークフローに重大な影響を与える場合は、ワークスペースの管理者へ通知します。

継続してご利用いただくことで、アカウントの認証情報を安全に管理し、所属組織の利用規約を遵守することに同意したものとみなされます。

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

画像

画像付きのカードを作成するには、カード ヘッダーの前に画像を追加します。

イベントのカバー画像
注目
デザインシステム勉強会
コンポーネントAPI、アクセシビリティ、開発スピードの向上について実践的にお話しします。
import { Badge } from "@/components/ui/aria/badge"
import { Button } from "@/components/ui/aria/button"
import {

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

تسجيل الدخول إلى حسابك
أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك
نسيت كلمة المرور؟
"use client"

import * as React from "react"

API リファレンス

カード

Card コンポーネントは、カード コンテンツのルート コンテナーです。

プロップタイプデフォルト
size"default" | "sm""default"
classNamestring-

CardHeader

CardHeader コンポーネントは、タイトル、説明、およびオプションのアクションに使用されます。

プロップタイプデフォルト
classNamestring-

CardTitle

CardTitle コンポーネントはカードのタイトルに使用されます。

プロップタイプデフォルト
classNamestring-

CardDescription

CardDescription コンポーネントは、タイトルの下のヘルパー テキストに使用されます。

プロップタイプデフォルト
classNamestring-

CardAction

CardAction コンポーネントは、ヘッダーの右上にコンテンツ (ボタンやバッジなど) を配置します。

プロップタイプデフォルト
classNamestring-

CardContent

CardContent コンポーネントはメイン カード本体に使用されます。

プロップタイプデフォルト
classNamestring-

カードフッター

CardFooter コンポーネントは、カード下部のアクションと二次コンテンツに使用されます。

プロップタイプデフォルト
classNamestring-

変更ログ

間隔変数

Card コンポーネントの以前のバージョンからアップグレードする場合は、--card-spacing 変数を使用するために次の更新を適用する必要があります。

カードのルート間隔クラスを更新します。

ハードコーディングされたギャップと垂直パディングを --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>
}