Tabs

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

When to use

Use this component when you need stronger document structure, annotation, or narrative pacing inside a page.

Live Examples

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

Basic

Multi-language code tabs.

tsx
import { HolyDocs } from '@holydocs/react';export default function App() {return <HolyDocs projectId="my-project" />;}

vue
<template><HolyDocs project-id="my-project" /></template><script setup>import { HolyDocs } from '@holydocs/vue';</script>

svelte
<script>import { HolyDocs } from '@holydocs/svelte';</script><HolyDocs projectId="my-project" />

mdx
<Tabs>  <Tab title="React">    ```tsximport { HolyDocs } from '@holydocs/react';export default function App() {  return <HolyDocs projectId="my-project" />;}    ```  </Tab>  <Tab title="Vue">    ```vue<template>  <HolyDocs project-id="my-project" /></template><script setup>import { HolyDocs } from '@holydocs/vue';</script>    ```  </Tab>  <Tab title="Svelte">    ```svelte<script>  import { HolyDocs } from '@holydocs/svelte';</script><HolyDocs projectId="my-project" />    ```  </Tab></Tabs>

Content

Tabs for organizing non-code content.

mdx
<Tabs><Tab title="Overview">HolyDocs is an AI-native documentation platform built for modern teams.</Tab><Tab title="Features">Built-in AI assistant, search, and API playground with 11 themes.</Tab></Tabs>

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
<Tabs>  <Tab title="React">    ```tsximport { HolyDocs } from '@holydocs/react';export default function App() {  return <HolyDocs projectId="my-project" />;}    ```  </Tab>  <Tab title="Vue">    ```vue<template>  <HolyDocs project-id="my-project" /></template>    ```  </Tab></Tabs>

Tips

• Keep the surrounding copy short so the component remains the focal point instead of becoming redundant chrome.
• Prefer one clear job per component instance. If a block is trying to explain, navigate, and warn at the same time, split it up.
• Check the page in both light and dark mode when you stack multiple content components together. Dense compositions can feel heavier than expected.

Related Components

More

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