---
title: View
description: Create documentation that adapts to the reader's framework or language choice. Entire sections switch based on user selection.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Views let you create documentation that adapts to the reader's framework or language choice. Unlike Tabs (which show multiple options side by side), Views completely hide unselected content—creating a cleaner experience when entire sections differ between frameworks.

Use Views when:
- **Entire page sections** differ by framework (not just code snippets)
- **Tutorials** have different steps for different technologies
- **Getting started guides** vary significantly by platform

<Tip>
For code examples that differ by language, use [CodeGroup](/components/code-group). For procedures with minor differences, use [Tabs](/components/tabs). Use Views when **entire sections** of content are framework-specific.
</Tip>

## Basic Usage

Create views for different languages:

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

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

## How It Works

When you add View components to a page:

1. A dropdown selector appears at the top of the content
2. Users can switch between views using the dropdown
3. Only the selected view's content is visible

## View vs Tabs vs CodeGroup

| Component | Best For | Scope |
|-----------|----------|-------|
| **View** | Entire sections that differ by framework | Page-wide content switching |
| **Tabs** | Quick comparisons, package managers | Inline content switching |
| **CodeGroup** | Same operation in multiple languages | Code blocks only |

**Example scenarios:**
- "Install with npm vs yarn" → **Tabs** (small difference)
- "JavaScript fetch vs Python requests" → **CodeGroup** (code comparison)
- "React tutorial vs Vue tutorial" → **View** (entire section differs)

## Props

<ParamField name="title" type="string" required>
  The title displayed in the dropdown selector. Must be unique within the page.
</ParamField>

<ParamField name="icon" type="string">
  A Font Awesome icon, Lucide icon, URL to an icon, or relative path to an icon.
</ParamField>

<ParamField name="iconType" type="string" default="solid">
  For Font Awesome icons only. Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ParamField>

## What's Next?

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>