v2.9: ScrollArea utility, Storybook docgen and more

The design system
you plan to build

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

npm install reshaped
Free
Get full access
EN
Esther Naomi
New
Artwork preview
Artwork preview
Artwork preview
0.74 ETH
Checkout
Check a live screen example
5
User avatar

Everything you expect
from a design system

<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
Slate
Light and dark mode
Figma
Light and dark mode
New theme
Light and dark mode
Reshaped's superpower is its theming architecture because it has a fine balance of flexibility and constraints. It is 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
Principal Frontend Engineer, Razorpay
Reshaped gives a superpower to stop thinking about the implementation details when building a product. I absolutely love how it helps to solve theming, dark mode and RTL challenges. You literally don't have to think about anything except the UI when building your product.
Dmitriy Kovalenko
Lead Front-end Engineer, ex-MUI

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

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.

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

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.
Subscribe

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

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

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.

With our theming CLI you can easily create new themes, add more design tokens and export the data to other design token tools.

Single-line configuration to access all Reshaped design tokens in Tailwind classnames.

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.

Pro license

Building your
own design system?

Includes React and Figma source files

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
CSS Modules
Vite
Jest
React Testing Library
React
Chromatic
ESLint
Stylelint
Typescript
Prettier
Lefthook
Figma

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

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

Pricing

React library
$0
  • 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
Figma library
$89/seat
  • 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
Forever yours with all updates 🙌
Great starting point for your own components
Get a design 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
Cheaper than setting up the system yourself 🤓
Get a pro license
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 ❤️