npm package: @khulnasoft/sistent
Description: Reusable React Components and SVG Icons library
Latest version: 0.14.11

# KhulnaSoft Design System Sistent

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

<hr>
<h3 align="center"> --> Visit <a href="https://khulnasoft.com/projects/sistent">https://khulnasoft.com/projects/sistent</a></h3>
<hr>

## Using Sistent

Visit the Sistent website for further instructions.

### Brand

- KhulnaSoft Brand Guide ([PDF](https://khulnasoft.com/brand/brand-guide.pdf))
- [KhulnaSoft Logos](https://khulnasoft.com/company/brand) (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`

<div>&nbsp;</div>

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

<br/>

## Join the KhulnaSoft community!

<a name="contributing"></a><a name="community"></a>
Our projects are community-built and welcome collaboration. 👍 Be sure to see the <a href="https://khulnasoft.com/community/newcomers">KhulnaSoft Community Welcome Guide</a> for a tour of resources available to you and jump into our <a href="http://slack.khulnasoft.com">Slack</a>!

<p style="clear:both;">
<a href ="https://khulnasoft.com/community/meshmates"><img alt="MeshMates" src=".github/readme/images/khulnasoft-community-sign.png" style="margin-right:10px; margin-bottom:15px;" width="28%" align="left"/></a>
<h3>Find your MeshMate</h3>

<p>MeshMates are experienced KhulnaSoft community members, who will help you learn your way around, discover live projects and expand your community network. 
Become a <b>Meshtee</b> today!</p>

Find out more on the <a href="https://khulnasoft.com/community">KhulnaSoft community</a>. <br />
<br /><br /><br /><br />

</p>

<div>&nbsp;</div>

<a href="https://slack.meshery.io">

<picture align="right">
  <source media="(prefers-color-scheme: dark)" srcset=".github/readme/images//slack-dark-128.png"  width="110px" align="right" style="margin-left:10px;margin-top:10px;">
  <source media="(prefers-color-scheme: light)" srcset=".github/readme/images//slack-128.png" width="110px" align="right" style="margin-left:10px;padding-top:5px;">
  <img alt="Shows an illustrated light mode meshery logo in light color mode and a dark mode meshery logo dark color mode." src=".github/readme/images//slack-128.png" width="110px" align="right" style="margin-left:10px;padding-top:13px;">
</picture>
</a>

<a href="https://meshery.io/community"><img alt="KhulnaSoft Community" src=".github/readme/images//community.svg" style="margin-right:8px;padding-top:5px;" width="140px" align="left" /></a>

<p>
✔️ <em><strong>Join</strong></em> any or all of the weekly meetings on <a href="https://meet.khulnasoft.com">community calendar</a>.<br />
✔️ <em><strong>Watch</strong></em> community <a href="https://www.youtube.com/playlist?list=PL3A-A6hPO2IMPPqVjuzgqNU5xwnFFn3n0">meeting recordings</a>.<br />
✔️ <em><strong>Access</strong></em> the Community Drive by completing a community <a href="https://khulnasoft.com/newcomer">Member Form</a>.<br />
✔️ <em><strong>Discuss</strong></em> in the <a href="https://discuss.khulnasoft.com">Community Forum</a>.<br />
✔️<em><strong>Explore more</strong></em> in the <a href="https://khulnasoft.com/community/handbook">Community Handbook</a>.<br />
</p>
<p align="center">
<i>Not sure where to start?</i> Grab an open issue with the <a href="https://github.com/issues?q=is%3Aopen+is%3Aissue+archived%3Afalse+org%3Akhulnasoft+org%3Ameshery+org%3Akhulnasoftlabs+org%3Aservice-mesh-performance+org%3Aservice-mesh-patterns+label%3A%22help+wanted%22+">help-wanted label</a>.</p>