Gluon UI catalog

This catalog is generated from the public UI package manifests. It is the user-facing overview of the component library; Storybook remains the developer verification surface.

Search components

80 components shown

Atoms · @gluonjs/atoms

`AspectRatio`

16:9

1:1

4:3

Variants

16:9
1:1
4:3

States

default

Rendered anatomy · AspectRatio

Variants: 16:9, 1:1, 4:3
States: default
Accessibility: Renders a native div without adding semantics; positive finite ratio validation prevents invalid geometry.
Extension: attributes targets HTMLDivElement; ratio maps to --gluon-aspect-ratio and caller classes/styles merge safely.

API reference · Source package

Atoms · @gluonjs/atoms

`Avatar`

ImageInitialsFallback

Variants

image
initials
fallback

States

loading
loaded
error

Rendered anatomy · Avatar

Variants: image, initials, fallback
States: loading, loaded, error
Accessibility: Loaded state renders one native img with meaningful alt; loading/error/no-src render one named fallback image without duplicate announcements.
Extension: attributes targets the loaded HTMLImageElement; src, alt, fallback, and lifecycle status stay caller-owned with no account, fetch, upload, or CDN ownership.

API reference · Source package

Atoms · @gluonjs/atoms

`Badge`

NeutralInfoReadyReviewBlocked

Variants

neutral
info
success
warning
danger

States

default

Rendered anatomy · Badge

Variants: neutral, info, success, warning, danger
States: default
Accessibility: Renders a presentational status token without assuming live-region semantics or relying on color alone.
Extension: tone selects presentation; callers own text, semantics, and domain mapping.

API reference · Source package

Atoms · @gluonjs/atoms

`Button`

Variants

primary
secondary
ghost

States

default
disabled
loading

Rendered anatomy · Button

Variants: primary, secondary, ghost
States: default, disabled, loading
Accessibility: Renders a native type=button control, preserves disabled semantics, and exposes a visible focus indicator with a 44px minimum target.
Extension: attributes targets HTMLButtonElement; children, type, and disabled stay explicit; defineButtonPreset owns app presets.

API reference · Source package

Atoms · @gluonjs/atoms

`Checkbox`

Checkbox option

Variants

default
indeterminate

States

unchecked
checked
disabled
invalid

Rendered anatomy · Checkbox

Variants: default, indeterminate
States: unchecked, checked, disabled, invalid
Accessibility: Renders a native checkbox with Space-key, label, form, required, disabled, checked, indeterminate, forced-colors, and visible-focus semantics.
Extension: attributes targets HTMLInputElement; type, checked, indeterminate, validation, name, value, required, and disabled stay explicit.

API reference · Source package

Atoms · @gluonjs/atoms

`DateInput`

Delivery date

Variants

default

States

default
disabled
invalid

Rendered anatomy · DateInput

Variants: default
States: default, disabled, invalid
Accessibility: Renders a native date input and preserves platform date-picker, keyboard, validation, and form behavior.
Extension: Uses the public Input contract with a fixed native date type; locale and timezone policy stay caller-owned.

API reference · Source package

Atoms · @gluonjs/atoms

`FileInput`

Product photossingle · multiple · capture

Variants

single
multiple
capture

States

default
disabled
invalid

Rendered anatomy · FileInput

Variants: single, multiple, capture
States: default, disabled, invalid
Accessibility: Renders a native file input with browser picker, keyboard, form, multiple, capture, disabled, required, and invalid semantics.
Extension: accept, multiple, capture, and native file selection remain caller-owned; it never uploads, reads, or stores files.

API reference · Source package

Atoms · @gluonjs/atoms

`Heading`

Swiss editorials

Variants

States

default
focusable

Rendered anatomy · Heading

Variants: level-1, level-2, level-3, level-4, level-5, level-6
States: default, focusable
Accessibility: Renders one native h1-h6 element with caller-owned heading hierarchy and no duplicate landmark semantics.
Extension: level selects the native heading tag; attributes target the heading and children remain explicit.

API reference · Source package

Atoms · @gluonjs/atoms

`Icon`

Informative icon

Variants

decorative
informative

States

default

Rendered anatomy · Icon

Variants: decorative, informative
States: default
Accessibility: Decorative icons are aria-hidden; informative icons require a label and expose role=img.
Extension: attributes targets SVGSVGElement; role, naming, size, and body stay explicit; defineIcon owns custom geometry.

API reference · Source package

Atoms · @gluonjs/atoms

`Image`

Product image

Variants

responsive
intrinsic

States

loading
loaded
error

Rendered anatomy · Image

Variants: responsive, intrinsic
States: loading, loaded, error
Accessibility: Renders one native image with required alternative text and caller-owned loading/error policy.
Extension: src, alt, dimensions, loading, decoding, and native image attributes remain explicit; fetching and fallback content stay caller-owned.

API reference · Source package

Atoms · @gluonjs/atoms

`Input`

Input

Variants

text
email
search

States

default
disabled
invalid

Rendered anatomy · Input

Variants: text, email, search
States: default, disabled, invalid
Accessibility: Renders a native input; callers associate it with Label or FormField and may expose aria-invalid.
Extension: attributes targets HTMLInputElement; value, validation, type, name, placeholder, and disabled stay explicit.

API reference · Source package

Atoms · @gluonjs/atoms

`Label`

Email address

Variants

default
required
optional

States

default

Rendered anatomy · Label

