Preview

Underline Tabs (Smooth Animation)

Overview

This is the overview tab content with smooth animations. Notice the gentle transitions.

Installation

<> import.ts
import { Tabs } from "@/components/ui/tabs"

Code

<> component.tsx
import { Tabs } from "@/components/ui/tabs"

<Tabs />

API Reference

Tabs

Animated tabs with variants, sizes, and rich animation presets.

<> import.ts
import { Tabs, AnimationPresets, TabPresets } from "@/components/ui/tabs"

Props

PropTypeDefaultDescription
tabs
Array<{ id: string; label: string; icon?: React.ReactNode; disabled?: boolean }>—Tab headers
contents
Array<{ id: string; content: React.ReactNode }>—Tab contents mapped by id
defaultTab
string—Initial tab id
variant
"default" | "pills" | "underline""default"Visual style
size
"sm" | "md" | "lg" | "xl""md"Sizing
className
string""Additional CSS classes
onTabChange
(tabId: string) => void—Change callback
animations
{ tabTransition?: any; contentTransition?: any; underlineTransition?: any; tapScale?: number; staggerChildren?: boolean }—Animation overrides

Presets

smooth

Subtle transitions

bouncy

Playful animations

snappy

Fast transitions

elegant

Longer, elegant animations

minimal

Minimalist timings