Component / Layout

Animated Tabs

Navigate linked views with complete tab semantics, roving focus, automatic or manual activation, and a measured indicator that follows selection without obscuring focus.

Activation

Orientation

Reduce motion

Workspace views / controlled

Selected / Overview24

Active motion components

Lifecycle: Scoped
Keyboard: Ready
Motion: Enabled

Delivery contract

Install it

pnpm add easecraft@0.1.0

The component imports stable APIs from easecraft.

Files / 00

Dependencies / 03

easecraft: npm / 0.1.0
react: peer / >=18.2.0 <20.0.0
react-dom: peer / >=18.2.0 <20.0.0

Package usage

Use it

import { AnimatedTabs } from "easecraft";

<AnimatedTabs
  items={views}
  getValue={(view) => view.id}
  getLabel={(view) => view.label}
  aria-label="Workspace views"
>
  {(view) => <ViewPanel view={view} />}
</AnimatedTabs>

Typed contract

API

Prop	Type	Default	Purpose
items	readonly Item[]	required	Tab and panel data
getValue	(item) => string	required	Stable tab value
getLabel	(item) => ReactNode	required	Tab label renderer
children	(item) => ReactNode	required	Selected panel renderer
value	string	uncontrolled	Controlled selected value
defaultValue	string	first enabled	Initial uncontrolled value
onValueChange	(value) => void	none	Selection callback
activationMode	"automatic" \| "manual"	"automatic"	Keyboard activation
orientation	"horizontal" \| "vertical"	"horizontal"	ARIA and arrow direction
loop	boolean	true	Wrap arrow navigation
isDisabled	(item) => boolean	none	Disable individual tabs
duration	duration token \| number	"normal"	Indicator and panel duration
distance	distance token \| number	"small"	Panel travel distance
easing	easing token \| string	"move"	Indicator easing
panelEasing	easing token \| string	"enter"	Panel easing
as	HTML tag	"div"	Polymorphic host element

Release requirement

Accessibility

Semantic linkage: Each tab controls and labels one stable tab panel through generated IDs.
Keyboard: Arrow keys, Home, and End move focus while disabled tabs are skipped.
Activation: Automatic mode selects on focus; manual mode waits for Enter or Space.
Reduced motion: Selection, content, and indicator position update immediately.