Releases

We've added a new PinField component for handling one-time passwords and other numeric or alphabetic codes. It works based on a native input element, supports controlled/uncontrolled modes and has an extensive keyboard support for managing the input focus and selection.

Based on the community request, we have added Toast rendering boundaries. Anywhere in your application, you can wrap an area with a separate ToastProvider to make notifications render based on that area boundaries.

We've added a new component to help users navigate across multiple pages of content. It automatically truncates the pages, handles accessility including focus management and provides controlled as well as uncontrolled behavior to make sure you can connect it to your custom application logic.

While we have aligned components and design tokens implementations in Figma and in React, syncing custom themes across both platforms was always a manual process. With the introduction of theming generation, we've automated a part of the theming process and in this release we're adding the missing piece.

We've released a new version of our Figma plugin that now lets you upload the json output from your theme in code and generate a Figma style and variables library automatically. We're planning to keep evolving this functionality with the upcoming improvements for the Figma variables support and general announcements that will happen during the Figma Config this summer.

Ever wanted to start your own development blog but then you find yourself spending weeks to build a front-end application for that? We've created a new blog example using Reshaped but this time we've also published it as an NPM package and open-sourced it.

Besides checking how Reshaped can be used in your own project, you can use it for your own MDX and Next.js powered blog. It gives you an amazing layout inspired by Brian Lovin's personal website, which is built using Reshaped, supports light and dark mode, completely accessible and responsive.

We're introducing a new ScrollArea utility which aligns the scrollbar styling across all platforms, while still relying on the native scrolling behavior. It supports multiple display modes and supports both horizontal and vertical directions.

Besides the general style alignment, it can be useful for non-standard scrolling areas where displaying a native scrollbar can be too distractive on some platforms. For example, it's perfect for navigation menus or smaller components with scrollable areas.

In this example, we're rendering it inside the Card with scrollbars shown on the area hover and scrolling in both directions:

Based on the community request, we've improved out Storybook setup with the new addons:

Together, these changes are aiming to improve the developer experience of teams working with our Storybook environment and provide additional contextual information about components in case they're staying on one of the previous versions of Reshaped.

We are adding new color tokens: warning and brand. Warning colors are used as a new role in between critical and positive colors, while brand colors can be used for brand assets as a standalone color different from primary colors. With the new colors support we have introduced new colors for component like Badge and Progress.

We have added a new example of the whole application screen built with Reshaped and its design is included in our Design license. It features the whole page layout relying completely on the Reshaped components utilities, including its responsive behaviour and interactive components, like DropdownMenu or Toast.

We're adding a new Calendar component to work with single and range date selection. It supports controlled / uncontrolled behavior, full keyboard navigation, localization, separate month selection and much more.

Like with every other component, we pay additional attention to how it can be composed with other components and we provide examples of how you can build a form input for the date selection.

We've introduced a new swipe behavior for Modal components on touch devices. All Modals besides the center-positioned ones can now be closed with touch events and you can try it for yourself if you're on mobile device or simulate it in your dev tools:

The new FileUpload component we're introducing is a flexible and easy-to-use tool for handling file attachments in forms. It's designed to be lightweight, leveraging our standard composition approach and give you complete control over the component's layout and appearance.

One of the key aspects of the FileUpload component is its compatibility with third-party libraries. For instance, integrating with react-dropzone is straightforward, enabling you to tap into its advanced file upload capabilities. This ensures that while the component itself remains simple and unopinionated, it doesn't limit your ability to implement more complex functionalities.

The component supports both click and drag events for file selection, making it user-friendly and adaptable to various user interactions. This approach aligns with our goal of providing components that are both powerful and easy to use, without imposing strict design or functional constraints.

Last time, we've introduced support for the runtime theming to let you create new themes right in your browser environment. However, creating themes manually would mean that you still have to go through a long process of manually picking the values for all design tokens.

Finding right colors is definitely the hardest step in the process, so in v2.5 we're adding a new theme generation feature. Now you can pass just your primary brand color and we'll generate a full set of color tokens required for theming, including dark mode values. In case you want more granular control over certain colors, you still can pick different base colors for the critical, positive and neutral hues or even override individual token values.

To make sure your generated themes don't stay aligned with our default theme, we've updated some of the Reshaped theme values. In case you're relying on the default Reshaped theme value, make sure to re-sync it in Figma.

One of the requests we had was a component to control a multi-step process navigation, so we're introducing a new Stepper component in this release. It includes support for row and column direction, as well as responsive visibility of the labels. With all supported properties, you can easily compose and control the Stepper component according to the unique business logic of your product.

Accordion

Button

DropdownMenu

MenuItem

Popover

TextArea

TextField

Tooltip

View

We're adding a new Table component that provides common compound components for rendering individual table elements and gives you a lot of flexibility through composition. This approach allows teams to build both, simple table with text content and rich tables with interactive content that are integrated with libraries like TanStack Table.

With the recent theming improvements, we're adding a new website page for previewing theme values on a real component examples. This is a first step towards making it easier to create new themes. In the upcoming releases, we're planning to expand its functionality with user interface for the runtime theme editing and theme values auto-generation.

Button

Card

Checkbox

Tabs

View

We have added a new way to work with themes without building them using our CLI ahead of time. With the new runtime theming feature, you can create new themes directly in the browser and insert them as a style tag, or create themes dynamically in Node.js and return css file contents.

We're adding a new compound component for Button – Button.Group, which lets you wrap any number of buttons to colocate multiple actions together. It leverages the composition approach, which means you can combine items with other components like DropdownMenu.

