https://github.com/tiendanube/nimbus-design-system
Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
https://github.com/tiendanube/nimbus-design-system
accessibility colors component-library design-systems nimbus react ui ui-components ui-kit
Last synced: 11 months ago
JSON representation
Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
- Host: GitHub
- URL: https://github.com/tiendanube/nimbus-design-system
- Owner: TiendaNube
- License: mit
- Created: 2022-07-08T18:20:56.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2025-08-21T18:14:18.000Z (11 months ago)
- Last Synced: 2025-08-21T18:19:00.028Z (11 months ago)
- Topics: accessibility, colors, component-library, design-systems, nimbus, react, ui, ui-components, ui-kit
- Language: TypeScript
- Homepage:
- Size: 31.4 MB
- Stars: 24
- Watchers: 108
- Forks: 4
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# ☁️ Nimbus Design System
> Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
[](https://codecov.io/gh/TiendaNube/nimbus-design-system)
[](https://opensource.org/licenses/MIT)
## 📚 Documentation
Check out our [documentation site](https://nimbus.nuvemshop.com.br) for detailed guidelines and resources.
We use [Storybook](https://storybook.js.org) as our front-end library to provide a full interactive playground for testing and building components.
You can browse through our [playground](https://tiendanube.github.io/nimbus-design-system) to test and see our components in action.
## 🚀 Installation
- **Install**
```shell
$ npm install @nimbus-ds/name-component
// or
$ yarn add @nimbus-ds/name-component
```
## 💻 Start developing
- **Install dependencies**
Get all dependencies installed by running
```shell
$ yarn
```
- **Setting up the project**
```shell
$ yarn prepare-husky
```
```shell
$ yarn build
```
- **Start developing**
Start the local environment with
```shell
$ yarn start:dev
```
## 📚 General informations
To standardize our commits we use [Conventional Commits](https://www.conventionalcommits.org/) a specification for adding human and machine readable meaning to commit messages
- **Naming standards**
```shell
# commit
feat: description
```
- **Linter**
```shell
# find problems
$ yarn lint
# find and fix problems automatically
$ yarn lint:fix
```
- **Unit tests**
```shell
# run all unit tests
$ yarn test
# run all the tests and watch for changes in related files
$ yarn test:watch
# run tests only on changed files
$ yarn test:staged
# run all unit tests generates the coverage report in the coverage folder in the project root
$ yarn test:coverage
# run all unit tests generates the coverage report in the coverage folder in the project root and watch changes in related files
$ yarn test:watch:coverage
```
- **Hooks**
This project has these hooks:
- `pre-commit`: perform static code analysis with eslint
- `commit-msg`: validates the commit message according to the convention adopted by the project
- `pre-push`: perform unit testing of project components and integration tests
## 🖥️ Release process
While our release schedule is flexible, our general strategy is to release several larger improvements inside each stable release. In order to provide faster access to fixes and enhancements between main releases we provide release candidates which are published on every merge into `master`.
The step by step to perform a release release can be found at the [link](https://github.com/TiendaNube/nimbus-design-system/blob/master/docs/RELEASE_PROCESS.md).
## 🔗 Useful links
- [Design Tokens](https://github.com/TiendaNube/nimbus-design-system/tree/master/packages/tokens). We use tokens to store all our primitives (colors, spacing values, grid system, etc.).
- [Nimbus Icons](https://github.com/TiendaNube/nimbus-icons). Our very own open-source icon library.
## 🤝 Contributing
We encourage all ideas, suggestions and feedback. If you want to collaborate with us, start by reading our [contribution guidelines](./docs/CONTRIBUTING.md).
## 🐰 Coderabbit
See the [Coderabbit Guide](./docs/CODERABBIT.md) for information about our AI-powered code review assistant. This guide explains how Coderabbit automatically reviews pull requests, provides feedback, and helps maintain code quality in the Nimbus Design System.
## 🤖 Cursor
See the [Cursor Guide](./docs/CURSOR.md) for detailed instructions on using Cursor AI to accelerate component development in the Nimbus Design System. This guide provides templates, best practices, and important considerations when leveraging AI assistance.
## 📄 License
Licensed under the MIT License, Copyright © 2022-present [Tiendanube](https://www.nuvemshop.com.br).
See [LICENSE](./LICENSE) for more information.