Morph Tabs
Tabs whose pill stretches like taffy between tabs, with direction-aware content.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
The indicator's leading edge moves first and the trailing edge follows, so the pill stretches then contracts. Content enters from the direction you moved, with a blur-in.
Installation
$ npx shadcn@latest add https://guetix.com/r/morph-tabs.json
Uses the shadcn CLI. It creates components/guetix/morph-tabs.tsx and installs nothing else.
Usage
example.tsx
import { MorphTabs } from "@/components/guetix/morph-tabs";
export default function Example() {
return <MorphTabs />;
}
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Two edges (left/right) with different easings, not a single translate.
- 02Direction is stored, so the panel slide matches the gesture.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | { id; label; content }[] | — | Tabs. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Full tablist pattern: arrows, Home/End, roving tabindex.