Animated Tabs

Tabs with smooth layout animation.

npx arupui add animated-tabs
Preview

Usage

animated-tabs.tsx
import { AnimatedTabs } from "@/components/blocks/animated-tabs"

<AnimatedTabs
  tabs={[{ id: "1", label: "Tab 1" }]}
  activeTab="1"
  onTabChange={setTab}
/>

Props

tabs
Type: Tab[]Default: -
activeTab
Type: stringDefault: -
onTabChange
Type: (id: string) => voidDefault: -
Theme Editor

Theme

Radius0.5rem
Letter Spacing0em

Colors

light