whiskeyjack

Toolbar pill of icon actions that collapse and grow as the page's context changes.

Announce a message to assistive technology through a shared live region.

Retint the whole UI from one accent color, with a WCAG-legible foreground picked automatically.

The three-phase content row below a floating header: optional left sidebar, main region, optional right rail, each gated on the layout variants.

The app layout skeleton: a fixed-height shell or a document scroller, with a frosted header, nav pills, and the main scroll region.

Tone-tinted pill label on the semantic color scales, for status and classification at a glance.

Bottom sheet on mobile, centered dialog on desktop. Swipe, backdrop, Escape, and hardware Back all dismiss it.

Pill-shaped frosted bottom navigation, hand-composed from BottomNavItem and BottomNavAction.

The action button. Labels wrap to two lines rather than overflowing, so long translated text stays inside the pill.

Side-by-side buttons that share a row and stack full-width when they no longer fit.

GitHub-contributions-style activity heatmap, in squares or check-in dots.

The elevated surface primitive, with header, title, description, content, and footer slots.

Pick-any tile grid: the multi-select counterpart to ToggleGroup.

Tailwind class merging (clsx plus tailwind-merge).

Focusable swatch button that opens the OS-native color picker and returns the chosen hex.

The geometry of a compact control: a small pill, chip or segment that sits on a line with body text.

Tap-again-to-confirm destructive button, with the armed state announced to assistive tech.

Caret-and-label text button that expands and collapses an adjacent region, with aria-expanded and the touch and focus floors built in.

A single action in a BottomDrawer footer: plain, form-submit, or tap-again-confirm.

Centered icon tile, title, subtitle, and optional call to action for an empty list or a fresh install.

Header copy of a field whose primary lives in a scroller: grows in while the primary is scrolled away, collapses when it returns.

Labeled text field that wires a real label to the input for you.

Detect right-to-left direction for JS-driven interactions that CSS cannot reach.

Data-driven bottom nav that collapses its items into a hamburger menu when they and the toolbar would overflow the viewport.

Inline tone-tinted status box for context-bound messages, with each tone setting its own ARIA live-region role.

The selectable-tile class recipe shared by ToggleGroup and CheckboxGroup.

React context that lets any page set the desktop header title.

The accent progress primitive: determinate fill, busy sweep, open-ended indicator, or segment accumulation against a tally.

Frosted pill and spinner that slides down as you pull; the visual companion to usePullToRefresh.

Drag-to-reorder list with an accessible arrow-button fallback, so it works by pointer, touch, and keyboard.

Read-only auto-hiding scroll thumb for scrollers whose native scrollbar would run behind floating chrome.

Search pill: a rounded-full text input with a leading magnifier and a trailing clear button.

Compact pick-one control: one bordered strip, divided into segments.

Styled native select for a one-of-n choice with more options than a segmented control can show.

TabBar's wide-layout counterpart: a vertical tab rail for a desktop sidebar, with each item's progress pinned to its bottom edge.

Range input with an optional mono value readout beside its label.

Metro-style pivot tabs with a sliding accent underline that doubles as each tab's progress bar.

Floating notification pill fixed below the header, for app-level messages.

Switch control with a label and optional description, for a single on/off setting.

Segmented tile control for one-of-n choices, such as a light / dark / system theme picker.

Drag-to-reorder list logic with an accessible keyboard path, behind ReorderList.

Trap focus inside an overlay while it is open, and restore it to the trigger on close.

Detect touch versus mouse input, for controls that phrase or size themselves differently.

Read the wide / xlwide layout gates in JS, for a decision CSS cannot express.

Combine an internal ref with a forwarded one.

Touch pull-to-refresh that coexists with tab swipes and overscroll-behavior: none.

Respect the user's reduced-motion preference in JS-driven motion.

Double-tap the nav item for the page you are already on to return to the top, then to the page's start.