Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

@react.component
let make = () =>
  <Tabs defaultValue="overview" className="w-[400px]">

Installation

npx shadcn@latest add @rescript-shadcn/Tabs

Usage

<Tabs defaultValue="account" className="w-[400px]">
  <Tabs.List>
    <Tabs.Trigger value="account"> {"Account"->React.string} </Tabs.Trigger>
    <Tabs.Trigger value="password"> {"Password"->React.string} </Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="account"> {"Make changes to your account here."->React.string} </Tabs.Content>
  <Tabs.Content value="password"> {"Change your password here."->React.string} </Tabs.Content>
</Tabs>

Examples

Line

Use the variant=Line prop on TabsList for a line style.

@react.component
let make = () =>
  <Tabs defaultValue="overview">

Vertical

Use orientation="vertical" for vertical tabs.

@react.component
let make = () =>
  <Tabs defaultValue="account" orientation=Vertical>

Disabled

@react.component
let make = () =>
  <Tabs defaultValue="home">

Icons

module LucideIcons = {
  type props = {className?: string, @as("data-icon") dataIcon?: string}

API Reference

See the Base UI Tabs documentation.