API and Development
Tabs builds on Radix Themes Tabs with pathname-based active detection. Pass currentPath, navigate, and matchPath from React Router (or equivalents) so tabs behave as real links—middle-click and “open in new tab” keep working. TabsTrigger accepts to or href, optional extraRouteMatchers, counter, leadIcon, and iconTitle.
| Name | Type | Default | Description |
|---|---|---|---|
to / href | string | — | Destination path. |
extraRouteMatchers | array | — | Extra paths that mark tab active. |
counter | number | string | — | Badge when > 0. |
leadIcon | Icon | — | Icon before label. |
onClick | MouseEventHandler | — | Runs before default navigation. |
currentPath and uses a no-op navigate so the active tab is visible without leaving the page.
| Scenario | Component | Why |
|---|---|---|
| Navigate to different routes (URL changes) | Tabs | Renders <a> links; supports Ctrl/Cmd+click, browser history, pathname matching. |
| Filter or view-switch without URL change | Tabs | Selection state only—no routing, no content panels. |
| Switch between content panels on one page | Tabs | Manages visibility of TabsContent panels with ARIA roles. |