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 accordion is a vertically stacked list of headers that can be clicked to reveal or hide associated content. It allows users to toggle between hiding and showing large amounts of content in a compact space.

An Avatar component is used to visually represent a user, profile, or entity, typically through an image, initials, or icon. It is commonly used in interfaces to indicate identity.

The AvatarGroup component is used to visually represent a collection of users or entities in a compact and organized layout. It's ideal for showcasing team members, collaborators, or participants, and is often used in dashboards, cards, and collaborative tools. AvatarGroup handles overlapping, spacing, and overflow logic to ensure clarity even with limited space.

The Backdrop component overlays a dimmed background across the screen to direct focus to specific content in the foreground, like loading indicators, modals, or dialogs. It visually signals that the background content is temporarily inaccessible. The Backdrop can be closed when clicked, depending on the close action set in its props.

A badge is a small piece of information that is used to convey a specific message or status. It is often used to provide additional context or information about an item, such as a notification count, status indicator, or label.

The Box component is a versatile, theme-aware container in Sistent, ideal for styling and layout customization. It supports the sx prop for easy, responsive styling and can render as any HTML element.

Buttons are crucial and integral elements in an interface. They are mostly used to trigger actions and in so doing, take users to where they need to be in any step of a flow. Buttons can be used in tandem with other elements to piece designs together and convey digital experiences.

The ButtonGroup component can be used to group related buttons together. It is a container for multiple buttons that can be used to group buttons together and apply styles to them. This component is useful when you have a group of buttons that need to be styled in a similar way.

Chips are compact elements that represent an input, attribute, or action. They allow users to enter information, make selections, filter content, or trigger actions.

Circular Progress

The Circular Progress component displays a circular loading indicator that represents either determinate or indeterminate progress in your application. It's commonly used to show loading states, progress of operations, or completion percentages.

The Collapse component allows you to create collapsible content areas that can be toggled to show or hide content. It's commonly used for FAQs, accordions, and other UI elements where space needs to be managed efficiently.

Containers are fundamental layout elements, used to center and structure content horizontally. They can be fluid or fixed, helping maintain alignment across different screen sizes and improving readability.

The Dialog component is a modal window that appears on top of the main content to focus user attention on specific tasks or information. It provides a controlled way to present confirmations, forms, alerts, and detailed content without navigating away from the current context.

The Divider component renders a thin line that separates content within lists, layouts, and sections, providing a subtle way to reinforce visual hierarchy and improve scannability.

Navigation drawers provide access to destinations and app functionality, such as switching accounts. They can be permanently on-screen or controlled by a menu icon.

Form Control Label

FormControlLabel is a wrapper component that pairs a label with a control such as a checkbox or a radio button. It enhances accessibility by allowing users to click the label to toggle the control.

The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. It uses CSS Flexbox for high flexibility and provides a 12-column system with customizable breakpoints.

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.

A link component is a navigational element that directs users to another page or section within an application.

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 container that appears in front of the main content on a page, providing important information or an actionable piece of content for users to execute. Modals focus user attention and prevent interaction with the underlying page until dismissed.

The Pagination component helps users navigate through multiple pages of content. It provides a clear interface for moving between pages and understanding the current position within a larger dataset.

The Paper component provides an elevated surface for displaying content. It mimics the behavior of real-world surfaces with shadow effects, supporting Material Design's elevation system.

The Popper component provides a mechanism for positioning content dynamically relative to a reference element. It is commonly used for tooltips, dropdowns, and modals, enhancing the user experience by presenting contextual information without overcrowding the interface.

The RadioGroup component allows users to select one option from a set of mutually exclusive choices. It ensures accessibility and consistency within the Sistent design system.

The Select component is a versatile and customizable element commonly used in forms and user interfaces. It is designed to present a list of options for users to choose from, either as a single selection or multiple selections. This component plays a vital role in collecting user-provided information efficiently and intuitively.

The Stack component is a layout utility that manages one-dimensional layouts with flexible spacing and alignment. Built on Flexbox, it provides an efficient way to arrange elements vertically or horizontally with consistent spacing.

Steppers guide users through multi-step processes by breaking complex tasks into manageable, sequential steps with clear progress indication.

A switch is an toggle component which allows users to toggle a setting on or off and is typically used for system preferences or real-time configuration options.

Tabs organize content across different screens, data sets, and other interactions. They allow users to navigate between different views within the same context, making it easy to explore and switch between related content sections.

The Input component is a versatile form control that enables users to enter and edit text data. It supports various input types, validation states, and customization options to create accessible and user-friendly data collection experiences.

The TextField component is a versatile input field used to capture user input in forms and user interfaces. It can handle a variety of input types, such as text, numbers, emails, and passwords, and offers built-in styling and validation features.

The ToggleButton and ToggleButtonGroup are versatile components that can be used for a wide range of applications. Their intuitive design ensures users can make selections easily and confidently. Whether it's enabling a setting, selecting a mode, or choosing multiple options, these components are built to enhance user experience across different scenarios.

The Toolbar is a horizontal layout container used to organize and group actions or interactive elements. It helps streamline workflows and keeps related actions in one place, providing users with easy access to frequently used commands.

The Tooltip component displays informative text when users hover over, focus on, or tap an element. Tooltips are designed to enhance accessibility and user understanding of interface elements.

Layer5, the cloud native management company

Layer5 is the steward of Meshery and creator of Kanvas, the collaborative canvas for cloud-native infrastructure. We bridge the gap between design and operation, allowing engineers to create, configure, and deploy orchestratable diagrams in real time. Whether managing Kubernetes or multi-cloud environments, Layer5 provides the tooling needed to oversee modern infrastructure with confidence.