数据与反馈@neumorphism-ui/image-card

Image Card

保留原生 img 与 figure/figcaption 语义，并用新拟态表面组合图片和说明。图片加载与优化由应用或框架负责。

@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`	`—`	扩展默认的宽高比和 object-fit 样式。
`ImageCard`	`figure props`	`React.ComponentProps<"figure">`	`—`	向 figure 传递标准 HTML 属性。

预览

安装

用法

Import

Example

API 参考

无障碍