About Sistent
Sistent is the Layer5 Design System - an open source design system that offers building blocks to create consistent, accessible, and user-friendly interfaces. It's aimed at developers who want to design applications aligned with the same brand and ensure a uniform user experience across different products.
Sistent leverages Material UI libraries and provides a custom theme on top of it for a consistent look and feel. It includes components, icons, and design tokens that developers can readily integrate into their applications. By using Sistent, developers can save time and effort while maintaining a high-quality user experience throughout Layer5 products.
Sistent provides a consistent user experience across Layer5 projects and any frontend software projects that choose to use Sistent, too.
'Sistent' is a play on words to ensure that we have a consistent theme, components, design tokens, etc across all of the apps that will be using this library. Sistent is a design system that uses the MUI v5 components and a custom theme provider instead of using the default theme from MUI v5.
Sistent is built with Typescript and Reactjs and contains components and a large collection of icons that can be reused across projects. If you’re interested in joining the project (please do!), let us know, and we will help you get started on contributing.
Installation and Quickstart
To install the Sistent NPM package, run:
After installation, you can import Sistent theme and any Sistent component from "@layer5/sistent". The component needs to be included inside "SistentThemeProvider".
Taking button as an example:
