Image Card

Use Image Card when an image and its caption form one piece of content. It is a default export. The caption also supplies the image alternative text, so use a meaningful description rather than a filename.

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

export default function ImageCardDemo() {
  return (
    <ImageCard
      caption="neobrutal-ui documentation preview"
      imageUrl="/preview.png"
      className="w-full max-w-sm [&_img]:aspect-auto"
    />
  );
}

#Installation

Complete the base setup, then install or copy the source:

import { cn } from "@/lib/utils";

type Props = {
  imageUrl: string;
  caption: string;
  className?: string;
};

export default function ImageCard({ imageUrl, caption, className }: Props) {
  return (
    <figure
      className={cn(
        "w-[250px] overflow-hidden rounded-base border-2 border-border bg-main font-base shadow-shadow",
        className,
      )}
    >
      <img className="w-full aspect-4/3 object-cover" src={imageUrl} alt={caption} />
      <figcaption className="border-t-2 text-main-foreground border-border p-4">
        {caption}
      </figcaption>
    </figure>
  );
}

#Usage

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

export default function WorkspaceImage() {
  return (
    <ImageCard
      imageUrl="/images/workspace.jpg"
      caption="The shared studio workspace"
      className="w-full max-w-sm"
    />
  );
}

Add your own /images/workspace.jpg asset. The component neither uploads nor optimizes images.

#API reference

#Accessibility

Choose a caption explaining the image. This component does not expose independent alt text or a decorative-image mode; adapt the copied source when those semantics are needed. The image fills a 4:3 area using object-cover, so verify that cropping preserves the important subject. Keep the original source asset accessible and provide a useful fallback in applications that load remote images.