Professionally crafted design system in React & Figma for
building products of any scale and complexity
Reshaped gives you a head start by solving common
design system challenges for both design and development
<Card padding={0}><View padding={2} gap={3} direction="row" align="center"><Imagewidth={12} height={12} borderRadius="medium"src="/img/examples/avatar-food.webp"/><View.Item grow><Text variant="body-3" weight="bold">Food</Text><Text variant="caption-1" weight="medium">247 results</Text></View.Item><Button rounded variant="ghost" icon={IconHeart} /></View><View backgroundColor="neutral-faded" paddingInline={2} paddingBlock={1}><Text variant="caption-2">Sponsored</Text></View></Card>
More than 40 components, utilities and hooks for your product development
<Card elevated><View direction="row" gap={{ s: 2, l: 4 }}><Avatar size={10} src="avatar.jpg" /><View.Item grow><Text variant="body-2-1">Reshaped</Text><Text color="neutral-faded">Design system built for your scale</Text></View.Item><Button icon={IconArrow} rounded /></View></Card>
React is the only dependency Reshaped needs in runtime. You can use it alongside any other dependencies you already use in your product.
Everything you import from Reshaped is written in Typescript. Code editor helps you writing code before you even open the documentation.
The whole React library weighs ~35kb including both CSS and JS code. Adopt it alongside your current codebase and your bundle will only have the parts you use.
Reshaped is covered with an extensive test suite of unit, screenshot and accessibility tests. You’ll get multiple hundreds of tests and we keep adding more.
Components and styles aligned with React library
You get 3 libraries: Components and Styles for light and dark modes. All of them are aligned with React and built in a scalable way.
There are 2 style libraries: for light & dark modes. Each contains styles for colors, typography and effects that are used for all components.
Reshaped has thousands of variants carefully wrapped into individual components that are easy to find and configure.
All components, where it's possible, support auto-layout. It lets you resize and see content auto reflow just like in code.
Thorough technical and design documentation, best-practices and real-world examples
Built in flexibility that lets you develop your own components in minutes
WCAG AA compliant starting from color contrast and up to the screen reader navigation
Components that dynamically adapt to different viewport sizes
Themes supported out-of-the-box for all components with contextual tokens
Dark mode support embedded into each theme through semantic colors
Use Reshaped to start from a point where all core challenges are already solved with our pro license. Get access to Reshaped as we develop it and tweak anything you feel like.
You get access to Reshaped implementation of all components and utilities with a fully working development environment and Storybook examples.
Pro license can be used for your whole company, no more hassle with managing individual licenses.
Get access to the test suite and Storybook files for the whole library. Keep your tests in sync for your new features with zero overhead.
Whether you’re looking for a library for a small side project or a base design system for a large product - we’ve covered it all