Card

情報をグループ化して表示するカードコンポーネント。

Installation

npx shadcn@latest add https://kasumi-ui.vercel.app/r/card.json

Usage

日程調整

参加可能な日時を選択してください。

候補日: 3月15日（土）、3月16日（日）

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

<Card>
<CardHeader>
  <CardTitle>日程調整</CardTitle>
  <CardDescription>参加可能な日時を選択してください。</CardDescription>
</CardHeader>
<CardContent>
  <p>候補日: 3月15日（土）、3月16日（日）</p>
</CardContent>
<CardFooter>
  <Button size="sm">回答する</Button>
</CardFooter>
</Card>

Header Only

通知設定

メールやプッシュ通知の設定を管理します。

<Card>
<CardHeader>
  <CardTitle>通知設定</CardTitle>
  <CardDescription>メールやプッシュ通知の設定を管理します。</CardDescription>
</CardHeader>
</Card>

Content Only

シンプルなカードコンテンツ。CardHeader を省略してコンテンツだけ表示することもできます。

<Card>
<CardContent className="pt-6">
  <p>シンプルなカードコンテンツ。</p>
</CardContent>
</Card>

Props

各サブコンポーネント（Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter）はすべて className を受け取り、外部からスタイルを上書きできます。

Prop	Type	Default	Description
className	string	-	追加のCSSクラス