Tabs

vel-src: tabs.css

Tab navigation component in underline, pill, boxed, and vertical layout styles with active state highlighting.

Class	Properties
vel-tabs	Base tab container — flex, gap, border-bottom (underline mode)
vel-tab	Individual tab item — padding, cursor, transition
vel-tab-active	Active tab — highlighted color, underline or background
vel-tabs-underline	Underline style — active tab shows bottom border in primary color
vel-tabs-pill	Pill style — active tab has rounded background fill
vel-tabs-boxed	Boxed style — tabs share a bordered container with filled active
vel-tabs-vertical	Stacks tabs in a column instead of a row

Examples

Underline tabs

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <div class="vel-tabs vel-tabs-underline">
    <button class="vel-tab vel-tab-active">Overview</button>
    <button class="vel-tab">Settings</button>
    <button class="vel-tab">Members</button>
  </div>
</div>

Pill tabs

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <div class="vel-tabs vel-tabs-pill">
    <button class="vel-tab vel-tab-active">Dashboard</button>
    <button class="vel-tab">Analytics</button>
    <button class="vel-tab">Reports</button>
  </div>
</div>

Boxed tabs

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <div class="vel-tabs vel-tabs-boxed">
    <button class="vel-tab vel-tab-active">Code</button>
    <button class="vel-tab">Preview</button>
    <button class="vel-tab">Docs</button>
  </div>
</div>