Tabs
Create tabbed interfaces with Radix UI in Webstudio.
Last updated
Was this helpful?
Create tabbed interfaces with Radix UI in Webstudio.
Based on Radix Tabs
The Tabs component displays a set of panels with content that are shown one at a time. Users can switch between panels by clicking on tab triggers.
Use Tabs for:
Organizing related content into sections
Settings pages with multiple categories
Product pages with details, reviews, and specifications
Any content that can be logically grouped
The Tabs component consists of several parts:
Tabs
The root component that manages which tab is active
Tabs List
Container for all the tab triggers
Tab Trigger
The clickable tab button
Tab Content
The panel content shown when a tab is active
Drag a Tabs component from Components > Radix onto your canvas
The component comes with two tabs pre-configured
To add more tabs:
Duplicate a Tab Trigger inside the Tabs List
Duplicate a Tab Content panel
Tab Triggers and Tab Contents are connected by their order in the Navigator
The first Trigger shows the first Content, second shows second, etc.
When generating tabs dynamically with a Collection, you need to provide a unique value property for both the Tab Trigger and Tab Content:
Add the value property to Tab Trigger: Settings > Properties & Attributes > "+"
Add the same value property to the corresponding Tab Content
Bind a unique identifier (like an ID or slug) from your data to both
Some commonly used properties (see the Settings panel for all available options):
value
The currently active tab. Use this to control which tab is shown on the canvas
Some common states (you can also create custom states):
Active ([data-state=active]) - The currently selected tab trigger
Inactive ([data-state=inactive]) - Unselected tab triggers
Accordion – Vertically stacked expandable sections
Collapsible – Single expandable panel
Collection – Generate tabs dynamically from data
Navigation Menu – Navigation with dropdowns and links
Last updated
Was this helpful?
Was this helpful?