In this project, we delve into the creation of a robust Design System using React, with a focus on component documentation and leveraging various tools for seamless implementation and publication. The technologies employed include React, Typescript, Vite, Storybook, Turbo, Stitches, Radix, and tsup.

• React & Typescript Integration: The project is built on React, enhancing component development with the power of Typescript for a robust and type-safe codebase.

• Efficient Documentation with Storybook: Utilizing Storybook, we have streamlined the documentation process, providing a comprehensive understanding of React components, their usage, and variations.

• Tooling with Turbo, Stitches, and Radix: The incorporation of Turbo, Stitches, and Radix amplifies the project's capabilities, ensuring an efficient and scalable Design System.

• Workflow Enhancement with GitHub Actions: The project integrates GitHub Actions, optimizing workflows for collaborative development, testing, and deployment.

• GitHub Pages Deployment: Learn about deploying the Design System on GitHub Pages, ensuring accessibility and visibility for project stakeholders.

• Package Management with NPM: Explore the intricacies of publishing and updating packages on NPM, enabling seamless integration and utilization of the Design System across projects.

This project serves as a comprehensive guide for creating, documenting, and deploying a Design System using cutting-edge technologies, empowering developers to build scalable and maintainable UI components.

• 💻 Deploy Link

All the things that I learned and practiced with this project

• I learned how to create a Design System using Storybook and React
• I learned about workflows with Github
• I learned how to publish a project into NPM

This project was developed using de following technologies:

• React
• Typescript
• Vite
• Storybook
• Turbo
• Stitches
• Radix
• tsup

You can view the project layout through the links below:

• Layout

Remembering that you need to have a Figma account to access it.

• Text
• Heading
• Box
• Button
• TextInput
• TextArea
• Checkbox
• Avatar
• MultiStep
• Toast
• Tooltip

Developed with 💚 by @ghiberti85