Quill docs

Tabs

An ARIA-correct tab strip backed by the headless qquill-ui Tabs state machine. Tabs are interactive by nature, so the showcase is a live island: the server-rendered selection is preserved on hydrate, and arrow keys move selection with a roving tabindex.

Live demo#

Click a tab or use the arrow keys; the server-rendered selection is preserved on hydrate.

Overview

Tabs hydrate in place from the server-selected tab — no markup change, full ARIA tab pattern.

Theme it#

Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.

Overview

Tabs hydrate in place from the server-selected tab — no markup change, full ARIA tab pattern.

Density

Radius

Surface

Motion

// This demo is scoped: these axes apply only to this preview.
el("div")
    .attr("data-q-size", "cozy")
    .attr("data-q-radius", "rounded")
    .attr("data-q-surface", "flat")
    .attr("data-q-motion", "smooth")
    .child(
        Tabs::new("demo", /* sections */).island("demo-island")
    )

Code#

Construct the component with its builder:

Tabs::new(
    "settings",
    0, // server-selected index
    vec![
        ("Overview".into(), panel("Overview", "…")),
        ("Keyboard".into(), panel("Keyboard", "…")),
        ("A11y".into(), panel("Accessibility", "…")),
    ],
)
.island("settings-tabs")