This document outlines all proposed changes for the next major release.

Upgrade to Chakra UI v3

The Chakra UI v3 RC is out and it will be released officially very soon. v3 brings a lot of improvements; better performance, improved API’s, many new components and a new theming system similar to PandaCSS (which opens the door to a zero runtime CSS-in-JS version of Saas UI). Most of Saas UI v3 changes will be driven by this upgrade.

Component namespacing

Instead of exporting every single child component, Chakra UI has moved to namespaced exports (dot notation). This greatly improves DX because less imports are needed, and it improves component discoverability.

Example

import { Card, CardHeader, CardBody, CardFooter } from '@chakra-ui/react'

Now becomes

import { Card } from '@chakra-ui/react'

<Card.Root>
  <Card.Body />
</Card.Root>

New components

Chakra v3 includes many new components, most of which are built on top of Ark UI, as well as some other components that were previously only available in Saas UI, like PropertyList, EmptyState and a few others. These components will all be removed from Saas UI v3, and will allow us to focus on more advanced components instead of primitive building blocks.

Atomic components

Chakra UI focus has always been composition, but not all components (eg Checkbox) where following the same principles. In v3 all components are fully atomic and give full composition flexibility.

In return Chakra UI now has a new CLI that can add opinionated composed (or closed) components into projects to allow for faster development, and support creation of custom design system.

asChild in favor of as

The as prop was convenient, but caused performance issues on the type system.

Theming engine

Chakra v3’s theming engine has been greatly improved, with easier to use APIs that give more flexibility and better typesafety.