Animated Tabs
A direction-aware, draggable carousel tabs component.
Manage your account info.
Installation
npx shadcn-vue@latest add https://raya-ui.com/registry/animated-tabs.jsonOr manually:
npm install @vueuse/coreExamples
Vertical Orientation
Stack tabs vertically using the orientation prop.
Manage your account info.
Link Variant
A minimal underline style, perfect for sub-navigation.
Manage your account info.
Controlled State
Use v-model to control the active tab programmatically.
Manage your account info.
Active Index: 0
Draggable Carousel
When items exceed the container width, the list becomes scrollable and draggable.
Props
| Prop | Default | Description |
|---|---|---|
| items | [] | Array of tab objects (label, icon, content). |
| variant | 'pill' | Visual style. Options: 'pill', 'link'. |
| orientation | 'horizontal' | Layout direction. 'vertical' stacks items. |
| v-model | undefined | The active tab index (0-based). |
| content | true | Whether to render the content panel below the tabs. |