The Sistent Design System from Layer5 provides the open source building blocks to design and implement consistent, accessible, and delightful product experiences.
--> Visit https://layer5.io/projects/sistent
Visit the Sistent website for further instructions.
- Layer5 Brand Guide (PDF)
- Layer5 Logos (more assets available in shared Community drive).
- Design System components in React.js
Before you begin, ensure you have the following installed on your system:
- Node.js
Make sure you have npm
on node@16
and above. The CI workflows checks for in node@16
, node@18
and node@20
To set up the project, run the following command to install dependencies:
make setup
To test the sistent component locally, you can run:
make build
If you wish to build in watch mode:
make watchmode-build
To check if your code meets the formatting standards, you can run:
make format-check
To run Eslint:
make lint
To run tests:
make tests
To attach sistent to your project use:
npm install <path-to-sistent-on-local-machine>
Note
Avoid using type any
in your code. Always specify explicit types to ensure type safety and maintainability.
Our projects are community-built and welcome collaboration. 👍 Be sure to see the Layer5 Community Welcome Guide for a tour of resources available to you and jump into our Slack!
MeshMates are experienced Layer5 community members, who will help you learn your way around, discover live projects and expand your community network. Become a Meshtee today!
Find out more on the Layer5 community.

✔️ Join any or all of the weekly meetings on community calendar.
✔️ Watch community meeting recordings.
✔️ Access the Community Drive by completing a community Member Form.
✔️ Discuss in the Community Forum.
✔️Explore more in the Community Handbook.
Not sure where to start? Grab an open issue with the help-wanted label.