.changelog/v3.mdx
DatePicker [NEW]: Add new datepicker component for date selection
CLI: Add --tsconfig flag to chakra typegen and automatic tsconfig
resolution using tsconfck. This fixes an issue where typegen failed in
projects with solution-style tsconfig setups (e.g. Vite's default
tsconfig.json with references).
# Auto-resolves (works with Vite's default setup)
chakra typegen lib/theme/theme.ts
# Explicit tsconfig
chakra typegen lib/theme/theme.ts --tsconfig tsconfig.app.json
Combobox: Export ComboboxSelectionDetails type (as
Combobox.SelectionDetails in namespace)
Listbox: Export ListboxScrollToIndexDetails, ListboxSelectionDetails,
ListboxSelectionMode types
Menu: Export MenuValueChangeDetails type (as Menu.ValueChangeDetails
in namespace)
Select: Expose Select.List component for virtualization support
Checkbox Group: Fix TypeScript error when passing ref to CheckboxGroup
Codemod
Steps was added to the import listChakraProvider value={defaultSystem} was wrapped in
String()Field: Fix Field.ErrorIcon default size so it stays aligned with error
text instead of expanding when the error area is full width
Global CSS: Fix globalCss silently ignoring element selectors that match
utility shorthands (e.g. p, m, h, w)
responsive prop over
ResponsiveContainer when using Chart.Root. The responsive prop avoids
React 19 compatibility issues that ResponsiveContainer can trigger.Scroll Area: Add overflow CSS variables for scroll fade effects
(--scroll-area-overflow-{x,y}-{start,end})
Slider: Add thumbCollisionBehavior prop to control collision handling
between thumbs (none, push, swap)
Steps: Add validation support with isStepValid, isStepSkippable, and
onStepInvalid props
Tags Input: Add placeholder prop that shows when no tags exist
Tooltip: Add data-instant attribute for instant animations when
switching between multiple tooltip triggers
Checkbox: Fix individual checkbox props being overridden by
CheckboxGroup when rendering
CodeBlock: Fix overlay and floating elements scrolling out of view when horizontally scrolling long code lines
Color Picker: Fix color not updating when selecting black shades in controlled mode
Dialog/Popover: Fix issue where closing nested dialogs/popovers would incorrectly close parent layers
Menu: Fix glitchy submenu behavior when hovering between trigger items quickly
Number Input: Fix cursor positioning issues after clicking label or scrubbing
Pagination: Fix next trigger not being disabled when count is 0
Slider: Fix thumb drag behavior from edge in thumbAlignment="contain"
mode
Switch: Fix api.toggleChecked() not working
Textarea: Fix change event not being emitted after clearing controlled textarea
Tree View: Fix initial focus when first node/branch is disabled
Codemod [NEW]: Add @chakra-ui/codemod package to automate v2 to v3
migration
npx @chakra-ui/codemod upgrade
npx @chakra-ui/codemod upgrade --dry
Marquee [NEW]: Add Marquee component for scrolling content animations
<Marquee.Root>
<Marquee.Viewport>
<Marquee.Content>
<Marquee.Item>Item 1</Marquee.Item>
<Marquee.Item>Item 2</Marquee.Item>
</Marquee.Content>
</Marquee.Viewport>
</Marquee.Root>
Collapsible: Fix collapse-width keyframe animating height instead of
width
Dialog, Drawer, Menu, HoverCard: Fix z-index stacking when Dialog is
triggered from within a Popover
Styled System: Fix backdrop blur not applying with backdropFilter="auto"
useBreakpointValue: Fix base value not respected during SSR
Radio Card: Fix disabled state looking inconsistent when using
variant="solid"
ActionBar
placement variant to configure bar position: bottom, bottom-start,
bottom-end--action-bar-offset CSS variable to configure offset from edgesSlider
markerLabel to component anatomy for theming marker labelsSlider.MarkerLabel component for custom marker label renderingTheme: Export the listboxSlotRecipe slot recipe
ColorPicker, Select, Combobox: Fix z-index stacking when used inside dialogs
cva: Normalize base styles to prevent shorthand properties from overwriting variant styles
Menu: Fix content background not rendering by using full token path for CSS variable
Slider: Improve focus ring styles for Slider.Thumb
SkeletonText: Fix duplicating children when loading is set to false
Carousel: Added autoSize prop for variable width/height slides
Semantic Tokens: Add new border semantic token to all color palettes
(gray.300/gray.700 for gray, color.500/color.400 for colored palettes)
to improve outline component appearance
Splitter [NEW]: Introduce new resizable splitter component
<Splitter.Root panels={[{ id: "a" }, { id: "b" }]}>
<Splitter.Panel id="a">Panel A</Splitter.Panel>
<Splitter.ResizeTrigger id="a:b" />
<Splitter.Panel id="b">Panel B</Splitter.Panel>
</Splitter.Root>
InteractOutsideEvent, FocusOutsideEvent,
PointerDownOutsideEvent typesBadge, Button, Checkbox, Tag: Update outline variants to use
colorPalette.border instead of colorPalette.muted or global border token
for better appearance, especially for non-gray color palettes
Carousel: Fixed dragging after tab switch/scroll and mouse wheel scroll
with allowMouseDrag
CheckboxGroup: Fix type issue where CheckboxGroupProps could not be
passed to the CheckboxGroup component
CLI: Fix high-severity security vulnerability by replacing sucrase
dependency with Babel-based TypeScript transformation
Combobox
onHighlightChange not firing when filtered to emptyaria-hidden behaviorFile Upload: Fixed non-interactive children in dropzone not opening file picker
HoverCard, Popover, Tooltip: Fix arrow direction in RTL layouts
Radio Group: Fixed inconsistent data-focus-visible/data-focus
attributes; fixed indicator showing before rect resolved
TagsInput: Fix overflow issue where very long tags would overflow the container instead of truncating with ellipsis
Tabs: Fixed indicator showing before rect resolved; fixed position not updating when inactive tabs resize
initialItems now accepts readonly arraysCarousel component for creating slideshows and
image galleries with features like autoplay, pagination, and navigation
controls.CodeBlock: Add missing use client directive
Combobox: Refactor recipe for smarter padding management to prevent input text from overflowing onto triggers
CodeBlock: Fix right padding when scrolling long code lines horizontally
MCP Server: Fix OpenAI Codex compatibility by removing stdout logging, downgrading Zod to v3.23.8, and upgrading MCP SDK to v1.20.2
Styled System
globalCss for :host,
:host-context(), and ::slotted() pseudo-classesSegmentGroup: Refactor to use CSS variables for styling indicator
(--segment-indicator-bg and --segment-indicator-shadow) for better
customization
Tabs: Refactor to use CSS variables for styling indicator
(--tabs-indicator-bg) for better customization
TagsInput [New]: Add new TagsInput component for entering multiple
values as tags with features like tag creation, deletion, and keyboard
navigation.
import { Span, TagsInput } from "@chakra-ui/react"
export const TagsInputBasic = () => {
return (
<TagsInput.Root defaultValue={["React", "Chakra", "TypeScript"]}>
<TagsInput.Label>Tags</TagsInput.Label>
<TagsInput.Control>
<TagsInput.Items />
<TagsInput.Input placeholder="Add tag..." />
</TagsInput.Control>
</TagsInput.Root>
)
}
Collapsible: Add support for collapsedHeight and collapsedWidth props
to control the dimensions of the collapsible content when in its collapsed
state
Pagination: Add getPageUrl prop for generating href attributes when
using pagination as links
Tabs, SegmentGroup: Refactor to use getBoundingClientRect() for precise
indicator positioning
Dialog, Popover: In modal mode, allow elements referenced by
aria-controls to be included in the focus trap scope
Checkbox: Fix issue where setting initial checked state to indeterminate
doesn't work
Collapsible: Fix issue where dir prop value doesn't get applied
correctly
Combobox: Fix issue where controlled single-select combobox does not
propagate its initial value to inputValue
Listbox: Fix issue where pressing Enter key when no highlighted item still
calls event.preventDefault()
Number Input: Fix cursor jumping to end when typing in the middle with
formatOptions like style: "currency"
Pin Input: Fix issue where keyboard shortcuts Cmd+Backspace and
Cmd+Delete would insert "undefined" instead of clearing the field
Scroll Area
Select: Fix accessibility violation where the required state was not set correctly on the trigger
Slider: Fix issue where slider continues dragging when disabled during drag operation
Switch: Fix issue where data-active is inconsistently applied when
disabled state changes at runtime
mergeRefs: Add React version detection to properly handle cleanup functions in React 19+ while avoiding warnings in React 18
Collapsible: Expose Collapsible.Indicator component to provide visual
indicator for collapsible state
Timeline: Add showLastSeparator variant to control visibility of the
last separator
Table: Ensure stickyHeader works with outline variant
CodeBlock:
highlight.js adapter to properly handle diff attributes for
added/removed linesStyled System:
// This now works correctly
const recipe = defineRecipe({
variants: {
variant: {
primary: {
color: ["red", "green"], // ✅ Now converts to breakpoints
},
},
},
})
React 19 Compatibility: Fix issue where refs don't support cleanup function
CLI: Allow CLI to read new documentation blocks filtering
CLI: Add new blocks command to add chakra pro blocks to your project.
This command requires valid Chakra Pro license and API key in the
CHAKRA_UI_PRO_API_KEY environment variable.
# Interactive block selection
npx @chakra-ui/cli blocks add
# Add all variants of a specific block
npx @chakra-ui/cli blocks add hero
# Add a specific variant of a block
npx @chakra-ui/cli blocks add hero --variant "simple"
# List available blocks
npx @chakra-ui/cli blocks list
# List blocks in a specific category
npx @chakra-ui/cli blocks list --category "marketing"
Composition Types: Enhanced with comprehensive CSS property support
Text Style Properties: Added properties to theme.textStyles:
color, direction, font, fontFamily,
fontFeatureSettings, fontKerning, fontLanguageOverride,
fontOpticalSizing, fontPalette)hangingPunctuation, hyphens,
hyphenateCharacter, hyphenateLimitChars, lineBreak, quotes,
overflowWrap, tabSize)textAlign, textAlignLast, textCombineUpright,
textJustify)textDecorationSkip, textDecorationSkipBox,
textDecorationSkipInk, textDecorationSkipInset,
textDecorationThickness, textEmphasis)textShadow, textStroke, textStrokeColor,
textStrokeWidth, textUnderlineOffset, textUnderlinePosition,
textWrap, textWrapMode, textWrapStyle)unicodeBidi, verticalAlign, whiteSpace, wordBreak,
wordSpacing, writingMode)Layer Style Properties: Added properties to theme.layerStyles:
aspectRatio, display, contain, contentVisibility,
isolation)clipPath, mixBlendMode, maskClip, maskComposite,
maskImage, maskMode, maskOrigin, maskPosition, maskRepeat,
maskSize)objectFit, objectPosition, pointerEvents, resize,
visibility, willChange)borderImage, borderImageOutset, borderImageRepeat,
borderImageSlice, borderImageSource, borderImageWidth)overflow, overflowX, overflowY)CodeBlock:
meta.wordWrap is
trueHover Card: Change default delay values to improve accessibility
openDelay: from 700ms to 600msTooltip: Change default delay values to improve accessibility. Learn more
openDelay: from 1000ms to 400mscloseDelay: from 500ms to 150msMenu:
target="_blank"
would open two tabsCombobox: Add alwaysSubmitOnEnter prop to allow forcing the form to be
submitted immediately on Enter press
Listbox [New]: Add new component with support for single/multi-select, grouping, virtualization, controlled state, icons, descriptions, and accessibility features.
This component can be used to build command palettes, dropdowns with search, and much more.
<Listbox.Root collection={frameworks} width="320px">
<Listbox.Label>Select framework</Listbox.Label>
<Listbox.Content>
{frameworks.items.map((framework) => (
<Listbox.Item item={framework} key={framework.value}>
<Listbox.ItemText>{framework.label}</Listbox.ItemText>
<Listbox.ItemIndicator />
</Listbox.Item>
))}
</Listbox.Content>
</Listbox.Root>
disabled propCodeBlock: Add configurable theme support and sync loading for Shiki adapter
theme property must be
explicitly provided to createShikiAdapterloadSync method for better performance// Before
const adapter = createShikiAdapter({
async load() { /* ... */ },
})
// After
const adapter = createShikiAdapter({
async load() { /* ... */ },
theme: {
light: "github-light",
dark: "github-dark",
},
})
Select, Menu: Fix issue where disabled items could be reached via typeahead
Color Picker: Fix issue where color picker was not working correctly in RTL mode
Number Input
pattern when formatOptions is provided. This prevents
native pattern validation from conflicting with formatted values (e.g.,
currency or percent).data-scrubbing attribute to the number input parts.Scroll Area: Add new scroll area component
<ScrollArea.Root>
<ScrollArea.Viewport>
<ScrollArea.Content></ScrollArea.Content>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar>
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
<ScrollArea.Corner />
</ScrollArea.Root>
System: Implement preset for table border-spacing property and improve
documentation
Highlight: Add exactMatch prop that enables whole-word matching using
regex word boundaries.
System: Fix nested token override issue during theme merging
const defaultConfig = {
theme: {
tokens: {
colors: {
black: { value: "#000000" },
},
},
},
}
const userConfig = {
theme: {
tokens: {
colors: {
black: {
100: { value: "#EE0F0F" },
200: { value: "#CC0C0C" },
},
},
},
},
}
// Before: This would return undefined
const system = createSystem(defaultConfig, userConfig)
system.token("colors.black.100") // undefined
// After: This will return merged correctly, preserving the default value
system.token("colors.black.100") // "#EE0F0F"
system.token("colors.black.200") // "#CC0C0C"
system.token("colors.black") // "#000000"
Menu
onCheckedChange could be called twice on checkbox or radio
itemdata-state attribute for context menu triggerRadio Group: Fixed issue where arrow key navigation doesn't apply
data-focus-visible on the newly focused item.
System: Fix issue where using asChild with invalid child elements or
React.lazy components would throw an error. This issue more commonly occurs
when composing with Next.js Link component.
import { Breadcrumb } from "@chakra-ui/react"
import Link from "next/link"
export default function Page() {
return (
<Breadcrumb.Root>
<Breadcrumb.Link asChild>
<Link href="#">aaaa</Link>
</Breadcrumb.Link>
</Breadcrumb.Root>
)
}
not-prose classfullscreen condition returns the wrong css
selectorCodeBlock: Add new codeblock component with support for highlight.js and shiki.
<CodeBlock.AdapterProvider value={shikiAdapter}>
<CodeBlock.Root code="console.log('Hello, world!')" language="tsx">
<CodeBlock.Content>
<CodeBlock.Code>
<CodeBlock.CodeText />
</CodeBlock.Code>
</CodeBlock.Content>
</CodeBlock.Root>
</CodeBlock.AdapterProvider>
System: Add unstyled prop support to compound component children to
opt-out of recipe styles per component.
<Accordion.Root defaultValue={["a"]}>
<Accordion.Item value="a">
<Accordion.ItemTrigger unstyled bg="red.500" />
<Accordion.ItemContent>
<Accordion.ItemBody />
</Accordion.ItemContent>
</Accordion.Item>
</Accordion.Root>
Group: Add support changing group gap globally via --group-gap CSS
variable
Tabs: Export missing types
Hooks: Export entrypoint for better tree-shaking @chakra-ui/react/hooks
Theme: Expose smaller bits of the theme in the entrypoint for better
tree-shaking @chakra-ui/react/theme. We now expose recipes, slotRecipes,
breakpoints, keyframes, textStyles, layerStyles, animationStyles,
globalCss, cssVarsPrefix, cssVarsRoot, semanticTokens, tokens as
dedicated modules.
Dialog
dvh and dvw units instead of vh and vw to dynamically adjust to
viewport size changes.Native Select: Ensure height is consistent with input and select across sizes.
Breadcrumb: Fix HTML semantic structure for Breadcrumb.Ellipsis
component by changing the underlying element from <span> to <li>.
// Before: <span> inside <ol> (invalid HTML)
<Breadcrumb.List>
<Breadcrumb.Ellipsis />
</Breadcrumb.List>
// After: <li> inside <ol> (valid HTML)
<Breadcrumb.List>
<Breadcrumb.Ellipsis />
</Breadcrumb.List>
Tree View
filter method completely deletes the children key from
the node when there are no matching childrenFile Upload
acceptedFiles and defaultAcceptedFilesFileError, FileMimeType, and FileRejection types and fix
validation issuesTreeView component that is used to represent
hierarchical data in a tree structure.Clipboard: Fix issue where clipboardAnatomy was not exported from
@chakra-ui/react/anatomy
Combobox
reason to onOpenChange and onInputValueChange callbacksapi.clearHighlightedValue function to clear highlighted valueToast: Fix issue where toast title or description could not accept
React element
Progress: Improve valueAsString formatting
Select
api.clearHighlightedValue function to clear highlighted valueClientOnly: Support children as a function
CLI: Fix issue where typegen command fails silently with misleading
console output when prettier exits with a formatting error
Select: Export missing SelectRootComponent type export
System: Fix inconsistent handling of null and undefined for skipping
breakpoints using array syntax
Popover: Fixed issue where onOpenChange could be called twice when
controlled
Combobox
onInputValueChange could be called twice when selecting
an itemallowCustomValue: true used within in a
form requires two enter keypress to submitProgress
vertical don't workdefaultValue to null doesn't show indeterminate
stateToast: Fix issue where app crashes when toaster.promise is called
without loading option. The loading option is now required. A warning will
be logged if it is not provided
Combobox, Select, Listbox: Fix issue where rehydrating defaultValue or
value after fetching items doesn't update the valueAsString
Drawer: Improve Drawer recipe to better support conditional variants and
add conditional variants example to the docs and storybook
Add support new entrypoint for /theme which allows for incremental loading
of component recipes to avoid bloating the theme with unused components.
This is mostly for bundle size optimization.
For example, if you want just the button recipe to be included in your
bundle, you can cherry-pick the recipe you need like this:
import { createSystem, defaultBaseConfig } from "@chakra-ui/react"
import { buttonRecipe } from "@chakra-ui/react/theme"
export const system = createSystem(defaultBaseConfig, {
theme: {
recipes: {
button: buttonRecipe,
},
},
})
File Upload: Prevented undefined in acceptedFiles when no files
accepted
Select: Fixed issue where highlighted item could be cleared when navigating up/down the list with keyboard
Tabs: Fixed issue where tabs with links should not trigger tab change upon cmd/middle click
Menu: Fixed issue where Menu.ItemText could not be used with Menu.Item
File Upload: Added support for transforming uploaded files via
transformFiles context property.
Quote: Export Quote typography component and its types
System: Allow undefined for optional properties in CSS and recipe types
Color Picker: Fixed issue where value change end event is invoked when committing via an input.
Toast: Fixed issue where calling toast.remove() without an id shows a
TypeScript error.
Field: Fixed issue where helper text and error text could not be detected in shadow DOM environments.
Slider
minStepsBetweenThumbs isn't computed correctly when
interacting with pointer or keyboard.Shift + ArrowRight set value to 0 instead of max
when step is too large (e.g. 20).onValueChangeEnd doesn't return the latest value when
dragging very fast.Combobox: Fixed issue where onInputValueChange doesn't get called when
autoFocus is set to true
Pin Input: Fixed issue where input padding could cause clipping of the
text when fontSize is increased.
Checkbox: Export CheckboxRootProviderProps type
Charts: Fixed issue where formatter prop doesn't take effect in the
tooltip
System: add explicit undefined to generated types to support TS
exactOptionalPropertyTypes
Drawer: Fix drawer close animation in RTL
Button
display: contents and visibility: hiddendata-loading attribute when loading is true so allow styling
loading state with _loading pseudo propInput: Fix issue where invalid styles don't persist for variant=flushed
System: Fix issue where some svg element props tend to be treated as style props
Checkbox: Use consistent cursor for checkbox and radio group
Combobox component for autocomplete text entry.<Combobox.Root>
<Combobox.Label />
<Combobox.Control>
<Combobox.Input />
<Combobox.IndicatorGroup>
<Combobox.ClearTrigger />
<Combobox.Trigger />
</Combobox.IndicatorGroup>
</Combobox.Control>
<Portal>
<Combobox.Positioner>
<Combobox.Content>
<Combobox.Item />
</Combobox.Content>
</Combobox.Positioner>
</Portal>
</Combobox.Root>
DownloadTrigger component to help download
file contents.System
d prop to chakra.path adds it to styles not as a
direct attribute.Select: Fix issue where indicator group doesn't align correctly in RTL layouts.
Breadcrumb: Prevent screen reader from reading the separator
SegmentGroup: Fix issue where disabled prop was not being applied to
SegmentGroup.Items
RatingGroup: Fix issue where half-filled icons were not being displayed correctly in RTL
Collapsible: Fixed issue in React.js <= v18.x where collapse animation
might not work as expected
Dialog, Drawer: Use correct z-index for dialog and drawer backdrop
SegmentGroup: Fix issue where orientation prop to SegmentGroup.Root
doesn't work as expected.
Global CSS: Improve text selection contrast
System
borderEnd shorthand was not working despite borderStart
being presentsystem.cva return type was incorrectDialog, Drawer: Fix issue where z-index was not being applied correctly
[Beta] createOverlay: Add createOverlay utility for programmatically
controlling overlay components (Dialog, Drawer, etc.)
showTooltip with tooltip prop to support
custom tooltips.@chakra-ui/charts package.useMediaQuery: Fix type signature to allow skipping the second argument
RadioCard: Fix accessibility issue due to html structure
Slider
origin: end to align the thumb to the end of the trackthumbSize as CSS variables in the root element. Can be useful for
styling the sliderMenu
onSelect event to the Menu.Item componentFix potential import error from @zag-js/utils in @ark-ui/react.
System: Fix issue where output of .css(...) from Chakra UI can't
be assigned to Interpolation<Theme> from @emotion/react.
General: Bump @ark-ui/react to latest version.
General: Improve render performance by upgrading to the latest Ark UI v5. This brings a 1.5x - 4x improvements across components. Learn more from the Ark UI v5 changelog.
RadioGroup: Allow passing null as a valid value to clear the value. This
means the signature of onValueChange now supports string | null instead of
just string.
This might be a potential breaking TS change but it's a needed change to allow clearing the value.
ColorPicker
ColorPicker.ChannelText componentColorPicker.EyeDropper component that wraps IconButtonColorPicker.Slider and ColorPicker.Input shortcut components to
reduce LOC.InputGroup
@chakra-ui/react packagePagination
Pagination.Items shortcut component to render the number of pages
based on the count and pageSize props.Pagination.PageText component to render the current page and total
pages.FileUpload.FileText to render the list of uploaded file names.FileUpload.Items shorcut component to render the list of uploaded
files.FileUpload.List shortcut component that combines FileUpload.Items
and FileUpload.ItemGroup.Accordion.ItemTrigger doesn't apply textAlign: startSegmentGroup.Items shortcut component to render multiple
SegmentGroup.Item components based on the items propMenu
Menu.Arrow to Menu.ArrowTip, reducing LOC in
common use cases.HoverCard
HoverCard.Arrow to HoverCard.ArrowTip,
reducing LOC in common use cases.Dialog, Drawer
Skeleton Bring back SkeletonCircle and SkeletonText components from
v2.
Switch
Switch.Control to include Switch.Thumb as its default children,
reducing LOC in common use cases.Checkbox
Checkbox.Control to include Checkbox.Indicator as its default
children, reducing LOC in common use cases.NumberInput
NumberInput.Control to include NumberInput.IncrementTrigger and
NumberInput.DecrementTrigger as its default children, reducing LOC in
common use cases.QrCode
QrCode.Frame to include QrCode.Pattern as its default children,
reducing LOC in common use cases.RatingGroup
RatingGroup.Control to include an array of RatingGroup.Item
components as its default children, reducing LOC in common use cases.Slider
Slider.Marks component to render marks on the slider track. This is a
closed composition of Slider.MarkerGroup and Slider.Marker to reduce LOC
for common use cases.Slider.Thumbs component to render thumbs on the slider track. This is
a closed composition of Slider.Thumb to reduce LOC for common use cases.PinInput
attached variant prop to render a pin input with attached
inputs. This removes the need for the Group component to wrap the inputs.Tooltip, Popover
Tooltip.Arrow and Popover.Arrow to include Tooltip.ArrowTip and
Popover.ArrowTip as its default children, reducing LOC in common use
cases.css prop was not respectedmt shorthand resolves to marginBlockStart
instead of marginTopv3.5.x by reverting memoization logicuseMemo to provider components and styling hooks to avoid unnecessary
recomputations[New] Hooks:
useElementRect: Get the dimensions and position of an elementuseForceUpdate: Force a component re-renderuseLiveRef: Create a ref that stays up-to-date with its valueusePrevious: Access the previous value of a state or propuseSafeLayoutEffect: A safer version of useLayoutEffect[New] Focus Trap: Add FocusTrap component for trapping focus within a
container
Group component doesn't skip invalid childrenLightMode and DarkMode components to force light and
dark color mode in a subtreeAvatar: Add support for passing name to the AvatarFallback to render
the initials. If no name or children is passed, it'll render either the
initials or a fallback icon.
[New] Hooks: Add useConst and useUpdateEffect hooks from v2.
[New] Wrap: Bring back the Wrap component from v2.
CloseButton component.StatGroup component from v2.AvatarGroup component from v2.Styled System:
JSON.stringify in memo
function and avoid memoizing non-primitive arguments.assets token to backgroundImage and listStyleImage css
properties.Menu, Tooltip: Set lazyMount and unmountOnExit to true in the Root
component to improve initial rendering performance.
AbsoluteCenter: Fix issue where axis doesn't work in RTL mode.
Snippets / QRCode: Remove snippet in favor of compound component pattern.
List: Fix issue where list items don't wrap correctly.
Button: Fix issue where button is not disabled when loading props is passed
ColorPicker, HoverCard, Tooltip: Fixed intermittent placement shifts
caused by updates to the data-placement attribute
Snippets / Alert: Deprecate the Alert snippet in favor of using the
Alert component directly from @chakra-ui/react.
disabled and invalid props were not being passed to the
NativeSelectField component.invalid prop is set.[New] Loader: Add new Loader and LoaderOverlay components.
[New] Button Group: Add new ButtonGroup component similar to v2 for
grouping similar buttons.
Button: Add loading and loadingText props to the Button component.
Snippets / Menu: Refactor checkbox item to fix rendering
Snippets / Button: Removed the button snippet in favor of built-in component.
Separator: Fix issue where aria-orientation was missing in the DOM and
orientation was added instead.
Button, Icon Fix issue where button and icon doesn't export props providers
System: Fix performance issue where initial render time feels slower compared to v2 due to the global style computation in the provider component. See Discussion
FileUpload
disableClick prop.Icon
size=inherit to allow for composition with button<Icon as={...} /> throws an error, forcing users to
use the asChild approachMenu, Select: Use the same semantic token for select _highlighted state
Snippet, Tooltip: Set portalled to true by default
Toast: Fix issue where toast close trigger was not visible
Factory: Fix issue where factory shows a warning React 19 due to accessing
child.ref
HoverCard, Tooltip: Resolved an issue where the controlled open state
could become inconsistent during the opening or closing phases.
System: Fix issue where useRecipe and useSlotRecipe returns never
when key does not match built-in recipe.
<QrCode.Root value="..." size="md">
<QrCode.Frame>
<QrCode.Pattern />
</QrCode.Frame>
</QrCode.Root>
Clipboard: Introduced Clipboard.ValueText to display clipboard content.
FileUpload
Added preventDropOnDocument to block file drops on the document when the
file upload component is active.
Added setClipboardFiles to the API for setting files from clipboard data.
Progress: Added support foronValueChange and defaultValue.
Tabs, Menu: Added navigate property for custom router navigation when
selections render as links.
CLI: Add support for --tsx flag in the snippet add command to allow
explicitly specifying tsx/jsx file generation.
npx @chakra-ui/cli snippet add [...components] --tsx
@chakra-ui/panda-preset. This allows you
to use Chakra's design system in a Panda CSS project.Collapsible: Fixed a bug where the opening animation replayed when an open collapsible was re-rendered.
Dialog, Popover: Fixed an issue causing dialogs or popovers to close if the focused element was removed from the DOM.
FileUpload: Fixed a bug causing the hidden input to be out of sync with accepted files.
Menu, Popover: Fixed inconsistent interaction detection outside the component when the trigger was inside a scrollable container.
Pagination: Corrected an issue where the page range returned an incorrect
end value when pageSize exceeded count.
Image: Fix issue where htmlWidth and htmlHeight doesn't work in
Image or chakra.image elements.
System
bg,
bgColor, bgImage.colorPalette prop.useMediaQuery: Fix issue where partial media queries like
aspect-ratio < 1 doesn't return the correct result.
Good to know: Partial media queries like
aspect-ratio < 1resolves toaspect-ratio < 1 / 1in the browser.
System
useRecipe and useSlotRecipe hooksInput component throws asChild React HTML prop
warning.mergeConfigs does not override functionsSnippets / Pagination: Fix issue where pagination page text renders
incorrectly when the pageSize is greater than the count value with
format=long
Snippets / InputGroup: Improve typings for children prop to prevent TS
errors
FileUpload: Resolved an issue where the accept attribute wasn’t applied
to the hidden input.
NumberInput: Fixed issue where the input event wasn’t triggered on the first click of the increment/decrement controls.
Fix issue where component hook props (like UseCheckboxProps,
UseCheckboxGroupProps, etc.) are not exported.
System: Fix issue where chakra.x factory component props throws TS error
in React 19
Slider
DraggingIndicator component to show an element only while draggingMenu: Update recipe to use --available-height css variable to keep the
menu's height within the available space
System: Fixed issue where exporting withRootProvider would result in
type error
Snippets / Slider
MarkerGroup into the Control componentdata-has-mark-label
attributeCLI: Output the real version from package.json
System: Fix issue where exporting withProvider and withContext would
result in type error
Timeline: Fix issue where TimelineTitle was missing from the export
Tabs: Fix issue where useTabs and useTabsContext were not exported
Snippets / ColorPicker: Fix flex direction of ColorPickerChannelInputs
and ColorPickerChannelSliders
CLI
Input: Add support for use-mask-input library to mask the input shape
CLI: Add support for --all flag to add all snippets. By default, we only
install a minimal/recommended set of snippets
Recommended snippets: provider, avatar, button, checkbox, radio, input-group, slider, popover, dialog, drawer, tooltip, field
If you want to add all snippets, you can use the --all flag
[Preview] Add new ColorPicker component to allow users pick a color in
hsl, rgb, hsb formats
[Preview] Add new ColorSwatch component to preview a color
System: Fix issue where mergeConfigs mutates the underlying configs
passed to it
CLI: Fix issue where typegen doesn't work when CLI installed globally or
run using npx
General: Fix issue where value change types and components were not re-exported from Ark UI
Layer Style: Fix issue where fill.surface layer style doesn't render the
correct styles
Snippets / Pagination: Fix issue where PaginationPageText did not render
the correct page range
Checkbox: Fix issue where checkmark doesn't show on Safari
Alert: Fix issue where indicator icon is not visible on Safari
ClientOnly: Fix issue where returned the incorrect type leading to TS
error like ClientOnly cannot be used as a JSX component.
Fieldset: Fix issue where anatomy is not exported
Timeline: Refactor variants such that it responds to colorPalette
useBreakpointValue: Fix issue where hook throws error if ssr is false
CLI: Fix issue where adding a snippet with --outdir still creates
snippets a src/components/ui directory.
System: Fix issue where using as prop with logic based components
doesn't work as expected.
DataList: Add support for bold variant.
Toggle: Add Toggle component for toggling between two states. It
composes the Button component.
Button: Tweak the horizontal padding when size is sm.
Snippets
Slider: Add showValue prop to render the text value of the slider.
Select
HiddenSelect to ensure it works in form submissions.SelectRoot component from snippetColorMode: Fix type error when using the latest next-themes.
Provider: Forward props to ColorModeProvider powered by next-themes for
better customization.
width={{ md: "sm" }} to the toast root.InputAddon: Fix issue with input addon not stretched correctly.
CLI
.mjs and mts files were not considered.any when using strictTokens.scrollBehavior=outside doesn't allow scrolling outside the
dialog contentVisit the Migration Guide