Table of Contents

Getting Started

Identity

Components

Components

Components are reusable elements that serve as the building blocks of the design system. They are curated using the established identity principles and can be combined to form various elements, patterns, and templates that can be used to design user interfaces.

An Avatar component is used to visually represent a user, profile, or entity, typically through an image, initials, or icon.

An AvatarGroup component is used to display a collection of Avatars together, typically representing a group of users, collaborators, or participants.

Backdrop component overlays a dimmed screen to focus attention on foreground content.

A badge is a small component that displays a number or status indicator, often used to show notifications or messages.

Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.

A button is an interactive element that triggers a specific action and also lets users know what will happen next.

ButtonGroup is a component that groups multiple buttons together.

Chips are compact elements that represent an input, attribute, or action. They are often used for tags, contacts, or filters.

Circular Progress

The Circular Progress component displays a circular loading indicator that represents the progress in your application

The Collapse component is used to create expandable/collapsible content sections. It smoothly animates the height of its children from zero to full height when expanded.

Containers align and center content, providing responsive layout options for different screen sizes.

Dialogs display important prompts or confirmation requests that interrupt user interaction flow.

FormControlLabel

A control + label pair used for checkboxes or radio buttons.

The Grid component in Sistent provides a flexible and responsive layout system for arranging content in rows and columns.

IconButton provides an interactive button component that displays only an icon, ideal for compact UIs where space is limited and actions are easily recognizable through iconography.

Sistent provides a comprehensive collection of icons that can be used across your projects. These icons are designed to be consistent with the overall design language of the Sistent design system, ensuring a cohesive user experience.

Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.

Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.

A modal is a conatiner that appears in front of the main content on a page when clicked on button or text. It provides information or an actionable piece of content for users to execute.

Pagination enables users to navigate through multiple pages of content, providing an intuitive interface for browsing large datasets or segmented information.

The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.

A popper is a tooltip that appears when a user interacts with an element.

Sistent offers a well-structured RadioGroup component that allows users to select one option from a set.

Select component is a dropdown menu for selecting an option from a list.

Stack is a layout component that arranges elements in a one-dimensional flow with customizable spacing and direction.

Stepper provides a way to display progress through a sequence of logical steps.

The Switch component allows users to toggle the state of a single setting on or off.

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

The TextField component is a versatile input field used to capture user input in forms and user interfaces.

A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.

ToggleButton allows users to switch between two or more states, commonly used in forms or settings for quick toggles.

The toolbar is a horizontal container for grouping interactive elements like buttons, filters, or navigation controls, typically placed at the top of a UI section.

The Tooltip component is a small pop-up box that appears when a user hovers over an element.

Layer5, the cloud native management company

An empowerer of engineers, Layer5 helps you extract more value from your infrastructure. Creator and maintainer of cloud native standards. Maker of Meshery, the cloud native manager.