Animated Tabs

PreviousNext

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Manage your account settings.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/tabs.json

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
export default function Example() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        Make changes to your account here.
      </TabsContent>
      <TabsContent value="password">Change your password here.</TabsContent>
    </Tabs>
  )
}

Examples

Underline Variant

The underline variant displays tabs with an animated underline indicator, perfect for navigation and section switching.

Manage your account settings.

Ghost Variant

Remove the background from the default variant tabs for a cleaner, more minimal appearance.

Manage your account settings.

Size Variants

Tabs come in three sizes: sm, default, and lg. Choose the size that best fits your layout.

Small

Manage your account settings.

Default

Manage your account settings.

Large

Manage your account settings.

With Icons

Enhance your tabs with icons for better visual communication and user experience.

Default variant with icons

Manage your account settings and preferences.

Underline variant with icons (large size)

Manage your account settings and preferences.

Entrance Animations

Control how tab content appears with customizable entrance animations. Set animate={true} on TabsContent to enable smooth transitions powered by Framer Motion.

Manage your account settings.

Note: Animations are disabled by default for optimal performance. Enable them by setting animate={true} on individual TabsContent components when you need smooth transitions for lightweight content.

API Reference

Tabs

The root tabs component that provides context for all child components.

PropTypeDefaultDescription
defaultValuestring-The value of the tab that should be active when initially rendered
valuestring-The controlled value of the tab to activate
onValueChangefunction-Event handler called when the value changes
variant"default" | "underline""default"Visual style variant of the tabs
size"sm" | "default" | "lg""default"Size of the tabs
animatebooleanfalseEnable animations for all tab content (can be overridden per TabsContent)
classNamestring-Additional CSS classes

TabsList

Container for the tab triggers with animated indicator support.

PropTypeDefaultDescription
classNamestring-Additional CSS classes

The TabsList component automatically inherits the variant and size from the parent Tabs component and positions tab triggers accordingly. For the underline variant, tabs align to the start; for the default variant, they're centered.

TabsTrigger

Individual tab trigger button that activates a tab panel when clicked.

PropTypeDefaultDescription
valuestring-A unique value that associates the trigger with a content
disabledbooleanfalseWhen true, prevents the user from interacting with the tab
classNamestring-Additional CSS classes

The trigger automatically displays the animated indicator when active. For the underline variant, the indicator appears as an animated underline; for the default variant, it appears as a background highlight.

TabsContent

Content panel associated with a tab trigger.

PropTypeDefaultDescription
valuestring-A unique value that associates the content with a trigger
animatebooleaninheritedEnable smooth animations (inherits from Tabs, can be overridden per content)
animationDurationnumber0.25Animation duration in seconds (only applies when animate={true})
animateYnumber-Y-axis animation distance in pixels (only applies when animate={true})
forceMountbooleanfalseForces the content to always be mounted in the DOM
classNamestring-Additional CSS classes

Performance Note: By default, animations are disabled for instant tab switching with zero overhead. This is recommended for most use cases, especially when dealing with heavy content.

You can enable animations in two ways:

  • For all tabs: Set animate={true} on the Tabs component
  • Per tab: Set animate={true} on individual TabsContent components (overrides the Tabs setting)

TabsFromArray

Utility component for rendering tabs from an array of tab items, useful when working with dynamic data.

PropTypeDefaultDescription
tabsTabItem[]-Array of tab items to render
defaultValuestringtabs[0]Initial active tab value
valuestring-Controlled active tab value
onValueChangefunction-Event handler called when the value changes
classNamestring-Additional CSS classes for Tabs
listClassNamestring-Additional CSS classes for TabsList
triggerClassNamestring-Additional CSS classes for each TabsTrigger
contentClassNamestring-Additional CSS classes for each TabsContent
children(tab) => ReactNode-Render function for tab content

TabItem Type:

interface TabItem {
  id: string
  label: React.ReactNode
  icon?: React.ReactNode
  disabled?: boolean
}

Features

  • Animated Indicators: Smooth spring animations powered by Framer Motion
  • Two Variants: Choose between default (background) and underline styles
  • Three Sizes: Small, default, and large options for different layouts
  • Icon Support: Add icons to your tabs for enhanced visual communication
  • Keyboard Navigation: Full keyboard support for accessibility
  • Disabled State: Disable individual tabs when needed
  • Responsive: Works seamlessly across all screen sizes
  • Dark Mode: Automatically adapts to your theme

Accessibility

  • Uses Radix UI Tabs primitive for full accessibility compliance
  • Supports keyboard navigation (Arrow keys, Home, End)
  • Proper ARIA attributes for screen readers
  • Focus management and visual indicators

Notes

  • The animated indicator uses Framer Motion's layoutId feature for smooth transitions
  • Tab content supports controlled and uncontrolled state management
  • The underline variant tabs align to the start by default for better UX
  • The default variant centers tabs within their container