Componentsv2.170.1
Iconsv1.15.0
MCPv0.8.18
Tokensv0.34.1
Overview
Layout
Accordion
Accordion is a component that allows for the expansion and collapsing of content
AccordionGroup
AccordionGroup is the wrapper component for Accordions. It allows for limiting open accordions and helps standardize styling.
Box
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
Card is a component for grouping similar content in a container.
CenterBaseline
Utility component for centering content vertically.
Divider
A horizontal line that separates content.
EmptyState
EmptyStates notify the user that the content area or page has no data.
Flex
A utility component for creating flex containers.
FormLayout
A flexible layout component for arranging form elements with customizable spacing.
Grid
A utility component for building CSS grid layouts.
InlineStack
A utility component for creating horizontal flex containers.
Panel
The Panel component is a container for grouping content in a subtly styled container.
Scrollable
Scrollable is a utility component that provides a scrollable container with configurable overflow behavior and edge detection capabilities.
Stack
A utility component for creating vertical flex containers.
Typography
Code
Displaying short strings in a styled monospace
<code> container. The Code component builds on top of Text and supports all Text props.DescriptionList
Organize and explain a group of terms and their descriptions.
Emphasis
Marks text that has stress emphasis.
Heading
A styled, semantic heading element. The
Heading component builds on top of Text and supports all Text props.List
List a group of text-only content.
Paragraph
A typography component for rendering styled
p elements. The Paragraph component builds on top of Text and supports all Text props.Strong
Renders bold text to indicate importance.
Text
Base text component for applying typographic styles.
TextLabel
A styled
label element. The TextLabel component builds on top of Text and supports all Text props.Truncated
A component that handles text truncation with an accessible tooltip that appears only when the text is actually truncated.
Content
Avatar
A component that displays a user's avatar, supporting images, Gravatar, and initials.
CodeBlock
Displays a block of code with syntax highlighting.
Coin
A shaped container (circle or rounded square) of fixed size that frames an Icon, Image, or short text content.
Icon
Pluma Icons can be used in apps by using the
Icon component.Image
Wrapper around the HTML img element, used for displaying images and custom icons.
LabelIcon
An icon rendered on a circle background with
PlumaLabel styles.Navigation
Breadcrumbs
Breadcrumbs provide information about a user's current location within the application's page hierarchy.
Link
The
PlumaLink component renders a styled version of PlainLink. Just like PlainLink, it will use PlumaProvider's linkComponent, if it exists.NavItem
A component to display a navigation button in a sidebar.
Page
A container for displaying a page.
Pagination
A navigation component for moving through paginated content.
PlainLink
PlainLink is an unstyled wrapper component around the linkComponent defined on PlumaProvider. If no linkComponent is defined, a regular a tag is used instead.SideNav
A component to display a navigation sidebar.
TabNav
A navigation component to move between different views within the same page hierarchy.
Tabs
A component to switch between different views within the same context.
Buttons
Button
Buttons are interactive elements that allow the user to perform an action on the page or serve as a prominent hyperlink.
ButtonGroup
The ButtonGroup component renders a group of related buttons next to each other.
CloseButton
CloseButton provides a standard close/dismiss button with an X icon for use in dialogs, modals, and other dismissible UI elements.
DropdownMenu
A set of actions in a popover.
PlainButton
PlainButton is an unstyled wrapper component that creates a button element with minimal styling. It's used internally by Pluma to build other button components.ToggleButton
A button that toggles between active and inactive states.
Forms
Checkbox
The Checkbox component renders a
checkbox input, which allows selecting one or more options from a group of options.CheckboxGroup
The CheckboxGroup component is used for displaying a list of related options, in the form of Checkbox inputs, where multiple choices may be selected.
ColorPicker
An HEX value color picker.
Combobox
A text input with a dropdown list of options.
DatePicker
An input component that allows selecting a date from a popup calendar.
Form
A component to handle submitting forms.
JsonField
A textarea component for JSON input
NumberField
A numeric input field with increment/decrement controls, value clamping, and keyboard support.
OptionCard
A radio or checkbox input wrapped in a card. It can be used anywhere you would use radio or checkbox inputs, where users are asked to make a choice from a number of options. The
OptionCard, however, renders a more visually prominent card, with an increased click area, compared to a standard radio or checkbox.OptionCardGroup
A wrapper for OptionCard components.
Radio
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.RadioGroup
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
The
PlumaSearch component builds upon the TextField component, providing additional functionality tailored for search use cases.SegmentedControl
Toggle from a set of two or more options.
SegmentedControl is essentially a styled wrapper around a group of radio inputs.Select
Selecting a value from a dropdown list of options.
Slider
Choose a number value within a range.
TextArea
A textarea component for user input.
TextField
A styled text input field.
Toggle
The Toggle component renders a switch to toggle between enabled or disabled states.
Data display
Badge
PlumaBadge renders a numeric label to indicate the quantity of an item or content.DataTable
DataTable enables users to act upon complex datasets with a variety of features including filtering and sorting.
Filters
The Filters component is a versatile component that can be used to filter data based on user-defined criteria.
FormattedDateTime
Displays a date/time formatted in one of a number of predefined formats.
FormattedRelativeTime
Displays a date/time in a human-readable format, relative to the current time.
KeyboardShortcut
Displays keyboard shortcuts with platform-aware formatting.
Label
Labels are read-only indicators used to communicate a category, metadata, or process's current state.
ProgressBar
A progress bar component that can be used to show the progress of a task.
ProgressCircle
A circular progress indicator that visually represents the completion of a task or process.
StatusIndicator
A small colored circle used to indicate status or state.
Table
A container for displaying display data in a tabular format.
Tag
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.
Feedback
Banner
Banners prominently communicate contextual information.
PageLoader
Indicates a loading state in a larger context.
SkeletonShape
A placeholder component that mimics the shape of various UI elements while data is loading.
SkeletonText
A placeholder component that mimics the shape of text content while data is loading.
Snackbar
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.
Spinner
An animated icon that indicates a loading state.
Overlays
Blanket
An overlay component that centers content, with an optional semi-transparent background.
ConfirmationModal
Confirmation with confirm/cancel actions.
Drawer
Control interaction flow with simple, extensible drawers.
Modal
Modals are dialogs displayed over inert content that allow users to complete a singular, focused task without leaving the page.
Modal manager
Programmatic control of modals
Popover
Popovers are floating overlays that contain additional information or interactive content.
Tooltip
A floating label to explain additional context in the UI. They're triggered by interaction events like hover, focus, tap, or click.