Components

A vertically stacked set of interactive headings that each reveal an associated section of content.

Displays a short, important message in a way that attracts the user's attention without interrupting their task.

A modal dialog that interrupts the user with important content and expects a response.

Displays content within a fixed aspect ratio.

Displays a file or media attachment, typically inside a chat message or composer.

An image element with a fallback for representing a user or entity.

The nx-ui Background Pattern component.

A small label used to highlight status, category or count.

The nx-ui Banner component.

Displays the path to the current page and lets the user navigate back up the hierarchy.

A chat message bubble for conversational interfaces.

A clickable control used to trigger an action or event.

Groups related buttons together with consistent spacing and shared borders.

A date field component that lets users enter and edit dates via a visual calendar grid.

A container that groups related content and actions in a bordered, elevated surface.

A slideshow-style container for cycling through a set of items.

A themed wrapper around Recharts for building consistent data visualisations.

A control that allows the user to toggle between checked, unchecked and indeterminate states.

A selectable card pairing a checkbox with a title and description — bordered, rounded and brand-tinted when checked, in the Untitled UI checkbox-group idiom.

Provides shared state to a series of checkboxes, so a set of checkboxes (or checkbox cards) can be driven by one value array.

An interactive panel that can be expanded or collapsed to show or hide content.

A full colour picker with a saturation/hue/alpha area, hex and RGB fields, presets and an eyedropper.

A rounded colour chip with a checkerboard alpha backing, selectable standalone or in a radio-style swatch grid.

An input combining a text field with a filterable list of selectable options.

A fast, composable command palette for search-driven navigation and actions.

The nx-ui Content Divider component.

A menu of actions triggered by a right click or long press, anchored to the pointer.

The nx-ui Css Background Pattern component.

An amount field with a currency symbol and thousands-separator formatting on blur.

The nx-ui Date Picker component.

A window overlaid on the page, rendering content that requires user attention or interaction.

Provides text-direction (LTR/RTL) context to descendant components.

A panel that slides in from the edge of the screen, typically used on smaller viewports.

Displays a menu of actions or options triggered by a button.

An inline click-to-edit control that swaps preview text for an input in place, for renaming titles, labels and notes.

A placeholder layout for empty, zero-data or not-yet-populated states.

A layout primitive for composing form fields with labels, descriptions and validation messages.

The nx-ui File Upload component.

The nx-ui Glow component.

Displays rich content in a preview card when a user hovers over a trigger element.

A control for entering and editing a single line of text.

Combines an input with adjoining buttons, icons or add-ons into a single control.

An input for entering one-time passcodes, split across individual character slots.

A generic list-row layout primitive for building consistent list and menu items.

Displays a keyboard shortcut or key combination.

An accessible label associated with a form control.

The nx-ui Loading Overlay component.

Pins lucide-react icons to nx-ui's line weight so they sit correctly beside @untitledui/icons; wrap your root layout once.

A small positional indicator, typically used to flag status on another element.

A horizontal menu bar with drop-down menus, similar to a desktop application menu.

Renders a single message within a conversational or chat layout.

Manages scroll position and visibility for a scrolling list of chat messages.

A styled wrapper around the native HTML select element.

A collection of links and menus for site or application navigation.

The persistent inbox row: unread edge bar and tint, leading avatar or severity tile with an optional type-badge overlay, two-line title and preview, right-hand time column, inline decision row and a hover-revealed quick-action pill.

A numeric field with increment and decrement steppers, built on Base UI's number field.

Controls for navigating between pages of paginated content.

A country-code select paired with a formatted national number field, exposing the full E.164 value.

Displays rich content in a portal, anchored to a trigger element.

Displays an indicator showing the completion progress of a task.

The nx-ui Progress Circle component.

A number input paired with a unit select, for entering material quantities with conversion between units.

A multi-step question flow with single/multiple choices, free text, validation, skipping and controlled navigation.

A set of mutually exclusive, checkable radio buttons.

The nx-ui Rating component.

A set of resizable panels split by a draggable handle.

A custom scrollable area with consistently styled scrollbars across platforms.

The nx-ui Section Divider component.

Displays a list of options for the user to pick from, triggered by a button.

Visually or semantically separates content.

A panel that slides in from the edge of the screen, extending the dialog primitive.

A composable, themeable application sidebar with collapsible sections.

A placeholder used to indicate content that is currently loading.

An input for selecting a numeric value, or range of values, from within a range.

Untitled UI-styled notification toasts via the Sonner library, plus a progress-toast helper.

A loading indicator for asynchronous operations.

The nx-ui Stepper component.

A control for toggling between checked and unchecked states.

A set of components for displaying tabular data.

A set of layered sections of content, shown one panel at a time.

The nx-ui Tag component.

The nx-ui Tags Input component.

A control for entering and editing multi-line text.

The nx-ui Timeline component.

Opt-in Base UI notifications with a toast manager, status icons, actions, promises and swipe dismissal; Sonner remains supported.

A two-state button that can be toggled on or off.

A set of two-state buttons that can be toggled on or off, individually or as a group.

A popup that displays informative text when a user hovers or focuses an element.

A hierarchical view of expandable, selectable rows for project scopes, folder structures and nested taxonomies.

A UK vehicle-registration field that auto-formats as you type across all five plate formats (current, prefix, suffix, dateless, Northern Ireland), with a number-plate visual variant, live format/age/region decoding and a validation parse exposed on change.