Layer5 Design System Sistent

The Sistent Design System from Layer5 provides the open source building blocks to design and implement consistent, accessible, and delightful product experiences.

Using Sistent

Visit the Sistent website for further instructions.

Brand

• Layer5 Brand Guide (PDF)
• Layer5 Logos (more assets available in shared Community drive).

Components and Packages

• Design System components in React.js

Contributing to Sistent

Prerequisites

Before you begin, ensure you have the following installed on your system:

• Node.js

How to get started

Make sure you have npm on node@16 and above. The CI workflows checks for in node@16, node@18 and node@20

Installation

To set up the project, run the following command to install dependencies:

Please note that at this time, npm install will also build the project as the first step. This is to ensure that this is building correctly before moving to a task.

setup:
	npm install

To check if your code meets the formatting standards, you can run:

format-check:
	npm run format:check

To automatically fix formatting issues, you can run

format-fix:
	npm run format:write

To test the sistent component locally, you can run

build:
  npm run build

attach sistent to your project:
	npm install [path to sistent repo ]

[!NOTE] Avoid using type any in your code. Always specify explicit types to ensure type safety and maintainability.

Join the Layer5 community!

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!

Find out more on the Layer5 community.