Components

Track component maturity across design, framework support, tests, docs, and test helpers.

Pluma components have test helpers to aid with writing tests

Accordion is a component that allows for the expansion and collapsing of content

AccordionGroup is the wrapper component for Accordions. It allows for limiting open accordions and helps standardize styling.

The application shell around every page, with slots for banners, a header, a resizable side navigation, the scrolling content and trailing sidebars.

A utility component for constraining content to a fixed width-to-height ratio.

Base component for all Pluma components. All components in Pluma are built using the Box component. This means Pluma components all accept the Box component's props.

Card is a component for grouping similar content in a container.

Utility component for centering content vertically.

A horizontal line that separates content.

EmptyStates notify the user that the content area or page has no data.

A utility component for creating flex containers.

A flexible layout component for arranging form elements with customizable spacing.

A utility component for building CSS grid layouts.

A utility component for creating horizontal flex containers.

A Panel wraps related content, sometimes separated by borders, within a minimally-styled container.

Scrollable is a utility component that provides a scrollable container with configurable overflow behavior and edge detection capabilities.

A layout component for splitting a space into resizable, nestable panes with draggable handles.

A utility component for creating vertical flex containers.

Code visually marks technical text in a monospace font family, alternate colors, and responsive font size.

Organize and explain a group of terms and their descriptions.

Marks text that has stress emphasis.

A styled, semantic heading element. The Heading component builds on top of Text and supports all Text props.

Lists group related items together in sequential or non-sequential order.

Paragraph, meant to represent the paragraph element, is a typography component built on top of Text.

Strong renders bold text for visual weight and importance.

Text is a foundational component used to apply typographic styles.

TextLabel captions form controls or definitions with contextual information.

Truncated clips longer text with an ellipsis and provides an accessible tooltip that displays on truncation.

A component that displays a user's avatar, supporting images, Gravatar, and initials.

Displays a block of code with syntax highlighting.

A shaped container (circle or rounded square) of fixed size that frames an Icon, Image, or short text content.

Icons are scalable graphics used to visually enhance a user interface.

Images are used to display graphics and custom icons.

Breadcrumbs provide information about a user's current location within the application's page hierarchy.

Links are used to navigate to a new location, open or download an asset, or serve as an inline action.

A component to display a navigation button in a sidebar.

Page is the outermost layout for a route, setting where the title and page-level actions sit and how wide the content column is.

A navigation component for moving through paginated content.

The PlainLink is a foundational component with minimal styling used to build other link components in Pluma.

An ordered set of steps that collapse into editable summaries as they are completed, ending in one explicit commit.

A component to display a navigation sidebar.

Communicates progress through the ordered steps of a wizard or multi-step flow.

A component to switch between different views within the same context.

A navigation component to move between different views within the same page hierarchy.

Buttons are interactive elements that allow the user to perform an action on the page or serve as a prominent hyperlink.

The ButtonGroup component renders a group of related buttons next to each other.

CloseButton provides a standard close/dismiss button with an X icon for use in dialogs, modals, and other dismissible UI elements.

A set of actions in a popover.

The PlainButton is a foundational component with minimal styling used to build other button components in Pluma.

Checkboxes allow users to select one or more items from a group of options.

The CheckboxGroup component is used for displaying a list of related options, in the form of Checkbox inputs, where multiple choices may be selected.

An HEX value color picker.

A text input with a dropdown list of options.

The ConditionEditor components lay out editable condition rows — a card per condition holding the controls that edit it, joined to the rows around it by their operator.

DatePicker allows a user to select a date or date range from a dropdown calendar.

FileField lets people choose files from their device, either through a button or a drag-and-drop area.

A component to handle submitting forms.

A textarea component for JSON input

A numeric input field with increment/decrement controls, value clamping, and keyboard support.

OptionCards present the functionality of a radio or checkbox in a more visually prominent card format with an increased click area.

A wrapper for OptionCard components.

The Radio form control allows for selection of one option from a group.

The RadioGroup component is used for displaying a list of related options, in the form of Radio inputs, where only one choice can be selected.

Search provides the ability to narrow down data using a specialized TextField.

Toggle from a set of two or more options. SegmentedControl is essentially a styled wrapper around a group of radio inputs.

Selecting a value from a dropdown list of options.

The dropdown surface a Select renders, with an optional header, categories rail, detail pane and footer.

Choose a number value within a range.

TextArea receives much longer user text input to complete a form.

TextField receives user text input to complete a form.

The Toggle component renders a switch to toggle between enabled or disabled states.

Badges are read-only indicators used to communicate a category, metadata, a numeric quantity, or a process's current state.

The ConditionViewer components render a read-only summary of a set of rules — one boxed sentence per rule, nested under the operator that combines them.

DataTable enables users to act upon complex datasets with a variety of features including filtering and sorting.

The Filters component is a versatile component that can be used to filter data based on user-defined criteria.

Displays a date/time formatted in one of a number of predefined formats.

Displays a date/time in a human-readable format, relative to the current time.

Displays keyboard shortcuts with platform-aware formatting.

A progress bar component that can be used to show the progress of a task.

A circular progress indicator that visually represents the completion of a task or process.

A small colored circle used to indicate status or state.

Tables display a set of data in an organized tabular format.

Tags represent user-generated, interactive categorization — items a person can add, apply, and remove, like filter criteria or audience attributes.

Presents ordered events, milestones, or state transitions with a connected vertical rail.

Banners prominently communicate contextual information.

PageLoader communicates that a process is currently running on a page-level context.

A placeholder component that mimics the shape of various UI elements while data is loading.

A placeholder component that mimics the shape of text content while data is loading.

A non-disruptive message that appears at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action. Snackbars communicate messages that are minimally interruptive.

Spinners are animated icons used to indicate a content area's loading state.

An overlay component that centers content, with an optional semi-transparent background.

Confirmation with confirm/cancel actions.

Control interaction flow with simple, extensible drawers.

Programmatic control of drawers

Modals are dialogs displayed over inert content that allow users to complete a singular, focused task without leaving the page.

Programmatic control of modals

Popovers are floating overlays that contain additional information or interactive content.

A floating label to explain additional context in the UI. They're triggered by interaction events like hover, focus, tap, or click.

A utility component that visually hides its children while keeping them accessible to screen readers.