Animated React tabs: navigation, panels and keyboard behavior
A moving pill does not tell you whether a control changes a page, selects a value or reveals a panel. Choose that behavior first. Then animate its indicator. This distinction prevents a polished tab bar from becoming a dead end for keyboard users or a reset button for unfinished forms.
What should happen when someone chooses a tab?
For navigation to another URL, use a link and preserve browser back, open-in-new-tab and direct linking. For a choice such as a billing interval, use a selection control. For layered content within one view, use a tab list with associated panels. These controls can look alike without sharing the same behavior.
| User task | Starting point | Acceptance check |
|---|---|---|
| Visit Pricing or Projects | Links with a current-page indicator | Direct URL and browser back still work |
| Choose monthly or annual billing | A radio group or selection control | The selected value reaches the price calculation |
| Switch Overview and Activity in one view | Tabs and associated panels | Keyboard focus and the displayed panel stay consistent |
Two published implementations, two different boundaries
Tween UI Sliding Tabs renders a navigation container. Items with href become anchors; other items become buttons. It accepts a controlled value and onValueChange. Its GSAP indicator follows pointer and focus, returns to the active item, and uses immediate positioning for reduced motion. It does not render content panels for you. Use it as a navigation treatment, and wire the selected route or application state yourself.
Cult UI Direction Aware Tabs accepts numeric IDs, labels and React content. It changes panel direction by comparing IDs and measures the active content to animate its height. Its initial active ID is 0, so the initial item must use that ID unless you adapt the source. Panel content is keyed by the active ID; switching away can unmount it.
The Cult implementation uses buttons but does not implement the full ARIA tab pattern or arrow-key navigation. If your feature requires that pattern, integrate the visual treatment with an accessible tabs primitive and verify it. Do not present a click demo as an accessibility certification.
Try the navigation treatment in a prepared React project
Initialize Tailwind and the import alias using the installation guide first. This registry command installs the published source and demo. Inspect the component and replace its sample destinations or state handler before using it for real navigation.
npx shadcn@latest add https://podie.dev/r/tween-ui--sliding-tabs.jsonKeep focus, selection and motion separate
For a panel tab list, arrow keys move between tabs; Enter or Space can activate a manually selected tab. Automatic activation works best when the panel is ready without a noticeable wait. A highlight that follows hover should not silently change committed selection. See the W3C tab pattern linked below for the role and keyboard contract.
Keep a clear selected state when motion is reduced. Test long labels and a narrow screen rather than shrinking text until it fits. If panels contain forms, decide whether drafts survive switching and keep that state outside any subtree that gets unmounted.
A five-minute project check
Navigate forward and backward with the keyboard. Switch first to last, then reverse. Change the selected value from outside the component. Type into a panel, leave it, and return. Resize after selecting a long label. Enable reduced motion. Check each result in your actual page, including the browser history if the items are links.
This comparison reviews the source served by PODIE on October 11, 2026. It describes implementation boundaries; it is not a benchmark of all tab libraries or a claim of complete assistive-technology coverage.
Inspect the compared components
Sliding Tabs
A pill nav whose lime indicator scales in under the first tab, then slides to follow the pointer or keyboard focus. Leaving the nav returns it to the active tab.
- Implementation
- Native React source
- Declared npm dependencies
- clsx, tailwind-merge, @gsap/react, gsap
- Source
- Tween UI · MIT license
Direction Aware Tabs
Tab component with direction-aware animations and smooth transitions
- Implementation
- Native React source
- Declared npm dependencies
- clsx, tailwind-merge, @radix-ui/react-slot, class-variance-authority, motion, react-use-measure
- Source
- Cult UI · MIT license
Related reading and evidence
Last updated: .