Variants: default, required, optional
States: default
Accessibility: Provides visible label text and is composed inside a native label by FormField.
Extension: attributes targets HTMLSpanElement; visible children stay explicit.

API reference · Source package

Atoms · @gluonjs/atoms

`Link`

Open component reference

Variants

default
external

States

default
focus-visible

Rendered anatomy · Link

Variants: default, external
States: default, focus-visible
Accessibility: Renders a native anchor when href is supplied and preserves browser navigation, keyboard, focus, and visited semantics.
Extension: href and native anchor attributes remain explicit; routing and authorization stay caller-owned.

API reference · Source package

Atoms · @gluonjs/atoms

`Meter`

72%

Variants

default

States

determinate

Rendered anatomy · Meter

Variants: default
States: determinate
Accessibility: Renders the native meter element; callers provide its accessible name and truthful min/max/value semantics.
Extension: Value, range, children, and native attributes stay explicit without owning domain thresholds.

API reference · Source package

Atoms · @gluonjs/atoms

`NumberInput`

Quantity

Variants

default

States

default
disabled
invalid

Rendered anatomy · NumberInput

Variants: default
States: default, disabled, invalid
Accessibility: Renders a native number input with browser editing, validation, keyboard, and form semantics.
Extension: Uses the public Input contract with a fixed native number type; callers own min/max/step through attributes.

API reference · Source package

Atoms · @gluonjs/atoms

`Progress`

Step 2 of 4

Variants

determinate
indeterminate

States

default

Rendered anatomy · Progress

Variants: determinate, indeterminate
States: default
Accessibility: Renders a native progress element; determinate values expose value/max while indeterminate state omits value, and callers provide an accessible name.
Extension: attributes targets HTMLProgressElement; value, max, and full-width presentation stay explicit.

API reference · Source package

Atoms · @gluonjs/atoms

`Radio`

Radio option

Variants

default

States

unchecked
checked
disabled
invalid

Rendered anatomy · Radio

Variants: default
States: unchecked, checked, disabled, invalid
Accessibility: Renders a native radio with same-name grouping, Arrow/Space keyboard, label, form, required, disabled, checked, forced-colors, and visible-focus semantics.
Extension: attributes targets HTMLInputElement; type, checked, validation, name, value, required, and disabled stay explicit; callers or ChoiceGroup own the accessible group label.

API reference · Source package

Atoms · @gluonjs/atoms

`ScrollArea`

Orbit lampStack trayField tote

Variants

vertical
horizontal
both

States

default
overflow

Rendered anatomy · ScrollArea

Variants: vertical, horizontal, both
States: default, overflow
Accessibility: Renders a named native section region with native overflow, caller-overridable tabIndex, visible focus, forced-colors focus, and reduced-motion scroll-behavior enforcement.
Extension: attributes targets HTMLElement; orientation is vertical, horizontal, or both; --gluon-scroll-area-max-inline-size, --gluon-scroll-area-max-block-size, and --gluon-scroll-area-scroll-behavior own bounded presentation without custom scrollbar or virtualization state.

API reference · Source package

Atoms · @gluonjs/atoms

`Select`

Select

Variants

default
compact

States

default
disabled
invalid

Rendered anatomy · Select

Variants: default, compact
States: default, disabled, invalid
Accessibility: Renders a native select with platform keyboard and option semantics, a 44px minimum target, visible focus, and explicit invalid state.
Extension: attributes targets HTMLSelectElement; children, value, validation, size, name, required, and disabled stay explicit.

API reference · Source package

Atoms · @gluonjs/atoms

`Separator`

Variants

horizontal
vertical

States

default

Rendered anatomy · Separator

Variants: horizontal, vertical
States: default
Accessibility: Renders a native hr with implicit horizontal separator semantics, explicit vertical orientation, or presentation/aria-hidden semantics when decorative.
Extension: attributes targets HTMLHRElement; logical sizing uses --gluon-separator-length and --gluon-separator-thickness while caller classes/styles merge safely.

API reference · Source package

Atoms · @gluonjs/atoms

`Skeleton`

Variants

text
block

States

Rendered anatomy · Skeleton

Variants: text, block
States: loading
Accessibility: Renders an aria-hidden loading placeholder that does not announce duplicate progress.
Extension: width and height are CSS-variable-backed presentation hints; loaded content and timing remain caller-owned.

API reference · Source package

Atoms · @gluonjs/atoms

`Slider`

Cable length

Variants

horizontal
vertical

States

default
disabled

Rendered anatomy · Slider

Variants: horizontal, vertical
States: default, disabled
Accessibility: Renders a native range input with normalized min/max/step, orientation, keyboard and pointer input, RTL, disabled/readonly, value text, 44px target, forced-colors, and zoom-safe semantics; it defines no animation.
Extension: attributes targets HTMLInputElement; controlled value and uncontrolled defaultValue are exclusive, while orientation, readonly, valueText, and native input/change callbacks stay explicit.

API reference · Source package

Atoms · @gluonjs/atoms

`Spinner`

Variants

inline

States

Rendered anatomy · Spinner

Variants: inline
States: loading
Accessibility: Renders one labelled status indicator; reduced motion disables the rotation animation.
Extension: label and native span attributes remain explicit; request lifecycle and cancellation stay caller-owned.

API reference · Source package

Atoms · @gluonjs/atoms

`StatusBadge`

ReadyReviewBlocked

Variants

neutral
success
warning
danger

States

default

Rendered anatomy · StatusBadge

