Faber UI
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

Terminal
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/tabs.json

Usage

typescript
"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.

PartBuilt onProps
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

  1. v0.3.0Button, Toggle, Tabs and NavigationMenu ship their style configs from @workspace/ui/lib/*-variants so component files export only components.minor
  2. v0.3.0Tabs and ToggleGroup pass orientation to Base UI, so vertical layouts get aria-orientation and Up/Down arrow navigation.patch
Full Tabs history

Last updated on

On this page