---
title: Frame
description: Un contenedor de imagen estilizado con título opcional y zoom al hacer clic.
url: https://docs.thally.io/es/components/frame
---

# Frame

Un contenedor de imagen estilizado con título opcional y zoom al hacer clic.

`<Frame>` envuelve imágenes y otros medios en un contenedor redondeado y con borde. Por defecto, las imágenes son ampliables — haz clic para verlas a tamaño completo.

## Uso básico

  <img src="/images/image1.jpg" alt="Vista general del panel" />

```mdx
<Frame>
  <img src="/images/image1.jpg" alt="Vista general del panel" />
</Frame>
```

## Con título

  <img src="/images/image2.jpg" alt="Panel de análisis" />

```mdx
<Frame caption="Una vista panorámica — añade cualquier descripción debajo de tu imagen.">
  <img src="/images/image2.jpg" alt="Panel de análisis" />
</Frame>
```

## Desactivar zoom

Establece `zoom={false}` cuando la imagen sea meramente decorativa o quieras evitar que se abra el visor:

  <img src="/images/image3.jpg" alt="Diagrama de arquitectura" />

```mdx
<Frame zoom={false}>
  <img src="/images/image3.jpg" alt="Diagrama de arquitectura" />
</Frame>
```

## Variantes claro/oscuro

Envuelve dos imágenes con `className` condicional para alternar entre modo claro y oscuro:

  <img className="block dark:hidden" src="/images/image1.jpg" alt="Light mode" />
  <img className="hidden dark:block" src="/images/image2.jpg" alt="Dark mode" />

```mdx
<Frame>
  <img className="block dark:hidden" src="/images/image1.jpg" alt="Light mode" />
  <img className="hidden dark:block" src="/images/image2.jpg" alt="Dark mode" />
</Frame>
```

## Propiedades

| Propiedad | Tipo | Valor por defecto | Descripción |
|---|---|---|---|
| `caption` | `string` | — | Texto mostrado debajo del marco |
| `zoom` | `boolean` | `true` | Activar zoom al hacer clic sobre el contenido |