Tabs Vertical
Displays content in a vertical tab layout with various styling options and configurations.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your TabsVertical component
Copy this code to create your TabsVertical component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Tabs with Icon and Arrow
Enhance tabs with icons and directional arrows for better visual hierarchy.
Advanced Example
A complete example with section dividers and styled containers.
API Reference
The TabsVertical component is built on top of the Radix UI Tabs primitive and provides a flexible way to create vertical tab interfaces. See the Radix UI Tabs documentation for more details on the base component.
TabsVertical.Root
Main container component that manages the tabs state.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | "string" | "undefined" | The value of the tab that should be active when initially rendered |
value | "string" | "undefined" | The controlled value of the tab to activate |
onValueChange | "(value: string) => void" | "undefined" | Callback fired when the value changes |
className | "string" | "undefined" | Additional CSS classes |
TabsVertical.List
Container for the tab triggers that displays them in a vertical layout.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes for the tabs list |
TabsVertical.Trigger
The button that activates its associated content panel.
| Prop | Type | Default | Description |
|---|---|---|---|
value | "string" | "required" | A unique value for the tab |
disabled | "boolean" | "false" | Whether the tab is disabled |
arrow | "boolean" | "false" | Whether to show an arrow on the active tab |
className | "string" | "undefined" | Additional CSS classes |
TabsVertical.Icon
Optional icon component that can be placed inside a tab trigger.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "React.ElementType | React.ReactNode" | "undefined" | The icon component to render |
className | "string" | "undefined" | Additional CSS classes |
TabsVertical.Arrow
Optional arrow component that appears on the active tab.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "React.ElementType | React.ReactNode" | "undefined" | Custom arrow component to render |
className | "string" | "undefined" | Additional CSS classes |
TabsVertical.Content
Container for the content associated with each tab.
| Prop | Type | Default | Description |
|---|---|---|---|
value | "string" | "required" | A unique value that matches the tab trigger |
forceMount | "boolean" | "false" | Force mounting when not active |
className | "string" | "undefined" | Additional CSS classes |