The default .tabs style — driven entirely by --control-* and --panel-* tokens.
Out-of-the-box behaviour with no extra classes. Panel background, border, radius, padding and shadow all follow their token defaults.
Adapts automatically to your theme — change --color-1 at the root and everything updates.
Only a bottom border marks the active tab. Zero chrome on the labels — ideal for dashboards and data-heavy UIs.
The panel is fully transparent — content flows directly onto the page surface.
Overrides --control-bg, --control-border and --control-shadow to transparent/none, then adds a single bottom-border accent on the active label.
The classic browser-tab pattern. The active label merges into the panel by matching --body-bg and hiding its bottom border.
A negative margin on labels pulls them down to overlap the panel's top border — creating the open-bottom illusion.
The panel uses border-radius: 0 0.25rem 0.25rem 0.25rem so its top-left corner aligns flush with the first tab label.
Pill shape via style="--control-radius: 9999px" on the container. No new classes — just an inline token override.
Works on any background. Combine with .bg-light-grey or .bg-color-1 on the wrapper for contrast.
All other tokens remain at their defaults — only the radius changes.
Vertical tabs using .tabs-vertical, .tabs-vertical-nav and .tabs-vertical-content — all existing framework classes. Collapses to horizontal on narrow viewports.
The active label is driven by :has() — no JavaScript needed. Scales to many tabs without wrapping.
The border-l border-solid border-grey classes on the content area provide the sidebar separator.
Ghost tabs via inline token overrides — --control-bg: transparent and --control-border: 0.125rem solid var(--color-1). No new class needed.
The active state fills via --surface-selected — the same token the default tabs use, so it stays on-brand automatically.
Pairs well with ghost/outline buttons from the same framework for a visually consistent UI.
--control-bg: var(--body-bg) gives each label a white card surface; --control-shadow lifts it off the tinted background. No new CSS.
Works best on a tinted container — use .bg-light-grey or a custom surface colour on the wrapper element.
The active state uses --surface-selected — a light tint of --color-1 — reading as a gentle highlight against the plain card labels.
Built with love by Kim Majali, EITO team, and contributors.