Chakra UI v3.31 is out, and the headliner is one of the most requested features we've seen: a full Rich Text Editor composition. We also shipped ActionBar placement variants, Slider anatomy improvements, and a round of important bug fixes.
Rich Text Editor
Building a rich text editor from scratch is hard. Wiring up toolbars, handling keyboard shortcuts, managing extensions, and making it all look consistent with your design system—that's a lot of work before you even get to the actual content.
That's why we built a complete Rich Text Editor composition on top of Tiptap. It ships as a composition rather than a built-in primitive, which means you get full source code you can customize however you need.
Bubble Menu
A floating toolbar that appears when users select text. Great for quick formatting without reaching for the main toolbar.
ActionBar Placement
The ActionBar component now supports a placement variant so you can position
it at bottom, bottom-start, or bottom-end. There's also a new
--action-bar-offset CSS variable if you need finer control over the offset
from edges.
Slider Improvements
- Added
markerLabelto the component anatomy for theming marker labels - New
Slider.MarkerLabelcomponent for custom marker label rendering - Improved focus ring styles on
Slider.Thumb
Bug Fixes
- ColorPicker, Select, Combobox: Fixed z-index stacking when used inside dialogs
- cva: Normalized base styles to prevent shorthand properties from overwriting variant styles
- Menu: Fixed content background not rendering by using full token path for CSS variable
- SkeletonText: Fixed duplicating children when
loadingis set tofalse
Upgrading
npm install @chakra-ui/react@latestEverything in this release is backward compatible—no breaking changes or migration needed. Just upgrade and start building.