---
title: Frame
description: A styled image wrapper with optional caption and click-to-zoom.
url: http://localhost:3040/components/frame
---

# Frame

A styled image wrapper with optional caption and click-to-zoom.

`` wraps images and other media in a rounded, bordered container. By default, images are zoomable — click to view at full size.

## Basic usage

  <img src="/images/image1.jpg" alt="Dashboard overview" />

```mdx

  <img src="/images/dashboard.png" alt="Dashboard overview" />

```

## With caption

  <img src="/images/image2.jpg" alt="Analytics dashboard" />

```mdx

  <img src="/images/analytics.png" alt="Analytics dashboard" />

```

## Disable zoom

Set `zoom={false}` when the image is purely decorative or you want to prevent the lightbox from opening:

  <img src="/images/image3.jpg" alt="Architecture diagram" />

```mdx

  <img src="/images/diagram.png" alt="Architecture diagram" />

```

## Light/dark variants

Wrap two images with conditional `className` to swap between light and dark mode:

```mdx

  <img className="block dark:hidden" src="/images/light.png" alt="Light mode" />
  <img className="hidden dark:block" src="/images/dark.png" alt="Dark mode" />

```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `caption` | `string` | — | Text shown below the frame |
| `zoom` | `boolean` | `true` | Enable click-to-zoom on the content |