> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# View

Switchable content panels for presenting alternative configurations, languages, or frameworks.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the View playground on holydocs.com](https://holydocs.com/components/view).

## When to use

Use this component when page density, comparison, or spatial composition matters as much as the words themselves.

## Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

### Framework Alternatives

Different framework setups side by side.

**Next.js**

Install with `npm install @holydocs/next` and add the plugin to your `next.config.js`.
  **Remix**

Install with `npm install @holydocs/remix` and add the loader to your root route.
  **Astro**

Install with `npm install @holydocs/astro` and add the integration to `astro.config.mjs`.

~~~mdx
<View>
  <ViewItem label="Next.js">
    Install with `npm install @holydocs/next` and add the plugin to your `next.config.js`.
  </ViewItem>
  <ViewItem label="Remix">
    Install with `npm install @holydocs/remix` and add the loader to your root route.
  </ViewItem>
  <ViewItem label="Astro">
    Install with `npm install @holydocs/astro` and add the integration to `astro.config.mjs`.
  </ViewItem>
</View>
~~~

### Config Alternatives

Different configuration approaches.

**YAML**

```yaml
name: my-docs
theme: mint
    ```
  **JSON**

```json
{
  "name": "my-docs",
  "theme": "mint"
}
    ```

~~~mdx
<View>
  <ViewItem label="YAML">
    ```yaml
name: my-docs
theme: mint
    ```
  </ViewItem>
  <ViewItem label="JSON">
    ```json
{
  "name": "my-docs",
  "theme": "mint"
}
    ```
  </ViewItem>
</View>
~~~

## Props

This component has no configurable props. Use its child content to shape the output.

## Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

~~~mdx
<View>
  <ViewItem label="Next.js">
    Install with `npm install @holydocs/next` and add the plugin to your `next.config.js`.
  </ViewItem>
  <ViewItem label="Remix">
    Install with `npm install @holydocs/remix` and add the loader to your root route.
  </ViewItem>
</View>
~~~

## Tips

- Layout components amplify good content and bad content equally. Fix hierarchy and copy length before adding more structure.
- Test long headings, narrow screens, and translated strings. Layout bugs usually appear at the edges, not in the happy path.
- Use layout to create contrast between sections, not to decorate every paragraph.

## Related Components

**[Columns](/components/columns)**

Equal-width column grid for side-by-side comparisons, feature lists, or mixed content layouts.
**[Panel](/components/panel)**

Place supplementary content in the right-side panel alongside your main documentation.
**[DataTable](/components/data-table)**

Responsive structured tables for plans, limits, environment variables, SDK support, and compatibility matrices.

## More

- Interactive playground: [View on holydocs.com](https://holydocs.com/components/view)
- Component library index: [/components](/components)