View

For isolated previews, theme switching, and sandbox editing, open the View playground on holydocs.com .

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.

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
name: my-docstheme: mint

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

mdx
<View>  <ViewItem label="YAML">    ```yamlname: my-docstheme: 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

More

• Interactive playground: View on holydocs.com
• Component library index: /components