Navigation

Shared-Layout Tab Switch

A row of plain text tabs where a solid pill background slides and resizes to match whichever tab is selected, using spring-driven shared-layout motion.

Using Shared-Layout Tab Switch

A row of plain text tabs where a solid pill background slides and resizes to match whichever tab is selected, using spring-driven shared-layout motion.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: selected, accentColor, pillRadius

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

1986Keyboard pill tabsNavigationA two-tab switcher with a pill highlight that glides between labels and full roving-focus keyboard navigation between tabs.

2422Segmented Choice SwitchNavigationA rounded pill switcher where exactly one option is active and a sliding highlight glides beneath whichever choice is picked.

2226Segmented toggle tabsNavigationA compact pill-shaped segmented control for switching between a small number of short options, with a filled block sliding to whichever segment is selected.

2232Sliding content tabsNavigationA content viewport paired with a capsule tab bar below it, where switching tabs slides the panel in from the side of the chosen tab while a colored highlight glides behind the active label.

2044Sliding Panel TabsNavigationTwo tabs in a rounded pill track with a highlight that slides between them, crossfading a settings-style panel underneath without any layout jump.

2235Sliding segment tabsNavigationA pill-shaped segmented control whose background indicator glides beneath the active label while the panel below slides in from the direction of travel.