design-infraReport a problem or share feedback← Catalog
Animated Tabs
curatedtheme-awarefreesmoothui/animated-tabs
Animated tabs component with sliding indicator
$
npx shadcn@latest add @smoothui/animated-tabsnpm deps: motion
Our notes
Tab list with a layoutId spring indicator in underline, pill or segment variants; arrow/Home/End keys and roving tabindex. Pill/segment use bg-muted + bg-background (theme). The underline uses bg-brand from SmoothUI's tokens.json (pink by default) — set --brand: var(--primary) once in globals.css. Tabs only: you render the panels (pair with motion-primitives/transition-panel).- Source
- SmoothUI
- Kind
- component
- Categories
- tabs
- Use as
- drop-in — replaces your component
- Applies to
- tabsnavigation
- Motion
- on state · subtle · motion · medium cost · respects reduced motion
- Tags
- tabs, navigation, indicator, underline, pill, segment, spring, complexity-medium, reduced-motion
- Licence
- MIT ("MIT License — Copyright (c) 2024 Eduardo Calvo", github.com/educlopez/smoothui).
- Live demo
- smoothui.dev
- Docs
- smoothui.dev
Similar
Compare all 4 →- Expanding Icon Tabsmicrokit/expanding-icon-tabsIcon toolbar whose chosen item widens to show its label while siblings slide over; ←/→ move focus, Escape and outside-click collapse it, role=toolbar, motion-reduce handled. Good for compact app toolbars and view switchers. Hard-coded items and light-dark() hex colours — rebuild with your icons and tokens.
- Sliding Underline Tabsmicrokit/sliding-underline-tabsCSS-only: one bar translated under the active label (750ms ease-out) plus a 650ms keyframe nudge on the panel; motion-reduce handled. A prop-less demo — 3 hard-coded tabs, #f97316 bar, light-dark() hex greys, and the active label is text-white, which vanishes on a light background. Lift the technique onto your own tabs with bg-primary / text-foreground.
- Toolbar Dynamicmotion-primitives/toolbar-dynamicToolbar that expands into a search/input panel. Hard-codes zinc/white — swap to bg-popover/border/text-muted-foreground before using.