The Ignite Design System V2 project is a library of reusable UI components and style libraries for creating applications that use React. It provides elements such as boxes, headers, buttons, input fields, checkboxes and multi-step forms, and now tooltips and toast notifications, among others.
The project is designed to simplify the implementation of common user interface elements while maintaining customizable styling options. By providing a comprehensive set of pre-built elements and design tokens, it allows developers to create consistent and visually appealing user interfaces more efficiently.
🧩 Components ready to use and also customizable
🖌 Color tokens available for import
📄 Documentation to guide use
⚙ Built on TypeScript
ignite-design-system-v2.mp4
The layout of the application/components was designed by Rocketseat and is available on Figma.
The following tools were used to build the project:
* See the package.json file
Before you begin, ensure that you have the following tools installed on your machine: Git, Node.js. It's also good to have an editor to work with the code, such as VSCode.
- Clone the repository:
git clone https://github.com/guipmdev/ignite-design-system-v2/- Change to the project directory:
cd ignite-design-system-v2- Install the dependencies:
npm install- Run all the dev scripts with Turborepo:
npm run dev- Wait to start and then access http://localhost:6006/ to view the documentation
This project is licensed under the terms of the MIT license. See the
LICENSE file for additional info.
- Many thanks to Rocketseat for the layout and tips when putting this project together
Made with 💙 by @guipm.dev - Feel free to contact me!