Neumorphism UI

Image Card

画像と説明を、一つの独立したコンテンツとして提示する場合に使います。

プレビュー

ワークスペースの表紙

表紙画像に代替テキストと短いデザインシステムの説明を添えます。

プレビューを読み込んでいます。

インストール

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

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

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

Registry JSON

使い方

実際の画像 URL と意味のある alt を指定し、必要なら caption で文脈を添えます。画像の配信と最適化はアプリで管理します。

import { ImageCard } from "@/components/ui/image-card";

export default function Example() {
  return <ImageCard src="/workspace.jpg" alt="A shared workspace" caption="Our design studio" />;
}

API リファレンス

標準の img と figure/figcaption の意味を保ったまま、画像と説明をニューモーフィズム surface にまとめます。画像の読み込みや最適化はアプリやフレームワーク側が担当します。

コンポーネントプロパティ型デフォルト説明
ImageCardsrc必須string—表示する画像 URL です。
ImageCardalt必須string—画像の目的を説明する代替テキストです。
ImageCardcaptionReactNode—任意の figcaption コンテンツです。
ImageCardimageClassNamestring—既定の aspect と object-fit スタイルを拡張します。
ImageCardfigure propsReact.ComponentProps<"figure">—figure に標準 HTML 属性を渡します。

アクセシビリティ

  • 01

    情報を伝える画像には意味のある alt を、装飾画像には空の alt を使用します。

  • 02

    caption は画像に関連する説明に使い、無関係な操作やナビゲーションの代替にしません。

  • 03

    画像最適化が必要なフレームワークでは、インストール後の source を編集して画像コンポーネントを置き換えられます。