Railbase
GPTClaude

Tabs

Layered sections of content shown one panel at a time.

Updated

Default
<Tabs defaultValue="account" class="w-full max-w-md">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</Tabs>

Layered sections of content shown one panel at a time.

Installation

railbase ui add tabs

Note

railbase ui add also copies shared primitives — they ship alongside this component automatically.

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/lib/ui/tabs";

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account panel.</TabsContent>
  <TabsContent value="password">Password panel.</TabsContent>
</Tabs>

Anatomy

Exported parts: Tabs · TabsList · TabsTrigger · TabsContent

← PreviousTableNext →Textarea