Account tab content

Fancy Tabs Component

A highly accessible tabs component with smooth animations, built with Radix UI and Framer Motion.

Smooth animation when switching between tabs
Fully keyboard accessible
Responsive design
Customizable styling

Installation

The Tabs component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the tabs in your project.

React TSX
1import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/modern-ui/tabs"

React TSX
1<Tabs defaultValue="account">
2  <TabsList>
3    <TabsTrigger value="account">Account</TabsTrigger>
4    <TabsTrigger value="password">Password</TabsTrigger>
5    <TabsTrigger value="settings">Settings</TabsTrigger>
6  </TabsList>
7  <TabsContent value="account">
8    Account tab content
9  </TabsContent>
10  <TabsContent value="password">
11    Password tab content
12  </TabsContent>
13  <TabsContent value="settings">
14    Settings tab content
15  </TabsContent>
16</Tabs>

Examples

Basic Tabs

Account Settings

Configure your account preferences and settings.

Vertical Tabs

Tab 1 Content

This is the content for Tab 1.

Tabs with Icons

Account Settings

Configure your account preferences and settings.

Responsive Tabs

Responsive Tab 1

This tabs layout adapts to different screen sizes using grid.

API Reference

Tabs Components

The Fancy Tabs component is composed of four main parts:

Component	Description
`Tabs`	The root container component
`TabsList`	Container for the tab triggers with animated indicator
`TabsTrigger`	Individual tab buttons/triggers
`TabsContent`	Content displayed when its associated tab is active

Tabs Props

Prop	Type	Default	Description
`defaultValue`	`string`	-	The value of the tab that should be active when initially rendered
`value`	`string`	-	The controlled value of the tab to activate
`onValueChange`	`(value: string) => void`	-	Callback invoked when the active tab changes
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	The orientation of the tabs
`dir`	`'ltr' \| 'rtl'`	-	The reading direction of the tabs
`activationMode`	`'automatic' \| 'manual'`	`'automatic'`	Whether tabs are activated automatically on focus or manually
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Tab components

TabsList Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	TabsTrigger components

TabsTrigger Props

Prop	Type	Default	Description
`value`	`string`	Required	The unique value of the tab
`disabled`	`boolean`	`false`	When true, disables the tab trigger
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	The content of the tab trigger

TabsContent Props

Prop	Type	Default	Description
`value`	`string`	Required	The value of the associated tab trigger
`forceMount`	`boolean`	`false`	When true, content will be mounted even if its tab isn't active
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	The content to display when the tab is active

Animation Features

The Fancy Tabs component includes the following animation features:

Sliding indicator that moves to highlight the active tab
Smooth transitions when switching between tabs
Spring-based animation physics for natural movement
Automatic resizing of the indicator to match the tab size