Variants: neutral, success, warning, danger
States: default
Accessibility: Renders a presentational span with one-line short labels, bounded long tokens, zoom, RTL, contrast, and forced-colors support; callers own visible status text and any live-region semantics.
Extension: attributes targets HTMLSpanElement; children and neutral, info, success, warning, or danger presentation stay explicit while domain mapping remains application-owned. Use app-owned multiline styling only when a product deliberately needs it.

API reference · Source package

Atoms · @gluonjs/atoms

`Switch`

Switch option

Variants

default

States

off
on
disabled

Rendered anatomy · Switch

Variants: default
States: off, on, disabled
Accessibility: Renders a native checkbox with role=switch, Space-key, label, form, required, disabled, checked, forced-colors, reduced-motion, RTL, and visible-focus semantics.
Extension: attributes targets HTMLInputElement; type, role, checked, name, value, required, and disabled stay explicit; callers own a stable accessible label.

API reference · Source package

Atoms · @gluonjs/atoms

`Text`

Supporting copy stays readable and composable.

Variants

paragraph
span
muted
danger

States

default

Rendered anatomy · Text

Variants: paragraph, span, muted, danger
States: default
Accessibility: Renders caller-selected native paragraph, span, or div content without inventing a role or live-region announcement.
Extension: as and tone control presentation while native attributes and content remain caller-owned.

API reference · Source package

Atoms · @gluonjs/atoms

`Textarea`

Textarea

Variants

default

States

default
disabled
invalid

Rendered anatomy · Textarea

Variants: default
States: default, disabled, invalid
Accessibility: Renders a native multiline text control with editing, selection, form, disabled, readonly, required, invalid, and visible-focus semantics.
Extension: attributes targets HTMLTextAreaElement; value, validation, rows, name, placeholder, readonly, required, and disabled stay explicit.

API reference · Source package

Atoms · @gluonjs/atoms

`TimeInput`

Delivery time

Variants

default

States

default
disabled
invalid

Rendered anatomy · TimeInput

Variants: default
States: default, disabled, invalid
Accessibility: Renders a native time input and preserves platform time-picker, keyboard, validation, and form behavior.
Extension: Uses the public Input contract with a fixed native time type; timezone and business-hours policy stay caller-owned.

API reference · Source package

Atoms · @gluonjs/atoms

`ToggleButton`

Variants

default
ghost

States

off
on
disabled

Rendered anatomy · ToggleButton

Variants: default, ghost
States: off, on, disabled
Accessibility: Renders a native type=button control with required boolean aria-pressed, disabled semantics, visible focus, and a 44px minimum target.
Extension: attributes targets HTMLButtonElement; pressed, type, and disabled stay explicit; defineToggleButtonPreset owns app presets.

API reference · Source package

Molecules · @gluonjs/molecules

`Accordion`

Accordion heading

Expandable content

Variants

single
multiple

States

collapsed
expanded

Rendered anatomy · Accordion

Variants: single, multiple
States: collapsed, expanded
Accessibility: Composes native Disclosure details and summary controls inside a named group with stable IDs, controlled single or multiple open values, heading levels, optional Arrow/Home/End focus movement, unavailable skipping, and unchanged Tab order.
Extension: attributes target the outer HTMLDivElement; callers own items, content loading, controlled values, collapse policy, unavailable reasons, and change effects.

API reference · Source package

Molecules · @gluonjs/molecules

`Breadcrumbs`

Variants

links
current

States

default

Rendered anatomy · Breadcrumbs

Variants: links, current
States: default
Accessibility: Renders a named breadcrumb navigation landmark with an ordered list, native links, and aria-current=page on the current location.
Extension: Callers own labels, URLs, current location, localization, and routing; the composition does not inspect or mutate router state.

API reference · Source package

Molecules · @gluonjs/molecules

`ButtonGroup`

Variants

attached
spaced

States

default

Rendered anatomy · ButtonGroup

Variants: attached, spaced
States: default
Accessibility: Renders a named role=group around caller-owned native Button or ToggleButton controls while preserving source order, Tab order, and each child semantic.
Extension: attributes targets HTMLDivElement; accessible label, orientation, attached or spaced layout, wrapping, and child controls stay explicit without selection, routing, menu, or pressed-state ownership.

API reference · Source package

Molecules · @gluonjs/molecules

`Card`

Orbit lampComposable content surfaceView details

Variants

default
interactive

States

default

Rendered anatomy · Card

Variants: default, interactive
States: default
Accessibility: Renders a native article with optional heading content; callers preserve heading level order around repeated cards.
Extension: attributes targets HTMLElement article; title, media, actions, and body children stay explicit.

API reference · Source package

Molecules · @gluonjs/molecules

`ChoiceGroup`

Variants

radio
checkbox

States

default
invalid
disabled

Rendered anatomy · ChoiceGroup

Variants: radio, checkbox
States: default, invalid, disabled
Accessibility: Renders a native fieldset and visible legend with optional helper, announced error, disabled propagation, and native Checkbox or Radio keyboard/form behavior.
Extension: attributes targets HTMLFieldSetElement; legend, option controls, values, checked state, copy, validation, and vertical or horizontal layout stay explicit.

API reference · Source package

Molecules · @gluonjs/molecules

`ComboboxField`

Product searchopen · loading · empty · disabled

Variants

suggestions
loading
empty

States

closed
open
invalid
disabled

Rendered anatomy · ComboboxField

