Components
Tabs
Switch between panels of content with a tab list.
Tabs is built on the Base UI Tabs primitive. It supports horizontal and vertical orientations and a line variant for the tab list.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/tabs.jsonUsage
"use client";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
export default function Example() {
return (
<Tabs defaultValue="tab-1">
<TabsList>
<TabsTrigger value="tab-1">First</TabsTrigger>
<TabsTrigger value="tab-2">Second</TabsTrigger>
</TabsList>
<TabsContent value="tab-1">Content one</TabsContent>
<TabsContent value="tab-2">Content two</TabsContent>
</Tabs>
);
}Examples
Default
Manage your account settings and profile.
Line variant
Overview content
Vertical orientation
General settings
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
Tabsdata-slot="tabs" | Tabs.RootBase UI | — |
TabsListdata-slot="tabs-list" | Tabs.ListBase UI | — |
TabsTriggerdata-slot="tabs-trigger" | Tabs.TabBase UI | — |
TabsContentdata-slot="tabs-content" | Tabs.PanelBase UI | — |
Changelog
- v0.3.0Button, Toggle, Tabs and NavigationMenu ship their style configs from @workspace/ui/lib/*-variants so component files export only components.minor
- v0.3.0Tabs and ToggleGroup pass orientation to Base UI, so vertical layouts get aria-orientation and Up/Down arrow navigation.patch
Last updated on