Caroa UI

Card

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

インポート

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@caroainc/ui-components'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@caroainc/ui-components/card'

基本的な使い方

Loading...
<Card>
  <CardHeader>
    <CardTitle>カードタイトル</CardTitle>
    <CardDescription>カードの説明文がここに入ります。</CardDescription>
  </CardHeader>
  <CardContent>
    <p>カードのメインコンテンツ</p>
  </CardContent>
  <CardFooter>
    <Button>アクション</Button>
  </CardFooter>
</Card>

バリアント

Loading...
<Card variant="outline">outline（デフォルト）</Card>
<Card variant="filled">filled</Card>
<Card variant="ghost">ghost</Card>

シンプルなカード

シンプルなカードコンテンツ

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

実際の使用例

フォームカード

Loading...
<Card className="w-[380px]">
  <CardHeader>
    <CardTitle>ログイン</CardTitle>
    <CardDescription>アカウントにログインしてください</CardDescription>
  </CardHeader>
  <CardContent className="space-y-4">
    <div className="space-y-2">
      <Label htmlFor="email">メールアドレス</Label>
      <Input id="email" type="email" placeholder="[email protected]" />
    </div>
    <div className="space-y-2">
      <Label htmlFor="password">パスワード</Label>
      <Input id="password" type="password" />
    </div>
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button variant="outline">キャンセル</Button>
    <Button variant="primary">ログイン</Button>
  </CardFooter>
</Card>

統計カード

Loading...
<Card>
  <CardContent className="p-6">
    <div className="flex items-center justify-between">
      <div>
        <p className="text-sm text-muted-foreground">総売上</p>
        <p className="text-2xl font-bold">¥1,234,567</p>
      </div>
      <Icon name="TrendingUp" className="text-success" size="lg" />
    </div>
  </CardContent>
</Card>

ユーザープロフィールカード

Loading...
<Card>
  <CardHeader className="flex flex-row items-center gap-4">
    <Avatar>
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
    <div>
      <CardTitle>John Doe</CardTitle>
      <CardDescription>[email protected]</CardDescription>
    </div>
  </CardHeader>
  <CardContent>
    {/* ... */}
  </CardContent>
  <CardFooter>
    <Button variant="outline" className="w-full">プロフィールを編集</Button>
  </CardFooter>
</Card>

Props

PropTypeDefaultDescription
variant'outline' | 'filled' | 'ghost''outline'カードのスタイルバリアント（既存API互換のためデフォルトはoutline。.claude/rules/components.mdの新規コンポーネント原則=baseはCardには適用されていない既存例外）
classNamestring-追加のCSSクラス

Previous

Calendar

Next

Chart

On this page