Reshaped is an MIT-licensed, TypeScript library of accessible React and Figma components for teams that want to build a product interface or start their own design system without hand-rolling the component layer.

What it is

Reshaped is a component library that ships a React design system alongside a matching Figma library. Its main package, reshaped, contains components, hooks, utilities and design tokens, and its implementation is synced with the Reshaped Figma library published on the Figma Community. Two companion packages cover other ways of working: @reshaped/headless provides headless React components and utilities for building a custom design system or product with custom styles, while @reshaped/utilities offers framework-agnostic UI utilities built with vanilla TypeScript. The project is written in TypeScript and is filed under the topics design-system, figma, react, react-components and ui-components, placing it in this registry's Miscellaneous / Design & Prototyping category.

The ecosystem it lives in is React and TypeScript, and the thing it replaces is the hand-built foundation of a product interface: the component set, the hooks and utilities around it, and the design tokens that keep styling consistent. Assembling that foundation from scratch normally means writing components, inventing token conventions, and separately maintaining a design file that drifts away from the code. Reshaped supplies the components and tokens as a maintained package and pairs them with a Figma library of the same components, so the design source and the implementation describe the same system rather than two unrelated artefacts. Accessibility is part of the stated scope of those components, which addresses the auditing and retrofitting work that usually follows components written from zero.

Key capabilities

• The reshaped package delivers React components together with hooks, utilities and design tokens as a single design system.
• The reshaped implementation is synced with the Reshaped Figma library, so the code and the design file share one component definition.
• @reshaped/headless provides headless React components and utilities for building a design system or product with custom styles rather than the shipped ones.
• @reshaped/utilities provides framework-agnostic UI utilities built in vanilla TypeScript, keeping some UI logic independent of React.
• The components are presented as accessible, covering both the React and Figma sides of the library.
• Documentation is published at reshaped.so/docs/getting-started/overview, which the README names as the starting point.
• A contribution guide in CONTRIBUTING.md documents the project's principles, development process and testing.

Who uses it and how

• Product teams building a React interface that need components, hooks and design tokens without commissioning an in-house design system, consuming the reshaped package directly.
• Teams that already have a visual language and want behaviour without the shipped styling, adopting @reshaped/headless and applying custom styles.
• Design and engineering pairs that keep the Figma Community library next to the code, since handoff works from component definitions that the React implementation is synced with.
• Projects that need UI logic outside React, using @reshaped/utilities in vanilla TypeScript.
• Adoption decisions should account for scale signals: 2,244 stars, 156 forks and 9 open issues around a single maintainer, Dmitry Belyaev (@blvdmitry).

Getting started

The README points to the Reshaped documentation at reshaped.so/docs/getting-started/overview as the way in, with work happening through the reshaped, @reshaped/headless and @reshaped/utilities packages. The Figma counterpart is available as the Reshaped Figma library on the Figma Community.

How it compares

No list of paid products that this project replaces is provided in the facts, and no similar tools are named either. Within this registry it therefore stands alone on its stated terms: an MIT-licensed React component library whose implementation is synced with a Figma library of the same components.

When to use it — and when not to

Nothing in the facts indicates a server component, so there is no database, storage or mail service for a self-hoster to operate; the practical cost is reading documentation hosted outside the repository, because the README itself is short and mainly indexes packages and links. Teams not working in React, or those who need a component set that is not React-based with vanilla TypeScript utilities alongside it, should look elsewhere. The licence is unambiguous under MIT and the last push is 2026-09-12, but the project rests on one maintainer, so support expectations should match a small, single-maintainer project with a modest open-issue count.