Skip to Content

Build faster with Premium Chakra UI Components 💎

Version 2.5.0

v2.5.0

@chakra-ui/react@2.5.0#

Minor Changes#

231c92ef0 Thanks @segunadebayo! - Export FocusLock for easy consumption
12811f264 Thanks @segunadebayo! - - Add hideFrom and hideBelow style props to styled system. This allows more control over when to show/hide elements without requiring explicit display: none every time.
- Remove experimental style props experimental_spaceX and experimental_spaceY

Patch Changes#

Updated dependencies [91130dc89, 3548c6fb7, b078cfc44, 2e07db479, 403513380, 6619ee1a9, 12811f264, db3fa510f]

@chakra-ui/styled-system@2.6.0#

Minor Changes#

12811f264 Thanks @segunadebayo! - - Add hideFrom and hideBelow style props to styled system. This allows more control over when to show/hide elements without requiring explicit display: none every time.
- Remove experimental style props experimental_spaceX and experimental_spaceY

Patch Changes#

#7318 3548c6fb7 Thanks @idootop! - Update the regex of parseGradient to make it works on legacy Firefox browser.

@chakra-ui/system@2.5.0#

Minor Changes#

12811f264 Thanks @segunadebayo! - - Add hideFrom and hideBelow style props to styled system. This allows more control over when to show/hide elements without requiring explicit display: none every time.
- Remove experimental style props experimental_spaceX and experimental_spaceY

Patch Changes#

Updated dependencies [3548c6fb7, 12811f264]

@chakra-ui/accordion@2.1.9#

Patch Changes#

91130dc89 Thanks @segunadebayo! - Fix regression where ExpandedIndex was no longer exported.

Note: this will be removed in future versions.
Updated dependencies

@chakra-ui/avatar@2.2.5#

Patch Changes#

#7276 6619ee1a9 Thanks @LuizCristino! - AvatarGroup: Fixed issue where setting max to 0 lead to unexpected behavior.
Updated dependencies

@chakra-ui/input@2.0.20#

Patch Changes#

#7339 db3fa510f Thanks @TylerAPfledderer! - Add data-group attribute to InputGroup component.

This will allow uniform styling changes for Input, InputElement, and InputAddon to occur when detecting state changes such as :hover and :focus-within.

Example gif below with a left and right InputElement
Updated dependencies

@chakra-ui/layout@2.1.16#

Patch Changes#

Updated dependencies [12811f264]

@chakra-ui/media-query@3.2.12#

Patch Changes#

Updated dependencies [12811f264]

@chakra-ui/menu@2.1.9#

Patch Changes#

#7315 403513380 Thanks @mantariksh! - Fix issue where Menu schedules focus too frequently and leads to infinite rerenders.
Updated dependencies

@chakra-ui/provider@2.1.1#

Patch Changes#

Updated dependencies [12811f264]

@chakra-ui/skeleton@2.0.24#

Patch Changes#

#7300 b078cfc44 Thanks @GKosheev! - Fix regression where SkeletonText component doesn't show its shimmer animation.
Updated dependencies

@chakra-ui/slider@2.0.21#

Patch Changes#

Updated dependencies [ba7be75c2]

@chakra-ui/toast@6.0.0#

Patch Changes#

Updated dependencies [3548c6fb7, 12811f264]

@chakra-ui/react-use-size@2.0.9#

Patch Changes#

#7295 ba7be75c2 Thanks @renovate! - Update dependency @zag-js/element-size to v0.3.1

@chakra-ui/next-js@2.0.1#

Patch Changes#

#7329 b2b5d3545 Thanks @segunadebayo! - Introducing a new Next.js integration package that provides a smoother experience when using Chakra UI in your Next.js 13 apps.

This package provides 2 main features:
- CacheProvider: This component composes the Emotion.js' cache provider with the useServerInsertedHTML hook from next/navigation.
  
  This is necessary to ensure that computed styles are included in the initial server payload (during streaming).
  
  The use client directive is still required to be added to the top of the page-related file. This is a limitation of CSS-in-JS libraries and Emotion for now.
  
  Note: Make sure to include the <head> tag in your layout component otherwise it will not work.
  // app/layout.tsx
  "use client"
  import { CacheProvider } from "@chakra-ui/next-js"
  import { ChakraProvider } from "@chakra-ui/react"
  
  export default function RootLayout({
  children,
  }: {
  children: React.ReactNode,
  }) {
  return (
  <html lang="en">
  <head />
  <body>
  <CacheProvider>
  <ChakraProvider>{children}</ChakraProvider>
  </CacheProvider>
  </body>
  </html>
  )
  }
- Link: This component combines the functionality of the Next.js Link and Chakra UI Link components.
```
// app/page.tsx
"use client"
import { Link } from "@chakra-ui/next-js"

export default function Page() {
  return (
    <Link href="/about" color="blue.400" _hover={{ color: "blue.500" }}>
      About
    </Link>
  )
}
```
Support for next/image coming soon!

@chakra-ui/hooks@2.1.6#

Patch Changes#

2e07db479 Thanks @segunadebayo! - useClipboard: Improve reactivity by ensuring it uses the latest reference of the passed value

@chakra-ui/breakpoint-utils@2.0.8#

Patch Changes#

12811f264 Thanks @segunadebayo! - Add get method to breakpoint return to query details of a specific breakpoint

@chakra-ui/theme-utils@2.0.10#

Patch Changes#

Updated dependencies [3548c6fb7, 12811f264]

@chakra-ui/test-utils@2.0.34#

Patch Changes#

Updated dependencies