Tabs
Tabbed content panels
Last updated March 16, 2026
Tabs
Switch between different content panels. Useful for showing framework-specific examples.
Usage
Use the tabs code fence. Each # Label creates a tab.
```tabs
# React
Use the React adapter for your project.
# Vue
Use the Vue adapter for your project.
# Svelte
Use the Svelte adapter for your project.
```
Example
Use the React adapter. Import from @ephem-sh/petit/react and wrap your app.
Use the Vue adapter. Add the plugin to your app.use() chain.
Use the Svelte adapter. Add the preprocessor to your svelte.config.js.
API Reference
Tab Properties
| Property | Type | Default | Description |
|---|---|---|---|
label | string | required | Tab button label (from `# Label` line) |
content | string | required | Tab panel content (supports inline markdown) |