Components

Expandable sections with keyboard navigation and independent content panels.

Inline feedback with a title, description, and semantic intent.

An explicit confirmation step for consequential actions.

A predictable media container that preserves its width-to-height ratio.

Circular identity in three sizes, with filled or transparent outline variants, image fallback, status and stacked groups.

A trail of semantic links showing the current location.

Related actions grouped under one outline and accessible name.

Keyboard-accessible day selection with month navigation.

Scrollable content slides with previous and next controls.

Responsive charts with theme-aware series and a text alternative.

Independent selection with checked, mixed, and disabled states.

A single disclosure region controlled by a button.

Searchable single selection with a keyboard-operated listbox.

Searchable command list with keyboard selection and empty results.

A button-triggered action menu with grouped commands.

A contextual menu opened with a pointer or keyboard.

A client-side table with search, sorting, pagination, and empty results.

A date selection control composed from Popover and Calendar.

A modal surface for a focused task with managed focus.

A side panel for supporting details and short tasks.

A touch-friendly panel with a swipe handle and explicit close action.

Direction context for right-to-left component behavior.

An empty state with context and a useful next action.

Form composition for visible labels, help, and error messages.

A supplementary preview attached to a semantic link.

An input with aligned prefixes, suffixes, and supporting actions.

A single accessible input rendered as grouped verification-code slots.

A structured row with media, content, and contextual actions.

Keyboard shortcut notation using semantic kbd elements.

A visible semantic label associated with a form control.

Desktop-style grouped commands with arrow-key navigation.

A styled native select that keeps platform keyboard and touch behavior.

Website navigation with linked destinations and expandable sections.

Page navigation with an explicitly marked current page.

An anchored panel for a compact interactive task.

A small single-choice questionnaire with required-answer validation.

A mutually exclusive selection controlled with arrow keys.

Resizable panes with bounded sizing and a keyboard-operable separator.

A bounded scroll region with styled scrollbars.

A custom select with typeahead, focus management, and selected-item feedback.

A visual or semantic boundary between related content groups.

Outlined loading placeholders composed into a full profile card, with an optional pulse and reduced-motion support.

A numeric range control with keyboard increments and a visible value.

An indeterminate loading indicator paired with status text.

An immediate binary setting with explicit on/off state.

A semantic table with caption, headers, rows, and summary footer.

Related content panels with a roving keyboard tab list.

A multiline text field with visible focus and native form behavior.

Transient notifications with semantic status and dismiss controls.

A pressed-state button for a reversible formatting choice.

A related set of toggle buttons with shared selection behavior.

Short supplementary help shown on hover and keyboard focus.

A file-like content row with metadata and explicit actions.

Message bubbles with alignment and semantic color variants.

A compact visual marker pairing an icon and short text.

Conversation structure for author, content, and message metadata.

A scroll container for conversations with a return-to-latest control.

Controlled playback, speed selection and audio availability. Connect it to any audio engine.

Controlled word fields with keyboard navigation, paste distribution and per-word feedback.

A word with optional pronunciation, contextual meaning and word class.

Vocabulary cards grouped by their function in a sentence.

Compact speed and repeat popovers with automatic reading preference.

Accessible, reusable key labels for actions.

All six Phosphor weights with accessible labels and tree-shakable icon imports.

Persistent light, dark and system themes for React, with an early initializer and cross-tab updates.

A direct light/dark button with a sun or moon reflecting the current theme.

A masked password field with an independent, keyboard-accessible visibility toggle. Uses Input borders, focus and validation, and Phosphor Eye/EyeSlash icons.

Decorative playback waveform that animates only while speech plays.

Tilted game sticker for a confirmed reward: title, combo, points and caption.

Decorative emblem for a completed lesson or course with a one-time celebration.

Level-style progress for a practice attempt: one segment per exercise, done in mint, the current one lifted in lilac.

Combo chip with a lightning, the multiplier and pips; its tone follows the same tiers as Reward Sticker.

Score-board chip for points or time: icon, label and a game-number value that can pop when it changes.

Game controls in one row, straight on the page: helper tools first and the main action last. Narrow bars put the tools on one row and the action below.

Action family with seven variants, eight sizes, and compositions for icons, loading, links, and groups.

Composable surface for grouping related content, context, and actions.

Compact label for status, categories, and small pieces of information.

Text field with visible focus, disabled states, and an accessible error signal.

Accessible indicator for progress across courses, tasks, and multi-step flows.

Composable side navigation with brand, sections, active state, and a persistent footer.

Application structure combining navigation, header, actions, and the main working surface.