Hover Tabs

Titles beside a panel. Point at a title, or reach it by keyboard, to show its content.

pnpm dlx shadcn@latest add @latheui/hover-tabs

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Hover Tabs is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Get Pro I have Pro

Depends on

motion
lathe/motion
lathe/use-controllable-state

API reference

HoverTabs

Also accepts native div attributes.

Prop	Type	Default	Description
items* (required)	HoverTabItem[]	—	The tabs, in order.
label* (required)	string	—	Accessible name of the list.
value	string	—	Controlled active item.
defaultValue	string	first item	Active item at first when uncontrolled.
onValueChange	(value: string) => void	—	Called when the active item changes.

HoverTabItem

Prop	Type	Default	Description
value* (required)	string	—	Unique among the items.
title* (required)	string	—	The tab's text.
description	ReactNode	—	A line under the title.
image	{ src: string; alt: string }	—	Shown in the panel.
content	ReactNode	—	Shown in the panel instead of the image.

Keyboard

Tab: Moves to the active tab, then on to the panel's content.
ArrowDownArrowUp: Moves to the next or previous tab and shows it, wrapping at the ends.
HomeEnd: Moves to the first or last tab.

Accessibility

It is a vertical tab list with one panel. Tabs activate on focus, which matches what hovering does for a pointer.
Hover only reacts to a mouse. On touch, a tap selects a tab.
The list stacks above the panel on small screens.
Because tabs change on hover, keep panels to supporting visuals. Do not put controls in a panel that a passing pointer could take away.

Motion

One highlight travels between titles and keeps its velocity when you change direction.
The panel's content cross-fades, with the incoming content settling from a slight zoom.
With reduced motion the highlight jumps and the content swaps without the zoom.

Customization

Controlled, with content panels

const [tab, setTab] = React.useState("speed")

<HoverTabs
  label="Performance"
  value={tab}
  onValueChange={setTab}
  items={[
    { value: "speed", title: "Fast", content: <SpeedChart /> },
    { value: "uptime", title: "Reliable", content: <UptimeChart /> },
  ]}
/>

API reference

HoverTabs

Also accepts native div attributes.

Prop	Type	Default	Description
items* (required)	HoverTabItem[]	—	The tabs, in order.
label* (required)	string	—	Accessible name of the list.
value	string	—	Controlled active item.
defaultValue	string	first item	Active item at first when uncontrolled.
onValueChange	(value: string) => void	—	Called when the active item changes.

HoverTabItem

Prop	Type	Default	Description
value* (required)	string	—	Unique among the items.
title* (required)	string	—	The tab's text.
description	ReactNode	—	A line under the title.
image	{ src: string; alt: string }	—	Shown in the panel.
content	ReactNode	—	Shown in the panel instead of the image.

Accessibility

It is a vertical tab list with one panel. Tabs activate on focus, which matches what hovering does for a pointer.
Hover only reacts to a mouse. On touch, a tap selects a tab.
The list stacks above the panel on small screens.
Because tabs change on hover, keep panels to supporting visuals. Do not put controls in a panel that a passing pointer could take away.

Customization

Controlled, with content panels

const [tab, setTab] = React.useState("speed")

<HoverTabs
  label="Performance"
  value={tab}
  onValueChange={setTab}
  items={[
    { value: "speed", title: "Fast", content: <SpeedChart /> },
    { value: "uptime", title: "Reliable", content: <UptimeChart /> },
  ]}
/>

API reference

HoverTabs

HoverTabItem

Keyboard

Accessibility

Motion

Customization

Controlled, with content panels

Related

API reference

HoverTabs

HoverTabItem

Keyboard

Accessibility

Motion

Customization

Controlled, with content panels

Related