---
title: Tile
description: "Los Tiles muestran previews con fondo de patrón estilizado y área de imagen destacada, perfectos para integraciones, plantillas o galerías visuales."
---

Los Tiles muestran previews con imagen en primer plano y fondos con patrones. Úsalos en lugar de Cards cuando una captura de pantalla o un logotipo importa más que el texto — páginas de integraciones, galerías de plantillas y showcases visuales.

Las capturas de pantalla muestran la interfaz en inglés.

Usa Tiles cuando:
- Las **previews visuales** son más importantes que las descripciones de texto
- **Mostrar integraciones** con logotipos o capturas de pantalla
- **Construir galerías** de plantillas, temas o ejemplos
- **Mostrar capturas de pantalla** con títulos y descripciones opcionales

## Uso

```mdx
<Tile href="/components/tabs" title="Tabs Component">
  <img src="/images/tabs-preview.png" alt="Tabs" />
</Tile>
```

## Tile básico

Un tile simple con una imagen de preview y título:

<Tile href="/es/components/tabs" title="Tabs Component">
  <img src="/images/tabs-preview.webp" alt="Tabs" />
</Tile>

```mdx
<Tile href="/components/tabs" title="Tabs Component">
  <img src="/images/tabs-preview.webp" alt="Tabs" />
</Tile>
```

## Tile con descripción

Agrega una descripción para más contexto:

<Tile href="/es/components/tabs" title="Tabs Component" description="Organiza el contenido en secciones con pestañas intercambiables">
  <img src="/images/tabs-preview.webp" alt="Tabs" />
</Tile>

```mdx
<Tile
  href="/components/tabs"
  title="Tabs Component"
  description="Organize content into switchable tabbed sections"
>
  <img src="/images/tabs-preview.webp" alt="Tabs" />
</Tile>
```

## Tile vs Card

| Característica | Tile | Card |
|---------|------|------|
| Énfasis visual | Imagen en primer plano con fondo de patrón | Ícono + título + descripción |
| Ideal para | Integraciones, plantillas, galerías | Navegación, listas de funciones, CTAs |
| Manejo de imagen | Área de preview grande | Ícono pequeño |
| Contenido de texto | Título + descripción opcional | Título + descripción + ícono |

**Regla general:** Si tienes una captura de pantalla o un logotipo para mostrar, usa Tile. Si el contenido es principalmente texto, usa Card.

## Diseño en cuadrícula

Usa `Columns` para mostrar múltiples Tiles en una cuadrícula:

<Columns cols={3}>
  <Tile href="https://slack.com" title="Slack">
    <img src="/images/tabs-preview.png" alt="Slack" />
  </Tile>
  <Tile href="https://github.com" title="GitHub">
    <img src="/images/tabs-preview.png" alt="GitHub" />
  </Tile>
  <Tile href="https://stripe.com" title="Stripe">
    <img src="/images/tabs-preview.png" alt="Stripe" />
  </Tile>
</Columns>

## Imágenes en modo oscuro

Usa clases de Tailwind para mostrar imágenes diferentes en modo claro y oscuro:

```mdx
<Tile href="/customization/theming" title="Theming">
  <img src="/images/logo-light.webp" alt="Theme" class="dark:hidden" noStyle />
  <img src="/images/logo-dark.webp" alt="Theme" class="hidden dark:block" noStyle />
</Tile>
```

El atributo `noStyle` evita el estilo de imagen predeterminado para que las clases de modo oscuro funcionen correctamente.

## Props

<ParamField name="href" type="string" required>
  La URL a la que enlaza el tile. Admite tanto rutas internas (`/docs/intro`) como URLs externas (`https://example.com`). Los enlaces externos se abren en una nueva pestaña.
</ParamField>

<ParamField name="title" type="string">
  Texto del título que se muestra debajo del área de preview.
</ParamField>

<ParamField name="description" type="string">
  Texto de descripción opcional debajo del título.
</ParamField>

<ParamField name="children" type="ReactNode">
  Contenido a mostrar en el área de preview. Normalmente imágenes o SVGs.
</ParamField>

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Descripción general de componentes" icon="puzzle-piece" href="/es/components/overview">
    Explora todos los componentes disponibles
  </Card>
  <Card title="Conceptos básicos de MDX" icon="file-code" href="/es/content/mdx-basics">
    Aprende a usar componentes en MDX
  </Card>
</Columns>