Animated Tabs

An ultra-fluid, keyboard-accessible navigation primitive equipped with a physics-based responsive indicator layer.

Installation

npx raya-ui@latest add animated-tabs

File Structure

your-project

components

animated-tabs

AnimatedTabs.vue

API Reference

Props

v-model

string | number

Binds the dynamic index matching the key state identifier of the selection.

items

Array<TabItem>

Array structure defining configuration data payloads mapping to layout tabs.

variant

'underline' | 'pill' | 'segment'

"underline"

Determines structural aesthetics and sliding bounds rules.

orientation

'horizontal' | 'vertical'

"horizontal"

Determines structural axis layout and keyboard arrows routing.

content

boolean

true

Enables default generation rendering rules for underlying content frames.

Modify user profiles, configure identity structures, and update metadata elements within this container pane.

Settings

Visual Mode Variant

Layout Orientation

Show Content Panels

source-code.vue

<script setup lang="ts">
import { ref } from 'vue'
import { AnimatedTabs } from '@/components/ui/animated-tabs'

const activeTab = ref('account')
const tabs = [
  { id: 'account', label: 'Account', content: 'Account parameters panel content.' },
  { id: 'security', label: 'Security', content: 'Security parameters panel content.' },
  { id: 'preferences', label: 'Preferences', content: 'Preferences parameters panel content.' },
]
</script>

<template>
  <AnimatedTabs
    :items="tabs"
    v-model="activeTab"
  />
</template>