Releases

We're excited to release Reshaped v4.0 today! ✨

In this release, we focused on simplifying the component APIs, removing the design paper cuts that had accumulated over the years, and providing better defaults for both visual quality and API consistency. By improving the foundations of the library and providing better low-level primitives, we're making it easier for you and your agentic tools to build beautiful products that look and work better than the default output you would get from agents.

For this major release, we're also shipping a migration skill for your agents. It covers all breaking changes that can be migrated automatically and generates a migration report.

npx skills add https://github.com/reshaped-ui/reshaped --skill reshaped-v3-v4

Run the following command to install the skill in your project, then ask your agent to migrate a component or file to see how it can access the migration examples.

We've updated the theming system with additional design tokens and better defaults, like more vibrant colors, better typography distribution, and beautiful shadows. Here is a quick overview of the changes:

• ⚡ slate is the only theme we support now. The reshaped theme is officially deprecated after not being used as the default for a few months. If you still want to use the old reshaped theme, you can save its values from the v3 theme JSON file.
• ⚡ All theming utilities were moved to the @reshaped/theming package. You can install it alongside reshaped and always use the matching version.
• ⚡ Shadows now include a new outline variant as well as -intense modifiers for colored surfaces. New shadow values can still be used standalone, but they work best together with our updated border tokens, overlaying the borders. Most of the time we expect you to reach for low-level components like Card or Popover when implementing elevated surfaces, and you'll also see the same technique used in buttons, fields, and other components.
• ⚡ Typography token names were updated. Title 1-3 are now Headline 1-3 for marketing use cases, and Title 4-6 and Featured 1-3 were regrouped as Featured 1-6. Body-1 can be replaced with the same Featured-6 token, while Body-2 and Body-3 are now Body-1 and Body-2 respectively.
• ⚡ -rgb color variables were removed in favor of using relative color syntax. For example, use rgb(from var(--rs-color-foreground-neutral) r g b / 50%) instead of rgba(var(--rs-color-foreground-neutral-rgb), 0.5).
• Added new x0-5 and x1-5 unit tokens for more flexibility in condensed layouts.
• Increased border radius values, with the default switching from 4px to 6px.
• Easing and duration values were refined to make animations feel crisper.
• Added new -highlighted and -highlighted-faded color tokens for hover and highlighted states.

Our deployed Storybook now comes with MCP endpoints that provide your agent with access to canonical component examples coming directly from the stories. To enable it in your agentic tool, navigate to the MCP settings and add a new MCP with the permalink URL from the code snippet below.

For example, in Cursor its configuration will look like this:

{
  "mcpServers": {
    "reshaped": {
      "url": "https://main--5ed400f96e43cc00226d4df6.chromatic.com/mcp"
    }
  }
}

We have rebuilt our Figma library from scratch to match all visual changes, including new design tokens and layout adjustments. All components that used a custom slot utility are now built using native Figma slots released earlier this year.

It greatly simplifies component composition and allows you to build more complex layouts with ease. You don't have to worry about working with variants of the slot utility anymore and can just drop your components into the slot area and control them using auto-layout.

You will also see how it has simplified some of the components that use repeated content. For example, DropdownMenu doesn't have to implement variants based on the number of items used and instead leverages slots to insert MenuItems as recommended child components.

We're adding a new Examples section with more advanced component compositions built on top of Reshaped. It starts with form components, showing how lower-level primitives can be combined into production-ready patterns like custom selection menus, richer text fields, date inputs, file upload flows, and checkbox or radio groups.

These examples are meant to sit between isolated component docs and full templates, giving you realistic building blocks that you can copy and adapt directly in your product.

All components were adjusted for better visual alignment of their elements and better composition with other components. We're not mentioning all of these paper-cut fixes one by one, but you will notice minor changes throughout most components, like spacing adjustments and design token updates.

⚡ We've also removed the following components in favor of building your own custom versions using low-level primitives because they either duplicated functionality from other components or were becoming too opinionated:

• ActionBar was removed in favor of using View
• Hotkey was removed to be replaced by Badge
• Scrim, Stepper, and Timeline components were removed, and their custom versions can be built using low-level Reshaped primitives.

Additionally, we've made the following changes to the components:

