Ark UI

Usage

To get started, import the necessary components from the package:

import {
  Tabs,
  TabList,
  TabTrigger,
  TabContent,
  TabIndicator,
} from '@ark-ui/react'

Here are some examples of how to use the Tabs component:

import { Tabs } from '@ark-ui/react'

const Basic = () => (
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue">Vue Content</Tabs.Content>
    <Tabs.Content value="solid">Solid Content</Tabs.Content>
  </Tabs.Root>
)

import { TabContent, TabList, Tabs, TabTrigger } from '@ark-ui/solid'

const Basic = () => (
  <Tabs>
    <TabList>
      <TabTrigger value="react">React</TabTrigger>
      <TabTrigger value="vue">Vue</TabTrigger>
      <TabTrigger value="solid">Solid</TabTrigger>
    </TabList>
    <TabContent value="react">React Content</TabContent>
    <TabContent value="vue">Vue Content</TabContent>
    <TabContent value="solid">Solid Content</TabContent>
  </Tabs>
)

<script setup lang="ts">
import { ref } from 'vue'
import { Tabs, TabTrigger, TabList, TabIndicator, TabContent } from '@ark-ui/vue'

const value = ref('react')
</script>

<template>
  <Tabs>
    <TabList>
      <TabTrigger value="react">React</TabTrigger>
      <TabTrigger value="vue">Vue</TabTrigger>
      <TabTrigger value="solid">Solid</TabTrigger>
      <TabIndicator />
    </TabList>
    <TabContent value="react">React Content</TabContent>
    <TabContent value="vue">Vue Content</TabContent>
    <TabContent value="solid">Solid Content</TabContent>
  </Tabs>
</template>

Initial Tab

To set a default tab on initial render, use the defaultValue prop:

import { Tabs } from '@ark-ui/react'

const InitialTab = () => (
  <Tabs.Root defaultValue="react">
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue">Vue Content</Tabs.Content>
    <Tabs.Content value="solid">Solid Content</Tabs.Content>
  </Tabs.Root>
)

import { TabContent, TabList, Tabs, TabTrigger } from '@ark-ui/solid'

const InitialTab = () => (
  <Tabs value="react">
    <TabList>
      <TabTrigger value="react">React</TabTrigger>
      <TabTrigger value="vue">Vue</TabTrigger>
      <TabTrigger value="solid">Solid</TabTrigger>
    </TabList>
    <TabContent value="react">React Content</TabContent>
    <TabContent value="vue">Vue Content</TabContent>
    <TabContent value="solid">Solid Content</TabContent>
  </Tabs>
)

<script setup lang="ts">
import { ref } from 'vue'
import { Tabs, TabTrigger, TabList, TabIndicator, TabContent } from '@ark-ui/vue'

const value = ref('react')
</script>

<template>
  <Tabs v-model="value">
    <TabList>
      <TabTrigger value="react">React</TabTrigger>
      <TabTrigger value="vue">Vue</TabTrigger>
      <TabTrigger value="solid">Solid</TabTrigger>
      <TabIndicator />
    </TabList>
    <TabContent value="react">React Content</TabContent>
    <TabContent value="vue">Vue Content</TabContent>
    <TabContent value="solid">Solid Content</TabContent>
  </Tabs>
</template>

Tab Indicator

To provide a visual cue for the selected tab, use the TabIndicator component:

import { Tabs } from '@ark-ui/react'

const Indicator = () => (
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      <Tabs.Indicator />
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue">Vue Content</Tabs.Content>
    <Tabs.Content value="solid">Solid Content</Tabs.Content>
  </Tabs.Root>
)

import { TabContent, TabIndicator, TabList, Tabs, TabTrigger } from '@ark-ui/solid'

const Indicator = () => (
  <Tabs>
    <TabList>
      <TabTrigger value="react">React</TabTrigger>
      <TabTrigger value="vue">Vue</TabTrigger>
      <TabTrigger value="solid">Solid</TabTrigger>
      <TabIndicator />
    </TabList>
    <TabContent value="react">React Content</TabContent>
    <TabContent value="vue">Vue Content</TabContent>
    <TabContent value="solid">Solid Content</TabContent>
  </Tabs>
)

Story not available

Lazy Mounting

Lazy mounting is a feature that allows the content of a tab to be rendered only when the tab is first activated. This is useful for performance optimization, especially when tab content is large or complex. To enable lazy mounting, use the lazyMount prop on the TabContent component.

In addition, the unmountOnExit prop can be used in conjunction with lazyMount to unmount the tab content when the tab is deactivated, freeing up resources. The next time the tab is activated, its content will be re-rendered.

import { Tabs } from '@ark-ui/react'

const LazyMount = () => (
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      <Tabs.Indicator />
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue" lazyMount>
      Vue Content
    </Tabs.Content>
    <Tabs.Content value="solid" lazyMount unmountOnExit>
      Solid Content
    </Tabs.Content>
  </Tabs.Root>
)

