Creating a Tabs Recipe

To build the tabs recipe, we'll use the Tab component from Ark UI.

Install Ark UI

In your terminal, run the command

pnpm install @ark-ui/react

Import the Tabs Component

At the top of your file, import Tabs from @ark-ui/react

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

Define the slots

The tabs has 4 slots namely, root, tab, list and content.

const tabsRecipe = sva({
  slots: ['root', 'tab', 'list', 'content'],
  base: {
   ...
  },
  variants: {
   ...
  },
  defaultVariants: {
   ...
  },
})

Use the Tabs from Ark UI

In your app, use the tabs recipe within the component you imported.

function App() {
  const classes = tabsRecipe()

  return (
    <div>
      <Tabs.Root defaultValue="general" className={classes.root}>
        <Tabs.List className={classes.list}>
          <Tabs.Trigger className={classes.tab} value="general">
            General
          </Tabs.Trigger>
          <Tabs.Trigger className={classes.tab} value="team">
            Team
          </Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content className={classes.content} value="general">
          General tabs content...
        </Tabs.Content>
        <Tabs.Content className={classes.content} value="team">
          Teams tabs content...
        </Tabs.Content>
      </Tabs.Root>
    </div>
  )
}