Tabs

Hard-edge tab components with multiple animation variants. Uses framer-motion for smooth transitions and supports various visual styles.

Basic Tabs

Account Settings

Manage your account information, including your name, email, and profile picture. These settings control how others see you on the platform.

Animated Tabs (Bordered Container)

Tabs with a bordered container and animated background indicator. The trigger buttons have no individual borders, only a background color change.

Dashboard Overview

Get a high-level view of your key metrics and recent activity. The overview provides quick insights into your most important data.

Pill Tabs

A compact style with triggers inside a bordered container. No borders on individual triggers, just background color.

Code Editor

Write and edit code with syntax highlighting, auto-completion, and real-time error checking.

Underline Tabs

A minimal style with animated underline indicator.

Profile Information

Your profile information is visible to other users. Update your display name, bio, and avatar to personalize your presence.

Tabs with Icons (Default Style)

Profile Information

Your profile information is visible to other users. Update your display name, bio, and avatar to personalize your presence.

Full Width Animated

All Items

View all items in your collection. Filter and sort to find exactly what you need.

With Disabled Tab

Active Content

This tab is currently selected. The third tab in the list is disabled and cannot be clicked. Disabled tabs are visually distinct with reduced opacity.