v2.6: FileUpload component, theming improvements and more

The design system
you plan to build

npm install reshaped
Free
Get full access
EN
Esther Naomi
New
Artwork preview
Artwork preview
Artwork preview
0.74 ETH
Checkout
5
User avatar
Font / Featured 2

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

npm install reshaped
Free
Figma library
$89/seat
  • Lifetime access
    Get future updates for free
  • Unlimited projects
    Purchase the library once and use it for any amount of projects
  • Figma library
    40+ core components completely aligned with code
  • Theming and dark mode
    Theming layer built with Figma styles and variables
  • Documentation
    Thoroughly documentated library and processes
Get a design license
Forever yours with all updates 🙌
Great starting point for your own components
Source code
$999
  • Everything from the design license
    Get access to the libraries, theming and documentation
  • Unlimited seats and projects
    Manage access to the assets for the whole team
  • 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 development team on setting up your design system
  • Extensive test coverage
    Hundreds of unit and screenshot tests that you can extend as you grow
Get a pro license
Cheaper than setting up the system yourself 🤓
Best deal for teams
Consulting
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 Formaat Design. All rights reserved.
Built with Reshaped in Amsterdam ❤️