Tab
A versatile tab component with multiple variants, sizes, and support for icons, badges, and disabled states
Default Variant with Icons and Badges
Profile Information
Manage your profile settings and personal information here.
John Doe
john.doe@example.com
Pills Variant (Small Size)
Document Library
Your uploaded documents and files are displayed here.
Underline Variant
This is the overview section with general information.
Full Width Pills (Large Size)
Analytics Overview
Page Views
1,234
Users
567
Full Width Default
All items content
Responsive Layout Example
Mobile View
Optimized for mobile devices
Tab Component
tsx
1import React, { useState } from "react";2import { cn } from "@/lib/cn";34interface TabItem {5 id: string;6 label: string;7 content: React.ReactNode;8 disabled?: boolean;9 icon?: React.ReactNode;10 badge?: string | number;