Components

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

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.

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.

List a group of text-only content.

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.

A component that handles text truncation with an accessible tooltip that appears only when the text is actually truncated.

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.

An icon rendered on a circle background with PlumaLabel styles.

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.

PlainLink is an unstyled wrapper component around the linkComponent defined on PlumaProvider. If no linkComponent is defined, a regular a tag is used instead.

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.

A button that toggles between active and inactive states.

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.

An input component that allows selecting a date from a popup 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 component renders a radio input, which allows selecting an option from a group of options. Usually you'll want to use the Radio component along with the RadioGroup component.

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.

The PlumaSearch component builds upon the TextField component, providing additional functionality tailored for search use cases.

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.

A textarea component for user input.

A styled text input field.

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.

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

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.

The Tag component is used to display categorized labels, status indicators, or metadata in an application. It is designed for clarity and flexibility, supporting different frameworks and customization options.

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

Banners prominently communicate contextual information.

Indicates a loading state in a larger 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.