Actionable

Autocomplete

Checkbox

DropdownMenu

Popover

Radio

Select

Switch

Tabs

Toast

Since the very beginning of Reshaped, we wanted to find more ways to give back to the community and it was very challenging to do without sacrificing our whole business model and keeping the development sustainable. In the past few months, we've started switching the focus of our paid assets and services more towards companies creating their design systems and we can finally start giving more of our content for free to let individual developers try our Reshaped.

In v2.2 we've published our React package to npm and it's now available to everyone for free. We hope this could help more indie hackers in building their new projects, as well as for everyone who has been asking us about how to use Reshaped in their open-source projects – you finally can.

For teams considering buying the Pro version with the library source code, free npm access could help with making the decision without having to pay for the individual licenses.

We're very excited to see more people using Reshaped and get more feedback to see what we can improve further on 🚀

We're extending our form fields collection with a new Autocomplete component that comes with full accessibility support and keyboard navigation. Like in many other components, we're following our composition approach here so you would see its primitives are built using TextField and DropdownMenu and let you control its internal composition and state based on your own requirements.

One of the requests we had was a component to pick a range of values, so we're adding support for the Slider component. It comes with built-in accessibility and keybord navigation, works for individual values and value ranges, as well as it supports all typical form states and can be combined with the FormControl utility.

Button

Checkbox

DropdownMenu

MenuItem

Popover

Radio

In this release, we are introducing two new themes. One of the themes is called Slate, which features a color palette inspired by productivity applications and developer tools. It primarily utilizes shades of gray that are closer to monochrome values.

Second theme is a theme based on the Figma interface and can help with building Figma plugins with a familiar set of components.

Badge has been enhanced with the following additional properties, expanding its versatility and usage in various scenarios:

These additional properties empower you to leverage badges creatively in new scenarios, providing flexibility and enhancing the user experience.

Button

Card

FormControl

MenuItem

View

We're excited to announce our v2.0 release today 🎉

For the past 6 months, we've been working hard rethinking every single piece of Reshaped and what should be our next steps. It led us to rebuilding our Figma library from ground-up, increasing all components reliability, helping you compose them together without unexpected layout issues and adopting the latest features features, like Figma Variables.

With more teams purchasing Reshaped Pro license, we've spent additional time making sure we can provide the best experience for those teams starting with their design systems. What they value the most is how fast they can start building their custom features without spending any time on the setup. To support them, we have completely revamped our Pro license development environment to cover all technical requirements for a modern design system.

We've updated our source code structured and moved it away from an internal monorepo. This way we can ensure that our development environment works without any manual adjustments for other teams and dependency resolutions. At the same time you can still include it into your own monorepo and store all components right next to your product.

While working on this, we've also improved the overall setup of the source code. We've switched from Webpack to vite for bundling the library and storybook, added stylelint and git hooks for running automatic linting on commit. With all the changes in place – making a full library build now takes ~10-15 seconds.

⚡ Figma gives us a lot of new features to improve the quality of design system assets. We've been using component variants and properties in Reshaped for quite some time, but there were parts of the library we could only change after the major release.

In 2.0, we've revamped the whole library to be even more aligned with code and use these features to their full potential, as well as be ready for the new features Figma will announce on Figma Config this year:

⚡ We have updated our font design tokens structure to reduce the complexity of working with the design tokens in Figma and reduce the size of the theme CSS file by almost 60%.

Here is a mapping of the old typography values to the new ones:

// Before          After

display-1          title-1
...                title-2 [new]
display-2          title-3
...                title-4 [new]
display-3          title-5
...                title-6 [new]

title-1            featured-1, weight: bold
title-2            featured-2, weight: bold
title-3            featured-3, weight: bold

featured-1         featured-1
featured-2         featured-2
featured-3         featured-3

...                body-1 [new]
body-1             body-2
body-2             body-3
body-medium-1      body-2, weight: medium
body-medium-2      body-3, weight: medium
body-strong-1      body-2, weight: bold
body-strong-2      body-3, weight: bold

caption-1          caption-1
caption-2          caption-2

⚡ We've slightly updated our elevation system with the design token name changes and a new color token to align color and shadow tokens completely. This change is inspired by Atlassian Design System's work on its foundations.

// Before                     After

shadow-base                   shadow-raised
shadow-elevated               shadow-overlay

...                           color-background-elevation-base [new]
color-background-base         color-background-elevation-raised
color-background-elevated     color-background-elevation-overlay

We have reviewed our color palette to work better across various edge cases, especially in the dark mode:

The button is the component every design system usually starts with, and there are so many different use cases we need them for in our products. In this release, we're adding a new faded variant to the Button component and have slightly updated the existing variants' styles to ensure we cover as many typical use cases as possible.

You can find more information about the available variants in the documentation:

We've added support for more complicated menus with nesting. To achieve that, we have introduced two new componenets inside DropdownMenu: DropdownMenu.SubMenu and DropdownMenu.SubTrigger. By using them together with previously available parts of the DropdownMenu, you will automatically get trap focus support for multiple levels of menus and new hotkeys for working with submenus.

useHotkeys

Actionable

Dismissible

Icon

Reshaped provider

Text

Theme provider

View

ActionBar

Alert

Avatar

Badge

Card

Carousel

Checkbox

Divider

DropdownMenu

Overlay

Radio

Link

MenuItem

Modal

Popover

Scrim

Select

Switch

Tabs

TextField

TextArea