Sections
Getting Started
Components
- DocTabs
- Callout
- ComponentPreview
- CommandMenu
- CopyButton
- DocsSidebar
- DocsTableOfContents
- PageHeader
- SiteHeader
- CopyCodeButton
- DocsCopyPage
- CodeBlockCommand
- CommandMenuItem
- CommandMenuKbd
- GitHubLink
- LucideIcon
- MainNav
- MobileNav
- ModeSwitcher
- PageHeaderDescription
- PageHeaderHeading
- SiteBody
- SiteConfig
- SiteFooter
- OgImage (Custom)
The DocTabs component provides a flexible tabbed interface for displaying content in documentation. It's perfect for showing installation methods, code examples, or any content that needs to be organized in tabs.
Demo
CLI content here
Usage
Use the ::doc-tabs directive with ::doc-tabs-list, ::doc-tabs-trigger, and ::doc-tabs-content child components:
::::doc-tabs{default-value="cli"}
:::doc-tabs-list
::doc-tabs-trigger{value="cli"}
CLI
::
::doc-tabs-trigger{value="manual"}
Manual
::
:::
:::doc-tabs-content{value="cli"}
CLI content here
:::
:::doc-tabs-content{value="manual"}
Manual content here
:::
::::Props
DocTabs
| Prop | Type | Default | Description |
|---|---|---|---|
default-value | string | undefined | Default active tab value |
model-value | string | undefined | Controlled value (for v-model support) |
class | string | undefined | Additional CSS classes |
DocTabsList
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | undefined | Additional CSS classes |
DocTabsTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | (Required) | Unique identifier for this tab |
class | string | undefined | Additional CSS classes |
DocTabsContent
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | (Required) | Matches the trigger value |
class | string | undefined | Additional CSS classes |
Features
- Flexible: Support any number of tabs with any values
- Generic: Not limited to installation guides - use for any tabbed content
- Styled: Border-bottom variant matches shadcn-vue documentation style
- Controlled/Uncontrolled: Support both controlled (v-model) and uncontrolled (default-value) modes
Examples
Basic Tabs
::::doc-tabs{default-value="tab1"}
:::doc-tabs-list
::doc-tabs-trigger{value="tab1"}
Tab 1
::
::doc-tabs-trigger{value="tab2"}
Tab 2
::
:::
:::doc-tabs-content{value="tab1"}
Content for tab 1
:::
:::doc-tabs-content{value="tab2"}
Content for tab 2
:::
::::With CodeBlockCommand
For installation commands, combine with CodeBlockCommand to show package manager options:
:::doc-tabs-content{value="cli"}
::code-block-command{code="npx shadcn-vue@latest add button"}
::
:::Installation Guide Example
A common use case is displaying installation instructions:
::::doc-tabs{default-value="cli"}
:::doc-tabs-list
::doc-tabs-trigger{value="cli"}
CLI
::
::doc-tabs-trigger{value="manual"}
Manual
::
:::
:::doc-tabs-content{value="cli"}
::code-block-command{code="npx shadcn-vue@latest add dialog command"}
::
:::
:::doc-tabs-content{value="manual"}
::steps
::step
Install the following dependencies:
::
```bash
npm install reka-ui
```
::step
Copy and paste the source code into your project.
::
::step
Update the import paths to match your project setup.
::
::
:::
::::