Tabs

Tabbed content panels. Wraps bits-ui Tabs.

Example

Content for tab one

Sub-components

Tabs.Root

Prop	Type	Default	Description
`value`	`string`	`''`	Active tab value (bindable)
`onValueChange`	`(value: string) => void`	—	Called when active tab changes
`class`	`string`	—	Additional CSS classes

Tabs.List

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes

Tabs.Trigger

Prop	Type	Default	Description
`value`	`string`	—	Tab identifier
`class`	`string`	—	Additional CSS classes

Tabs.Content

Prop	Type	Default	Description
`value`	`string`	—	Matching tab identifier
`class`	`string`	—	Additional CSS classes

Usage

<script>
  import { Tabs } from '@chrissnell/chonky-ui';
</script>

<Tabs.Root value="first">
  <Tabs.List>
    <Tabs.Trigger value="first">First</Tabs.Trigger>
    <Tabs.Trigger value="second">Second</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="first">First panel</Tabs.Content>
  <Tabs.Content value="second">Second panel</Tabs.Content>
</Tabs.Root>