Animated Tabs

~8.6 kB

Last updated: September 20, 2026

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

Installation

npx smoothui-cli add animated-tabs

Features

Three treatments for the same tab list: a sliding underline, a filled pill, and a segmented control. Controlled or uncontrolled, with icons, keyboard nav, and reduced-motion support.

Variants

Underline

A sliding underline tracks the active tab.

Pill

The active tab is a filled pill that slides between items.

Segment

A segmented control: the indicator fills the active cell.

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.

Props

Created by

Edu Calvo

Improved by

motion.dev

SmoothUI

Animated React components with smooth Motion animations. Drop-in shadcn/ui compatible.