Installation

Sistent is a React-based design system from Layer5. To get started, make sure your environment meets the following requirements:

• React: >=17.0.0 and React DOM: >=17.0.0
• Node.js: >=16.x (verified in CI on Node 16, Node 18, and Node 20)

Copy
1{
2  "peerDependencies": {
3    "react": ">=17.0.0",
4    "react-dom": ">=17.0.0"
5  }
6}

Install Sistent using your preferred package manager:

Using npm

Copy
1npm install @sistent/sistent

Using yarn

Copy
1yarn add @sistent/sistent

Wrap your application with SistentThemeProvider to enable theming and start using components. The theme provider automatically handles light/dark mode switching based on system preferences.

Copy
1import { SistentThemeProvider, Button } from "@sistent/sistent";
2
3  function App() {
4    return (
5      <SistentThemeProvider>
6        <Button variant="contained" color="primary">
7          Hello Sistent!
8        </Button>
9      </SistentThemeProvider>
10    );
11  }
12
13  export default App;

That's it! Your Sistent components will automatically inherit the Layer5 design system with proper theming, spacing, and colors. Components such as Button will also respond to system dark mode changes automatically.

If you want to contribute or use it in your project locally, see our  Contributing Guide for complete setup instructions.