# Animated Tabs (shadcn) > Drop-in animated replacement for shadcn Tabs with a spring-based sliding indicator **Source:** [https://motion.svelte.page/docs/shadcn-tabs](https://motion.svelte.page/docs/shadcn-tabs) --- # Animated Tabs

{#if data.downloads !== null} {data.downloads.toLocaleString()} installs {/if}

A drop-in replacement for [shadcn-svelte Tabs](https://www.shadcn-svelte.com/docs/components/tabs) powered by `svelte-motion` and `bits-ui`. A spring-based sliding indicator animates between triggers using `layoutId` — no extra config needed. ## Installation Install via the shadcn-svelte CLI from our registry: ```bash npx shadcn-svelte@latest add https://motion.svelte.page/r/animated-tabs.json ``` This installs `AnimatedTabs` alongside your existing components. It automatically pulls in `@humanspeak/svelte-motion` and `bits-ui` as dependencies. Then use it: ```svelte Account Password Account content Password content ``` ### Manual Installation Alternatively, copy the component source directly from [GitHub](https://github.com/humanspeak/svelte-motion/tree/main/docs/src/lib/shadcn/ui/tabs). ## Live Demo Click the tabs to see the sliding indicator:

### Default (Animated) Account Password Settings

Account

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

Password

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

Settings

Configure your preferences and notification settings.

### Without Animation Set `animated={false}` on Root to get vanilla shadcn behavior with no motion: Tab 1 Tab 2 Tab 3

Standard CSS background swap — no animation.

Static tab content for tab 2.

Static tab content for tab 3.

### Tabs Only (No Content Animation) Set `animated={false}` on Content to keep the sliding indicator but skip the content entrance animation: Overview Details History

The tab indicator slides, but this content appears instantly.

No fade or slide — just an instant swap for the content.

Useful when content animation feels too busy.

### Multiple Groups (Unique layoutIds) Each tab group automatically gets a unique `layoutId`, so multiple groups on the same page don't conflict:

Alpha Beta One Two Three

## Animation Details | Property | Value | Description | |----------|-------|-------------| | `layoutId` | Auto-generated per group | Shared layout animation between triggers | | Transition | Spring (500/30) | `stiffness: 500, damping: 30` | | Indicator | `bg-background` | Absolute-positioned div behind trigger text | The sliding indicator uses `AnimatePresence` + `motion.div` with `layoutId` to animate smoothly between the active trigger. Each tab group instance gets its own unique `layoutId` via a module-level counter, so multiple groups on the same page animate independently. ## Accessibility Full ARIA compliance via [bits-ui](https://bits-ui.com/docs/components/tabs) Tabs primitives: - `role="tablist"`, `role="tab"`, `role="tabpanel"` - `aria-selected` on triggers - Roving tabindex (only active trigger is in tab order) - Arrow keys cycle between triggers - Home/End jump to first/last trigger - Enter/Space activate a focused trigger ## API ### Root All standard bits-ui Tabs.Root props are supported, plus: | Prop | Type | Default | Description | |------|------|---------|-------------| | `value` | `string` | `''` | Active tab value (bindable) | | `onValueChange` | `(value: string) => void` | — | Callback when selection changes | | `animated` | `boolean` | `true` | Enable/disable all animation (indicator + content) | ### List Styled wrapper for the trigger container. Accepts all standard HTML div attributes. ### Trigger | Prop | Type | Default | Description | |------|------|---------|-------------| | `value` | `string` | — | Tab value (required) | | `disabled` | `boolean` | `false` | Disable this trigger | | `animated` | `boolean` | Inherits from Root | Override animation for this trigger | | `transition` | `object` | `{ type: 'spring', stiffness: 500, damping: 30 }` | Override the indicator spring transition | ### Content | Prop | Type | Default | Description | |------|------|---------|-------------| | `value` | `string` | — | Tab value (required) | | `animated` | `boolean` | Inherits from Root | Override animation for this panel | | `initial` | `object` | `{ opacity: 0, y: 8 }` | Override the content entrance initial state | | `animate` | `object` | `{ opacity: 1, y: 0 }` | Override the content entrance animate target | | `transition` | `object` | `{ duration: 0.3, ease: 'easeOut' }` | Override the content entrance transition |