Tabs Horizontal
Displays content in a horizontal 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 TabsHorizontal component
Copy this code to create your TabsHorizontal 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 icon-based tabs generated from data.
API Reference
The TabsHorizontal component is built on top of the Radix UI Tabs primitive and provides a flexible way to create horizontal tab interfaces with animated indicators. See the Radix UI Tabs documentation for more details on the base component.
TabsHorizontal.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 |
TabsHorizontal.List
Container for the tab triggers with animated underline indicator.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes for the tabs list |
wrapperClassName | "string" | "undefined" | Additional CSS classes for the wrapper around the list |
TabsHorizontal.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 |
asChild | "boolean" | "false" | Whether to merge props onto child component |
className | "string" | "undefined" | Additional CSS classes |
TabsHorizontal.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 |
TabsHorizontal.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 |
TabsHorizontal.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 |