# 7 Animated React Tabs Components for Tailwind

> Tabs with shared-layout motion: sliding pills, spring underlines, vertical tabs with previews, segmented icon tabs, browser-style folder tabs and scrollable tab bars.

3 of 7 free (the rest with PixelPapa Pro), built with Tailwind CSS and Motion, installable with the shadcn CLI.

- [Tabs Animated Height Content](https://pixelpapa.com/components/tabs/tabs-animated-height-content.md): Tabs inside a card that springs to the height of each panel, so short and long content swap without a layout jump.
- [Tabs Folder](https://pixelpapa.com/components/tabs/tabs-folder.md): Browser-style tabs with scooped corners: the active shape slides between tabs, and tabs can be closed or added with layout springs.
- [Tabs Scrollable Overflow](https://pixelpapa.com/components/tabs/tabs-scrollable-overflow.md) (Pro): A tab strip that scrolls when it runs out of room: edge fades and arrow buttons appear only on the side that has more, and the active tab centres itself.
- [Tabs Segmented Icons](https://pixelpapa.com/components/tabs/tabs-segmented-icons.md): An icon segmented control whose active segment unfolds its label, driving a task view where the same cards re-flow between list, board, grid and timeline.
- [Tabs Sliding Pill](https://pixelpapa.com/components/tabs/tabs-sliding-pill.md) (Pro): A pill glides between tabs on a shared-layout spring while the panel slides in from the side you moved toward.
- [Tabs Underline Spring](https://pixelpapa.com/components/tabs/tabs-underline-spring.md) (Pro): An underline that stretches toward the next tab before its tail catches up, with a hover highlight that follows the pointer.
- [Tabs Vertical With Preview](https://pixelpapa.com/components/tabs/tabs-vertical-with-preview.md) (Pro): Vertical feature tabs that auto-advance with a filling rail and swap a drawn product preview, sliding up or down by direction.