article·

March 13, 2025

Refactoring Snippets

SA

Segun Adebayo

@thesegunadebayo

After the launch of Chakra UI v3, a common feedback we received was around snippets. Users felt that snippets were required to make components work, unlike in v2.

This wasn't our intention - snippets were designed to be helpful pre-made component compositions, not mandatory boilerplate. We want to clarify that snippets are entirely optional and simply provide convenient starting points.

For this reason, we've reworked the documentation to always show the complete code that imports directly from @chakra-ui/react.

This way, you can copy and paste the code without having to run any commands.

Replacing Snippets

Here's a quick overview of the changes:

Accordion

Before:

import {
  AccordionItem,
  AccordionItemContent,
  AccordionItemTrigger,
  AccordionRoot,
} from "@/components/ui/accordion"

const Demo = () => {
  return (
    <AccordionRoot>
      <AccordionItem>
        <AccordionItemTrigger>Item</AccordionItemTrigger>
        <AccordionItemContent>Content</AccordionItemContent>
      </AccordionItem>
    </AccordionRoot>
  )
}

After:

import { Accordion } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Accordion.Root>
      <Accordion.Item>
        <Accordion.ItemTrigger>
          Item
          <Accordion.ItemIndicator />
        </Accordion.ItemTrigger>
        <Accordion.ItemContent>
          <Accordion.ItemBody>Content</Accordion.ItemBody>
        </Accordion.ItemContent>
      </Accordion.Item>
    </Accordion.Root>
  )
}

Menu

Before:

import {
  MenuContent,
  MenuItem,
  MenuRoot,
  MenuTrigger,
} from "@/components/ui/menu"

const Demo = () => {
  return (
    <MenuRoot>
      <MenuTrigger asChild>
        <Button>Open</Button>
      </MenuTrigger>
      <MenuContent>
        <MenuItem value="..." />
      </MenuContent>
    </MenuRoot>
  )
}

After:

import { Menu, Portal } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button>Open</Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="..." />
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

Shortcuts

To make your code more concise and easier to write, we've introduced shortcut components for common use cases.

We achieved that by setting the default children prop, or creating sugar components that compose the existing components.

Checkbox

Here's a checkbox example.

This works:

<Checkbox.Control>
  <Checkbox.Indicator />
</Checkbox.Control>

but can be simplified if you don't need to customize the checkbox icons:

<Checkbox.Control />

Rating

The same goes for the Rating component.

This works:

<RatingGroup.Control>
  {Array.from({ length: 5 }).map((_, index) => (
    <RatingGroup.Item key={index} index={index + 1}>
      <RatingGroup.ItemIndicator />
    </RatingGroup.Item>
  ))}
</RatingGroup.Control>

but can be simplified if you don't need to customize the rating icons:

<RatingGroup.Control />

Exceptions

The following components are exceptions to the rule and will continue to use snippets:

• Provider: The provider is the root component that you need to wrap your app
• Toaster: The toaster is a component that is used to display notifications
• PasswordInput: The password input is used to collect passwords
• Tooltip: The tooltip is a component that is used to display a tooltip
• Toggletip: The toggletip looks like a tooltip, but works like a popover

These components will remain as snippets due to the ease of use they provide.

What's Next?

Now that we've refactored the snippets, we're moving on to next phase of Chakra.

• Bump @ark-ui/react to v5 to boost render performance
• Implement Combobox and CommandMenu components
• Build and launch @chakra-ui/charts for data visualization

If you have any feedback, please open an discussion and let us know.