/chakra-ui-builder

name: chakra-ui-builder
description: >
  Build responsive, accessible UI components and layouts using Chakra UI v3,
  install or configure Chakra UI in new and existing projects, and design
  scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use
  this skill whenever a user asks to build, create, or generate any UI
  component, page, form, dashboard, navbar, card, landing section, pricing
  table, or layout using Chakra UI; wants to add Chakra UI to a project, set up
  ChakraProvider, run CLI snippets, configure color mode, or fix provider
  wrapping; or asks about theming — defining brand colors, design tokens,
  semantic tokens, dark mode values, component recipes, slot recipes, typegen,
  or ejecting the default theme. Trigger on any Chakra UI building, setup, or
  theming or charts request, however casually phrased — "add my brand colors",
  "make a reusable card style", "build a bar chart", "show me a line chart",
  "make me a login form", "build a sidebar", "add Chakra to my app".

Chakra UI Builder

You are building UI with Chakra UI v3 and helping developers set up Chakra UI in their projects. Your job is to produce clean, accessible, responsive code that fits the project — not generic boilerplate. Read the project context first, then build or set up.

---

Step 1 — Read the project context

Check `package.json` if available. Look for:

• Chakra UI version (use v3 patterns by default; only use v2 if explicitly on

v2)

• Framework: Next.js App Router, Pages Router, Vite, plain React
• TypeScript or JavaScript
• Package manager (from lockfile: `pnpm-lock.yaml`, `yarn.lock`, `bun.lock`,

`package-lock.json`)

Also glance at existing components if the user references them, so your code matches the conventions already in use (naming, file structure, import style).

If the requirements are vague or the component is complex enough that choices matter (layout direction, data shape, color palette, number of variants), ask before building rather than generating something that needs to be thrown away.

---

Project setup

If Chakra UI isn't installed yet, complete setup before building.

Install

# npm
npm install @chakra-ui/react @emotion/react

# pnpm
pnpm add @chakra-ui/react @emotion/react

# yarn
yarn add @chakra-ui/react @emotion/react

# bun
bun add @chakra-ui/react @emotion/react

Generate snippets with the CLI

npx @chakra-ui/cli snippet add

With no arguments this adds the recommended set — `provider`, `toaster`, and `tooltip` — and automatically installs required dependencies (including `next-themes`). Use `--all` to add every snippet, or `snippet list` to browse first.

The CLI detects your framework and writes files to the right place:

| Framework | Output path | | --------------------- | -------------------- | | Next.js (with `src/`) | `src/components/ui/` | | Next.js (no `src/`) | `components/ui/` | | Vite / plain React | `src/components/ui/` | | Remix | `app/components/ui/` |

Wire up the Provider

**Next.js App Router** (`app/layout.tsx`):

import { Provider } from "@/components/ui/provider"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  )
}

`suppressHydrationWarning` prevents a mismatch caused by `next-themes` injecting the color-mode class. Do **not** add `"use client"` to `layout.tsx` — the generated provider file already has it.

**Next.js Pages Router** (`pages/_app.tsx`):

import { Provider } from "@/components/ui/provider"

export default function App({ Component, pageProps }) {
  return (
    <Provider>
      <Component {...pageProps} />
    </Provider>
  )
}

**Vite** (`src/main.tsx`):

import { Provider } from "./components/ui/provider"

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Provider>
      <App />
    </Provider>
  </StrictMode>,
)

Manual Provider (if CLI is unavailable)

If the CLI fails, create `components/ui/provider.tsx` manually and install `next-themes` separately:

"use client"
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
import { ThemeProvider } from "next-themes"

export function Provider({ children }: { children: React.ReactNode }) {
  return (
    <ChakraProvider value={defaultSystem}>
      <ThemeProvider attribute="class" disableTransitionOnChange>
        {children}
      </ThemeProvider>
    </ChakraProvider>
  )
}

Common setup issues

• **Unstyled components** — app is not wrapped in `<Provider>`. Check the import

path and that `Provider` wraps the component tree.

• **Hydration mismatch** — add `suppressHydrationWarning` to `<html>` in App

Router.

• **`next-themes` not found** — install it: `npm install next-themes` (only

needed for the manual fallback; the CLI handles it automatically).

• **`extendTheme` not exported** — this is a v2 pattern. Use `createSystem` in

v3.

---

Step 2 — Choose the right layout primitives

Reach for the right Chakra primitive rather than wrapping everything in `Box`:

| Need | Use | | ------------------------ | --------------------------------------- | | Vertical stack of items | `Stack` (default) or `VStack` | | Horizontal row | `HStack` or `Flex` | | CSS Grid | `Grid` + `GridItem` | | Equal-column grid | `SimpleGrid columns={N}` | | Centered page content | `Container maxW="container.lg"` | | Full flexbox control | `Flex` with explicit props | | Semantic section/article | `Box as="section"` / `Box as="article"` |

Avoid deep nesting. If you're three `Box` levels deep with no semantic reason, flatten it. Prefer `gap` ove