Animated Tabs | Svelte Motion

FIG-001/ LAYOUTID

animated tabs.

A shared layoutId on the active indicator slides it between tab triggers with spring physics. State management stays on bits-ui; animation stays on svelte-motion.

The active-tab indicator carries a shared layoutId across all triggers — when the active tab changes, motion animates the indicator from the old position to the new one.
Tab content fades through AnimatePresence so switching panels reads as a state change, not a hard cut.
Composed on top of bits-ui's Tabs.Root — bits-ui owns the state machine + keyboard accessibility, svelte-motion owns the animation. Add animated=false on the root to fall back to vanilla shadcn behaviour.

↩ all examples

pattern · tabs-sliding-indicator mode · live running source

Account

Make changes to your account here. Click save when you're done.

Name

Password

Change your password here. After saving, you'll be logged out.

Current password

Settings

Configure your preferences and notification settings.

Enable notifications

category · layoutid

sheet · sheet 01 / 01

⟳ to re-run