Tabs

Underline-style tabs. This is tabs.css in @layer components.

<div class="tabs">
  <div class="tab-list">
    <button class="tab is-active">General</button>
    <button class="tab">Billing</button>
  </div>
  <div class="tab-panel">General settings…</div>
</div>

Parts

Class	Role
.tabs	The container (a vertical flex column)
.tab-list	The row of tabs with a bottom rule
.tab	A single tab: quiet by default, an accent underline when active
.tab.is-active	The current tab: --ink text and an accent bottom border
.tab-panel	The content region below the list

A .tab is typically a <button>, but the styling works on any element you give the class.

You supply the toggle

Tabs are CSS-only. The styling gives you the look and the is-active state hook; it does not switch panels. Your app's JavaScript moves is-active between tabs and shows the matching panel. There is no tab behavior in this package. Switching is your code (or use the @elements/ui interactive tabs when that package ships).