Tabs

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Radix UI.

Installation

Complete project setup first. Your configuration must select react/radix and include your Design System ID.

pnpm exec frontfriend download tabs -f react --primitive radix

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
<Tabs defaultValue="1" className="w-[400px] flex items-center flex-col">
  <TabsList type="line">
    <TabsTrigger value="1">Tab 1</TabsTrigger>
    <TabsTrigger value="2">Tab 2</TabsTrigger>
    <TabsTrigger value="3">Tab 3</TabsTrigger>
    <TabsTrigger value="4">Tab 4</TabsTrigger>
    <TabsTrigger value="5">Tab 5</TabsTrigger>
  </TabsList>
  <TabsContent value="1" className="text-neutral-mid">
    Tab 1 content here
  </TabsContent>
  <TabsContent value="2" className="text-neutral-mid">
    Tab 2 content here
  </TabsContent>
  <TabsContent value="3" className="text-neutral-mid">
    Tab 3 content here
  </TabsContent>
  <TabsContent value="4" className="text-neutral-mid">
    Tab 4 content here
  </TabsContent>
  <TabsContent value="5" className="text-neutral-mid">
    Tab 5 content here
  </TabsContent>
</Tabs>;

Examples

Line

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
<Tabs defaultValue="1" className="w-[400px] flex items-center flex-col">
  <TabsList type="line">
    <TabsTrigger value="1">Tab 1</TabsTrigger>
    <TabsTrigger value="2">Tab 2</TabsTrigger>
    <TabsTrigger value="3">Tab 3</TabsTrigger>
    <TabsTrigger value="4">Tab 4</TabsTrigger>
    <TabsTrigger value="5">Tab 5</TabsTrigger>
  </TabsList>
  <TabsContent value="1" className="text-neutral-mid">
    Tab 1 content here
  </TabsContent>
  <TabsContent value="2" className="text-neutral-mid">
    Tab 2 content here
  </TabsContent>
  <TabsContent value="3" className="text-neutral-mid">
    Tab 3 content here
  </TabsContent>
  <TabsContent value="4" className="text-neutral-mid">
    Tab 4 content here
  </TabsContent>
  <TabsContent value="5" className="text-neutral-mid">
    Tab 5 content here
  </TabsContent>
</Tabs>;

Solid

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
<Tabs defaultValue="1" className="w-[400px] flex items-center flex-col">
  <TabsList type="solid">
    <TabsTrigger value="1">Tab 1</TabsTrigger>
    <TabsTrigger value="2">Tab 2</TabsTrigger>
    <TabsTrigger value="3">Tab 3</TabsTrigger>
  </TabsList>
  <TabsContent value="1" className="text-neutral-mid">
    Tab 1 content here
  </TabsContent>
  <TabsContent value="2" className="text-neutral-mid">
    Tab 2 content here
  </TabsContent>
  <TabsContent value="3" className="text-neutral-mid">
    Tab 3 content here
  </TabsContent>
</Tabs>;

Custom

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
<Tabs defaultValue="1" className="w-[360px] flex items-center flex-col">
  <TabsList type="solid" className="w-full">
    <TabsTrigger value="1" className="flex-1">
      Tab 1
    </TabsTrigger>
    <TabsTrigger value="2" className="flex-1">
      Tab 2 <Badge variant="main">New</Badge>
    </TabsTrigger>
  </TabsList>
  <TabsContent value="1" className="text-neutral-mid">
    Tab 1 content here
  </TabsContent>
  <TabsContent value="2" className="text-neutral-mid">
    Tab 2 content here
  </TabsContent>
</Tabs>;

Line With Disabled

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
<Tabs defaultValue="1" className="w-[400px] flex items-center flex-col">
  <TabsList type="line">
    <TabsTrigger value="1">Tab 1</TabsTrigger>
    <TabsTrigger value="2">Tab 2</TabsTrigger>
    <TabsTrigger value="3">Tab 3</TabsTrigger>
    <TabsTrigger value="4" disabled>
      Disabled tab
    </TabsTrigger>
    <TabsTrigger value="5">Tab 5</TabsTrigger>
  </TabsList>
  <TabsContent value="1" className="text-neutral-mid">
    Tab 1 content here
  </TabsContent>
  <TabsContent value="2" className="text-neutral-mid">
    Tab 2 content here
  </TabsContent>
  <TabsContent value="3" className="text-neutral-mid">
    Tab 3 content here
  </TabsContent>
  <TabsContent value="4" className="text-neutral-mid">
    Tab 4 content here
  </TabsContent>
  <TabsContent value="5" className="text-neutral-mid">
    Tab 5 content here
  </TabsContent>
</Tabs>;

Solid With Disabled

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
<Tabs defaultValue="1" className="w-[400px] flex items-center flex-col">
  <TabsList type="solid">
    <TabsTrigger value="1">Tab 1</TabsTrigger>
    <TabsTrigger value="2">Tab 1</TabsTrigger>
    <TabsTrigger value="3" disabled>
      Disabled tab
    </TabsTrigger>
  </TabsList>
  <TabsContent value="1" className="text-neutral-mid">
    Tab 1 content here
  </TabsContent>
  <TabsContent value="2" className="text-neutral-mid">
    Tab 2 content here
  </TabsContent>
  <TabsContent value="3" className="text-neutral-mid">
    Tab 3 content here
  </TabsContent>
</Tabs>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Radix UI.

Prop	Type	Default	Description
`type`	`"solid" \| "line"`	`—`
`variant`	`"default" \| "line"`	`—`

TabsList

Prop	Type	Default	Description
`type`	`"solid" \| "line"`	`"solid"`
`variant`	`"default" \| "line"`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.