Neumorphism UI

Card

要約、設定、コンテンツと関連操作を独立したまとまりとして示す場合に使います。

プレビュー

市場の概要と inset の詳細

ライブ表示と詳細ボタンのある raised カードを、目標進捗を含む inset カードと比較します。

マーケット概要

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

リアルタイム
₩72,400+2.41%

くぼんだサーフェス

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

x

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/card

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

市場の概要と inset の詳細

npx shadcn@latest add @neumorphism-ui/badge @neumorphism-ui/button @neumorphism-ui/card @neumorphism-ui/progress
Registry JSON

使い方

CardHeader に CardTitle と CardDescription を置きます。主な内容は CardContent、補助操作や情報は CardAction または CardFooter に配置します。

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

export default function Example() {
  return (
    <Card>
      <CardHeader><CardTitle>Team workspace</CardTitle></CardHeader>
      <CardContent>Invite your team and start a project.</CardContent>
    </Card>
  );
}

API リファレンス

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

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

アクセシビリティ

  • 01

    Card は div であり、landmark や article role を自動的には追加しません。

  • 02

    h3 がページの見出し階層に合わない場合は、CardTitle の代わりに適切な見出し要素を使用してください。

  • 03

    Card 全体をクリック可能にする場合は、内部に別の button や link を入れ子にしないでください。