Styling

Learn how to style Ark UI components.

Ark UI is a headless component library compatible with any styling solution, offering broad flexibility and integration options.

Styling Parts

Each component part in Ark UI is designated with data-scope and data-part attributes. The data-scope attribute identifies the component, while data-part specifies the individual part of the component.

This approach aligns with the upcoming CSS Scopes Specification.

Styling States

Interactive components in Ark UI often include data-* attributes to reflect their current state.

For example, tab trigger and content elements will have a data-selected attribute when their value aligns with the active tab.

Additional attributes like data-disabled, data-readonly, data-focus, data-orientation, etc., are provided to facilitate styling based on component state.

Integrating with Component Libraries

When integrating Ark UI with component libraries such as Chakra UI or Material UI, the asChild prop allows for swapping Ark UI elements with those from your chosen library while preserving their original functionality.

Important: For React users, ensure that your element supports the React.forwardRef API. This is crucial for correctly forwarding the ref.

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

const Demo = () => (
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Trigger value="react" asChild>
        <Button variant="outline">React</Button>
      </Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>
)