Menus & Navigation

Tabs

Switch between panels.

Import

tsx

import { Tabs } from "@cronus-ui/ui";

bash

npx cronus-ui add tabs

Examples

Three tabs

Switch between related panels of content within a single surface.

Manage your account details and public profile.

tsx

<Tabs defaultValue="account" className="w-full max-w-md">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="team">Team</TabsTrigger>
  </TabsList>
  <TabsContent value="account" className="pt-4">
    <p className="text-sm text-fg-secondary">
      Manage your account details and public profile.
    </p>
  </TabsContent>
  <TabsContent value="password" className="pt-4">
    <p className="text-sm text-fg-secondary">
      Change your password and configure two-factor authentication.
    </p>
  </TabsContent>
  <TabsContent value="team" className="pt-4">
    <p className="text-sm text-fg-secondary">
      Invite teammates and manage their roles and permissions.
    </p>
  </TabsContent>
</Tabs>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 2/2Pixel diff 0 pxLogic 2/2Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component TabsDefault layout:inline style:tabs {
  label "default"
  text "Account"
  text "Manage your account details."
  text "Password"
  text "Change your password."
  text "Team"
  text "Invite teammates."
}

page "/audit/tabs/default" type:custom {
  use TabsDefault
}

second.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component TabsSecond layout:inline style:tabs {
  value:"Password"
  label "second"
  text "Account"
  text "Manage your account details."
  text "Password"
  text "Change your password."
  text "Team"
  text "Invite teammates."
}

page "/audit/tabs/second" type:custom {
  use TabsSecond
}

API Reference

Generated from the component's exported types.

TabsProps

Extends ComponentPropsWithoutRef<typeof TabsPrimitive.Root>

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Uncontrolled initial value.
`onValueChange`	`(value: string) => void`	—	Called when the value changes.
`orientation`	`"horizontal" \| "vertical"`	—	—
`dir`	`"ltr" \| "rtl"`	—	Reading direction. Inherits from the document when omitted.
`activationMode`	`"automatic" \| "manual"`	—	—

TabsListProps

Extends ComponentPropsWithoutRef<typeof TabsPrimitive.List>

Prop	Type	Default	Description
`loop`	`boolean`	—	When true, keyboard navigation wraps around the ends.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

TabsTriggerProps

Extends ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.

TabsContentProps

Extends ComponentPropsWithoutRef<typeof TabsPrimitive.Content>

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.