Variants: suggestions, loading, empty
States: closed, open, invalid, disabled
Accessibility: Composes a visible label, native combobox input, stable listbox relationship, keyboard selection, disabled options, loading and empty feedback, helper text, and an announced error.
Extension: Options, filtering, value, input value, open state, selection effects, fetching, localization, persistence, authorization, and tenant-specific CSS variables remain caller-owned.

API reference · Source package

Molecules · @gluonjs/molecules

`CommandPalette`

grouped · keyboard · loading

Variants

grouped
keyboard
loading

States

closed
open
selected
disabled

Rendered anatomy · CommandPalette

Variants: grouped, keyboard, loading
States: closed, open, selected, disabled
Accessibility: Renders a labelled dialog with a native combobox, grouped listbox commands, stable active-descendant relationships, Arrow/Home/End/Enter/Escape keyboard behavior, and disabled-command semantics.
Extension: Query filtering, command execution, routing, permissions, global shortcuts, focus restoration, persistence, localization, and tenant-specific CSS variables remain caller-owned.

API reference · Source package

Molecules · @gluonjs/molecules

`ContextMenu`

Variants

pointer
keyboard

States

closed
open

Rendered anatomy · ContextMenu

Variants: pointer, keyboard
States: closed, open
Accessibility: Supports pointer, ContextMenu-key, and Shift+F10 invocation without a synthetic trigger; opening focuses the menu and Escape returns focus to the native target surface.
Extension: Target content, instance ID, position gesture, controlled open state, item effects, routing, commands, and authorization remain caller-owned.

API reference · Source package

Molecules · @gluonjs/molecules

`ControlField`

Variants

default
inline

States

default
invalid
disabled

Rendered anatomy · ControlField

Variants: default, inline
States: default, invalid, disabled
Accessibility: Provides a visible native label plus deterministic label, helper, error, required-indicator, aria-describedby, aria-errormessage, and aria-invalid relationships for a caller-rendered control.
Extension: attributes targets the outer HTMLDivElement; a render callback receives public relationship metadata while control value, events, validation, and native attributes stay caller-owned.

API reference · Source package

Molecules · @gluonjs/molecules

`DataList`

Availability: In stock
Delivery: 2–4 days

Variants

one-column
two-column
three-column
four-column

States

empty
populated

Rendered anatomy · DataList

Variants: one-column, two-column, three-column, four-column
States: empty, populated
Accessibility: Preserves native dl/dt/dd semantics, stable instance relationships for optional descriptions, readable wrapping, and a one-column small-screen fallback.
Extension: Items are render-only and caller-owned; formatting, loading, filtering, pagination, mutation, and domain meaning remain outside the component.

API reference · Source package

Molecules · @gluonjs/molecules

`DialogSurface`

Variants

default
destructive

States

closed
open

Rendered anatomy · DialogSurface

Variants: default, destructive
States: closed, open
Accessibility: Composes the ARIA Dialog and Overlay quarks with an explicit accessible name, Escape and overlay dismissal, a focus-scope controller for initial, contained, and return focus, optional description, and structured header, content, and footer regions.
Extension: Callers own open state, close action, title and copy, async and destructive decisions, native attributes, and controller lifecycle; this ARIA surface does not invoke the native dialog top layer.

API reference · Source package

Molecules · @gluonjs/molecules

`Disclosure`

Disclosure heading

Expandable content

Variants

default
unavailable

States

closed
open
disabled

Rendered anatomy · Disclosure

Variants: default, unavailable
States: closed, open, disabled
Accessibility: Preserves native details and summary semantics, keyboard toggling, find-in-page expansion, open state, and toggle events; unavailable summaries remain focusable, expose aria-disabled and a visible reason, and prevent activation.
Extension: attributes target HTMLDetailsElement; summaryAttributes target the native summary; callers own controlled or initial open state, content, toggle effects, and unavailable reasons.

API reference · Source package

Molecules · @gluonjs/molecules

`DropdownMenu`

Variants

default
nested

States

closed
open

Rendered anatomy · DropdownMenu

Variants: default, nested
States: closed, open
Accessibility: Provides one roving Tab stop, buffered typeahead, disabled skipping, separators, checkbox/radio roles, controlled nested submenus, Escape/focus return, and RTL movement from a keyboard-complete menu button.
Extension: A collision-safe instance ID, item data, links, buttons, selection effects, checked state, submenu state, and controlled root open state remain caller-owned.

API reference · Source package

Molecules · @gluonjs/molecules

`EmptyState`

No saved configurationsStart with a product to see your saved work here.

Variants

compact
full

States

empty
recovery

Rendered anatomy · EmptyState

Variants: compact, full
States: empty, recovery
Accessibility: Renders optional media, a semantic heading level, body, and recovery action as static content without repeatedly announcing an unchanged empty state; dynamic feedback belongs in a separate live region.
Extension: attributes target the outer HTMLDivElement; callers own copy, media semantics, recovery controls, routes, loading, analytics, live feedback, and compact or full presentation.

API reference · Source package

Molecules · @gluonjs/molecules

`FilterBar`

Variants

default
compact

States

empty
active

Rendered anatomy · FilterBar

Variants: default, compact
States: empty, active
Accessibility: Renders a labelled native form with caller-owned controls, optional polite summary, active-filter count, and an explicit clear action outside the live status.
Extension: Fetching, URL synchronization, filter values, sorting, authorization, persistence, and reset behavior remain caller-owned.

API reference · Source package

Molecules · @gluonjs/molecules

`FormField`

Variants

default

States

default
invalid
disabled

Rendered anatomy · FormField

