v3.5: NumberField, new input sizes and more

The design system you plan to build

Professionally crafted React & Figma components for building beautiful products or starting your own design system

npm install reshaped

Free

Get pro license

Esther Naomi

New

5 hours left

Price

Username

Password

Remember me

Discount

Find all components in the documentation

Learn more

Trusted by teams and individuals around the world

We were in the middle of transitioning from a mix of different software stacks to a more streamlined setup, so finding a tool that could keep our frontend looking sharp and performing well was high on the list. Reshaped quickly stood out for its atomic component approach and has been a great fit. What truly made us commit to Reshaped was the team behind it: they actively support the product, genuinely care about user feedback, and keep the door open for new ideas. It's rare to find that kind of dedication, and it made the choice an easy one.

Read the case study

Our engineers and designers compared multiple options and settled on Reshaped because it has the best Figma library (a 100% match with its React counterpart), a wide range of well-designed components, doesn't use CSS-in-JS or other heavy dependencies, works perfectly with server-side rendering, and is easy to integrate with frameworks like Next.js and Vite. We’ve never regretted the decision to use Reshaped. The library dramatically boosted our development speed, enabling us to release our MVP faster than planned.

Read the case study

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

Built for your scale

Instantly get up to speed with the features you could find in the most advanced design systems in the industry.

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.

neutral-300

neutral-700

background-neutral

Responsive styles

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

Daniel Frost

Daniel is a design system specialist who creates cohesive and scalable design solutions.

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.

Actions

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

Core principles

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

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.

Library preview

Works with the tools and frameworks we all love

Pro license

Building your
own design system?

Before even starting to build components – teams spend weeks setting up the project for it. Reshaped Pro helps you skip it, providing you with the complete repository setup and components source code.

Get source code for $999 Component example

Includes React and Figma source files

Start building instantly

We provide everything you need to maintain a design system repository: linting, testing, release scripts, git hooks, you name it. You can start working with the components immediately instead of spending time on setting up the project again.

Storybook

Figma

CSS Modules

Vite

Vitest

React

Chromatic

ESLint

Stylelint

Typescript

Prettier

Lefthook

Make it completely yours

Start from a development and design environment with familiar tools and technologies. Then customise or remove features you want to be different.

Complete test suite

Get access to the whole components and utilities test suite. Be sure that changing the components still keeps the system working and you can add even more tests for the new features you plan to add.

Renders children composition
Triggers onOpen and onClose handlers
Traps focus inside the modal
Returns focus to the trigger on modal close
Applies aria attributes to the trigger
Switches to mobile view based on the viewport
Closes on Esc keypress
Closes when clicking outside
Chains modals nested in each other
Announces title and subtitle correctly
Locks the page scroll when opened
Keep page interactive when rendered without an overlay
Applies custom size passed to the component
Applies custom padding passed to the component
Works correctly in controlled mode
Integrated with useToggle hook
Supports rendering with render props function
Renders children composition
Triggers onOpen and onClose handlers
Traps focus inside the modal
Returns focus to the trigger on modal close
Applies aria attributes to the trigger
Switches to mobile view based on the viewport
Closes on Esc keypress
Closes when clicking outside
Chains modals nested in each other
Announces title and subtitle correctly
Locks the page scroll when opened
Keep page interactive when rendered without an overlay
Applies custom size passed to the component
Applies custom padding passed to the component
Works correctly in controlled mode
Integrated with useToggle hook
Supports rendering with render props function

I love how Reshaped focuses on the “system” aspect of design systems, offering an excellent set of core components with the latest Figma features. It’s a great starting point for building products or creating your own design system.

Jordan Hughes

Product Designer, Creator of Untitled UI

Reshaped's superpower is its theming architecture because it has a fine balance of flexibility and constraints. It is easy for the consumers to tweak the theme based on their brand and product and yet it is logical enough to understand from the outside and provides automatic dark mode support.

Kamlesh Chandnani

Principal Frontend Engineer, Razorpay

Pricing

Whether you’re looking for a library for a small side project or building your own design system for a large product - we’ve covered it all.

Free tier

React library

React library
60+ core components, utilities in hooks published on NPM
Documentation
Public documentation for the React library available on this website
Theming layer
Theming and dark mode support for React components
Integrations with the popular frameworks and tools
Next.js, Remix, Tailwind and many other tools working out-of-the-box

npm install reshaped

Design license

Figma library

$89

Everything from the Free tier
React library, public documentation, theming and integrations
Figma library
40+ Figma components and utilities completely aligned with the code
Figma theming and dark mode
Design tokens and theming layer built with Figma styles and variables
Lifetime access
You will receive all future code and design updates for free
Unlimited projects
Purchase the library once and use it for any amount of projects

Always aligned with code 🙌
Great starting point for your own Figma library

Get a design license

Pro license

Source code

$999

Everything from the Design license
React and Figma libraries, theming and public documentation
Full source code access
Get access to 60+ React components and modify them based on your product needs
Complete respository setup
Save multiple weeks for your team on setting up the development environment
Extensive test coverage
Hundreds of unit and screenshot tests that you can modify and extend as you grow
Unlimited seats and projects
Manage access to the assets for the whole team and use it for any amount of projects

Best deal for teams
Save time on starting your own design system 🤓

Get a pro license

Enterprise

Consulting

Onboarding sessions
Design and engineering sessions on how to introduce Reshaped to your product and get your team familiar with the best practices
Design system audits
Actionable evaluation for your current design system implementation and its potential improvement points
Tailored support
Priority support for the new feature requests for Reshaped and custom design system and design engineering support
Need even more?
Reach out to us and we can discuss any other options to help you build delightful products

Built with Reshaped in Amsterdam ❤️

Roadmap License Contact us