Neumorphism UI

Image Card

Use ImageCard to present an image and its caption as one self-contained piece of content.

Preview

Workspace cover

Pair a workspace-cover image with descriptive alternative text and a short design-system caption.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

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

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Supply a real image source and useful alt text, then add a caption when context is needed. The application owns image delivery and optimization.

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 Reference

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.

ComponentPropTypeDefaultDescription
ImageCardsrcrequiredstring—The image URL to render.
ImageCardaltrequiredstring—Alternative text that explains the image purpose.
ImageCardcaptionReactNode—Optional figcaption content.
ImageCardimageClassNamestring—Extends the default aspect and object-fit styling.
ImageCardfigure propsReact.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.