Tabs Reference

Base

UI Framework at a glance

A lightweight token-driven component library. Zero dependencies, no build step. Drop in ui.css and the optional plugin scripts to get instant access to buttons, cards, modals, toasts, and much more.

Bundle size

~18 kB

Components

30+

Dependencies

0

With badge labels

Alan

Alan Turing New

Re: your pull request looks great, just one question

2 min ago
Grace

Grace Hopper

Ship it! The compiler doesn't care about your feelings.

1 hr ago
Ada

Ada Lovelace New

The first algorithm was written for a machine that didn't exist yet.

Yesterday

With icon labels

Inside a card

Project activity

Updates across all repositories

mainfix(button): correct focus ring offset on Safari2 hr ago
mainfeat(tabs): add keyboard arrow navigation5 hr ago
devchore: update token names to v2 conventionYesterday

Reference

Base

Class / AttributeDescription
.ui-tabsContainer element wraps the tab list and all panels
role="tablist"The <ul> holding all tab triggers
role="tab"Each tab trigger <button>
role="tabpanel"Each content <div> shown/hidden by JS
data-ui-tab="id"Links a tab button to its panel by ID
aria-selected="true"Marks the initially-active tab

Modifiers

Class / AttributeDescription
disabledDisables a tab button rendered at reduced opacity, not clickable

Options

Class / AttributeDescription