• ⚡ Autocomplete, Checkbox, HiddenInput, Radio, Select, Switch, TextArea, TextField: Dropped onFocus and onBlur in favor of passing these handlers through the inputAttributes property.
• Autocomplete: Added a mutation observer to update the focused item after filtering the options.
• Avatar: Added an outline to the faded variant.
• ⚡ Badge: Removed the outline variant and updated the faded variant so it can be used instead.
• Badge: Fixed rendering of 0 integer children.
• Breadcrumbs: Improved gap rounding between text and icon.
• ⚡ Button: Renamed the elevated property to raised to match the shadow token name.
• ⚡ Button: Removed the faded variant.
• Button: Redesigned the outline variant to always use a neutral border and only change the text color.
• ⚡ Button.Aligner: Removed the deprecated position in favor of side, supported since v3.
• Calendar: Added renderDateValue support.
• Card: Added gap, direction, align, justify, and borderRadius properties to control the content layout without wrapping it with an additional View.
• ⚡ Card: Renamed the elevated property to raised to match the shadow token name.
• ⚡ Carousel: Dropped CarouselInstanceRef in favor of the CarouselInstance type supported since v3.
• ⚡ Divider: Renamed offset to inset and switched it to unit token values instead of pixel strings.
• ⚡ Flyout: Removed the deprecated forcePosition in favor of using the fallbackPositions property available since v3.
• ⚡ Flyout: Removed the deprecated fallbackMinWidth property.
• Flyout: Added a scrollable element with its own className and attributes. Padding now belongs to that element instead of the inner wrapper. This change should simplify controlling the content layout when working with dynamic resizing based on the viewport size.
• Flyout: Added onAfterOpen and onAfterClose handlers that trigger after the animation completes.
• Flyout: Added automatic position updates when containerRef resizes.
• Flyout: Fixed positioning inside shadow DOM and nested modals.
• Flyout: Added timeout cleanup on unmount.
• Flyout: Enabled the dismissible queue for hover flyouts. The dismissible queue controls the order of closing flyouts and overlays, and the new approach solves the reported edge cases.
• FormControl: Added the gap property and improved default gaps.
• ⚡ MenuItem: Removed the roundedCorners property.
• Modal: Optimized swipe behavior for mobile devices.
• NumberField: Added automatic value clamping to min and max on blur by default.
• ⚡ Overlay: Removed the onOpen handler to align the API with the Flyout API. Use onAfterOpen instead if you want to wait for the animation to complete or call the same function whenever you change its active value.
• ⚡ Popover: Removed the headless value for the variant property in favor of using the Flyout component.
• ⚡ Progress: Renamed to ProgressBar.
• ProgressBar: Added a new neutral color.
• Resizable: Added support for wrapping items and handles into reusable components.
• ScrollArea: Fixed a scrollable area resize issue.
• ⚡ Select: Removed the Select.Custom compound component. The new version renders a custom select when using Select.* compound components inside and renders a native select when using it with native option children.
• ⚡ Select: Removed the options property in favor of always using children.
• ⚡ Select: Selects with the multiple flag now require renderValue to be passed to display the selected values.
• ⚡ Select: Added selectedIconPosition property to control the position of the checkmark on the selected option.
• ⚡ Tabs: Removed automatic defaultValue detection. Tabs now always requires value or defaultValue to be passed explicitly.
• ⚡ Tabs: Renamed pills-elevated to pills-raised to match the shadow token name.
• Tabs: Added small variant.
• ⚡ Text: Updated variant names to match the new typography tokens.
• TextArea: Fixed min-height when resizing to a single row.
• TextField: Updated the default endSlotPadding to 2.
• ⚡ Toast: The Reshaped provider no longer provides global toast options for each region. toast.show() now accepts a width option with short and long presets, as well as custom CSS width values.
• ⚡ Toast: Removed the inverted color in favor of using the neutral color.
• ⚡ Toast: Removed the size option in favor of using orientation with the vertical preset.
• Toast: Toasts now support stacking with variable widths.
• View: Updated the shadow property to use the new shadow tokens.
• ⚡ View: aspectRatio no longer overrides the children's aspect ratio and only changes the dimensions of the view itself.
• useIsDismissible: Exported hook for working with the dismissible queue and building custom flyout-like components.