We have been developing Reshaped for the past 3 years, and it has been a paid product since its inception. However, we have always had a desire to contribute more to the community. Finding a way to achieve this was challenging, as we needed to maintain a sustainable business model. Recently, we have made a shift in our paid assets and services, placing a stronger emphasis on serving teams that create their own design systems. As a result, we are now able to offer more of our content for free, allowing individual developers to try out Reshaped.

In version 2.2, we have released our React package on npm, making it freely available to everyone. We believe this step will assist indie hackers in developing their new projects and fulfill the requests we have received from individuals interested in using Reshaped in their open-source projects.

Now that the Reshaped React package is free to use, let's discuss its core principles, the problems it addresses, and its position in the market amidst numerous UI libraries and design systems.

Our main goal is to provide best-in-class UI components for the 90% of the web products.

This mission can be decomposed into multiple principles:

When examining the modern web, you will notice numerous common design practices found in nearly every web product. Our goal is to identify and implement these practices based on our 10+ years of experience in design systems. This allows you to focus on product development itself.
Reshaped is not a style utility or a completely headless library that lets you build anything. It incorporates certain design opinions, but we strive to keep them to a minimum. This approach enables us to provide component logic, address accessibility concerns, and help you overcome challenging UI and CSS issues that are easy to overlook.
Our main strength lies in component composition. While our components come with predefined styles, they stay on the core component level. This means you have the flexibility to combine them in any way you want, and we offer a wide range of layout utilities to facilitate that.
We are committed to long-term compatibility, ensuring that Reshaped works seamlessly with future updates of React and newly released frameworks. To achieve this, Reshaped relies solely on React as a runtime dependency. We leverage native web platform functionality and develop the entire library in-house. This eliminates the risk of other libraries falling out of maintenance and impeding the development cycle for both Reshaped and your projects. Our intention is not to create a framework; rather, we ensure that Reshaped can be used alongside different frameworks and libraries. Whether you prefer Next.js or Remix, like using TailwindCSS or writing your own CSS – Reshaped has you covered.

What people like about Reshaped?

Attention to details

The core ingredient of any design system that makes it a system is how all parts of it work together and how they combine to create an amazing user experience for the product. During the development of Reshaped, we dedicated a significant amount of time to researching component APIs that will remain relevant for years to come, and transforming them into visually appealing user interactions. One of our most popular demos is the Toast component, and we apply the same level of attention to detail even for the most basic utilities.


function Example() {
  const toast = useToast();

  return (
    <Button
      onClick={() => {
        const id = toast.show({
          title: "Done!",
          text: "You can start using the dashboard now.",
          icon: IconZap,
          actionsSlot: <Button onClick={() => toast.hide(id)}>Undo</Button>,
        });
      }}
    >
      Grant access
    </Button>
  );
}

TailwindCSS integration

Reshaped offers a TailwindCSS theme configuration that allows you to utilize all of our design tokens through Tailwind classes. What sets it apart is that you won't need the dark: variant to enable dark mode implementation. The colors are resolved automatically, just like when you use our components.

const { getTheme } = require("reshaped/tailwind");

module.exports = {
  ...
  theme: getTheme(),
};

Utility components

Reshaped offers a comprehensive set of flexible layout utilities that are utilized for composing components. These utilities allow you to effortlessly implement complex layouts without having to build everything from scratch, while still leveraging the design system.


<View width="300px">
  <Card padding={0}>
    <MenuItem
      startSlot={<Avatar src="/img/landing/author.webp" size={8} />}
      endSlot={
        <Badge size="small" color="critical" rounded>
          27
        </Badge>
      }
    >
      Open profile
    </MenuItem>
    <Divider />
    <MenuItem>Manage account</MenuItem>
    <MenuItem>Add another account</MenuItem>
    <MenuItem>Sign out</MenuItem>
    <Divider />
    <View padding={1} align="center" direction="row" gap={2}>
      <Button size="small" variant="ghost">
        Privacy Policy
      </Button>
      <Button size="small" variant="ghost">
        Terms of Service
      </Button>
    </View>
  </Card>
</View>

Responsive properties

Most of the components in Reshaped have layout properties that can be adjusted based on the current viewport size. This functionality is achieved through native CSS media queries, enabling it to work seamlessly with server-side rendering and eliminating the need for any runtime CSS-in-JS library.

<Modal position={{ s: "bottom", m: "end" }}>Responsive sheet content</Modal>

Accessibility and RTL

Reshaped components are designed to meet the needs of products targeting a diverse user base. We ensure that all components adhere to WCAG AA standards and meet the WAI-ARIA requirements. Additionally, products utilizing Reshaped can be easily translated into any language, including those that utilize right-to-left (RTL) scripts.

<Dismissible closeAriaLabel="メニューを閉じる" />

Why is Reshaped not open-source?

Reshaped React package is currently not open-sourced on GitHub, despite being freely available on NPM. There are several reasons for this:

We offer a paid Figma library alongside the Reshaped React package. This means that community contributions related to UI would require additional time to adjust the Figma library, which introduces complexities in community communication compared to other open-source projects.
As a small team, we need to prioritize our time and strike a balance between hands-on work and engaging in community discussions. This approach allows us to make steady progress while maintaining the sustainability of library maintenance.
By placing a price tag on a portion of our product, we are able to financially support our work and remain motivated to further develop Reshaped. We have deliberately chosen to offer our source code and project environment to teams seeking to build their own design systems or customize Reshaped components according to their specific requirements, focusing our paid services on team setups.

npm install reshaped

We hope that our principles and features got you excited enough to try out Reshaped. We are always happy to hear back from you about what you like about it or things you would like to see improved. You can always drop us a message at @getReshaped / @blvdmitry or create an issue at our public GitHub repository.

We can't to see what you're going to build with Reshaped and see you in the next release notes 🚀