Never miss a release that matters
AI-powered summaries of every GitHub release.
AI Summaries
Changelogs condensed into clear, actionable insights.
Always Free
Track up to 5 packages at no cost, forever.
Weekly Digest
A curated summary of every release, delivered weekly.
TL;DR
Chakra UI now includes a new, fully featured FloatingPanel component (draggable, resizable windows) for creating flexible UI elements.
New
- FloatingPanel: A new component for creating draggable and resizable floating panels.
- Ark UI Updates: Ark UI, a dependency, has been updated to v5.37.2, bringing improvements to Splitter, Color Picker, Combobox, Date Picker, and other components. These include support for CSS units in Splitter sizing and fixes for focus and accessibility.
Fixes Worth Knowing
- Date Picker: Several fixes improve the Date Picker's behavior, including range mode, Firefox compatibility, and hover states.
- Dialog/Popover: Resolved issues with page interactivity and custom trigger elements in Dialog and Popover components.
- Input Styling: DatePicker placeholders now respect global CSS styling. Focus rings on Links now only appear on focus-visible, not on click.
- Semantic Tokens: Fixed an issue where semantic tokens were incorrectly resolving to dark mode values.
Before You Upgrade
If you are using semantic tokens with light/dark conditions, verify that they are resolving correctly after the upgrade.
TL;DR
Chakra UI’s MCP Server now fully supports OpenAI Codex (AI code generation) after addressing compatibility issues with recent library updates.
Fixes Worth Knowing
- OpenAI Codex compatibility is restored.
- MCP Server stability is improved with updated dependencies (Zod and MCP SDK).
TL;DR
Chakra UI now defaults to the gray color palette, and component sizing is now consistent with a 4px base (smallest elements are 20px).
Breaking
- Input/Textarea: The
filledvariant has been renamed tosubtle. - Color Palette: The default color palette is now
grayinstead of the previous default.
New
- Checkbox/Radio: New
Descriptioncomponents (CheckboxDescription,RadioCardDescription, etc.) have been added for better labeling. - Tags: New
Tag.StartElementandTag.EndElementcomponents allow more flexible styling of tag components.
Fixes Worth Knowing
- Avatar component now includes
referrerPolicyfor improved security. - Focus rings now consistently match the defined color palette.
- Avatar size consistency improved (small avatars are now 36px).
TL;DR
Chakra UI’s Storybook addon now uses React’s useState (state management) for more reliable color mode toggling and has been updated to work seamlessly with Storybook 7.5.3.
New
- Improved Storybook addon integration using
makeDecoratorfor a more official feel. - Color mode toggling is now more reliable due to the use of React’s
useState.
TL;DR
Chakra UI toast notifications now have unique ARIA labels (accessibility features) for improved screen reader support.
Fixes Worth Knowing
Toast manager divs now include unique ARIA labels, enhancing accessibility for users relying on screen readers.
Before You Upgrade
No action is needed to benefit from these changes. The updates are fully backwards compatible.
TL;DR
Chakra UI dependencies have been updated, improving stability and incorporating recent fixes across core components like alerts and the theme.
Fixes Worth Knowing
Updates to @chakra-ui/alert and @chakra-ui/close-button resolve unspecified issues, potentially improving reliability in common use cases. Updates to @chakra-ui/theme and @chakra-ui/styled-system ensure consistent styling.
TL;DR
Chakra UI components received dependency updates, improving stability and addressing minor issues across the library.
Fixes Worth Knowing
- Fixed an issue where toast (small popup messages) would not close correctly in certain scenarios.
- Resolved a bug causing unexpected behavior with alert (notification) components.
- Close button (component to dismiss alerts/modals) functionality is more reliable.
TL;DR
Chakra UI now includes React Hooks, and a significant refactor improves bundle size and documentation generation.
New
- React Hooks are now available for use with Chakra UI.
- Improved bundle size due to code refactoring.
Fixes Worth Knowing
- Prop documentation is now generated correctly.
TL;DR
Chakra UI received significant dependency updates and a major improvement to color mode management, allowing for more flexible storage options (localStorage or cookies) and consistent behavior between the provider and script.
Breaking
No breaking changes were identified in these releases.
New
- Color mode can now be configured to use cookies for storage, improving SSG support.
- Custom icons can now be used in toasts.
- Storybook addon now supports theming argTypes for easier component previewing.
Fixes Worth Knowing
- Popover now correctly handles overflowing selections.
useOutsideClickhook now correctly detects clicks outside thebodyelement.- Fixed an issue where setting zero values for spacing would cause layout problems.
- Alert component now accepts custom icons.
Before You Upgrade
If you're using Storybook, ensure it's version 6.4 or higher to avoid compatibility issues with the Storybook addon.
TL;DR
Chakra UI now supports TypeScript 4.7, improving type safety and developer experience (programming language).
Breaking
- Removed support for Node.js versions below 16 (JavaScript runtime environment).
useColorModeValuenow accepts a second argument for the dark mode value (styling function).
New
- Added a new
sxprop to all components for easier styling (CSS-in-JS). - Improved accessibility for
SelectandCheckboxcomponents.
Fixes Worth Knowing
- Fixed a bug where focus styles were not applied correctly on some components.
- Resolved an issue with
Inputcomponent losing focus after validation.
Before You Upgrade
- Update your Node.js version to 16 or higher.
- Review your usage of
useColorModeValueto ensure the dark mode value is correctly specified.
TL;DR
Chakra UI v1.0 is released, focusing on stability and a new theming API for easier component styling and extension.
Breaking
- Dependencies: Removed
@emotion/styled,@emotion/core, and@emotion/theming– remove these from your project if not directly used. variantColorrenamed: Replace all instances ofvariantColorwithcolorScheme.sizeprop update: ForBoxcomponents, usewidthandheight(orwandh) instead ofsize.- Prop Renames: Update deprecated props like
roundedtoborderRadius,bgImgtobgImage, etc. (see changelog for full list). - Accordion: Use
AccordionButtoninstead ofAccordionHeader.AccordionItemmust be nested withinAccordion. - AspectRatioBox: Renamed to
AspectRatio. - Modal:
ModalContentmust be wrapped inModalOverlay. - Switch:
colorprop renamed tocolorScheme. - Tags:
variantColorrenamed to
TL;DR
Chakra UI now uses a custom Popper implementation (interactive overlay) for Menu, Tooltip, and Popover, improving performance and consistency.
New
- Popover component API was rewritten for better consistency.
- RadioGroup now supports focusing via a ref.
Fixes Worth Knowing
- NumberInput no longer exceeds its maximum value when using arrow keys.
- RadioGroup type definitions are corrected.
- Stack component handles null/falsy children without rendering errors.
Before You Upgrade
Update any code directly interacting with the Popover component’s API to reflect the new design.