About Sistent

Sistent 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.

Sistent provides a consistent user experience across any frontend software projects that choose to use it.

'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.

Layer5 Brand Resources

• Brand Guide
• Logos and Brand Kits

To install the Sistent NPM package, run:

After installation, you can import Sistent theme and any Sistent component from "@sistent/sistent". The component needs to be included inside "SistentThemeProvider".

Taking button as an example:

• Method 1: File Installation

1. Install your local Sistent package in the project

   Copy
   1npm install <path-to-sistent-on-local-machine>

   Example:

   Copy
   1# relative path
   2 npm install ../../sistent
   3
   4# absolute path
   5 npm install /home/five/code/sistent

   This will update your Sistent dependency to:

   Copy
   1"@sistent/sistent" : "file:../../sistent"

2. Build your local Sistent fork

   After making changes to your fork, run this command in your local Sistent package.

   Copy
   1make build

3. Run the build command in the project where your local Sistent fork is installed

   Example for Meshery UI:

   Copy
   1make ui-build

Now, your project should reflect changes from your local Sistent fork.

If you want to remove the local Sistent fork from your project, run:

Copy
1npm uninstall @sistent/sistent

This will remove the local Sistent package from your project. You will have to install the standard package again after running this command:

Copy
1npm install @sistent/sistent

• Method 2: Using npm link

  This method allows you to link your local Sistent fork globally for easier development. Follow these steps:

  1. Link your local Sistent package globally

     In your local Sistent repo, run the following command:

     Copy
     1cd <path-to-sistent-on-local-machine>
     2 npm link

  2. Link Sistent in your project

     In the project where you want to use your local Sistent fork, run:

     Copy
     1npm link @sistent/sistent

     This will create a symlink in your project's node_modules, pointing to your local Sistent package.

  3. Build your local Sistent fork

     After making changes to your fork, run this command in your local Sistent package.

     Copy
     1make build

  4. Run the build command in the project where your local Sistent fork is installed

     Example for Meshery-UI:

     Copy
     1make ui-build

  5. Verify that your local fork is correctly linked by running:

     Copy
     1npm ls -g
     2
     3# expected output:
     4├── @sistent/sistent@0.14.11 -> ./../../../../<path-to-local-sistent-fork>

     You can also try this command to verify that your fork is correctly linked:

     Copy
     1ls -l node_modules/@sistent/sistent
     2
     3# expected output:
     4node_modules/@sistent/sistent -> ../../../../../sistent

  6. To revert back to the official version of Sistent, run:

     Copy
     1npm unlink @sistent/sistent

     Then reinstall the official version, using this command:

     Copy
     1npm install @sistent/sistent

To contribute to projects using Sistent e.g. meshery-ui and others, you can refer to the Sistent set-up guide, Hands-on Training Session: Migrating Components to MUI v5 and Sistent, Training: contributing to Sistent, and Websites call , where experienced contributors demonstrate how to use Sistent in various projects.