Introduction

Reshaped is a design system built for products of any scale and complexity. It offers a sophisticated toolkit for developers and designers who are seeking to streamline their workflow and build scalable, professional products. The system is built using React and Figma, two of the most popular tools for web development and design, respectively​¹​.

Features

Reshaped is packed with a plethora of features that make it a powerful tool for both developers and designers:

1. Theming Architecture: Reshaped's theming architecture strikes a fine balance between flexibility and constraints. It allows users to easily customize themes according to their brand and product, while maintaining a logical structure that is easy to understand​¹​.
2. React and Figma Libraries: It includes a React library with flexible components and utilities, and a Figma library that supports Figma variables. These libraries are aligned, allowing for a seamless transition between design and code​¹​.
3. Automatic Dark Mode: There is no need to design or write styles twice for different themes. Reshaped automatically applies themes and color modes, even for custom components​¹​.
4. Responsive Styles: Reshaped simplifies the process of creating responsive designs without the need to write custom styles or fight with media queries​¹​.
5. Accessibility Compliance: All components in Reshaped are WCAG and WAI-ARIA compliant, ensuring that products built using Reshaped are accessible to all users​¹​.
6. TypeScript Support: The codebase is written in TypeScript, providing code autocompletion and error validation during development​¹​.
7. Detailed Documentation: Reshaped offers extensive documentation packed with best practices, interactive playgrounds, and component examples​¹​.
8. TailwindCSS Integration: It is easily integrated with TailwindCSS for utility-first CSS styling​¹​.
9. No Dependency Lock-In: Reshaped uses React as the only runtime dependency, which means there is no need to install any css-in-js library to start using it​¹​.

Included Components

Reshaped includes over 400 components and utilities in its React library. It also comes with a Figma library that is completely aligned with the code, supporting both light and dark mode libraries. The Figma plugin helps keep themes organized or switch to Tokens studio when ready. For those who opt for the Pro version, Reshaped provides a full design system setup to customize components or start your own design system​¹​.

Pros and Cons

Pros:

1. Rich set of features for both design and development.
2. Seamless integration between React and Figma libraries.
3. Strong theming architecture with automatic dark mode support.
4. Compliance with accessibility standards.
5. No additional runtime dependencies.
6. Extensive documentation.

Cons:

1. The cost may be prohibitive for some users, especially for the Pro version.
2. Being built around React, it might not be the best fit for projects using other frameworks.

Who is Reshaped built for?

Reshaped is built for both developers and designers who are looking to create scalable and professional products without the hassle of setting up and managing a complex design system. It is particularly beneficial for teams that want to hit the ground running, as it solves common design system challenges and allows users to start building immediately. Whether you are working on a small side project or a large product, Reshaped has the tools and features to meet your needs​.