Image Card
Keeps native img and figure/figcaption semantics while grouping the image and description on a neumorphic surface. Image loading and optimization remain application or framework concerns.
@neumorphism-ui/image-cardPreview
'/%3E%3C/svg%3E)
Installation
Installation: image-card
npx shadcn@latest add @neumorphism-ui/image-cardThe CLI resolves npm dependencies, base tokens, utilities, and component source in order.
New to this Registry? Set up the namespace before continuing.
Usage
Import
Image Card import code
import { ImageCard } from "@/components/ui/image-card";Example
Image Card usage code
export default function Example() {
return <ImageCard src="/workspace-cover.jpg" alt="Workspace cover with a soft blue gradient" caption="Design system workspace · 12 components" />;
}API Reference
| Component | Prop | Type | Default | Description |
|---|---|---|---|---|
ImageCard | srcrequired | string | — | The image URL to render. |
ImageCard | altrequired | string | — | Alternative text that explains the image purpose. |
ImageCard | caption | ReactNode | — | Optional figcaption content. |
ImageCard | imageClassName | string | — | Extends the default aspect and object-fit styling. |
ImageCard | figure props | React.ComponentProps<"figure"> | — | Passes standard HTML attributes to the figure. |
Accessibility
- 01
Give informative images meaningful alt text and use an empty alt for decorative images.
- 02
Use the caption for information related to the image, not as a substitute for unrelated controls or navigation.
- 03
Frameworks that need an optimized image component can edit the installed source and replace the native img.