# Figure caption (goodtabs UI)

An image with a caption and an optional credit.

## Install

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

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/figure-caption`

## Usage

```tsx
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 | Default | 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". |

## 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

## Notes for agents

- 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

Docs: https://ui.goodtabs.co/components/figure-caption