Story not available

Story not available

Disabled Tab

To disable a tab, simply pass the disabled prop to the TabTrigger component:

import { Tabs } from '@ark-ui/react'

const DisabledTab = () => (
  <Tabs.Root defaultValue="react">
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue" disabled>
        Vue
      </Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue">Vue Content</Tabs.Content>
    <Tabs.Content value="solid">Solid Content</Tabs.Content>
  </Tabs.Root>
)

import { TabContent, TabList, Tabs, TabTrigger } from '@ark-ui/solid'

const DisabledTab = () => (
  <Tabs value="react">
    <TabList>
      <TabTrigger value="react">React</TabTrigger>
      <TabTrigger value="vue" disabled>
        Vue
      </TabTrigger>
      <TabTrigger value="solid">Solid</TabTrigger>
    </TabList>
    <TabContent value="react">React Content</TabContent>
    <TabContent value="vue">Vue Content</TabContent>
    <TabContent value="solid">Solid Content</TabContent>
  </Tabs>
)

Story not available

Controlled Tabs

To create a controlled Tabs component, manage the current selected tab using the value prop and update it when the onChange event handler is called:

import { Tabs } from '@ark-ui/react'
import { useState } from 'react'

const Controlled = () => {
  const [value, setValue] = useState<string | null>('react')
  return (
    <Tabs.Root value={value} onValueChange={(e) => setValue(e.value)}>
      <Tabs.List>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="react">React Content</Tabs.Content>
      <Tabs.Content value="vue">Vue Content</Tabs.Content>
      <Tabs.Content value="solid">Solid Content</Tabs.Content>
    </Tabs.Root>
  )
}

import { TabContent, TabList, Tabs, TabTrigger } from '@ark-ui/solid'
import { createSignal } from 'solid-js'

const Controlled = () => {
  const [value, setValue] = createSignal<string | null>('react')
  return (
    <Tabs value={value()} onValueChange={(e) => setValue(e.value)}>
      <TabList>
        <TabTrigger value="react">React</TabTrigger>
        <TabTrigger value="vue">Vue</TabTrigger>
        <TabTrigger value="solid">Solid</TabTrigger>
      </TabList>
      <TabContent value="react">React Content</TabContent>
      <TabContent value="vue">Vue Content</TabContent>
      <TabContent value="solid">Solid Content</TabContent>
    </Tabs>
  )
}

Story not available

Vertical Tabs

The default orientation of the tabs is horizontal. To change the orientation, set the orientation prop to vertical.

import { Tabs } from '@ark-ui/react'

const Vertical = () => (
  <Tabs.Root orientation="vertical" defaultValue="react">
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue">Vue Content</Tabs.Content>
    <Tabs.Content value="solid">Solid Content</Tabs.Content>
  </Tabs.Root>
)

import { TabContent, TabList, Tabs, TabTrigger } from '@ark-ui/solid'

const Vertical = () => (
  <Tabs orientation="vertical" value="react">
    <TabList>
      <TabTrigger value="react">React</TabTrigger>
      <TabTrigger value="vue">Vue</TabTrigger>
      <TabTrigger value="solid">Solid</TabTrigger>
    </TabList>
    <TabContent value="react">React Content</TabContent>
    <TabContent value="vue">Vue Content</TabContent>
    <TabContent value="solid">Solid Content</TabContent>
  </Tabs>
)

Story not available

Manual Activation

By default, the tab can be selected when it receives focus from either the keyboard or pointer interaction. This is called automatic tab activation.

In contrast, manual tab activation means the tab is selected with the

Enter key or by clicking on the tab.

import { Tabs } from '@ark-ui/react'

const Manual = () => (
  <Tabs.Root activationMode="manual" defaultValue="react">
    <Tabs.List>
      <Tabs.Trigger value="react">React</Tabs.Trigger>
      <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
      <Tabs.Trigger value="solid">Solid</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="react">React Content</Tabs.Content>
    <Tabs.Content value="vue">Vue Content</Tabs.Content>
    <Tabs.Content value="solid">Solid Content</Tabs.Content>
  </Tabs.Root>
)

import { TabContent, TabList, Tabs, TabTrigger } from '@ark-ui/solid'

const Manual = () => (
  <Tabs activationMode="manual" value="react">
    <TabList>
      <TabTrigger value="react">React</TabTrigger>
      <TabTrigger value="vue">Vue</TabTrigger>
      <TabTrigger value="solid">Solid</TabTrigger>
    </TabList>
    <TabContent value="react">React Content</TabContent>
    <TabContent value="vue">Vue Content</TabContent>
    <TabContent value="solid">Solid Content</TabContent>
  </Tabs>
)

Story not available

Conclusion

The Tabs component offers a comprehensive and flexible solution for adding tabbed navigation to your applications. With a wide variety of customization options and features, it can accommodate various use cases and designs.