Things

The Image Card component is a specialized card designed for displaying images with captions. It features aspect ratio controls and optimized image display. Built from scratch using React and native HTML elements. No dependencies on any UI library.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/image-card.json

Usage

tsx

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

function MyComponent() {
  return (
    <ImageCard
      src="/path/to/image.jpg"
      alt="Description"
      caption="Image"
    />
  )
}

Examples

Default

Image

With Compound Components

Beautiful Cherry Blossoms

Square Aspect Ratio

Square Image

Landscape Aspect Ratio

Landscape Image