UX/UI

[$] Reshaped: Design system v3.1

The design system you plan to build. Professionally crafted design system in React & Figma for building products of any scale and complexity. Design system built for your scale, provides professionally crafted component libraries in React and Figma to make your product design and development faster.

Aug 12, 2024 - 19:00

Aug 12, 2024 - 16:10

0 634

Everything you expect from a design system

Reshaped gives you a head start by solving common design system challenges for both design and development

No dependency lock-in

Reshaped is using React as the only runtime dependency. It doesn’t require you to install any css-in-js library to start using it.

Automatic dark mode

You don’t have to design or write your styles twice anymore. Reshaped semantic tokens automatically apply themes and color modes even for the custom components you build.

Responsive styles

Stop fighting with media queries. Adjust your styles based on the viewport size without writing custom styles with out responsive syntax.

Completely accessible

All components are WCAG and WAI-ARIA compliant. From color contrast to screen reader navigation – your product will be much easier to use for everyone.

TypeScript support

Our codebase is written in TypeScript and all component properties are fully typed. When using Reshaped, you automatically get code autocompletion and error validation right in your editor.

React setup
Release strategy
Server-side rendering
RTL
Source code
Theming plugin
Figma setup
Tokens studio
Framework integrations
TypeScript
External packages
Design tokens
Properties
Accessibility
Creating themes
Scoped theming
Hooks
Core principles

Detailed documentation

Learn the best practices of each tiny bit of the system with our documentation. We packed it with many contextual tips, interactive playgrounds, and component examples.

Create your own themes

With our theming CLI you can easily create new themes, add more design tokens and export the data to other design token tools.

TailwindCSS integration

Single-line configuration to access all Reshaped design tokens in Tailwind classnames.

Design equals code

We ship code and design libraries together. Everything in Figma library is available in code with the same properties and is built using the latest features, like Figma Variables.