Variants: default
States: default, invalid, disabled
Accessibility: Uses implicit native label association, visible helper text, aria-invalid, and a role=alert validation message.
Extension: Input attributes target HTMLInputElement; fieldAttributes targets HTMLLabelElement; composed children stay explicit.

API reference · Source package

Molecules · @gluonjs/molecules

`InlineNotice`

Action requiredSuccess and warning messages stay visible without relying on color.

Variants

info
success
warning
danger

States

static
polite
assertive

Rendered anatomy · InlineNotice

Variants: info, success, warning, danger
States: static, polite, assertive
Accessibility: Renders bounded feedback with a non-color marker and deliberate auto, polite status, assertive alert, or static off announcement semantics while keeping optional actions outside the live region.
Extension: attributes target the outer HTMLDivElement; callers own copy, title, action and dismiss controls, announcement timing, message lifecycle, and effects.

API reference · Source package

Molecules · @gluonjs/molecules

`ListboxField`

Delivery methodArrow keys · Home · End · disabled options

Variants

single-select
keyboard

States

default
invalid
disabled

Rendered anatomy · ListboxField

Variants: single-select, keyboard
States: default, invalid, disabled
Accessibility: Composes a visible label, the native ARIA listbox pattern, selected-option state, Arrow/Home/End keyboard movement, disabled options, helper text, and an announced error.
Extension: Options, value, change effects, validation, localization, persistence, and authorization stay caller-owned; listbox attributes remain available for tenant-specific styling and native event composition.

API reference · Source package

Molecules · @gluonjs/molecules

`Menubar`

Variants

horizontal
vertical

States

closed
open

Rendered anatomy · Menubar

Variants: horizontal, vertical
States: closed, open
Accessibility: Renders an APG menubar with direct top-level menuitem semantics, one roving Tab stop, buffered typeahead, orientation/RTL movement, controlled nested submenus, and Escape focus behavior.
Extension: Items, links, checked/submenu state, effects, routing, authorization, and command execution remain caller-owned.

API reference · Source package

Molecules · @gluonjs/molecules

`NavigationMenu`

Variants

horizontal
vertical

States

closed
open

Rendered anatomy · NavigationMenu

Variants: horizontal, vertical
States: closed, open
Accessibility: Renders a router-independent native nav/list/link/button hierarchy with controlled disclosure state, active destinations, disabled or unavailable items, Escape/outside dismissal, focus return, keyboard traversal, RTL, and deterministic SSR/hydration cleanup.
Extension: Callers own URLs, active state, authorization, analytics, copy, and open state; the composition deliberately does not use command-menu roles, fetch data, or own routing.

API reference · Source package

Molecules · @gluonjs/molecules

`NavigationStrip`

Variants

inline
overflow

States

default
overflow

Rendered anatomy · NavigationStrip

Variants: inline, overflow
States: default, overflow
Accessibility: Renders a named native navigation landmark, exposes keyboard-operable overflow controls, and reveals the exact aria-current destination.
Extension: attributes targets the native navigation landmark; destination markup and active-state semantics stay caller-owned.

API reference · Source package

Molecules · @gluonjs/molecules

`OneTimePasswordField`

Variants

numeric
alphanumeric

States

empty
complete
invalid

Rendered anatomy · OneTimePasswordField

Variants: numeric, alphanumeric
States: empty, complete, invalid
Accessibility: Renders a labelled bounded segmented editor with numeric or alphanumeric filtering, complete-code paste, native keyboard movement, IME-safe composition, helper/error relationships, and a single native form value.
Extension: Request-free and controlled; the caller owns value, change handling, validation, submission, authentication, transport, and ID uniqueness. Visible segment inputs never have a name; only the optional native value input participates in form submission.

API reference · Source package

Molecules · @gluonjs/molecules

`Pagination`

Variants

compact
windowed

States

default
first-page
last-page

Rendered anatomy · Pagination

Variants: compact, windowed
States: default, first-page, last-page
Accessibility: Renders a named pagination landmark with native page links, current-page semantics, keyboard targets, previous/next labels, and non-focusable ellipses.
Extension: Callers own page state, URL generation, data fetching, persistence, and authorization; the bounded visible page window remains request-free.

API reference · Source package

Molecules · @gluonjs/molecules

`PasswordToggleField`

Variants

hidden
visible

States

default
invalid

Rendered anatomy · PasswordToggleField

Variants: hidden, visible
States: default, invalid
Accessibility: Composes one explicitly labelled native password/text input and one native type=button toggle with aria-pressed, caller-localized show/hide labels, native validation relationships, and no password-value announcement.
Extension: The component is request-free and controlled: callers own visible state, value, input handling, validation copy, authentication, storage, and password policy; id namespaces the input, label, helper, error, and aria-controls relationships.

API reference · Source package

Molecules · @gluonjs/molecules

`ResponsiveActionBar`

Saved successfully

Variants

inline
sticky

States

idle
busy
disabled

Rendered anatomy · ResponsiveActionBar

Variants: inline, sticky
States: idle, busy, disabled
Accessibility: Renders one semantic section with one caller-owned primary action instance, an optional compact control, native busy/disabled metadata, and one bounded status live region using only aria-live=polite or assertive; sticky mobile layout remains in normal flow and becomes inline at wider widths.
Extension: summary, status, primaryAction, compactControl, state, presentation, and application-owned labels/effects stay caller-owned. Invalid state or presentation values fail closed. Safe-area padding, logical sizing, short-viewport static fallback, forced colors, reduced motion, and 44px action targets are component-owned.

