Tabs

Default

Panel 1 content

Panel 2 content

Panel 3 content

Base

Class	Description
`.ui-tabs`	Base class

Size

Class	Value
`.ui-tabs--sm`	sm
`.ui-tabs--lg`	lg

Vertical

Class	Description
`.ui-tabs--vertical`	vertical

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-tabs-border-color`	`var(--ui-color-border)`	Border color
`--ui-tabs-tab-height`	`var(--ui-row-2)`	Tab height
`--ui-tabs-tab-padding-x`	`var(--ui-space-2)`	Tab padding x
`--ui-tabs-tab-padding-y`	`var(--ui-space-1)`	Tab padding y
`--ui-tabs-tab-font-size`	`var(--ui-font-size-sm)`	Tab font size
`--ui-tabs-tab-bg`	`transparent`	Tab bg
`--ui-tabs-tab-bg-active`	`var(--ui-color-bg)`	Tab bg active
`--ui-tabs-tab-line-height`	`var(--ui-line-height-none)`	Tab line height
`--ui-tabs-panel-padding`	`var(--ui-space-3)`	Panel padding on all sides
`--ui-tabs-tab-height-sm`	`var(--ui-row-1)`	Tab height sm
`--ui-tabs-tab-padding-x-sm`	`var(--ui-space-1)`	Tab padding x sm
`--ui-tabs-tab-font-size-sm`	`var(--ui-font-size-xs)`	Tab font size sm
`--ui-tabs-tab-height-lg`	`calc(var(--ui-row) * 2.5)`	Tab height lg
`--ui-tabs-tab-padding-x-lg`	`var(--ui-space-3)`	Tab padding x lg
`--ui-tabs-tab-font-size-lg`	`var(--ui-font-size-md)`	Tab font size lg

Two Tabs

Preview content goes here

      Code snippet

<div class="ui-tabs">
  <div class="ui-tabs__list">
    <button class="ui-tabs__tab ui-tabs__tab--active">Preview</button>
    <button class="ui-tabs__tab">Code</button>
  </div>
  <div class="ui-tabs__panel ui-tabs__panel--active">
    <div class="ui-card">Preview content goes here</div>
  </div>
  <div class="ui-tabs__panel">
    <pre class="ui-code-block">
      <code><div>Code snippet</div></code>
    </pre>
  </div>
</div>

Sizes

<div class="ui-column" style="--column-gap: var(--ui-space-3);">
  <div class="ui-tabs ui-tabs--sm">
    <div class="ui-tabs__list">
      <button class="ui-tabs__tab ui-tabs__tab--active">Small</button>
      <button class="ui-tabs__tab">Tab 2</button>
    </div>
  </div>
  <div class="ui-tabs">
    <div class="ui-tabs__list">
      <button class="ui-tabs__tab ui-tabs__tab--active">Default</button>
      <button class="ui-tabs__tab">Tab 2</button>
    </div>
  </div>
  <div class="ui-tabs ui-tabs--lg">
    <div class="ui-tabs__list">
      <button class="ui-tabs__tab ui-tabs__tab--active">Large</button>
      <button class="ui-tabs__tab">Tab 2</button>
    </div>
  </div>
</div>

Vertical

Vertical tab content

<div class="ui-tabs ui-tabs--vertical">
  <div class="ui-tabs__list">
    <button class="ui-tabs__tab ui-tabs__tab--active">Tab 1</button>
    <button class="ui-tabs__tab">Tab 2</button>
    <button class="ui-tabs__tab">Tab 3</button>
  </div>
  <div class="ui-tabs__panel ui-tabs__panel--active">Vertical tab content</div>
</div>