TabsVertical() — ui Function Reference

Architecture documentation for the TabsVertical() function in tabs-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ TabsVertical() — ui Function Reference

Dependency Diagram

graph TD
  cdfbb3dd_67ff_6bcd_8a1f_2559d9e4fbe9["TabsVertical()"]
  dd1a6104_63fe_63e2_e50f_c437e305bec0["tabs-example.tsx"]
  cdfbb3dd_67ff_6bcd_8a1f_2559d9e4fbe9 -->|defined in| dd1a6104_63fe_63e2_e50f_c437e305bec0
  style cdfbb3dd_67ff_6bcd_8a1f_2559d9e4fbe9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/tabs-example.tsx lines 303–329

function TabsVertical() {
  return (
    <Example title="Vertical">
      <Tabs defaultValue="account" orientation="vertical">
        <TabsList>
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="password">Password</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
        </TabsList>
        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
          <TabsContent value="account">
            Manage your account preferences and profile information.
          </TabsContent>
          <TabsContent value="password">
            Update your password to keep your account secure. Use a strong
            password with a mix of letters, numbers, and symbols.
          </TabsContent>
          <TabsContent value="notifications">
            Configure how you receive notifications and alerts. Choose which
            types of notifications you want to receive and how you want to
            receive them.
          </TabsContent>
        </div>
      </Tabs>
    </Example>
  )
}