Plenum UI Components

With Plenum UI we provide an extensive list of customizable components that you can use when designing Enterprise UX Apps for Agility.

To make it easy we've applied the Atomic Design Methodology and organized components into Atoms, Molecules, Organisms and Pages.

Visit Plenum UI

Atoms

Like real atoms, these are the fundamental building blocks of your design and interface. These are basic HTML elements that can’t be broken down any further without ceasing to be functional.

• Avatars

Avatars are components that show a profile image or initials of the user and can include a status indicator.

• Badges

Badges are indicators that can be used to label an element. They can be squared or rounded and can include a status indicator or a removal button to hide them.

• Buttons

Buttons are buttons! They take an action when clicked and have a variety of designs depending on their use case.

• Crumbs

Crumbs indicate the location of your current page by separators within the hierarchy of your navigation.

• Icons

Icons can be customized in a variety of ways to fit and work within your UI.

• Loaders

Loaders are a visual indicator that a page or element is loading or that an action is taking place. Plenum UI provides access to both an animated spinning loader as well as a Radial loader that fills with progress.

Molecules

Molecules are groups of bonded atoms that take on distinct new properties, in UI these are groups of elements that function together as a single unit.

• Inputs

This includes Radio Selectors, Check Boxes, Toggles, Text Inputs and more!

• Tabs

A tab is an object that allows multiple documents or panels to be contained within a single window.

Organisms

These are your more complex UI components made up of groups of atoms, molecules, or other organisms. These will be specific and distinct sections of your UI.

• Animated Label Input

A label input that animates when the text field is selected.

• Button Drop-down

A button with a drop-down that can be accessed to select an action

• Empty Section Placeholder

An interactive placeholder for users to select or drag-and-drop an image or attachment

• Form Input With Add-ons

Example text

• Text Input Select