Switch On Hover Tabs
A vertical tab column welded into an image panel, where moving the mouse across a tab is the whole interaction. The active tab takes the panel's own fill and drops its right-hand radius so the two shapes read as one surface, and two twenty pixel concave fillets sit above and below its right edge to round the junction the way a browser tab meets its bar. Only the active tab renders its description, so selecting one grows it and springs the rest of the column out of the way instead of cross-fading text in a fixed box. Touch devices fall back to tap, matching the source's separate mobile variants.
npx shadcn@latest add https://ui.aryank.space/r/switch-on-hover-tabs.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SwitchOnHoverTabItem[] | 4 BLANK services | Each entry supplies a title, a description shown only while active, and the panel image with its alt text. |
| activateOn | "hover" | "click" | "hover" | Hover matches the source and still falls back to tap on touch. Click requires a deliberate press everywhere. |
| defaultIndex | number | 0 | Tab open on first paint. |
| onChange | (index: number) => void | undefined | Fires when the active tab changes, for driving copy elsewhere. |
| tabWidth / height | number | 300 / 434 | Source dimensions. Below 810px the card stacks and the panel takes a fixed height instead. |
panelcolorFill shared by the active tab, its fillets, and the panel.
surfacecolorCard background behind both columns.
tabWidthsliderWidth of the tab column on wide screens.
panelRadiussliderCorner radius of the artwork panel.
motion