DocumentationReleasesPricingFAQ
Log in$59 Buy now

The design system
you plan 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

Everything you expect
from a design system

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">

		<Image

			width={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>
Food
247 results
Sponsored
Component file structure
Reshaped
Themes
About
Reshaped
Light and dark mode
Funky
Light and dark mode
Classic
Light and dark mode
New theme
Light and dark mode

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

			<Text color="neutral-faded">

				Design system built for your scale

			</Text>

		</View.Item>



		<Button icon={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

And much more

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
$59/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