---
title: View
description: Crea documentación que se adapta a la elección de framework o lenguaje del lector. Secciones enteras cambian según la selección del usuario.
---

Los Views te permiten crear documentación que se adapta a la elección de framework o lenguaje del lector. A diferencia de las Tabs (que muestran múltiples opciones en paralelo), los Views ocultan completamente el contenido no seleccionado, creando una experiencia más limpia cuando secciones enteras difieren entre frameworks.

Usa Views cuando:
- **Secciones enteras de la página** difieren según el framework (no solo fragmentos de código)
- **Tutoriales** tienen pasos diferentes para distintas tecnologías
- **Guías de inicio** varían significativamente según la plataforma

<Tip>
Para ejemplos de código que difieren por lenguaje, usa [CodeGroup](/es/components/code-group). Para procedimientos con diferencias menores, usa [Tabs](/es/components/tabs). Usa Views cuando **secciones enteras** del contenido son específicas de un framework.
</Tip>

## Uso básico

Crea views para diferentes lenguajes:

<View title="JavaScript" icon="js">
  Este contenido solo es visible cuando se selecciona JavaScript.

  ```javascript
  console.log("Hello from JavaScript!");
  ```
</View>

<View title="Python" icon="python">
  Este contenido solo es visible cuando se selecciona Python.

  ```python
  print("Hello from Python!")
  ```
</View>

````mdx
<View title="JavaScript" icon="js">
  This content is only visible when JavaScript is selected.

  ```javascript
  console.log("Hello from JavaScript!");
  ```
</View>

<View title="Python" icon="python">
  This content is only visible when Python is selected.

  ```python
  print("Hello from Python!")
  ```
</View>
````

## Cómo funciona

Cuando añades componentes View a una página:

1. Aparece un selector desplegable en la parte superior del contenido
2. Los usuarios pueden cambiar entre views usando el desplegable
3. Solo es visible el contenido del view seleccionado

## View vs Tabs vs CodeGroup

| Componente | Ideal para | Alcance |
|-----------|----------|-------|
| **View** | Secciones enteras que difieren por framework | Cambio de contenido a nivel de página |
| **Tabs** | Comparaciones rápidas, gestores de paquetes | Cambio de contenido en línea |
| **CodeGroup** | La misma operación en múltiples lenguajes | Solo bloques de código |

**Ejemplos de escenarios:**
- "Instalar con npm vs yarn" → **Tabs** (diferencia pequeña)
- "fetch en JavaScript vs requests en Python" → **CodeGroup** (comparación de código)
- "Tutorial de React vs tutorial de Vue" → **View** (sección completa difiere)

## Props

<ParamField name="title" type="string" required>
  El título que se muestra en el selector desplegable. Debe ser único dentro de la página.
</ParamField>

<ParamField name="icon" type="string">
  Un icono de Font Awesome, un icono de Lucide, una URL a un icono, o una ruta relativa a un icono.
</ParamField>

<ParamField name="iconType" type="string" default="solid">
  Solo para iconos de Font Awesome. Opciones: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ParamField>

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Resumen de componentes" icon="puzzle-piece" href="/es/components/overview">
    Explora todos los componentes disponibles
  </Card>
  <Card title="Fundamentos de MDX" icon="file-code" href="/es/content/mdx-basics">
    Aprende a usar componentes en MDX
  </Card>
</Columns>