chakra-v3-proposal

cli.md

CLI ideas

chakra compose

This command will allow you import component compositions into your project.

By default, it'll import all component compositions.

## add a specific component
chakra compose add <components>

## list all available component compositions
chakra compose list

Flags

• --outdir - specify the output directory for the component composition. defaults to components/ui
• --format - specify the format of the component composition (js or ts). defaults to tsx
• --dry-run - run the command without writing to the file system
• --diff - compare the current component composition in outdir with the latest version
• --force - force the command to overwrite the existing component composition

chakra typegen

This command will be used to automatically update the types for design tokens.

It requires a path to the design tokens file.

chakra typegen <file-path>

chakra typegen path/to/theme.ts

Flags

• --dry-run - run the command without writing to the file system

chakra theme

This command will scaffold a custom or existing theme file in your project.

# scaffold a new theme file
chakra theme init --outdir path/to/dir

# import an existing theme file
chakra theme import <recipe>

# import all theme files (tokens and recipes)
chakra theme import

# list all available theme files
chakra theme list

idea.md

Closed Component Composition

Overview

In Chakra v3, we'll close some components by default to improve the DX of getting started.

Let's take the avatar component for example.

// this is the closed version
import { Avatar } from '@chakra-ui/react'

// this is the open version
import { Avatar } from '@chakra-ui/react/avatar'

If you don't like the default composition, you can eject the Avatar component and customize it.

chakra eject avatar --outdir=components/ui

Good to know: We'll offer the closed snippets in the docs as well, so users can manually copy and paste.

Here's what the ejected closed component looks like:

// components/ui/avatar.tsx

import { Avatar as ChakraAvatar } from '@chakra-ui/react/avatar'

export interface AvatarProps extends ChakraAvatar.RootProps {
  name?: string
  src?: string
}

const getInitials = (name: string) => {
  return name
    .split(' ')
    .map((n) => n[0])
    .join('')
}

export const Avatar = (props: AvatarProps) => {
  const { name, src, ...rest } = props
  return (
    <ChakraAvatar.Root ref={ref} {...rest}>
      <ChakraAvatar.Fallback>
        {getInitials(name) || <ChakraAvatar.Icon />}
      </ChakraAvatar.Fallback>
      <ChakraAvatar.Image src={src} alt={name} />
    </ChakraAvatar.Root>
  )
}

In the future, we can do the same for the recipes as well.

FAQs

Will this increase the maintenance burden?

No, we'll make it clear that the closed components are just aliases to the open components. It's opinionated and won't be updated to support any custom options. If you need more control, you can always eject the component.

What if I want to have both open and closed components in my project?

You can have both open and closed components in your project. The closed components are just aliases to the open components. You can use them interchangeably.

import { Avatar as ClosedAvatar } from '@chakra-ui/react'
import { Avatar } from '@chakra-ui/react/avatar'

Did you consider alterative ideas?

Another way to acheve this to do something like

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

// this is the closed version
<Avatar />

// this is the open version
<Avatar.Root>

This doesn't work with the Next.js RSC compiler due to the reliance on Object.assign to create such compound version.