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.json

Examples

Vertical Orientation

Stack tabs vertically using the orientation prop.

Manage your account info.
<template>
  <AnimatedTabs
    :items="items"
    orientation="vertical"
    class="w-64"
  />
</template>

Link Variant

A minimal underline style, perfect for sub-navigation.

Manage your account info.
<template>
  <AnimatedTabs
    :items="items"
    variant="link"
  />
</template>

Controlled State

Use v-model to control the active tab programmatically.

Manage your account info.

Active Index: 0

<script setup lang="ts">
const index = ref(0)
</script>

<template>
  <div class="space-y-4">
    <div class="flex gap-2">
      <Button @click="index--">Prev</Button>
      <Button @click="index++">Next</Button>
    </div>

    <AnimatedTabs v-model="index" :items="items" />
  </div>
</template>

Draggable Carousel

When items exceed the container width, the list becomes scrollable and draggable.

Props

PropDefaultDescription
items[]Array of tab objects (label, icon, content).
variant'pill'Visual style. Options: 'pill', 'link'.
orientation'horizontal'Layout direction. 'vertical' stacks items.
v-modelundefinedThe active tab index (0-based).
contenttrueWhether to render the content panel below the tabs.