API reference · Source package

Molecules · @gluonjs/molecules

`ResponsiveDisclosure`

ResponsiveDisclosure heading

Expandable content

Variants

compact
expanded

States

closed
open

Rendered anatomy · ResponsiveDisclosure

Variants: compact, expanded
States: closed, open
Accessibility: Uses one native details/summary tree, keeps desktop expanded, restores the last compact user choice across breakpoint changes, synchronizes aria-expanded, and removes its MediaQueryList listener on disconnect.
Extension: compactBreakpoint and compactInitialOpen define compact state; compactResetToken is the deliberate reset boundary; callers own content and effects.

API reference · Source package

Molecules · @gluonjs/molecules

`SearchField`

Search products

Variants

default
busy

States

empty
populated
busy
invalid

Rendered anatomy · SearchField

Variants: default, busy
States: empty, populated, busy, invalid
Accessibility: Renders a native labelled search input inside a role=search form with a submit button, stable caller-owned DOM IDs, controlled query value, disabled state, and stable busy indication.
Extension: The component is request-free; IDs, names, and labels fail closed when empty or structurally invalid, native listener objects/functions compose before the controlled callbacks, and callers own query state, submission, network, ranking, routing, authorization, and analytics.

API reference · Source package

Molecules · @gluonjs/molecules

`SearchResults`

Search resultsCobalt cable · In stockOrbit lamp · New

Variants

loaded
empty
partial-failure

States

loading
loaded
empty
error

Rendered anatomy · SearchResults

Variants: loaded, empty, partial-failure
States: loading, loaded, empty, error
Accessibility: Renders grouped native sections with instance-namespaced headings, optional descriptions and counts, an unordered result list, and explicit loading, empty, partial-failure, and disabled states; partial failures retain available groups and announce their caller-localized content through one polite status.
Extension: Results are render-only TemplateValues; structurally valid DOM IDs, unique per-instance group IDs, states, and heading levels fail closed, while callers own result links, fetching, ranking, authorization, routing, and live-region timing beyond the component status.

API reference · Source package

Molecules · @gluonjs/molecules

`SegmentedControl`

Variants

horizontal
vertical

States

selected
disabled

Rendered anatomy · SegmentedControl

Variants: horizontal, vertical
States: selected, disabled
Accessibility: Renders a named toolbar of native toggle buttons with one controlled aria-pressed value, one Tab stop, disabled-option skipping, Arrow/Home/End navigation, RTL, and horizontal or vertical orientation.
Extension: attributes targets HTMLDivElement; caller owns value, options, labels, disabled states, change handling, routing, persistence, panels, and async work; it is not a tablist or radiogroup.

API reference · Source package

Molecules · @gluonjs/molecules

`SortControl`

Sort productsnative select · helper/error · disabled

Variants

select
responsive

States

default
invalid
disabled

Rendered anatomy · SortControl

Variants: select, responsive
States: default, invalid, disabled
Accessibility: Renders a visible label and native select with stable IDs, helper/error relationships, platform keyboard semantics, and a 44px target.
Extension: Callers own option labels and values, selected state, URL synchronization, sorting, fetching, persistence, localization, authorization, and tenant-specific CSS variables remain caller-owned.

API reference · Source package

Molecules · @gluonjs/molecules

`Stepper`

Configure
Review
Complete

Variants

horizontal
vertical

States

upcoming
current
complete
error
disabled

Rendered anatomy · Stepper

Variants: horizontal, vertical
States: upcoming, current, complete, error, disabled
Accessibility: Renders one named navigation landmark and ordered list, marks at most caller-selected current steps with aria-current=step, preserves native links, and exposes status through text and non-color markers.
Extension: Callers own step ids, labels, URLs, content, current state, validation, routing, persistence, and workflow effects.

API reference · Source package

Molecules · @gluonjs/molecules

`TableRegion`

Product status
Product	Status
Orbit lamp	Ready

Variants

normal
overflow

States

loaded
empty
overflow

Rendered anatomy · TableRegion

Variants: normal, overflow
States: loaded, empty, overflow
Accessibility: Wraps a caller-owned native table in a named region, preserves table semantics and source order, exposes optional summary and overflow hint relationships, and adds one viewport Tab stop only while horizontal overflow exists.
Extension: attributes target the outer HTMLDivElement; callers own table markup, caption and headers, columns, rows, sorting, pagination, virtualization, selection, editing, empty content, data, and effects; it is not a DataGrid.

API reference · Source package

Molecules · @gluonjs/molecules

`Tabs`

Variants

automatic
manual

States

selected
disabled

Rendered anatomy · Tabs

Variants: automatic, manual
States: selected, disabled
Accessibility: Implements a labelled WAI-ARIA tablist with stable tab/panel IDs, controlled selection, one Tab stop, disabled skipping, Arrow/Home/End navigation, manual or automatic activation, orientation, RTL, and focus retention.
Extension: attributes targets the outer HTMLDivElement; callers own tab labels, panel content, value, loading, routing, persistence, and change effects.

API reference · Source package

Molecules · @gluonjs/molecules

`Toast`

Saved successfully

Variants

polite
assertive

States

visible
dismissed

Rendered anatomy · Toast

Variants: polite, assertive
States: visible, dismissed
Accessibility: Renders the message in exactly one atomic polite status or assertive alert while keeping its caller-owned dismiss action outside the live region.
Extension: Toast is request-free and requires a stable safe DOM ID; copy, mutation effects, logging, analytics, and persistence remain caller-owned.

