> ## 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.

# Tabs

Tabbed content panels for showing the same concept across multiple languages, platforms, or approaches.

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

## 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.

**React**

```tsx
import { HolyDocs } from '@holydocs/react';

export default function App() {
  return <HolyDocs projectId="my-project" />;
}
    ```
  **Vue**

```vue
<template>
  <HolyDocs project-id="my-project" />
</template>

<script setup>
import { HolyDocs } from '@holydocs/vue';
</script>
    ```
  **Svelte**

```svelte
<script>
  import { HolyDocs } from '@holydocs/svelte';
</script>

<HolyDocs projectId="my-project" />
    ```

~~~mdx
<Tabs>
  <Tab title="React">
    ```tsx
import { 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.

**Overview**

HolyDocs is an AI-native documentation platform built for modern teams.
**Features**

Built-in AI assistant, search, and API playground with 11 themes.

~~~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">
    ```tsx
import { 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

**[Callout](/components/callout)**

Highlighted message blocks for drawing attention to notes, tips, warnings, and other contextual information.
**[Card](/components/card)**

Versatile content containers that can display titles, icons, descriptions, and optional links.
**[CardGroup](/components/card-group)**

Responsive grid container for laying out multiple cards in even columns.

## More

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