Figure caption

An image with a caption and an optional credit.

npx shadcn@latest add https://ui.goodtabs.co/r/figure-caption.json

With the @goodtabs namespace in components.json: npx shadcn@latest add @goodtabs/figure-caption

Rows of pale arches receding into shadow — Arches study, first pass.Studio render

A caption on the left and a mono credit on the right.

No credit

Fine parallel lines bending across a grey field — Line density follows the grid.

Only the caption under the image.

Usage

import { FigureCaption } from "@/components/ui/figure-caption"

<FigureCaption src="/shot.jpg" alt="The dashboard" caption="The new dashboard." credit="Photo by Ada" />

Props

Prop	Type	Description
src	string	Image URL.
alt	string	Describes the image for people who cannot see it.
caption	string	The caption under the image.
credit	string	Optional credit shown after the caption.
maxWidth	string	Constrain the figure, for example "480px".

Source

figure-caption/figure-caption.tsx

import * as React from "react";
import { cn } from "@/lib/utils";

type FigureCaptionProps = Omit<React.ComponentProps<"figure">, "children"> & {
  src: string;
  /** Describe the image for people who cannot see it. */
  alt: string;
  caption: string;
  /** Optional credit shown after the caption, for example a photographer. */
  credit?: string;
  /** Constrain the figure, for example "480px". */
  maxWidth?: string;
};

/** An image with a caption and an optional credit, in a real figure element. */
export function FigureCaption({ src, alt, caption, credit, maxWidth, className, style, ...props }: FigureCaptionProps) {
  return (
    <figure className={cn("m-0 w-full", className)} style={{ maxWidth, ...style }} {...props}>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img src={src} alt={alt} loading="lazy" className="block aspect-3/2 w-full rounded-lg border object-cover" />
      <figcaption className="mt-2 flex flex-wrap items-baseline justify-between gap-x-3 text-xs/5 text-muted-foreground">
        <span className="text-foreground/80">{caption}</span>
        {credit && <span className="font-mono">{credit}</span>}
      </figcaption>
    </figure>
  );
}

For AI agents

Hand your agent this page, the markdown at /components/figure-caption/prompt.md, or the Copy AI prompt button above.

When to use

Editorial images in articles and case studies
Any image that needs attribution

When not to use

Decorative images, which want an empty alt and no caption
Galleries, which want a grid

Agent notes

Server component using figure and figcaption
Plain img with lazy loading so it installs without next/image
The image is 3 by 2 and cropped with object-cover