[Live] Reshaped v4 RFC

[blvdmitry]

Ongoing pull request with all v4 changes: #608

---

This is a living doc with all known major changes that we can't implement immediately. Usually these features are either planned for the next major release since they have breaking changes in the API or they're blocked by the browser or dependencies support (e.g. depending on Tailwind or frameworks). Feel free to use this issue as a discussion and leave comments if you would like to see something making it into the release or want to ask/add info to the existing topic.

v4.0 (2026)

React Compiler

While React 18 is still widely used and might be hard to migrate from, we'll keep maintaining it.
At the same time we'll try migrating to React Compiler and products still using React 18 should be able to use its compatibility runtime.

Browser support updates

Update the browser support to use the MDN baseline "widely available" features. This means the feature was available in all browsers for the past 3 years which is quite aligned with our current feature support but won't require custom decision making. We will still update the supported browser versions in each major release based on the MDN stats. A good idea would be to include a browserslist config synced with MDN stats.

Latest Figma features

• Figma slots support
• Deeper Figma make integration

Migration to React v19 (maybe)

Start using React 19 runtime features, like runtime compiler without the compat plugin, new React API and remove all deprecated APIs like forwardRef. Since many apps might still depend on older versions of React, there are also options like:

• Keep an old version of React used and not yet migrate
• Release a major version with the old version support, then make another version with React 19+ and keep older version maintained in a separate branch for another year with critical bug fixes backported

Migration to Tailwind v4 / wide @layer adoption

Drop support for Tailwind v3 and migrate components css states to use @layer which was blocked by Tailwind v3 css reset.

Themes

• Introduce elevation-sunken instead of page-faded

Components

• Update all container components like Card, ActionBar to use flexbox by default, so that content alignment and gap could be controlled through props

• Autocomplete: Remove focus trigger type in Flyout. Remove selection-menu mode in TrapFocus. Move this to the custom Autocomplete internals instead since that's the only case where this mode was used. Remove data-rs-focus selector from being used in css.

• Tabs: Remove automatic Tab detection if no value is passed and make value/defaultValue required. This should resolve issues with the context dependent default value resolving

• Toast, Tooltip: Decide if we want to keep the toasts inverted or have them use the same color mode, visual change

• Flyout: Remove deprecated forcePosition prop

• Button.Aligner: Remove deprecated position prop

• Button.Group, ToggleButton.Group: Review the prop and styles overlap

• Popover: Remove deprecated variant prop

• Reshaped.css: move all custom resets to all: unset and remove resets from Actionable

• View: Update aspect ratio to not modify children or to only modify specific tags

• Flyout: Implement strict ref types with the React19 rollout

• Text: Remove css reset

• Tabs / Select: Stop relying on the React.Children.map to support wrapping options in components

• ToggleButtonGroup: Support a string value for single selection

[mareksed]

For us it would be valuable to keep the support for react 18, we have a lot of legacy code and update to react19 is not feasable at the moment. I assume this is the default state in the industry, competitors e.g radix-themes do support react back to version 16, I think it would benefit reshaped to keep support for react 18.

[mareksed]

One of the core values of reshaped is dependencies independent.
I would trade that value for having more stable library and outsourcing flyouts logic to floating-ui.

[egucciar]

Check if we want tooltip and toasts to always render in dark mode instead of inverted, since white bg seems to look quite heavy for dark mode

+1, also how to do this in v3?

[egucciar]

Given Figma is announcing new feature support such as better grids aligned with CSS grids, maybe this could also be incorporated into the figma files

[blvdmitry]

Check if we want tooltip and toasts to always render in dark mode instead of inverted, since white bg seems to look quite heavy for dark mode

+1, also how to do this in v3?

Toasts currently support color for this but tooltips don't have a property yet, might ship it earlier if you need to control this differently

[mareksed]

Remove selection-menu mode in TrapFocus.

We are using this when implementing typeahead plugin for Lexical, will there be a different way to replicate this behaviour?

[blvdmitry]

@mareksed hm, I'll think what's the best way to handle this for 3rd party packages like Lexical. Reshaped autocomplete is already using a custom implementation, so technically I can extract that into a separate utility (since it's not really trapping the focus), or maybe just keep things as is for integrations