Tabs

CSS-only via radio inputs + :has() panel routing. Works without JavaScript; full ARIA needs JS with aria-controls.

Default (underline)

Overview Install API

Minimal content-first CSS library.

npm install litura

See the README for all classes.

<div class="tabs" role="tablist">
  <div class="tabs__list">
    <input type="radio" name="x" id="t1" class="tabs__input" checked>
    <label for="t1" class="tabs__tab" role="tab">One</label>
    <input type="radio" name="x" id="t2" class="tabs__input">
    <label for="t2" class="tabs__tab" role="tab">Two</label>
  </div>
  <div class="tabs__panel" data-for="t1" role="tabpanel">…</div>
  <div class="tabs__panel" data-for="t2" role="tabpanel">…</div>
</div>

Pills

Daily Weekly Monthly

Daily view

Weekly view

Monthly view

<div class="tabs tabs--pills" role="tablist">…</div>

Vertical

Section 1 Section 2 Section 3

Panel 1

Panel 2

Panel 3

<div class="tabs tabs--vertical">…</div>

Modifiers

Class	Effect
`.tabs`	Base container.
`.tabs--pills`	Rounded pills; selected fills with accent.
`.tabs--vertical`	Vertical list with right-side indicator.
`.tabs__list`	Container for input+label pairs.
`.tabs__input`	Hidden radio input (one per tab).
`.tabs__tab`	Clickable label (rendered tab).
`.tabs__panel[data-for="id"]`	Panel shown when matching input is `:checked`.

Note: The CSS routes panels for IDs t1–t6 out of the box. For unique IDs, extend the :has selector in components/tabs.css.