New

TabNav

Tab navigation with animated underline indicator, badges showing counts, icon + label combos, and horizontal scroll for overflow.

Navigation & Layouttabsnavigationtabbed

Dependencies

shadcn/ui components needed:

npx shadcn@latest add tabsnpx shadcn@latest add badgenpx shadcn@latest add scroll-area

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Layout, Grid, List, Image, FileText, Settings } from 'lucide-react';
4import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
5import { Badge } from '@/components/ui/badge';
6import { ScrollArea } from '@/components/ui/scroll-area';
7
8export default function TabNav() {
9  const tabs = [
10    { id: 'overview', icon: Layout, label: 'Overview', count: null },
11    { id: 'projects', icon: Grid, label: 'Projects', count: 24 },
12    { id: 'tasks', icon: List, label: 'Tasks', count: 8 },
13    { id: 'media', icon: Image, label: 'Media', count: null },
14    { id: 'documents', icon: FileText, label: 'Documents', count: 156 },
15    { id: 'settings', icon: Settings, label: 'Settings', count: null },
16  ];
17
18  return (
19    <div className="w-full max-w-3xl mx-auto p-6 bg-white dark:bg-slate-950 rounded-xl border border-slate-200 dark:border-slate-800">
20      <Tabs defaultValue="overview" className="w-full">
21        <ScrollArea className="w-full">
22          <TabsList className="inline-flex h-12 items-center justify-start rounded-lg bg-slate-100 dark:bg-slate-900 p-1 w-auto">
23            {tabs.map((tab) => (
24              <TabsTrigger
25                key={tab.id}
26                value={tab.id}
27                className="inline-flex items-center gap-2 px-4 py-2.5 rounded-md data-[state=active]:bg-white data-[state=active]:shadow-sm data-[state=active]:text-slate-900 dark:data-[state=active]:bg-slate-800 dark:data-[state=active]:text-white transition-all"
28              >
29                <tab.icon className="w-4 h-4" />
30                <span className="font-medium">{tab.label}</span>
31                {tab.count && (
32                  <Badge variant="secondary" className="ml-1 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
33                    {tab.count}
34                  </Badge>
35                )}
36              </TabsTrigger>
37            ))}
38          </TabsList>
39        </ScrollArea>
40        <TabsContent value="overview" className="mt-6">
41          <div className="p-8 rounded-lg bg-slate-50 dark:bg-slate-900/50 border border-dashed border-slate-300 dark:border-slate-700 text-center">
42            <p className="text-slate-600 dark:text-slate-400">Overview content goes here</p>
43          </div>
44        </TabsContent>
45      </Tabs>
46    </div>
47  );
48}