Panda | Ark UI

Panda CSS is a delightful, build-time CSS-in-JS framework designed to integrate seamlessly with Ark UI, offering an optimal styling solution for Ark UI components.
Discover more about Panda CSS at panda-css.com.

Styled Factory

Panda CSS features a styled function, simplifying the process of styling component parts. Additionally, you can use the css function for crafting straightforward styles.

import { Tabs } from '@ark-ui/react'
import { styled } from 'styled-system/jsx' // panda generated directory

// using the styled function
const TabTrigger = styled(Tabs.Trigger, {
  base: {
    bg: 'gray.100',
    borderWidth: '1px',
    paddingTop: '3',
  },
  variants: {
    // ... define your tab variants here
  },
})

// using the css function
const listClassName = css({
  display: 'flex',
  flexWrap: 'wrap',
  fontSize: '14px',
  fontWeight: 'medium',
  textAlign: 'center',
  color: '#374151',
  borderBottomWidth: '1px',
  borderBottomColor: 'gray.200',
})

const Demo = () => (
  <Tabs.Root>
    <Tabs.List className={listClassName}>
      <TabTrigger value="react" />
    </Tabs.List>
    {/* … other components */}
  </Tabs.Root>
)

Slot Recipes

Panda introduces ‘slot recipes’, a concept involving a set of styles applicable to various component parts. These slot recipes are created using Panda’s sva function.

import { Tabs } from '@ark-ui/react'
import { sva } from 'styled-system/css' // panda generated directory

const tabStyle = sva({
  slots: ['list', 'trigger'],
  base: {
    // base styles for Tabs.List
    list: {},
    // base styles for Tabs.Trigger
    trigger: {},
  },
  variants: {
    // define your variant styles here
  },
})

const Demo = () => {
  const styles = tabStyle()
  return (
    <Tabs.Root>
      <Tabs.List className={styles.list}>
        <Tab.Trigger className={styles.trigger} value="react" />
      </Tabs.List>
      {/* … additional components */}
    </Tabs.Root>
  )
}