snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/registry/bases/aria/examples/tabs-example.tsx

@@ -0,0 +1,357 @@
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/aria/components/example"
+import { Button } from "@/registry/bases/aria/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/bases/aria/ui/dropdown-menu"
+import { Input } from "@/registry/bases/aria/ui/input"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/bases/aria/ui/tabs"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export default function TabsExample() {
+  return (
+    <ExampleWrapper>
+      <TabsBasic />
+      <TabsLine />
+      <TabsVariantsComparison />
+      <TabsDisabled />
+      <TabsWithIcons />
+      <TabsIconOnly />
+      <TabsMultiple />
+      <TabsWithContent />
+      <TabsLineWithContent />
+      <TabsLineDisabled />
+      <TabsWithDropdown />
+      <TabsVertical />
+      <TabsWithInputAndButton />
+    </ExampleWrapper>
+  )
+}
+
+function TabsBasic() {
+  return (
+    <Example title="Basic">
+      <Tabs defaultSelectedKey="home">
+        <TabsList>
+          <TabsTrigger id="home">Home</TabsTrigger>
+          <TabsTrigger id="settings">Settings</TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </Example>
+  )
+}
+
+function TabsLine() {
+  return (
+    <Example title="Line">
+      <Tabs defaultSelectedKey="overview">
+        <TabsList variant="line">
+          <TabsTrigger id="overview">Overview</TabsTrigger>
+          <TabsTrigger id="analytics">Analytics</TabsTrigger>
+          <TabsTrigger id="reports">Reports</TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </Example>
+  )
+}
+
+function TabsVariantsComparison() {
+  return (
+    <Example title="Variants Alignment">
+      <div className="flex gap-4">
+        <Tabs defaultSelectedKey="overview">
+          <TabsList>
+            <TabsTrigger id="overview">Overview</TabsTrigger>
+            <TabsTrigger id="analytics">Analytics</TabsTrigger>
+          </TabsList>
+        </Tabs>
+        <Tabs defaultSelectedKey="overview">
+          <TabsList variant="line">
+            <TabsTrigger id="overview">Overview</TabsTrigger>
+            <TabsTrigger id="analytics">Analytics</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+    </Example>
+  )
+}
+
+function TabsDisabled() {
+  return (
+    <Example title="Disabled">
+      <Tabs defaultSelectedKey="home">
+        <TabsList>
+          <TabsTrigger id="home">Home</TabsTrigger>
+          <TabsTrigger id="settings" isDisabled>
+            Disabled
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </Example>
+  )
+}
+
+function TabsWithIcons() {
+  return (
+    <Example title="With Icons">
+      <Tabs defaultSelectedKey="preview">
+        <TabsList>
+          <TabsTrigger id="preview">
+            <IconPlaceholder
+              lucide="AppWindowIcon"
+              tabler="IconAppWindow"
+              hugeicons="CursorInWindowIcon"
+              phosphor="AppWindowIcon"
+              remixicon="RiWindowLine"
+            />
+            Preview
+          </TabsTrigger>
+          <TabsTrigger id="code">
+            <IconPlaceholder
+              lucide="CodeIcon"
+              tabler="IconCode"
+              hugeicons="CodeIcon"
+              phosphor="CodeIcon"
+              remixicon="RiCodeLine"
+            />
+            Code
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </Example>
+  )
+}
+
+function TabsIconOnly() {
+  return (
+    <Example title="Icon Only">
+      <Tabs defaultSelectedKey="home">
+        <TabsList>
+          <TabsTrigger id="home">
+            <IconPlaceholder
+              lucide="HomeIcon"
+              tabler="IconHome"
+              hugeicons="HomeIcon"
+              phosphor="HouseIcon"
+              remixicon="RiHomeLine"
+            />
+          </TabsTrigger>
+          <TabsTrigger id="search">
+            <IconPlaceholder
+              lucide="SearchIcon"
+              tabler="IconSearch"
+              hugeicons="SearchIcon"
+              phosphor="MagnifyingGlassIcon"
+              remixicon="RiSearchLine"
+            />
+          </TabsTrigger>
+          <TabsTrigger id="settings">
+            <IconPlaceholder
+              lucide="SettingsIcon"
+              tabler="IconSettings"
+              hugeicons="SettingsIcon"
+              phosphor="GearIcon"
+              remixicon="RiSettingsLine"
+            />
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </Example>
+  )
+}
+
+function TabsMultiple() {
+  return (
+    <Example title="Multiple">
+      <Tabs defaultSelectedKey="overview">
+        <TabsList>
+          <TabsTrigger id="overview">Overview</TabsTrigger>
+          <TabsTrigger id="analytics">Analytics</TabsTrigger>
+          <TabsTrigger id="reports">Reports</TabsTrigger>
+          <TabsTrigger id="settings">Settings</TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </Example>
+  )
+}
+
+function TabsWithContent() {
+  return (
+    <Example title="With Content">
+      <Tabs defaultSelectedKey="account">
+        <TabsList>
+          <TabsTrigger id="account">Account</TabsTrigger>
+          <TabsTrigger id="password">Password</TabsTrigger>
+          <TabsTrigger id="notifications">Notifications</TabsTrigger>
+        </TabsList>
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-rhea:rounded-xl style-rhea:p-6">
+          <TabsContent id="account">
+            Manage your account preferences and profile information.
+          </TabsContent>
+          <TabsContent id="password">
+            Update your password to keep your account secure.
+          </TabsContent>
+          <TabsContent id="notifications">
+            Configure how you receive notifications and alerts.
+          </TabsContent>
+        </div>
+      </Tabs>
+    </Example>
+  )
+}
+
+function TabsLineWithContent() {
+  return (
+    <Example title="Line With Content">
+      <Tabs defaultSelectedKey="account">
+        <TabsList variant="line">
+          <TabsTrigger id="account">Account</TabsTrigger>
+          <TabsTrigger id="password">Password</TabsTrigger>
+          <TabsTrigger id="notifications">Notifications</TabsTrigger>
+        </TabsList>
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-rhea:rounded-xl style-rhea:p-6">
+          <TabsContent id="account">
+            Manage your account preferences and profile information.
+          </TabsContent>
+          <TabsContent id="password">
+            Update your password to keep your account secure.
+          </TabsContent>
+          <TabsContent id="notifications">
+            Configure how you receive notifications and alerts.
+          </TabsContent>
+        </div>
+      </Tabs>
+    </Example>
+  )
+}
+
+function TabsLineDisabled() {
+  return (
+    <Example title="Line Disabled">
+      <Tabs defaultSelectedKey="overview">
+        <TabsList variant="line">
+          <TabsTrigger id="overview">Overview</TabsTrigger>
+          <TabsTrigger id="analytics">Analytics</TabsTrigger>
+          <TabsTrigger id="reports" isDisabled>
+            Reports
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </Example>
+  )
+}
+
+function TabsWithDropdown() {
+  return (
+    <Example title="With Dropdown">
+      <Tabs defaultSelectedKey="overview">
+        <div className="flex items-center justify-between">
+          <TabsList>
+            <TabsTrigger id="overview">Overview</TabsTrigger>
+            <TabsTrigger id="analytics">Analytics</TabsTrigger>
+            <TabsTrigger id="reports">Reports</TabsTrigger>
+          </TabsList>
+
+          <DropdownMenuTrigger>
+            <Button variant="ghost" size="icon" className="size-8">
+              <IconPlaceholder
+                lucide="MoreHorizontalIcon"
+                tabler="IconDots"
+                hugeicons="MoreHorizontalCircle01Icon"
+                phosphor="DotsThreeOutlineIcon"
+                remixicon="RiMoreLine"
+              />
+              <span className="sr-only">More options</span>
+            </Button>
+            <DropdownMenu placement="bottom end">
+              <DropdownMenuItem>Settings</DropdownMenuItem>
+              <DropdownMenuItem>Export</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>Archive</DropdownMenuItem>
+            </DropdownMenu>
+          </DropdownMenuTrigger>
+        </div>
+
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-rhea:rounded-xl style-rhea:p-6">
+          <TabsContent id="overview">
+            View your dashboard metrics and key performance indicators.
+          </TabsContent>
+          <TabsContent id="analytics">
+            Detailed analytics and insights about your data.
+          </TabsContent>
+          <TabsContent id="reports">
+            Generate and view custom reports.
+          </TabsContent>
+        </div>
+      </Tabs>
+    </Example>
+  )
+}
+
+function TabsVertical() {
+  return (
+    <Example title="Vertical">
+      <Tabs defaultSelectedKey="account" orientation="vertical">
+        <TabsList>
+          <TabsTrigger id="account">Account</TabsTrigger>
+          <TabsTrigger id="password">Password</TabsTrigger>
+          <TabsTrigger id="notifications">Notifications</TabsTrigger>
+        </TabsList>
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-rhea:rounded-xl style-rhea:p-6">
+          <TabsContent id="account">
+            Manage your account preferences and profile information.
+          </TabsContent>
+          <TabsContent id="password">
+            Update your password to keep your account secure. Use a strong
+            password with a mix of letters, numbers, and symbols.
+          </TabsContent>
+          <TabsContent id="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>
+  )
+}
+
+function TabsWithInputAndButton() {
+  return (
+    <Example title="With Input and Button" containerClassName="col-span-full">
+      <Tabs defaultSelectedKey="overview" className="mx-auto w-full max-w-lg">
+        <div className="flex items-center gap-4">
+          <TabsList>
+            <TabsTrigger id="overview">Overview</TabsTrigger>
+            <TabsTrigger id="analytics">Analytics</TabsTrigger>
+          </TabsList>
+          <div className="ml-auto flex items-center gap-2">
+            <Input placeholder="Search..." className="w-44" />
+            <Button>Action</Button>
+          </div>
+        </div>
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-rhea:rounded-xl style-rhea:p-6">
+          <TabsContent id="overview">
+            View your dashboard metrics and key performance indicators.
+          </TabsContent>
+          <TabsContent id="analytics">
+            Detailed analytics and insights about your data.
+          </TabsContent>
+          <TabsContent id="reports">
+            Generate and view custom reports.
+          </TabsContent>
+        </div>
+      </Tabs>
+    </Example>
+  )
+}