DocumentationReleasesPricingFAQ
Log in$89 Buy now

The design system
you want to build

Professionally crafted design system in React & Figma for building products of any scale and complexity

14 day money-back guarantee
EN
Ester Naomi
New
Artwork preview
Artwork preview
Artwork preview
0.74 ETH
Checkout
5
User avatar
Font / Featured 2
The quick brown fox jumps
over the lazy dog
Trusted by individuals and teams around the world

Skip a year of development

You have to set up a million things before you even start working on UI.
We took care of it so you can focus on your product.

Solid foundation

Reshaped gives you a head start by solving UI problems at all scales. You can stop worrying about maintaining your foundations and focus entirely on the product.

React + Figma

Reshaped ships a library of flexible components aligned between Figma and React. Avoid design hand-off surprises and share the same source of truth.

“Reshaped gives a superpower to not think about the implementation details when building a product. I absolutely love how it helps to solve Light/Dark theming and RTL. You literally don't think about anything except the UI when building.“
Dmitriy Kovalenko avatar
Dmitriy Kovalenko
Lead Software Engineer, Ex-MUI

React library

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-medium-1">Reshaped</Text>

			<Text color="neutral-faded">

				Design system built for your scale

			</Text>

		</View.Item>



		<Button startIcon={IconArrow} rounded />

	</View>

</Card>

Compatible with your codebase

React is the only dependency Reshaped needs in runtime. You can use it alongside any other dependencies you already use in your product.

Code examples
Typescript support

Typescript support

Everything you import from Reshaped is written in Typescript. Code editor helps you writing code before you even open the documentation.

Small bundle size

Tiny yet powerful

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.

Fully tested

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.

“What I like about Reshaped is its incredible attention to details. Quality of the code I found in the package, setup for the complex components and focus on accessibility immediately got me excited about the project.“
Max Trusov avatar
Max Trusov
Head of Front-end Development

Figma libraries

Components and styles aligned with React library

Figma libraries popup

Your Figma is already set up

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.

Components demo
Figma styles popup

Styles

There are 2 style libraries: for light & dark modes. Each contains styles for colors, typography and effects that are used for all components.

Figma variants popup

Variants

Reshaped has thousands of variants carefully wrapped into individual components that are easy to find and configure.

Figma auto layout popup

Auto layout

All components, where it's possible, support auto-layout. It lets you resize and see content auto reflow just like in code.

“Reshaped's superpower is the theming architecture because it has a fine balance of flexibility and constraints which makes it easier for the consumers to tweak the theme based on the brand and the product and yet it is logical enough to understand from the outside.“
Kamlesh Chandnani avatar
Kamlesh Chandnani
Principal Frontend Engineer, Razorpay
Reshaped
Themes
About
Reshaped
Light and dark mode
Funky
Light and dark mode
Classic
Light and dark mode
New theme
Light and dark mode
Keep your themes organised in Figma
We've created a simple Figma plugin that can add themes and switch to dark mode. It's free, works locally and does it blazingly fast.
Install plugin for free

Everything you would expect
from a design system

Documentation

Thorough technical and design documentation, best-practices and real-world examples

Composable architecture

Built in flexibility that lets you develop your own components in minutes

Accessibility

WCAG AA compliant starting from color contrast and up to the screen reader navigation

Responsive styles

Components that dynamically adapt to different viewport sizes

Theming

Themes supported out-of-the-box for all components with contextual tokens

Dark mode

Dark mode support embedded into each theme through semantic colors

Pro license

Building your
own design system?

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.

$999 Buy now
Includes React and Figma source files
Component file structure

Source code

You get access to Reshaped implementation of all components and utilities with a fully working development environment and Storybook examples.

Component demo
User graph

Unlimited seats

Pro license can be used for your whole company, no more hassle with managing individual licenses.

Component tests status

Extendable tests

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.

Pricing

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

Popular
Library license
$89/seat
  • Lifetime access
    Future updates and components
  • Unlimited projects
    Library license is reserved for one person and unlimited projects
  • React library
    40+ components and utilities
  • Figma library
    Components aligned with code, light & dark mode libraries
  • Documentation
    Thoroughly documentated library and processes
  • Theming engine
    Ability to create custom themes
Buy library license
Forever yours with all updates 🙌
14 day money-back guarantee
Source code
Pro license
$999
  • All assets from the library license
    Get access to the libraries, theming and documentation
  • Unlimited seats and projects
    Stop thinking about managing the number of available seats
  • Full access to the source code
    Skip your first year of development for your own design system
  • Full test suite
    Get full control over the component development environment
  • Extendable theming engine
    Ability to create custom themes and extend the engine
Buy pro license
Headstart for your own design systems 🤓
Best deal for teams
Consulting
Enterprise
Contact us
  • Onboarding
    Guidance on how to introduce Reshaped to your development and design process
  • Design system audit
    Review and recommendations for your own design system implementation
  • Tailored support
    Priority support for the new feature requests based on your product requirements
  • Need even more?
    Reach out to us and let's discuss how we can help
Contact us
Personalized approach 🚀

© 2020-2023 Reshaped Design. All rights reserved.
Built with Reshaped in Amsterdam ❤️
Figma pluginRoadmapLicenseAbout usContact us