API reference · Source package

Molecules · @gluonjs/molecules

`ToastViewport`

Saved successfully

Variants

top
bottom

States

idle
visible

Rendered anatomy · ToastViewport

Variants: top, bottom
States: idle, visible
Accessibility: Provides a named region, keyed toast identity, source-owned hover/focus pause, and a customizable native 44px dismissal control.
Extension: createToastController owns validated queue, promotion, deadline, dismissal, and disposal lifecycle. Browser ref activation discards pre-activation requests so SSR and hydration never replay stale notifications.

API reference · Source package

Molecules · @gluonjs/molecules

`Toolbar`

Variants

horizontal
vertical

States

default
disabled

Rendered anatomy · Toolbar

Variants: horizontal, vertical
States: default, disabled
Accessibility: Renders a named toolbar of native buttons and links with one enabled Tab stop, disabled skipping, Home/End, and orientation/RTL Arrow movement.
Extension: The bounded item model preserves caller attributes and native activation while actions, links, labels, authorization, and command execution remain caller-owned.

API reference · Source package

Molecules · @gluonjs/molecules

`Tooltip`

Variants

block-start
block-end
inline-start
inline-end

States

hidden
visible
disabled

Rendered anatomy · Tooltip

Variants: block-start, block-end, inline-start, inline-end
States: hidden, visible, disabled
Accessibility: Associates one stable role=tooltip description with a keyboard-focusable trigger, preserves visible focus, hover/focus discovery, forced-colors, reduced motion, and a bounded small-screen width.
Extension: The component is request-free; callers own trigger content, tooltip copy, labels, localization, and any richer interactive popover behavior.

API reference · Source package

Molecules · @gluonjs/molecules

`TreeView`

▾Shop
- ·Lighting
- ·Archived · unavailable

Arrow keys · Home · End · nested groups

Variants

hierarchical
keyboard

States

collapsed
expanded
selected
disabled

Rendered anatomy · TreeView

Variants: hierarchical, keyboard
States: collapsed, expanded, selected, disabled
Accessibility: Renders a labelled ARIA tree with nested groups, stable treeitem relationships, controlled expand/select state, Arrow/Home/End navigation, RTL-safe logical styling, and disabled-node skipping.
Extension: Nodes, expanded and selected values, authorization, loading, fetching, persistence, routing, mutations, and tenant-specific CSS variables remain caller-owned.

API reference · Source package

Organisms · @gluonjs/organisms

`AdminShell`

Admin headerWorkspace

sidebar · responsive

Variants

sidebar
responsive

States

default
stacked

Rendered anatomy · AdminShell

Variants: sidebar, responsive
States: default, stacked
Accessibility: Renders semantic header, labelled administration navigation, main, and optional footer regions with responsive stacking, visible focus, forced-colors, and reduced-motion support.
Extension: Header, sidebar content, main content, footer, routing, permissions, authorization, data loading, mutations, mobile toggle state, localization, and tenant identity remain caller-owned; region attributes and CSS variables support application-specific composition.

API reference · Source package

Organisms · @gluonjs/organisms

`AppShell`

NavHeaderMain

Variants

default
sidebar

States

default
responsive

Rendered anatomy · AppShell

Variants: default, sidebar
States: default, responsive
Accessibility: Provides header, nav, main, and footer landmarks; callers give the navigation an accessible name when more than one nav exists.
Extension: attributes targets outer HTMLDivElement; landmark content remains explicit component input.

API reference · Source package

Organisms · @gluonjs/organisms

`AsyncState`

RecommendationsPartially loadedProfile data is ready while recommendations refresh.

Variants

loading
success
empty
error
partial

States

loading
ready
degraded

Rendered anatomy · AsyncState

Variants: loading, success, empty, error, partial
States: loading, ready, degraded
Accessibility: Renders a labelled section with one truthful state message, status or alert announcement only for transient feedback, and caller-owned content and recovery actions.
Extension: Request-free and SSR-safe; callers own fetching, retry, authorization, routing, data, localization, and state transitions while id, attributes, parts, and CSS variables remain available for tenant-scoped styling.

API reference · Source package

Organisms · @gluonjs/organisms

`ConfirmationDialog`

Variants

info
destructive

States

closed
open
busy

Rendered anatomy · ConfirmationDialog

Variants: info, destructive
States: closed, open, busy
Accessibility: Native modal dialog with stable title/description relationships, optional initial focus, native Escape/cancel/close behavior, focus restoration, inert busy/disabled actions, opt-in backdrop dismissal, and one polite status.
Extension: attributes target the native HTMLDialogElement and expose native events; the optional controller owns only showModal/close/focus lifecycle while callers own action controls, copy, mutation, routing, and controlled state.

API reference · Source package

Organisms · @gluonjs/organisms

`MegaMenu`

grouped · responsive · keyboard

Variants

grouped
responsive
keyboard

States

closed
open
active
disabled

Rendered anatomy · MegaMenu

Variants: grouped, responsive, keyboard
States: closed, open, active, disabled
Accessibility: Renders a labelled native navigation with grouped links, controlled disclosure, Escape/focus return, Arrow/Home/End keyboard traversal, disabled-link semantics, mobile stacking, and forced-colors/reduced-motion support.
Extension: Groups, labels, URLs, active state, authorization, routing, analytics, localization, global shortcuts, and tenant-specific CSS variables remain caller-owned.

API reference · Source package

