Morph Tabs

Accessible tabs with a shared spring selection surface

A roving-keyboard tab set whose active surface morphs between triggers while panels transition in the direction of travel. It supports controlled state and horizontal or vertical layouts.

Preview

Three ideas saved

Small details make an interface feel considered.

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/morph-tabs.json

Usage

Import the component:

import { MorphTabs } from "@/components/rohan/morph-tabs"

Use it in your code:

<MorphTabs
  defaultValue="notes"
  items={[
    { id: "notes", label: "Notes", content: <Notes /> },
    { id: "activity", label: "Activity", content: <Activity /> },
    { id: "details", label: "Details", content: <Details /> },
  ]}
/>

Props

Property	Type	Default	Description
items	MorphTabItem[]	—	Tabs with stable ids, labels, panel content and optional icons or disabled state.
value / defaultValue	string	first item	Controlled or initial selected tab id.
orientation	"horizontal" \| "vertical"	"horizontal"	Tab-list and keyboard navigation direction.
onValueChange	(value: string) => void	—	Called when the selected tab changes.

Components