データとフィードバック@neumorphism-ui/card

Card

Header、Title、Description、Action、Content、Footer から構成する layout コンポーネントです。root は既定で div のため、コンテンツの semantics に合った見出しやインタラクティブ要素を選択してください。

@neumorphism-ui/card

Registry JSON

プレビュー

マーケット概要

本日のウォッチリストの動きをひと目で確認できます。

リアルタイム

₩72,400+2.41%

くぼんだサーフェス

補足情報には、くぼんだ深度を使用できます。

インストール

npx shadcn@latest add @neumorphism-ui/card

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/card

Import

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

Example

<Card variant="raised">
  <CardHeader>
    <CardTitle>チームワークスペース</CardTitle>
    <CardDescription>共有 token を使って共同作業できます。</CardDescription>
    <CardAction>
      <Button size="sm">開く</Button>
    </CardAction>
  </CardHeader>
  <CardContent>8人のメンバーが参加しています。</CardContent>
  <CardFooter>たった今更新されました</CardFooter>
</Card>

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`Card`	`variant`	`"raised" \| "soft" \| "inset" \| "flat"`	`"raised"`	サーフェスの深度と border の表現を選択します。
`Card`	`children`必須	`React.ReactNode`	`—`	組み合わせ可能な Card のサブコンポーネントを配置します。
`CardAction`	`children`	`React.ReactNode`	`—`	Header の右側に配置する action または状態領域です。
`CardTitle`	`children`必須	`React.ReactNode`	`—`	既定で h3 としてレンダリングされる Card の見出しです。