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

Image Card

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

@neumorphism-ui/image-card

Registry JSON

プレビュー

柔らかな青いグラデーションのワークスペースカバー — Design system workspace · 12 components

インストール

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

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

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

使い方

Import

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

Example

export default function Example() {
  return <ImageCard src="/workspace-cover.jpg" alt="柔らかな青いグラデーションのワークスペースカバー" caption="Design system workspace · 12 components" />;
}

API リファレンス

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

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