Components

Button

Triggers an action. Five variants cover every level of emphasis, and the loading state keeps its width so nothing around it moves.

Input

A single-line text field with a built-in label, description and error message — wired together for assistive technology.

Textarea

Multi-line text in the same visual language as Input, with optional auto-resize.

Checkbox

A native checkbox with a considered check: the box fills, then the tick draws itself in.

Switch

An on/off control for settings that take effect immediately. The thumb glides; while pressed, it stretches slightly, as if held.

Select

Choose one option from a list. Keyboard-first, with typeahead, and ready for search.

Radio

Choose exactly one option from a small set, grouped under a shared legend.

Slider

Pick a number, or a range, by dragging a thumb along a track.

Toggle Group

A row of buttons acting as one control, for choosing one or several mutually visible options.

Progress

A horizontal bar showing how far a task has gotten, or that it’s still running.

Rating

A row of stars for rating something, or for showing an already-rated value. Editable by default; add `readonly` to only display it.

Editor

A rich text editor that stays out of the way: a calm toolbar, a menu above selected text, blocks behind a slash, Markdown shortcuts, and clean HTML or JSON out.

Dialog

A focused, modal task on top of the page. It traps focus, locks scroll, closes on Escape and gives focus back when it’s done.

Dropdown Menu

A list of actions behind a trigger. Composable parts, real focus management, typeahead and nested submenus.

Tooltip

A short label on hover or keyboard focus. Fast when you need it, silent when you don’t.

Popover

A non-modal surface anchored to a trigger, for a small amount of content or a short form. Focus moves in, but nothing traps it — Tab can leave, and doing so closes it.

Sheet

A modal panel anchored to an edge of the screen, for forms and filters that need more room than a popover but shouldn’t take over the centre of the page.

Toast

Brief notifications that stack, pause while you read them, and leave on their own.

Badge

A compact label for status and counts.

Skeleton

A placeholder shape shown while real content is loading, so layout doesn’t jump when it arrives.

Spinner

A small indeterminate loading indicator, for use inline or inside a button.

Empty State

A placeholder for a list, table or panel with nothing in it yet: an icon, a title, a line of text and an optional action.

Banner

A full-width, edge-to-edge notice for a page or section: a tinted strip with a left accent bar.

Alert

An inline notice that sits on the page's own surface: a bordered box with an icon, title and optional actions.

Avatar

A person or entity, as an image with graceful fallbacks and an optional presence dot.

Card

A quiet container for related content. Two variants, nothing more.

Kbd

A visual representation of a keyboard key or shortcut. Understands hotkey syntax and renders the right glyphs for the platform.

Separator

A thin rule that divides content, horizontally or vertically, with an optional label in the middle.

Tag

A compact, removable chip for something the user picked — a filter, a member, a file.

Aspect Ratio

Locks its content to a fixed width/height ratio, so media reserves its space before it loads.

Visually Hidden

Content that stays out of view but is still announced by assistive technology — a typed wrapper around juxt.ui’s shared sr-only utility.

Avatar Group

A stack of overlapping avatars for a team or list of participants, with a "+N" indicator for the rest.

Stat

A labelled number for dashboards, with an optional delta, trend arrow and description line.

Timeline

A vertical sequence of events, each with a marker, a title, a time and a status.

Collapsible

A single disclosure: a trigger that shows or hides a block of content beneath it. For a group of them that coordinate, use Accordion.

Accordion

A stack of disclosures that coordinate: in `single` mode, opening one closes the rest. Built from `JAccordion` and `JAccordionItem`.

Tabs

Switch between views in the same context. One indicator glides between tabs; the content simply changes.

Command Palette

Search everything, run anything. The fastest way through an app — and the signature component of juxt.ui.

Breadcrumb

Shows the current page’s place in a hierarchy, as a trail of links back to the top.

Pagination

Moves through a paged list. The page window collapses to an ellipsis once the total grows past what fits.

Navbar

The top bar of a site or app: brand, links and actions. Below a breakpoint the links fold behind a burger into a menu that drops from the bar.

Burger

A menu button whose three lines fold into a cross. Built into Navbar, and available on its own for custom headers and drawers.

Footer

The end of the page: a brand block, columns of links and a closing line for legal text. Columns fold into two on small screens.

Sidebar

Navigation for apps: items with icons and counts, grouped under titles that fold away, and a footer pinned to the bottom.