Skip to main content
Use the View component to create content that changes based on the selected view in a multi-view dropdown. This is particularly useful for showing code examples or documentation specific to different programming languages or frameworks.
Use one view component per language per page. Use tabs for procedures that differ by language and code groups for code examples that differ by language.
This content is only visible when JavaScript is selected.
console.log("Hello from JavaScript!");

​
Example

JavaScript and Python views
<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>

​
Properties

​
title
string
required
The title that identifies this view. Must match one of the options in the multi-view dropdown.
​
icon
string
A Font Awesome icon, Lucide icon, URL to an icon, or relative path to an icon.
​
iconType
string
For Font Awesome icons only: One of regular, solid, light, thin, sharp-solid, duotone, brands.