Ivaldi | ui

Example

Anatomy

<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab value="value" />
  </Tabs.List>
  <Tabs.Content value="value" />
</Tabs.Root>

Usage

import { Tabs } from '@ivaldi/ui'

<Tabs.Root>

  <Tabs.List>
    <Tabs.Tab value="edit">
      <PencilIcon /> Edit
    </Tabs.Tab>
    <Tabs.Tab value="preview">
      <EyeIcon /> Preview
    </Tabs.Tab>
  </Tabs.List>

  <Tabs.Content value="edit">
    <p>Edit your content here.</p>
  </Tabs.Content>
  
  <Tabs.Content value="preview">
    <p>Preview your content here.</p>
  </Tabs.Content>

</Tabs.Root>

Tabs.Root Props

Prop	Type	Default
`value`	`string`	—
`defaultValue`	`string`	—
`onValueChange`	`function`	—
`orientation`	`enum`	—
`dir`	`enum`	—
`activationMode`	`enum`	—
`className`	`string`	—
`children`	`ReactNode`	—
`asChild`	`boolean`	—

Tabs.Root Props

Prop	Type	Default
`value`	`string`	—
`defaultValue`	`string`	—
`onValueChange`	`function`	—
`orientation`	`enum`	—
`dir`	`enum`	—
`activationMode`	`enum`	—
`className`	`string`	—
`children`	`ReactNode`	—
`asChild`	`boolean`	—

Tabs.Content Props

Prop	Type	Default
`value`	`string`	—
`forceMount`	`true`	—
`className`	`string`	—
`children`	`ReactNode`	—
`asChild`	`boolean`	—

Tabs.Indicator Props

Prop	Type	Default

Tabs.List Props

Prop	Type	Default
`loop`	`boolean`	—
`className`	`string`	—
`children`	`ReactNode`	—
`asChild`	`boolean`	—
`indicator`	`enum`	`"box"`
`size`	`enum`	`"default"`

Tabs.List Props

Prop	Type	Default
`loop`	`boolean`	—
`className`	`string`	—
`children`	`ReactNode`	—
`asChild`	`boolean`	—

Tabs.Trigger Props

Prop	Type	Default

Tabs.Trigger Props

Prop	Type	Default
`value`	`string`	—
`type`	`enum`	—
`className`	`string`	—
`children`	`ReactNode`	—
`asChild`	`boolean`	—