Vanilla | Ark UI

Using CSS Classes

As previously discussed, you can utilize the data-scope and data-part attributes assigned to each component part for easy styling.

Below is a simplified markup for the Tabs component:

<div data-scope="tabs" data-part="root">
  <div role="tablist" data-scope="tabs" data-part="list">
    <button role="tab" data-scope="tabs" data-part="trigger" data-value="react">
      React
    </button>
  </div>
</div>

To demonstrate, here is how you can style the Tabs.List and Tabs.Trigger parts using CSS:

[data-scope='tabs'][data-part='list'] {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: medium;
  text-align: center;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}
[data-scope='tabs'][data-part='trigger'] {
  display: inline-block;
  padding: 16px;
  color: #3b82f6;
  background-color: #f3f4f6;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}

Using Inline Styles

Although it’s possible to use inline styles, this approach is generally not recommended due to potential conflicts and maintainability issues.

Ark UI ensures that user-defined inline styles are correctly merged with any built-in inline styles.

<Tabs.Root>
  <Tabs.List
    style={{
      display: 'flex',
      flexWrap: 'wrap',
      fontSize: '14px',
      fontWeight: 'medium',
      textAlign: 'center',
      color: '#374151',
      borderBottom: '1px solid #e5e7eb',
    }}
  >
    <Tabs.Trigger
      value="react"
      style={{
        display: 'inline-block',
        padding: '16px',
        color: '#3b82f6',
        backgroundColor: '#f3f4f6',
        borderTopLeftRadius: '0.5rem',
        borderTopRightRadius: '0.5rem',
        borderBottom: '1px solid #e5e7eb',
      }}
    >
      React
    </Tabs.Trigger>
  </Tabs.List>
</Tabs.Root>

This revised version maintains the original content’s intent while enhancing readability and clarity.