v3.2: Grid utility, Flyout improvements 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 full access
EN
Esther Naomi
New
Artwork preview
Artwork preview
Artwork preview
0.74 ETH
Discount
Find all your components in the documentation
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
Reshaped provided us with the tools to build both our product and website remarkably quickly. As a small team with short deadlines, Reshaped allowed us to focus on delivering the experience instead of grinding away on components. The documentation is in a class of its own and enabled our team to ship at lightning speed. I’d recommend Reshaped to any team looking to move fast with a high-quality frontend.
Mike Carbone
Founder, CEO of Hermae

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
Sync theme from code
Select a `theme.json` filed generated by Reshaped in your code repository.
Upload
Theme name will be used as a Figma variables mode
Reshaped is the gold standard of "just enough design system", where they have figured out the minimal viable token architecture and an infinitely flexible base component kit. I constantly look to them for inspiration.
Luis Ouriach
Designer Advocate, Figma
When we are working on new features, I enjoy checking out how Reshaped approached the solution to that problem. It helps in my search for the best possible approaches.
Olivier Tassinari
Co-founder and CEO, 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
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
I’ve been following Reshaped from day one and love how it’s grown over the years. With Reshaped, it’s super easy to create nice-looking UIs without much effort, while it handles RTL, theming, and dark mode for you. Hats off to the team for building it!
Sean Brydon
Full-Stack Developer, Cal.com

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
  • 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
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
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 ❤️