Animated Tabs

Animated React tabs component with underline, pill, and segment variants, smooth sliding indicators, and icon support.

~8.6 kB

Last updated: August 2, 2026

Installation

npx smoothui-cli add animated-tabs

Features

Three variants: underline, pill, and segment
Smooth sliding indicator animation
Controlled and uncontrolled modes
Support for icons in tabs
Full keyboard navigation
Accessible with proper ARIA attributes
Respects reduced motion preferences

Accessibility

Keyboard Interactions

Key	Description
`Arrow Right`	Moves focus and selection to the next tab (wraps to first)
`Arrow Left`	Moves focus and selection to the previous tab (wraps to last)
`Home`	Moves focus and selection to the first tab
`End`	Moves focus and selection to the last tab

ARIA Attributes

Attribute	Element	Purpose
`role="tablist"`	Container	Identifies the tab group as a tablist
`aria-label="Tabs"`	Container	Provides an accessible name for the tablist
`role="tab"`	Tab button	Identifies each button as a tab
`aria-selected`	Tab button	Indicates which tab is currently active
`tabindex`	Tab button	Uses roving tabindex: active tab is `0`, inactive tabs are `-1`

Only the active tab is in the tab order; arrow keys navigate between tabs
Each tab announces its selected state via aria-selected

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the sliding indicator animation between tabs is disabled instantly.