Underline Tabs Component

A stylish underline tabs component with smooth animations, built with Framer Motion.

• Clean underline animation when switching between tabs
• Support for icons in tab triggers
• Fully customizable content
• Simple data-driven API

---

Installation

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

---

Usage

Here is how to use underline tabs in your project:

React TSX
1import UnderlineTabs from "@/components/modern-ui/underline-tabs"
2import { Home, Settings, User } from "lucide-react"

React TSX
1const tabs = [
2  {
3    id: "profile",
4    label: "Profile",
5    icon: User,
6    content: <div>Profile content</div>
7  },
8  {
9    id: "dashboard",
10    label: "Dashboard",
11    icon: Home,
12    content: <div>Dashboard content</div>
13  },
14  {
15    id: "settings",
16    label: "Settings",
17    icon: Settings,
18    content: <div>Settings content</div>
19  }
20];
21
22<UnderlineTabs tabs={tabs} defaultTab="profile" />

---

Examples

Basic Underline Tabs

Tabs with Icons

Custom Styled Tabs

---

API Reference

Tab Object

Each tab is defined by a Tab object with the following properties:

UnderlineTabs Props

---