Tabs | Park UI

Know React? Check out Solid!

Installation

npx @park-ui/cli add tabs

Add Component

Copy the code snippet below into you components folder.

'use client'
import { Tabs } from '@ark-ui/react/tabs'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { tabs } from 'styled-system/recipes'

const { withProvider, withContext } = createStyleContext(tabs)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(Tabs.Root, 'root')
export const RootProvider = withProvider(Tabs.RootProvider, 'root')
export const List = withContext(Tabs.List, 'list')
export const Trigger = withContext(Tabs.Trigger, 'trigger')
export const Content = withContext(Tabs.Content, 'content')
export const Indicator = withContext(Tabs.Indicator, 'indicator')

export { TabsContext as Context } from '@ark-ui/react/tabs'

Integrate Recipe

Integrate this recipe in to your Panda config.

import { tabsAnatomy } from '@ark-ui/react/tabs'
import { defineSlotRecipe } from '@pandacss/dev'

export const tabs = defineSlotRecipe({
  slots: tabsAnatomy.keys(),
  className: 'tabs',
  base: {
    root: {
      position: 'relative',
      display: 'flex',
      alignItems: 'start',
      _horizontal: {
        flexDirection: 'column',
        gap: '2',
      },
      _vertical: {
        flexDirection: 'row',
        gap: '4',
      },
    },
    list: {
      display: 'flex',
      position: 'relative',
      isolation: 'isolate',
      _horizontal: {
        flexDirection: 'row',
      },
      _vertical: {
        flexDirection: 'column',
      },
    },
    trigger: {
      alignItems: 'center',
      cursor: 'pointer',
      display: 'flex',
      fontWeight: 'semibold',
      outline: '0',
      position: 'relative',
      _focusVisible: {
        zIndex: 1,
        focusVisibleRing: 'outside',
      },
      _disabled: {
        layerStyle: 'disabled',
      },
    },
    content: {
      focusVisibleRing: 'inside',

      _horizontal: {
        width: '100%',
      },
      _vertical: {
        height: '100%',
      },
    },
    indicator: {
      width: 'var(--width)',
      height: 'var(--height)',
      zIndex: -1,
    },
  },

  variants: {
    size: {
      xs: {
        list: { gap: '1' },
        trigger: { h: '8', minW: '8', textStyle: 'xs', px: '3', gap: '2' },
      },
      sm: {
        list: { gap: '1' },
        trigger: { h: '9', minW: '9', textStyle: 'sm', px: '3.5', gap: '2' },
      },
      md: {
        list: { gap: '1' },
        trigger: { h: '10', minW: '10', textStyle: 'sm', px: '4', gap: '2' },
      },
      lg: {
        list: { gap: '1' },
        trigger: { h: '11', minW: '11', textStyle: 'md', px: '4.5', gap: '2' },
      },
    },
    variant: {
      line: {
        root: {
          alignItems: 'stretch',
        },
        list: {
          _horizontal: {
            borderBottomWidth: '1px',
          },
          _vertical: {
            borderStartWidth: '1px',
          },
        },
        indicator: {
          background: 'colorPalette.solid.bg',
          _horizontal: {
            bottom: '0',
            height: '0.5',
            transform: 'translateY(1px)',
          },
          _vertical: {
            left: '0',
            width: '0.5',
            transform: 'translateX(-1px)',
          },
        },
        trigger: {
          color: 'fg.muted',
          _selected: {
            color: 'colorPalette.plain.fg',
          },
        },
      },
      subtle: {
        trigger: {
          color: 'fg.muted',
          _selected: {
            color: 'colorPalette.subtle.fg',
          },
        },
        indicator: {
          bg: 'colorPalette.subtle.bg',
          color: 'colorPalette.subtle.fg',
          borderRadius: 'l2',
        },
      },
      enclosed: {
        list: {
          bg: {
            _light: 'gray.2',
            _dark: 'gray.1',
          },
          boxShadow: 'inset 0 0 0px 1px var(--shadow-color)',
          boxShadowColor: 'border',
          borderRadius: 'l3',
          p: '1',
        },
        trigger: {
          color: 'fg.muted',
          _selected: {
            color: 'colorPalette.surface.fg',
          },
        },
        indicator: {
          borderRadius: 'l2',
          boxShadow: {
            _light: 'xs',
            _dark: 'none',
          },
          bg: {
            _light: 'white',
            _dark: 'gray.2',
          },
        },
      },
    },
    fitted: {
      true: {
        root: {
          alignItems: 'stretch',
        },
        trigger: {
          flex: 1,
          textAlign: 'center',
          justifyContent: 'center',
        },
      },
    },
  },

  defaultVariants: {
    size: 'md',
    variant: 'line',
  },
})

Usage

import { Tabs } from '@/components/ui'

<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger />
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Content />
</Tabs.Root>

Examples

Use the size prop to change the size of the tabs.

Variants

Use the variant prop to change the appearance of the tabs.

Orientation

Use the orientation prop to change the orientation of the tabs.

Lazy Loading

Optimize performance by using the lazyMount and unmountOnExit props to conditionally render tab content.

Tab 1: Content 0

Fitted

Use the fitted prop to make the tabs fit the width of the container.

Props

Root

Prop	Default	Type
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'`
`variant`	`'line'`	`'line' \| 'subtle' \| 'enclosed'`
`activationMode`	`\automatic\`	`'manual' \| 'automatic'` The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`loopFocus`	`true`	`boolean` Whether the keyboard navigation will loop from last tab to first, and vice versa.
`orientation`	`\horizontal\`	`'horizontal' \| 'vertical'` The orientation of the tabs. Can be `horizontal` or `vertical` - `horizontal`: only left and right arrow key navigation will work. - `vertical`: only up and down arrow key navigation will work.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`fitted`		`boolean`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`composite`		`boolean` Whether the tab is composite
`defaultValue`		`string` The initial selected tab value when rendered. Use when you don't need to control the selected tab value.
`deselectable`		`boolean` Whether the active tab can be deselected when clicking on it.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string trigger: (value: string) => string list: string content: (value: string) => string indicator: string }>` The ids of the elements in the tabs. Useful for composition.
`navigate`		`(details: NavigateDetails) => void` Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements.
`onFocusChange`		`(details: FocusChangeDetails) => void` Callback to be called when the focused tab changes
`onValueChange`		`(details: ValueChangeDetails) => void` Callback to be called when the selected/active tab changes
`translations`		`IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`value`		`string` The controlled selected tab value

TabContent

Prop	Default	Type
`value`*		`string` The value of the tab
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.

TabTrigger

Prop	Default	Type
`value`*		`string` The value of the tab
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`disabled`		`boolean` Whether the tab is disabled