Layout & Navigation WAI-ARIA Tablist Keyboard Nav Lightweight Tailwind v4

Tabs

Accessible, keyboard-navigable tab system with animated indicator slider and light-DOM panels.

Interactive Preview

Live Edit & Viewport Resizer

Variants:

Installation

Add the Tabs component to your project via CLI:

terminal bash

npx plain-ui add tabs

Features

✓ Compliant WAI-ARIA role='tablist', role='tab', and role='tabpanel'
✓ Keyboard navigation support with Left and Right arrow keys
✓ Segmented pill and underline tab styles
✓ Smooth active indicator sliding animation

Variants & Examples

Underline Tabs

Classic tab navigation with bottom underline indicator.

tabs-underline-tabs.html html

<div class="w-full max-w-md mx-auto p-4" data-tabs>
  <div role="tablist" class="flex border-b border-zinc-200 dark:border-zinc-800 text-sm font-medium">
    <button class="px-4 py-2 border-b-2 border-blue-600 text-blue-600 dark:text-blue-400 font-semibold cursor-pointer">Account</button>
    <button class="px-4 py-2 border-b-2 border-transparent text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-200 cursor-pointer">Password</button>
    <button class="px-4 py-2 border-b-2 border-transparent text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-200 cursor-pointer">Billing</button>
  </div>
</div>

Attributes & Classes

Attribute / Prop	Type	Default	Description
role='tablist'	WAI-ARIA	-	Identifies container as a tablist for screen readers.
aria-selected	boolean	-	Indicates the active tab state.

Accessibility & Keyboard Navigation

• Supports Left/Right arrow keyboard cycling across tabs.
• Proper aria-controls and aria-labelledby linkages between tabs and panels.

← Accordion