Expanded Tabs

Animated, icon-supported, and expanded tab component.

Welcome

This is the general overview of the home page. Here you can track key metrics and discover the latest updates.

Install

pnpm dlx shadcn@latest add https://www.katestroyui.com/r/expanded-tabs

Usage

1import {
2  ExpandedTabs,
3  ExpandedTabsList,
4  ExpandedTabsTrigger,
5  ExpandedTabsContent,
6} from "@/components/ui/expanded-tabs";
7import { Home, Settings, User } from "lucide-react";
8
9export function Example() {
10  return (
11    <ExpandedTabs defaultValue="home">
12      <ExpandedTabsList>
13        <ExpandedTabsTrigger value="home" icon={Home}>
14          Anasayfa
15        </ExpandedTabsTrigger>
16        <ExpandedTabsTrigger value="profile" icon={User}>
17          Profil
18        </ExpandedTabsTrigger>
19        <ExpandedTabsTrigger value="settings" icon={Settings}>
20          Ayarlar
21        </ExpandedTabsTrigger>
22      </ExpandedTabsList>
23      <ExpandedTabsContent value="home">
24        Anasayfa içeriği
25      </ExpandedTabsContent>
26      <ExpandedTabsContent value="profile">
27        Profil içeriği
28      </ExpandedTabsContent>
29      <ExpandedTabsContent value="settings">
30        Ayarlar içeriği
31      </ExpandedTabsContent>
32    </ExpandedTabs>
33  );
34}

Props

Prop	Type	Description	Default
ExpandedTabs	defaultValue	The default value of the selected tab	-
ExpandedTabsTrigger	value	The value of the tab	-
ExpandedTabsTrigger	icon	The icon to display at the beginning of the tab	-
ExpandedTabsContent	value	The value of the tab content it is associated with	-