Organisms · @gluonjs/organisms

`PageLayout`

Breadcrumbs · Page title · ActionsMain contentAside

content · aside · responsive

Variants

content
aside
responsive

States

default
stacked

Rendered anatomy · PageLayout

Variants: content, aside, responsive
States: default, stacked
Accessibility: Renders a semantic header with a stable title, main content labelled by that title, optional labelled aside, and optional footer with responsive stacking and logical CSS.
Extension: Title, breadcrumbs, actions, main/aside/footer content, routing, data, authorization, localization, tenant identity, and application state remain caller-owned; region attributes and CSS variables support tenant-safe composition.

API reference · Source package

Organisms · @gluonjs/organisms

`ProductCard`

Orbit lamp

Orbit lamp€128 · In stock

Variants

linked
plain

States

default
available
unavailable

Rendered anatomy · ProductCard

Variants: linked, plain
States: default, available, unavailable
Accessibility: Renders one native article with a heading, optional native destination, caller-owned media, price, availability, and action regions; no state is conveyed by color alone.
Extension: Product identity and visible copy are typed input; price, inventory, payment, analytics, routing, and mutations remain caller-owned while data-product-id, parts, attributes, and CSS variables support tenant-scoped styling.

API reference · Source package

Organisms · @gluonjs/organisms

`ProductGallery`

Primary media

Detail crop

Alternate view

primary · responsive · cropped

Variants

primary
responsive
cropped

States

default
focusable
scrollable

Rendered anatomy · ProductGallery

Variants: primary, responsive, cropped
States: default, focusable, scrollable
Accessibility: Renders a labelled figure collection with source-order-preserving primary media, meaningful alt text, decorative-image support, per-image identifiers, keyboard focus visibility, responsive scroll snapping, forced-colors, and reduced-motion support.
Extension: Image URLs, alt text, crop treatment, selection state, lightbox, zoom, thumbnails, inventory, routing, analytics, localization, tenant media, and CSS variables remain caller-owned; stable root and image IDs support integration and tenant-specific styling.

API reference · Source package

Organisms · @gluonjs/organisms

`ProductGrid`

Orbit lampStack trayField tote

Variants

one
two
three
four

States

empty
populated

Rendered anatomy · ProductGrid

Variants: one, two, three, four
States: empty, populated
Accessibility: Renders a responsive section and ordered source-preserving card list, with explicit caller-owned empty content and a predictable one-column small-screen fallback.
Extension: Items, card rendering, empty copy, columns, sorting, filtering, pagination, virtualization, loading, authorization, and mutations remain caller-owned; data-columns and CSS variables are available for tenant-specific layout.

API reference · Source package

Organisms · @gluonjs/organisms

`SiteFooter`

brand · navigation · legal · meta

Variants

brand
navigation
legal
meta

States

default
stacked
compact

Rendered anatomy · SiteFooter

Variants: brand, navigation, legal, meta
States: default, stacked, compact
Accessibility: Renders a semantic footer with optional labelled navigation and caller-owned brand, legal, and metadata regions; responsive stacking, focus visibility, forced-colors, and reduced-motion support are provided by the exact stylesheet.
Extension: Brand, navigation, legal copy, metadata, URLs, routing, authorization, localization, analytics, tenant identity, and content order remain caller-owned; region attributes and CSS variables support application-specific composition.

API reference · Source package

Organisms · @gluonjs/organisms

`SiteHeader`

brand · navigation · actions · mobile

Variants

brand
navigation
actions
mobile

States

default
mobile-closed
mobile-open

Rendered anatomy · SiteHeader

Variants: brand, navigation, actions, mobile
States: default, mobile-closed, mobile-open
Accessibility: Renders a semantic header with optional labelled primary navigation, caller-owned brand/actions, controlled mobile disclosure, Escape/focus return, 44px controls, and reduced-motion/forced-colors support.
Extension: Brand, navigation, actions, routing, authorization, localization, analytics, tenant identity, and mobile open state remain caller-owned; region attributes and CSS variables support application-specific composition.

API reference · Source package

Organisms · @gluonjs/organisms

`SplitPane`

Primary workspaceInspector

horizontal · vertical · responsive

Variants

horizontal
vertical
responsive

States

expanded
collapsed
stacked

Rendered anatomy · SplitPane

Variants: horizontal, vertical, responsive
States: expanded, collapsed, stacked
Accessibility: Renders labelled primary and secondary regions with a keyboard-operable native collapse control, responsive stacking, visible focus, forced-colors, and reduced-motion support.
Extension: Primary and secondary content, orientation, collapse state, labels, routing, permissions, data loading, mutations, localization, tenant identity, and domain state remain caller-owned; region attributes and CSS variables support tenant-safe composition.

API reference · Source package

Organisms · @gluonjs/organisms

`WorkflowTimeline`

Configure
Review
Complete

Variants

active
blocked
complete

States

pending
active
complete

Rendered anatomy · WorkflowTimeline

Variants: active, blocked, complete
States: pending, active, complete
Accessibility: Renders one ordered list with a truthful localized overall summary, instance-namespaced relationships, aria-current="step" for at most one current stage, and explicit localized status, role, evidence, and action/link content.
Extension: Request-free and SSR-safe; a stable root id is required, omitted overall state derives as empty/active/blocked/complete, invalid input fails closed, attributes target the outer section, and steps accept native TemplateValue slots.

API reference · Source package

Gluon UI catalog ​

Swiss editorials

Gluon UI catalog