View
Create documentation that adapts to the reader's framework or language choice. Entire sections switch based on user selection.
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
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>How It Works
When you add View components to a page:
- A dropdown selector appears at the top of the content
- Users can switch between views using the dropdown
- 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
The title displayed in the dropdown selector. Must be unique within the page.
A Font Awesome icon, Lucide icon, URL to an icon, or relative path to an icon.
For Font Awesome icons only. Options: regular, solid, light, thin, sharp-solid, duotone, brands.