[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-chakra-ui-chakra-ui-builder":3,"mdc--i4i004-key":50,"related-repo-chakra-ui-chakra-ui-builder":4324,"related-org-chakra-ui-chakra-ui-builder":4361},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":45,"sourceUrl":48,"mdContent":49},"chakra-ui-builder","build UI components with Chakra UI","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\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"chakra-ui","Chakra UI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fchakra-ui.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"Themes","themes","tag",{"name":17,"slug":18,"type":15},"UI Components","ui-components",{"name":20,"slug":21,"type":15},"Frontend","frontend",{"name":23,"slug":24,"type":15},"Design","design",40503,"https:\u002F\u002Fgithub.com\u002Fchakra-ui\u002Fchakra-ui","2026-07-12T08:48:27.118378",null,3621,[31,32,33,8,34,35,36,37,38,39,40,41,18,42,43,44],"a11y","accessible","ark-ui","component","css-in-js","dark-mode","design-system","react","react-components","reactjs","styled","ui-library","uikit","wai-aria",{"repoUrl":26,"stars":25,"forks":29,"topics":46,"description":47},[31,32,33,8,34,35,36,37,38,39,40,41,18,42,43,44],"Chakra UI is a component system for building SaaS products with speed ⚡️","https:\u002F\u002Fgithub.com\u002Fchakra-ui\u002Fchakra-ui\u002Ftree\u002FHEAD\u002Fskills\u002Fchakra-ui-builder","---\nname: chakra-ui-builder\ndescription: >\n  Build responsive, accessible UI components and layouts using Chakra UI v3,\n  install or configure Chakra UI in new and existing projects, and design\n  scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use\n  this skill whenever a user asks to build, create, or generate any UI\n  component, page, form, dashboard, navbar, card, landing section, pricing\n  table, or layout using Chakra UI; wants to add Chakra UI to a project, set up\n  ChakraProvider, run CLI snippets, configure color mode, or fix provider\n  wrapping; or asks about theming — defining brand colors, design tokens,\n  semantic tokens, dark mode values, component recipes, slot recipes, typegen,\n  or ejecting the default theme. Trigger on any Chakra UI building, setup, or\n  theming or charts request, however casually phrased — \"add my brand colors\",\n  \"make a reusable card style\", \"build a bar chart\", \"show me a line chart\",\n  \"make me a login form\", \"build a sidebar\", \"add Chakra to my app\".\n---\n\n# Chakra UI Builder\n\nYou are building UI with Chakra UI v3 and helping developers set up Chakra UI in\ntheir projects. Your job is to produce clean, accessible, responsive code that\nfits the project — not generic boilerplate. Read the project context first, then\nbuild or set up.\n\n---\n\n## Step 1 — Read the project context\n\nCheck `package.json` if available. Look for:\n\n- Chakra UI version (use v3 patterns by default; only use v2 if explicitly on\n  v2)\n- Framework: Next.js App Router, Pages Router, Vite, plain React\n- TypeScript or JavaScript\n- Package manager (from lockfile: `pnpm-lock.yaml`, `yarn.lock`, `bun.lock`,\n  `package-lock.json`)\n\nAlso glance at existing components if the user references them, so your code\nmatches the conventions already in use (naming, file structure, import style).\n\nIf the requirements are vague or the component is complex enough that choices\nmatter (layout direction, data shape, color palette, number of variants), ask\nbefore building rather than generating something that needs to be thrown away.\n\n---\n\n## Project setup\n\nIf Chakra UI isn't installed yet, complete setup before building.\n\n### Install\n\n```bash\n# npm\nnpm install @chakra-ui\u002Freact @emotion\u002Freact\n\n# pnpm\npnpm add @chakra-ui\u002Freact @emotion\u002Freact\n\n# yarn\nyarn add @chakra-ui\u002Freact @emotion\u002Freact\n\n# bun\nbun add @chakra-ui\u002Freact @emotion\u002Freact\n```\n\n### Generate snippets with the CLI\n\n```bash\nnpx @chakra-ui\u002Fcli snippet add\n```\n\nWith no arguments this adds the recommended set — `provider`, `toaster`, and\n`tooltip` — and automatically installs required dependencies (including\n`next-themes`). Use `--all` to add every snippet, or `snippet list` to browse\nfirst.\n\nThe CLI detects your framework and writes files to the right place:\n\n| Framework             | Output path          |\n| --------------------- | -------------------- |\n| Next.js (with `src\u002F`) | `src\u002Fcomponents\u002Fui\u002F` |\n| Next.js (no `src\u002F`)   | `components\u002Fui\u002F`     |\n| Vite \u002F plain React    | `src\u002Fcomponents\u002Fui\u002F` |\n| Remix                 | `app\u002Fcomponents\u002Fui\u002F` |\n\n### Wire up the Provider\n\n**Next.js App Router** (`app\u002Flayout.tsx`):\n\n```tsx\nimport { Provider } from \"@\u002Fcomponents\u002Fui\u002Fprovider\"\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    \u003Chtml lang=\"en\" suppressHydrationWarning>\n      \u003Cbody>\n        \u003CProvider>{children}\u003C\u002FProvider>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n```\n\n`suppressHydrationWarning` prevents a mismatch caused by `next-themes` injecting\nthe color-mode class. Do **not** add `\"use client\"` to `layout.tsx` — the\ngenerated provider file already has it.\n\n**Next.js Pages Router** (`pages\u002F_app.tsx`):\n\n```tsx\nimport { Provider } from \"@\u002Fcomponents\u002Fui\u002Fprovider\"\n\nexport default function App({ Component, pageProps }) {\n  return (\n    \u003CProvider>\n      \u003CComponent {...pageProps} \u002F>\n    \u003C\u002FProvider>\n  )\n}\n```\n\n**Vite** (`src\u002Fmain.tsx`):\n\n```tsx\nimport { Provider } from \".\u002Fcomponents\u002Fui\u002Fprovider\"\n\ncreateRoot(document.getElementById(\"root\")!).render(\n  \u003CStrictMode>\n    \u003CProvider>\n      \u003CApp \u002F>\n    \u003C\u002FProvider>\n  \u003C\u002FStrictMode>,\n)\n```\n\n### Manual Provider (if CLI is unavailable)\n\nIf the CLI fails, create `components\u002Fui\u002Fprovider.tsx` manually and install\n`next-themes` separately:\n\n```tsx\n\"use client\"\nimport { ChakraProvider, defaultSystem } from \"@chakra-ui\u002Freact\"\nimport { ThemeProvider } from \"next-themes\"\n\nexport function Provider({ children }: { children: React.ReactNode }) {\n  return (\n    \u003CChakraProvider value={defaultSystem}>\n      \u003CThemeProvider attribute=\"class\" disableTransitionOnChange>\n        {children}\n      \u003C\u002FThemeProvider>\n    \u003C\u002FChakraProvider>\n  )\n}\n```\n\n### Common setup issues\n\n- **Unstyled components** — app is not wrapped in `\u003CProvider>`. Check the import\n  path and that `Provider` wraps the component tree.\n- **Hydration mismatch** — add `suppressHydrationWarning` to `\u003Chtml>` in App\n  Router.\n- **`next-themes` not found** — install it: `npm install next-themes` (only\n  needed for the manual fallback; the CLI handles it automatically).\n- **`extendTheme` not exported** — this is a v2 pattern. Use `createSystem` in\n  v3.\n\n---\n\n## Step 2 — Choose the right layout primitives\n\nReach for the right Chakra primitive rather than wrapping everything in `Box`:\n\n| Need                     | Use                                     |\n| ------------------------ | --------------------------------------- |\n| Vertical stack of items  | `Stack` (default) or `VStack`           |\n| Horizontal row           | `HStack` or `Flex`                      |\n| CSS Grid                 | `Grid` + `GridItem`                     |\n| Equal-column grid        | `SimpleGrid columns={N}`                |\n| Centered page content    | `Container maxW=\"container.lg\"`         |\n| Full flexbox control     | `Flex` with explicit props              |\n| Semantic section\u002Farticle | `Box as=\"section\"` \u002F `Box as=\"article\"` |\n\nAvoid deep nesting. If you're three `Box` levels deep with no semantic reason,\nflatten it. Prefer `gap` over margin between siblings.\n\n---\n\n## Step 3 — Use tokens, not raw values\n\nChakra v3 ships semantic tokens that automatically adapt to light\u002Fdark mode.\nPrefer them over hard-coded palette values — they make the component theme-aware\nwithout any extra work.\n\n```tsx\n\u002F\u002F Prefer semantic tokens\n\u003CBox bg=\"bg.subtle\" color=\"fg.default\" borderColor=\"border.subtle\" \u002F>\n\u003CText color=\"fg.muted\" \u002F>\n\u003CBox shadow=\"md\" rounded=\"lg\" \u002F>\n\n\u002F\u002F Use colorPalette for interactive components (not colorScheme)\n\u003CButton colorPalette=\"blue\">Submit\u003C\u002FButton>\n\u003CBadge colorPalette=\"green\">Active\u003C\u002FBadge>\n```\n\nUse raw palette values (`blue.500`, `gray.100`) only when a specific color is\nintentional and should not shift with color mode.\n\n---\n\n## Step 4 — Responsive styles\n\nChakra uses mobile-first breakpoints. Use array or object syntax consistently:\n\n```tsx\n\u002F\u002F Array: [base, sm, md, lg, xl]\n\u003CBox px={[4, 6, 8]} fontSize={[\"sm\", \"md\", \"lg\"]} \u002F>\n\n\u002F\u002F Object: explicit breakpoints\n\u003CSimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={6} \u002F>\n\u003CStack direction={{ base: \"column\", md: \"row\" }} gap={4} \u002F>\n```\n\nEvery layout component should handle at least `base` (mobile) and `md` (desktop)\nbreakpoints unless the request is explicitly desktop-only.\n\n---\n\n## Step 5 — Forms\n\nUse `Field.Root` for all form fields — it wires up label, input, error, and help\ntext correctly:\n\n```tsx\n\u003CField.Root invalid={!!error} required>\n  \u003CField.Label>Email address\u003C\u002FField.Label>\n  \u003CInput type=\"email\" placeholder=\"you@example.com\" \u002F>\n  \u003CField.ErrorText>{error}\u003C\u002FField.ErrorText>\n  \u003CField.HelpText>We'll never share your email.\u003C\u002FField.HelpText>\n\u003C\u002FField.Root>\n```\n\nFor form submission state, use `disabled` (not `isDisabled`) on inputs and\nbuttons. Group related fields in a `Stack gap={4}`.\n\n---\n\n## Step 6 — Accessibility\n\nChakra's built-in components handle most accessibility automatically — don't\noverride it. The things you do need to provide:\n\n- **Icon-only buttons**: always add `aria-label`\n  ```tsx\n  \u003CIconButton aria-label=\"Close dialog\" icon={\u003CCloseIcon \u002F>} \u002F>\n  ```\n- **Images**: always pass meaningful `alt` text (or `alt=\"\"` for decorative)\n- **Form labels**: use `Field.Label` or ensure `htmlFor` matches the input `id`\n- **Interactive custom elements**: if you build something with `onClick` on a\n  `Box`, use `as=\"button\"` or an actual `\u003Cbutton>` so keyboard navigation works\n- **Semantic headings**: use `h1`–`h6` hierarchy; don't skip levels\n- **Color contrast**: don't use light gray text on white backgrounds; rely on\n  semantic tokens which are contrast-tested\n\n---\n\n## Step 7 — Next.js: where to add `\"use client\"`\n\nIn Next.js App Router, Server Components are the default. Add `\"use client\"`\nonly to files that need it — not to entire layouts or pages.\n\nA component needs `\"use client\"` when it:\n\n- Uses React hooks (`useState`, `useEffect`, `useContext`, etc.)\n- Handles browser events (`onClick` with state, form submission, etc.)\n- Uses browser APIs\n\n```tsx\n\u002F\u002F Server Component — no directive needed\nexport default function ProductCard({ name, price }: Props) {\n  return (\n    \u003CBox p={4} borderWidth={1} rounded=\"md\">\n      \u003CText fontWeight=\"bold\">{name}\u003C\u002FText>\n      \u003CText color=\"fg.muted\">{price}\u003C\u002FText>\n    \u003C\u002FBox>\n  )\n}\n\n\u002F\u002F Client Component — needs the directive\n;(\"use client\")\nexport function AddToCartButton({ productId }: { productId: string }) {\n  const [added, setAdded] = useState(false)\n  return (\n    \u003CButton onClick={() => setAdded(true)} colorPalette=\"blue\">\n      {added ? \"Added!\" : \"Add to cart\"}\n    \u003C\u002FButton>\n  )\n}\n```\n\nThe goal is to push interactivity to the leaves — keep as much of the tree as\nServer Components as possible.\n\n---\n\n## Step 8 — When to extract components, use recipes, and customize the theme\n\nExtract a component when the same structure appears more than twice, or when a\npiece is complex enough that naming it makes the parent clearer.\n\nSuggest a **recipe** when a component has meaningful style variants that a\ndeveloper would want to customize. Suggest a **slot recipe** for components with\nmultiple coordinated parts (card with header\u002Fbody\u002Ffooter, stat with\nlabel\u002Fvalue\u002Ficon, etc.).\n\nFor deeper theming work — defining brand color tokens, semantic tokens with dark\nmode values, full recipe\u002Fslot-recipe authoring, typegen, or ejecting the default\ntheme — read `references\u002Ftheming.md` before responding. It covers the complete\n`defineConfig` \u002F `createSystem` API with full examples.\n\nFor any chart request — bar charts, area charts, line charts, pie\u002Fdonut charts,\n`BarList`, `BarSegment`, or anything involving `@chakra-ui\u002Fcharts` — read\n`references\u002Fcharts.md` before responding. It covers the `useChart` hook, all\nthree chart types, Recharts integration, color tokens, and complete runnable\nexamples.\n\nWhen you're unsure which component to use, or the user hasn't specified one,\nread `references\u002Fcomponent-decision-tree.md`. It covers every Chakra component\nwith guidance on when to choose one over a similar alternative.\n\n---\n\n## Output format\n\nProduce:\n\n1. **Complete, runnable code** — correct imports, no placeholders like `TODO` or\n   `...rest of component`\n2. **Proper import statements** — group Chakra imports, then local imports\n3. **Component separation** — split into multiple components\u002Ffiles if the\n   component is complex or contains clearly separable parts\n4. **Responsive styles** — at minimum `base` and `md` breakpoints for layout\n5. **Brief explanation after the code** — 2–4 sentences on the key decisions\n   made (layout approach, accessibility choices, responsive strategy). Skip the\n   explanation if the request was trivial.\n\n```tsx\n\u002F\u002F Good import style\nimport { Box, Button, Field, Stack, Text } from \"@chakra-ui\u002Freact\"\n\u002F\u002F Then local\nimport { SomeLocalComponent } from \".\u002FSomeLocalComponent\"\n```\n\n---\n\n## When to ask first\n\nBuild immediately if the request is clear enough to produce something useful.\nAsk first when:\n\n- The data shape is unknown and it changes the entire structure (e.g., \"build a\n  table\" — how many columns? what data?)\n- There are meaningful design choices the user might care about (layout\n  direction, number of columns, color palette)\n- The user references files or existing components you haven't seen\n\nWhen in doubt, state your assumptions at the top of the response and build —\nit's faster for the user to redirect from something concrete than from nothing.\n",{"data":51,"body":52},{"name":4,"description":6},{"type":53,"children":54},"root",[55,63,69,73,80,94,150,155,160,163,169,174,181,347,353,383,435,440,548,554,573,896,937,953,1133,1149,1354,1360,1380,1700,1706,1805,1808,1814,1826,2000,2020,2023,2029,2034,2353,2373,2376,2382,2387,2722,2742,2745,2751,2764,2983,3011,3014,3020,3025,3237,3240,3251,3263,3275,3322,3931,3936,3939,3945,3950,3969,3996,4040,4053,4056,4062,4067,4149,4281,4284,4290,4295,4313,4318],{"type":56,"tag":57,"props":58,"children":59},"element","h1",{"id":4},[60],{"type":61,"value":62},"text","Chakra UI Builder",{"type":56,"tag":64,"props":65,"children":66},"p",{},[67],{"type":61,"value":68},"You are building UI with Chakra UI v3 and helping developers set up Chakra UI in\ntheir projects. Your job is to produce clean, accessible, responsive code that\nfits the project — not generic boilerplate. Read the project context first, then\nbuild or set up.",{"type":56,"tag":70,"props":71,"children":72},"hr",{},[],{"type":56,"tag":74,"props":75,"children":77},"h2",{"id":76},"step-1-read-the-project-context",[78],{"type":61,"value":79},"Step 1 — Read the project context",{"type":56,"tag":64,"props":81,"children":82},{},[83,85,92],{"type":61,"value":84},"Check ",{"type":56,"tag":86,"props":87,"children":89},"code",{"className":88},[],[90],{"type":61,"value":91},"package.json",{"type":61,"value":93}," if available. Look for:",{"type":56,"tag":95,"props":96,"children":97},"ul",{},[98,104,109,114],{"type":56,"tag":99,"props":100,"children":101},"li",{},[102],{"type":61,"value":103},"Chakra UI version (use v3 patterns by default; only use v2 if explicitly on\nv2)",{"type":56,"tag":99,"props":105,"children":106},{},[107],{"type":61,"value":108},"Framework: Next.js App Router, Pages Router, Vite, plain React",{"type":56,"tag":99,"props":110,"children":111},{},[112],{"type":61,"value":113},"TypeScript or JavaScript",{"type":56,"tag":99,"props":115,"children":116},{},[117,119,125,127,133,134,140,142,148],{"type":61,"value":118},"Package manager (from lockfile: ",{"type":56,"tag":86,"props":120,"children":122},{"className":121},[],[123],{"type":61,"value":124},"pnpm-lock.yaml",{"type":61,"value":126},", ",{"type":56,"tag":86,"props":128,"children":130},{"className":129},[],[131],{"type":61,"value":132},"yarn.lock",{"type":61,"value":126},{"type":56,"tag":86,"props":135,"children":137},{"className":136},[],[138],{"type":61,"value":139},"bun.lock",{"type":61,"value":141},",\n",{"type":56,"tag":86,"props":143,"children":145},{"className":144},[],[146],{"type":61,"value":147},"package-lock.json",{"type":61,"value":149},")",{"type":56,"tag":64,"props":151,"children":152},{},[153],{"type":61,"value":154},"Also glance at existing components if the user references them, so your code\nmatches the conventions already in use (naming, file structure, import style).",{"type":56,"tag":64,"props":156,"children":157},{},[158],{"type":61,"value":159},"If the requirements are vague or the component is complex enough that choices\nmatter (layout direction, data shape, color palette, number of variants), ask\nbefore building rather than generating something that needs to be thrown away.",{"type":56,"tag":70,"props":161,"children":162},{},[],{"type":56,"tag":74,"props":164,"children":166},{"id":165},"project-setup",[167],{"type":61,"value":168},"Project setup",{"type":56,"tag":64,"props":170,"children":171},{},[172],{"type":61,"value":173},"If Chakra UI isn't installed yet, complete setup before building.",{"type":56,"tag":175,"props":176,"children":178},"h3",{"id":177},"install",[179],{"type":61,"value":180},"Install",{"type":56,"tag":182,"props":183,"children":188},"pre",{"className":184,"code":185,"language":186,"meta":187,"style":187},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# npm\nnpm install @chakra-ui\u002Freact @emotion\u002Freact\n\n# pnpm\npnpm add @chakra-ui\u002Freact @emotion\u002Freact\n\n# yarn\nyarn add @chakra-ui\u002Freact @emotion\u002Freact\n\n# bun\nbun add @chakra-ui\u002Freact @emotion\u002Freact\n","bash","",[189],{"type":56,"tag":86,"props":190,"children":191},{"__ignoreMap":187},[192,204,230,240,249,271,279,288,309,317,326],{"type":56,"tag":193,"props":194,"children":197},"span",{"class":195,"line":196},"line",1,[198],{"type":56,"tag":193,"props":199,"children":201},{"style":200},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[202],{"type":61,"value":203},"# npm\n",{"type":56,"tag":193,"props":205,"children":207},{"class":195,"line":206},2,[208,214,220,225],{"type":56,"tag":193,"props":209,"children":211},{"style":210},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[212],{"type":61,"value":213},"npm",{"type":56,"tag":193,"props":215,"children":217},{"style":216},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[218],{"type":61,"value":219}," install",{"type":56,"tag":193,"props":221,"children":222},{"style":216},[223],{"type":61,"value":224}," @chakra-ui\u002Freact",{"type":56,"tag":193,"props":226,"children":227},{"style":216},[228],{"type":61,"value":229}," @emotion\u002Freact\n",{"type":56,"tag":193,"props":231,"children":233},{"class":195,"line":232},3,[234],{"type":56,"tag":193,"props":235,"children":237},{"emptyLinePlaceholder":236},true,[238],{"type":61,"value":239},"\n",{"type":56,"tag":193,"props":241,"children":243},{"class":195,"line":242},4,[244],{"type":56,"tag":193,"props":245,"children":246},{"style":200},[247],{"type":61,"value":248},"# pnpm\n",{"type":56,"tag":193,"props":250,"children":252},{"class":195,"line":251},5,[253,258,263,267],{"type":56,"tag":193,"props":254,"children":255},{"style":210},[256],{"type":61,"value":257},"pnpm",{"type":56,"tag":193,"props":259,"children":260},{"style":216},[261],{"type":61,"value":262}," add",{"type":56,"tag":193,"props":264,"children":265},{"style":216},[266],{"type":61,"value":224},{"type":56,"tag":193,"props":268,"children":269},{"style":216},[270],{"type":61,"value":229},{"type":56,"tag":193,"props":272,"children":274},{"class":195,"line":273},6,[275],{"type":56,"tag":193,"props":276,"children":277},{"emptyLinePlaceholder":236},[278],{"type":61,"value":239},{"type":56,"tag":193,"props":280,"children":282},{"class":195,"line":281},7,[283],{"type":56,"tag":193,"props":284,"children":285},{"style":200},[286],{"type":61,"value":287},"# yarn\n",{"type":56,"tag":193,"props":289,"children":291},{"class":195,"line":290},8,[292,297,301,305],{"type":56,"tag":193,"props":293,"children":294},{"style":210},[295],{"type":61,"value":296},"yarn",{"type":56,"tag":193,"props":298,"children":299},{"style":216},[300],{"type":61,"value":262},{"type":56,"tag":193,"props":302,"children":303},{"style":216},[304],{"type":61,"value":224},{"type":56,"tag":193,"props":306,"children":307},{"style":216},[308],{"type":61,"value":229},{"type":56,"tag":193,"props":310,"children":312},{"class":195,"line":311},9,[313],{"type":56,"tag":193,"props":314,"children":315},{"emptyLinePlaceholder":236},[316],{"type":61,"value":239},{"type":56,"tag":193,"props":318,"children":320},{"class":195,"line":319},10,[321],{"type":56,"tag":193,"props":322,"children":323},{"style":200},[324],{"type":61,"value":325},"# bun\n",{"type":56,"tag":193,"props":327,"children":329},{"class":195,"line":328},11,[330,335,339,343],{"type":56,"tag":193,"props":331,"children":332},{"style":210},[333],{"type":61,"value":334},"bun",{"type":56,"tag":193,"props":336,"children":337},{"style":216},[338],{"type":61,"value":262},{"type":56,"tag":193,"props":340,"children":341},{"style":216},[342],{"type":61,"value":224},{"type":56,"tag":193,"props":344,"children":345},{"style":216},[346],{"type":61,"value":229},{"type":56,"tag":175,"props":348,"children":350},{"id":349},"generate-snippets-with-the-cli",[351],{"type":61,"value":352},"Generate snippets with the CLI",{"type":56,"tag":182,"props":354,"children":356},{"className":184,"code":355,"language":186,"meta":187,"style":187},"npx @chakra-ui\u002Fcli snippet add\n",[357],{"type":56,"tag":86,"props":358,"children":359},{"__ignoreMap":187},[360],{"type":56,"tag":193,"props":361,"children":362},{"class":195,"line":196},[363,368,373,378],{"type":56,"tag":193,"props":364,"children":365},{"style":210},[366],{"type":61,"value":367},"npx",{"type":56,"tag":193,"props":369,"children":370},{"style":216},[371],{"type":61,"value":372}," @chakra-ui\u002Fcli",{"type":56,"tag":193,"props":374,"children":375},{"style":216},[376],{"type":61,"value":377}," snippet",{"type":56,"tag":193,"props":379,"children":380},{"style":216},[381],{"type":61,"value":382}," add\n",{"type":56,"tag":64,"props":384,"children":385},{},[386,388,394,395,401,403,409,411,417,419,425,427,433],{"type":61,"value":387},"With no arguments this adds the recommended set — ",{"type":56,"tag":86,"props":389,"children":391},{"className":390},[],[392],{"type":61,"value":393},"provider",{"type":61,"value":126},{"type":56,"tag":86,"props":396,"children":398},{"className":397},[],[399],{"type":61,"value":400},"toaster",{"type":61,"value":402},", and\n",{"type":56,"tag":86,"props":404,"children":406},{"className":405},[],[407],{"type":61,"value":408},"tooltip",{"type":61,"value":410}," — and automatically installs required dependencies (including\n",{"type":56,"tag":86,"props":412,"children":414},{"className":413},[],[415],{"type":61,"value":416},"next-themes",{"type":61,"value":418},"). Use ",{"type":56,"tag":86,"props":420,"children":422},{"className":421},[],[423],{"type":61,"value":424},"--all",{"type":61,"value":426}," to add every snippet, or ",{"type":56,"tag":86,"props":428,"children":430},{"className":429},[],[431],{"type":61,"value":432},"snippet list",{"type":61,"value":434}," to browse\nfirst.",{"type":56,"tag":64,"props":436,"children":437},{},[438],{"type":61,"value":439},"The CLI detects your framework and writes files to the right place:",{"type":56,"tag":441,"props":442,"children":443},"table",{},[444,463],{"type":56,"tag":445,"props":446,"children":447},"thead",{},[448],{"type":56,"tag":449,"props":450,"children":451},"tr",{},[452,458],{"type":56,"tag":453,"props":454,"children":455},"th",{},[456],{"type":61,"value":457},"Framework",{"type":56,"tag":453,"props":459,"children":460},{},[461],{"type":61,"value":462},"Output path",{"type":56,"tag":464,"props":465,"children":466},"tbody",{},[467,492,515,531],{"type":56,"tag":449,"props":468,"children":469},{},[470,483],{"type":56,"tag":471,"props":472,"children":473},"td",{},[474,476,482],{"type":61,"value":475},"Next.js (with ",{"type":56,"tag":86,"props":477,"children":479},{"className":478},[],[480],{"type":61,"value":481},"src\u002F",{"type":61,"value":149},{"type":56,"tag":471,"props":484,"children":485},{},[486],{"type":56,"tag":86,"props":487,"children":489},{"className":488},[],[490],{"type":61,"value":491},"src\u002Fcomponents\u002Fui\u002F",{"type":56,"tag":449,"props":493,"children":494},{},[495,506],{"type":56,"tag":471,"props":496,"children":497},{},[498,500,505],{"type":61,"value":499},"Next.js (no ",{"type":56,"tag":86,"props":501,"children":503},{"className":502},[],[504],{"type":61,"value":481},{"type":61,"value":149},{"type":56,"tag":471,"props":507,"children":508},{},[509],{"type":56,"tag":86,"props":510,"children":512},{"className":511},[],[513],{"type":61,"value":514},"components\u002Fui\u002F",{"type":56,"tag":449,"props":516,"children":517},{},[518,523],{"type":56,"tag":471,"props":519,"children":520},{},[521],{"type":61,"value":522},"Vite \u002F plain React",{"type":56,"tag":471,"props":524,"children":525},{},[526],{"type":56,"tag":86,"props":527,"children":529},{"className":528},[],[530],{"type":61,"value":491},{"type":56,"tag":449,"props":532,"children":533},{},[534,539],{"type":56,"tag":471,"props":535,"children":536},{},[537],{"type":61,"value":538},"Remix",{"type":56,"tag":471,"props":540,"children":541},{},[542],{"type":56,"tag":86,"props":543,"children":545},{"className":544},[],[546],{"type":61,"value":547},"app\u002Fcomponents\u002Fui\u002F",{"type":56,"tag":175,"props":549,"children":551},{"id":550},"wire-up-the-provider",[552],{"type":61,"value":553},"Wire up the Provider",{"type":56,"tag":64,"props":555,"children":556},{},[557,563,565,571],{"type":56,"tag":558,"props":559,"children":560},"strong",{},[561],{"type":61,"value":562},"Next.js App Router",{"type":61,"value":564}," (",{"type":56,"tag":86,"props":566,"children":568},{"className":567},[],[569],{"type":61,"value":570},"app\u002Flayout.tsx",{"type":61,"value":572},"):",{"type":56,"tag":182,"props":574,"children":578},{"className":575,"code":576,"language":577,"meta":187,"style":187},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { Provider } from \"@\u002Fcomponents\u002Fui\u002Fprovider\"\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    \u003Chtml lang=\"en\" suppressHydrationWarning>\n      \u003Cbody>\n        \u003CProvider>{children}\u003C\u002FProvider>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n","tsx",[579],{"type":56,"tag":86,"props":580,"children":581},{"__ignoreMap":187},[582,628,635,665,678,691,719,731,744,791,808,844,861,878,887],{"type":56,"tag":193,"props":583,"children":584},{"class":195,"line":196},[585,591,597,603,608,613,618,623],{"type":56,"tag":193,"props":586,"children":588},{"style":587},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[589],{"type":61,"value":590},"import",{"type":56,"tag":193,"props":592,"children":594},{"style":593},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[595],{"type":61,"value":596}," {",{"type":56,"tag":193,"props":598,"children":600},{"style":599},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[601],{"type":61,"value":602}," Provider",{"type":56,"tag":193,"props":604,"children":605},{"style":593},[606],{"type":61,"value":607}," }",{"type":56,"tag":193,"props":609,"children":610},{"style":587},[611],{"type":61,"value":612}," from",{"type":56,"tag":193,"props":614,"children":615},{"style":593},[616],{"type":61,"value":617}," \"",{"type":56,"tag":193,"props":619,"children":620},{"style":216},[621],{"type":61,"value":622},"@\u002Fcomponents\u002Fui\u002Fprovider",{"type":56,"tag":193,"props":624,"children":625},{"style":593},[626],{"type":61,"value":627},"\"\n",{"type":56,"tag":193,"props":629,"children":630},{"class":195,"line":206},[631],{"type":56,"tag":193,"props":632,"children":633},{"emptyLinePlaceholder":236},[634],{"type":61,"value":239},{"type":56,"tag":193,"props":636,"children":637},{"class":195,"line":232},[638,643,648,654,660],{"type":56,"tag":193,"props":639,"children":640},{"style":587},[641],{"type":61,"value":642},"export",{"type":56,"tag":193,"props":644,"children":645},{"style":587},[646],{"type":61,"value":647}," default",{"type":56,"tag":193,"props":649,"children":651},{"style":650},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[652],{"type":61,"value":653}," function",{"type":56,"tag":193,"props":655,"children":657},{"style":656},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[658],{"type":61,"value":659}," RootLayout",{"type":56,"tag":193,"props":661,"children":662},{"style":593},[663],{"type":61,"value":664},"({\n",{"type":56,"tag":193,"props":666,"children":667},{"class":195,"line":242},[668,674],{"type":56,"tag":193,"props":669,"children":671},{"style":670},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[672],{"type":61,"value":673},"  children",{"type":56,"tag":193,"props":675,"children":676},{"style":593},[677],{"type":61,"value":141},{"type":56,"tag":193,"props":679,"children":680},{"class":195,"line":251},[681,686],{"type":56,"tag":193,"props":682,"children":683},{"style":593},[684],{"type":61,"value":685},"}:",{"type":56,"tag":193,"props":687,"children":688},{"style":593},[689],{"type":61,"value":690}," {\n",{"type":56,"tag":193,"props":692,"children":693},{"class":195,"line":273},[694,699,704,709,714],{"type":56,"tag":193,"props":695,"children":697},{"style":696},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[698],{"type":61,"value":673},{"type":56,"tag":193,"props":700,"children":701},{"style":593},[702],{"type":61,"value":703},":",{"type":56,"tag":193,"props":705,"children":706},{"style":210},[707],{"type":61,"value":708}," React",{"type":56,"tag":193,"props":710,"children":711},{"style":593},[712],{"type":61,"value":713},".",{"type":56,"tag":193,"props":715,"children":716},{"style":210},[717],{"type":61,"value":718},"ReactNode\n",{"type":56,"tag":193,"props":720,"children":721},{"class":195,"line":281},[722,727],{"type":56,"tag":193,"props":723,"children":724},{"style":593},[725],{"type":61,"value":726},"})",{"type":56,"tag":193,"props":728,"children":729},{"style":593},[730],{"type":61,"value":690},{"type":56,"tag":193,"props":732,"children":733},{"class":195,"line":290},[734,739],{"type":56,"tag":193,"props":735,"children":736},{"style":587},[737],{"type":61,"value":738},"  return",{"type":56,"tag":193,"props":740,"children":741},{"style":696},[742],{"type":61,"value":743}," (\n",{"type":56,"tag":193,"props":745,"children":746},{"class":195,"line":311},[747,752,757,762,767,772,777,781,786],{"type":56,"tag":193,"props":748,"children":749},{"style":593},[750],{"type":61,"value":751},"    \u003C",{"type":56,"tag":193,"props":753,"children":754},{"style":696},[755],{"type":61,"value":756},"html",{"type":56,"tag":193,"props":758,"children":759},{"style":650},[760],{"type":61,"value":761}," lang",{"type":56,"tag":193,"props":763,"children":764},{"style":593},[765],{"type":61,"value":766},"=",{"type":56,"tag":193,"props":768,"children":769},{"style":593},[770],{"type":61,"value":771},"\"",{"type":56,"tag":193,"props":773,"children":774},{"style":216},[775],{"type":61,"value":776},"en",{"type":56,"tag":193,"props":778,"children":779},{"style":593},[780],{"type":61,"value":771},{"type":56,"tag":193,"props":782,"children":783},{"style":650},[784],{"type":61,"value":785}," suppressHydrationWarning",{"type":56,"tag":193,"props":787,"children":788},{"style":593},[789],{"type":61,"value":790},">\n",{"type":56,"tag":193,"props":792,"children":793},{"class":195,"line":319},[794,799,804],{"type":56,"tag":193,"props":795,"children":796},{"style":593},[797],{"type":61,"value":798},"      \u003C",{"type":56,"tag":193,"props":800,"children":801},{"style":696},[802],{"type":61,"value":803},"body",{"type":56,"tag":193,"props":805,"children":806},{"style":593},[807],{"type":61,"value":790},{"type":56,"tag":193,"props":809,"children":810},{"class":195,"line":328},[811,816,821,826,831,836,840],{"type":56,"tag":193,"props":812,"children":813},{"style":593},[814],{"type":61,"value":815},"        \u003C",{"type":56,"tag":193,"props":817,"children":818},{"style":210},[819],{"type":61,"value":820},"Provider",{"type":56,"tag":193,"props":822,"children":823},{"style":593},[824],{"type":61,"value":825},">{",{"type":56,"tag":193,"props":827,"children":828},{"style":599},[829],{"type":61,"value":830},"children",{"type":56,"tag":193,"props":832,"children":833},{"style":593},[834],{"type":61,"value":835},"}\u003C\u002F",{"type":56,"tag":193,"props":837,"children":838},{"style":210},[839],{"type":61,"value":820},{"type":56,"tag":193,"props":841,"children":842},{"style":593},[843],{"type":61,"value":790},{"type":56,"tag":193,"props":845,"children":847},{"class":195,"line":846},12,[848,853,857],{"type":56,"tag":193,"props":849,"children":850},{"style":593},[851],{"type":61,"value":852},"      \u003C\u002F",{"type":56,"tag":193,"props":854,"children":855},{"style":696},[856],{"type":61,"value":803},{"type":56,"tag":193,"props":858,"children":859},{"style":593},[860],{"type":61,"value":790},{"type":56,"tag":193,"props":862,"children":864},{"class":195,"line":863},13,[865,870,874],{"type":56,"tag":193,"props":866,"children":867},{"style":593},[868],{"type":61,"value":869},"    \u003C\u002F",{"type":56,"tag":193,"props":871,"children":872},{"style":696},[873],{"type":61,"value":756},{"type":56,"tag":193,"props":875,"children":876},{"style":593},[877],{"type":61,"value":790},{"type":56,"tag":193,"props":879,"children":881},{"class":195,"line":880},14,[882],{"type":56,"tag":193,"props":883,"children":884},{"style":696},[885],{"type":61,"value":886},"  )\n",{"type":56,"tag":193,"props":888,"children":890},{"class":195,"line":889},15,[891],{"type":56,"tag":193,"props":892,"children":893},{"style":593},[894],{"type":61,"value":895},"}\n",{"type":56,"tag":64,"props":897,"children":898},{},[899,905,907,912,914,919,921,927,929,935],{"type":56,"tag":86,"props":900,"children":902},{"className":901},[],[903],{"type":61,"value":904},"suppressHydrationWarning",{"type":61,"value":906}," prevents a mismatch caused by ",{"type":56,"tag":86,"props":908,"children":910},{"className":909},[],[911],{"type":61,"value":416},{"type":61,"value":913}," injecting\nthe color-mode class. Do ",{"type":56,"tag":558,"props":915,"children":916},{},[917],{"type":61,"value":918},"not",{"type":61,"value":920}," add ",{"type":56,"tag":86,"props":922,"children":924},{"className":923},[],[925],{"type":61,"value":926},"\"use client\"",{"type":61,"value":928}," to ",{"type":56,"tag":86,"props":930,"children":932},{"className":931},[],[933],{"type":61,"value":934},"layout.tsx",{"type":61,"value":936}," — the\ngenerated provider file already has it.",{"type":56,"tag":64,"props":938,"children":939},{},[940,945,946,952],{"type":56,"tag":558,"props":941,"children":942},{},[943],{"type":61,"value":944},"Next.js Pages Router",{"type":61,"value":564},{"type":56,"tag":86,"props":947,"children":949},{"className":948},[],[950],{"type":61,"value":951},"pages\u002F_app.tsx",{"type":61,"value":572},{"type":56,"tag":182,"props":954,"children":956},{"className":575,"code":955,"language":577,"meta":187,"style":187},"import { Provider } from \"@\u002Fcomponents\u002Fui\u002Fprovider\"\n\nexport default function App({ Component, pageProps }) {\n  return (\n    \u003CProvider>\n      \u003CComponent {...pageProps} \u002F>\n    \u003C\u002FProvider>\n  )\n}\n",[957],{"type":56,"tag":86,"props":958,"children":959},{"__ignoreMap":187},[960,995,1002,1051,1062,1077,1104,1119,1126],{"type":56,"tag":193,"props":961,"children":962},{"class":195,"line":196},[963,967,971,975,979,983,987,991],{"type":56,"tag":193,"props":964,"children":965},{"style":587},[966],{"type":61,"value":590},{"type":56,"tag":193,"props":968,"children":969},{"style":593},[970],{"type":61,"value":596},{"type":56,"tag":193,"props":972,"children":973},{"style":599},[974],{"type":61,"value":602},{"type":56,"tag":193,"props":976,"children":977},{"style":593},[978],{"type":61,"value":607},{"type":56,"tag":193,"props":980,"children":981},{"style":587},[982],{"type":61,"value":612},{"type":56,"tag":193,"props":984,"children":985},{"style":593},[986],{"type":61,"value":617},{"type":56,"tag":193,"props":988,"children":989},{"style":216},[990],{"type":61,"value":622},{"type":56,"tag":193,"props":992,"children":993},{"style":593},[994],{"type":61,"value":627},{"type":56,"tag":193,"props":996,"children":997},{"class":195,"line":206},[998],{"type":56,"tag":193,"props":999,"children":1000},{"emptyLinePlaceholder":236},[1001],{"type":61,"value":239},{"type":56,"tag":193,"props":1003,"children":1004},{"class":195,"line":232},[1005,1009,1013,1017,1022,1027,1032,1037,1042,1047],{"type":56,"tag":193,"props":1006,"children":1007},{"style":587},[1008],{"type":61,"value":642},{"type":56,"tag":193,"props":1010,"children":1011},{"style":587},[1012],{"type":61,"value":647},{"type":56,"tag":193,"props":1014,"children":1015},{"style":650},[1016],{"type":61,"value":653},{"type":56,"tag":193,"props":1018,"children":1019},{"style":656},[1020],{"type":61,"value":1021}," App",{"type":56,"tag":193,"props":1023,"children":1024},{"style":593},[1025],{"type":61,"value":1026},"({",{"type":56,"tag":193,"props":1028,"children":1029},{"style":670},[1030],{"type":61,"value":1031}," Component",{"type":56,"tag":193,"props":1033,"children":1034},{"style":593},[1035],{"type":61,"value":1036},",",{"type":56,"tag":193,"props":1038,"children":1039},{"style":670},[1040],{"type":61,"value":1041}," pageProps",{"type":56,"tag":193,"props":1043,"children":1044},{"style":593},[1045],{"type":61,"value":1046}," })",{"type":56,"tag":193,"props":1048,"children":1049},{"style":593},[1050],{"type":61,"value":690},{"type":56,"tag":193,"props":1052,"children":1053},{"class":195,"line":242},[1054,1058],{"type":56,"tag":193,"props":1055,"children":1056},{"style":587},[1057],{"type":61,"value":738},{"type":56,"tag":193,"props":1059,"children":1060},{"style":696},[1061],{"type":61,"value":743},{"type":56,"tag":193,"props":1063,"children":1064},{"class":195,"line":251},[1065,1069,1073],{"type":56,"tag":193,"props":1066,"children":1067},{"style":593},[1068],{"type":61,"value":751},{"type":56,"tag":193,"props":1070,"children":1071},{"style":210},[1072],{"type":61,"value":820},{"type":56,"tag":193,"props":1074,"children":1075},{"style":593},[1076],{"type":61,"value":790},{"type":56,"tag":193,"props":1078,"children":1079},{"class":195,"line":273},[1080,1084,1089,1094,1099],{"type":56,"tag":193,"props":1081,"children":1082},{"style":593},[1083],{"type":61,"value":798},{"type":56,"tag":193,"props":1085,"children":1086},{"style":210},[1087],{"type":61,"value":1088},"Component",{"type":56,"tag":193,"props":1090,"children":1091},{"style":593},[1092],{"type":61,"value":1093}," {...",{"type":56,"tag":193,"props":1095,"children":1096},{"style":599},[1097],{"type":61,"value":1098},"pageProps",{"type":56,"tag":193,"props":1100,"children":1101},{"style":593},[1102],{"type":61,"value":1103},"} \u002F>\n",{"type":56,"tag":193,"props":1105,"children":1106},{"class":195,"line":281},[1107,1111,1115],{"type":56,"tag":193,"props":1108,"children":1109},{"style":593},[1110],{"type":61,"value":869},{"type":56,"tag":193,"props":1112,"children":1113},{"style":210},[1114],{"type":61,"value":820},{"type":56,"tag":193,"props":1116,"children":1117},{"style":593},[1118],{"type":61,"value":790},{"type":56,"tag":193,"props":1120,"children":1121},{"class":195,"line":290},[1122],{"type":56,"tag":193,"props":1123,"children":1124},{"style":696},[1125],{"type":61,"value":886},{"type":56,"tag":193,"props":1127,"children":1128},{"class":195,"line":311},[1129],{"type":56,"tag":193,"props":1130,"children":1131},{"style":593},[1132],{"type":61,"value":895},{"type":56,"tag":64,"props":1134,"children":1135},{},[1136,1141,1142,1148],{"type":56,"tag":558,"props":1137,"children":1138},{},[1139],{"type":61,"value":1140},"Vite",{"type":61,"value":564},{"type":56,"tag":86,"props":1143,"children":1145},{"className":1144},[],[1146],{"type":61,"value":1147},"src\u002Fmain.tsx",{"type":61,"value":572},{"type":56,"tag":182,"props":1150,"children":1152},{"className":575,"code":1151,"language":577,"meta":187,"style":187},"import { Provider } from \".\u002Fcomponents\u002Fui\u002Fprovider\"\n\ncreateRoot(document.getElementById(\"root\")!).render(\n  \u003CStrictMode>\n    \u003CProvider>\n      \u003CApp \u002F>\n    \u003C\u002FProvider>\n  \u003C\u002FStrictMode>,\n)\n",[1153],{"type":56,"tag":86,"props":1154,"children":1155},{"__ignoreMap":187},[1156,1192,1199,1265,1282,1297,1314,1329,1346],{"type":56,"tag":193,"props":1157,"children":1158},{"class":195,"line":196},[1159,1163,1167,1171,1175,1179,1183,1188],{"type":56,"tag":193,"props":1160,"children":1161},{"style":587},[1162],{"type":61,"value":590},{"type":56,"tag":193,"props":1164,"children":1165},{"style":593},[1166],{"type":61,"value":596},{"type":56,"tag":193,"props":1168,"children":1169},{"style":599},[1170],{"type":61,"value":602},{"type":56,"tag":193,"props":1172,"children":1173},{"style":593},[1174],{"type":61,"value":607},{"type":56,"tag":193,"props":1176,"children":1177},{"style":587},[1178],{"type":61,"value":612},{"type":56,"tag":193,"props":1180,"children":1181},{"style":593},[1182],{"type":61,"value":617},{"type":56,"tag":193,"props":1184,"children":1185},{"style":216},[1186],{"type":61,"value":1187},".\u002Fcomponents\u002Fui\u002Fprovider",{"type":56,"tag":193,"props":1189,"children":1190},{"style":593},[1191],{"type":61,"value":627},{"type":56,"tag":193,"props":1193,"children":1194},{"class":195,"line":206},[1195],{"type":56,"tag":193,"props":1196,"children":1197},{"emptyLinePlaceholder":236},[1198],{"type":61,"value":239},{"type":56,"tag":193,"props":1200,"children":1201},{"class":195,"line":232},[1202,1207,1212,1216,1221,1226,1230,1234,1238,1242,1247,1251,1255,1260],{"type":56,"tag":193,"props":1203,"children":1204},{"style":656},[1205],{"type":61,"value":1206},"createRoot",{"type":56,"tag":193,"props":1208,"children":1209},{"style":599},[1210],{"type":61,"value":1211},"(document",{"type":56,"tag":193,"props":1213,"children":1214},{"style":593},[1215],{"type":61,"value":713},{"type":56,"tag":193,"props":1217,"children":1218},{"style":656},[1219],{"type":61,"value":1220},"getElementById",{"type":56,"tag":193,"props":1222,"children":1223},{"style":599},[1224],{"type":61,"value":1225},"(",{"type":56,"tag":193,"props":1227,"children":1228},{"style":593},[1229],{"type":61,"value":771},{"type":56,"tag":193,"props":1231,"children":1232},{"style":216},[1233],{"type":61,"value":53},{"type":56,"tag":193,"props":1235,"children":1236},{"style":593},[1237],{"type":61,"value":771},{"type":56,"tag":193,"props":1239,"children":1240},{"style":599},[1241],{"type":61,"value":149},{"type":56,"tag":193,"props":1243,"children":1244},{"style":593},[1245],{"type":61,"value":1246},"!",{"type":56,"tag":193,"props":1248,"children":1249},{"style":599},[1250],{"type":61,"value":149},{"type":56,"tag":193,"props":1252,"children":1253},{"style":593},[1254],{"type":61,"value":713},{"type":56,"tag":193,"props":1256,"children":1257},{"style":656},[1258],{"type":61,"value":1259},"render",{"type":56,"tag":193,"props":1261,"children":1262},{"style":599},[1263],{"type":61,"value":1264},"(\n",{"type":56,"tag":193,"props":1266,"children":1267},{"class":195,"line":242},[1268,1273,1278],{"type":56,"tag":193,"props":1269,"children":1270},{"style":593},[1271],{"type":61,"value":1272},"  \u003C",{"type":56,"tag":193,"props":1274,"children":1275},{"style":210},[1276],{"type":61,"value":1277},"StrictMode",{"type":56,"tag":193,"props":1279,"children":1280},{"style":593},[1281],{"type":61,"value":790},{"type":56,"tag":193,"props":1283,"children":1284},{"class":195,"line":251},[1285,1289,1293],{"type":56,"tag":193,"props":1286,"children":1287},{"style":593},[1288],{"type":61,"value":751},{"type":56,"tag":193,"props":1290,"children":1291},{"style":210},[1292],{"type":61,"value":820},{"type":56,"tag":193,"props":1294,"children":1295},{"style":593},[1296],{"type":61,"value":790},{"type":56,"tag":193,"props":1298,"children":1299},{"class":195,"line":273},[1300,1304,1309],{"type":56,"tag":193,"props":1301,"children":1302},{"style":593},[1303],{"type":61,"value":798},{"type":56,"tag":193,"props":1305,"children":1306},{"style":210},[1307],{"type":61,"value":1308},"App",{"type":56,"tag":193,"props":1310,"children":1311},{"style":593},[1312],{"type":61,"value":1313}," \u002F>\n",{"type":56,"tag":193,"props":1315,"children":1316},{"class":195,"line":281},[1317,1321,1325],{"type":56,"tag":193,"props":1318,"children":1319},{"style":593},[1320],{"type":61,"value":869},{"type":56,"tag":193,"props":1322,"children":1323},{"style":210},[1324],{"type":61,"value":820},{"type":56,"tag":193,"props":1326,"children":1327},{"style":593},[1328],{"type":61,"value":790},{"type":56,"tag":193,"props":1330,"children":1331},{"class":195,"line":290},[1332,1337,1341],{"type":56,"tag":193,"props":1333,"children":1334},{"style":593},[1335],{"type":61,"value":1336},"  \u003C\u002F",{"type":56,"tag":193,"props":1338,"children":1339},{"style":210},[1340],{"type":61,"value":1277},{"type":56,"tag":193,"props":1342,"children":1343},{"style":593},[1344],{"type":61,"value":1345},">,\n",{"type":56,"tag":193,"props":1347,"children":1348},{"class":195,"line":311},[1349],{"type":56,"tag":193,"props":1350,"children":1351},{"style":599},[1352],{"type":61,"value":1353},")\n",{"type":56,"tag":175,"props":1355,"children":1357},{"id":1356},"manual-provider-if-cli-is-unavailable",[1358],{"type":61,"value":1359},"Manual Provider (if CLI is unavailable)",{"type":56,"tag":64,"props":1361,"children":1362},{},[1363,1365,1371,1373,1378],{"type":61,"value":1364},"If the CLI fails, create ",{"type":56,"tag":86,"props":1366,"children":1368},{"className":1367},[],[1369],{"type":61,"value":1370},"components\u002Fui\u002Fprovider.tsx",{"type":61,"value":1372}," manually and install\n",{"type":56,"tag":86,"props":1374,"children":1376},{"className":1375},[],[1377],{"type":61,"value":416},{"type":61,"value":1379}," separately:",{"type":56,"tag":182,"props":1381,"children":1383},{"className":575,"code":1382,"language":577,"meta":187,"style":187},"\"use client\"\nimport { ChakraProvider, defaultSystem } from \"@chakra-ui\u002Freact\"\nimport { ThemeProvider } from \"next-themes\"\n\nexport function Provider({ children }: { children: React.ReactNode }) {\n  return (\n    \u003CChakraProvider value={defaultSystem}>\n      \u003CThemeProvider attribute=\"class\" disableTransitionOnChange>\n        {children}\n      \u003C\u002FThemeProvider>\n    \u003C\u002FChakraProvider>\n  )\n}\n",[1384],{"type":56,"tag":86,"props":1385,"children":1386},{"__ignoreMap":187},[1387,1403,1449,1485,1492,1554,1565,1597,1640,1656,1671,1686,1693],{"type":56,"tag":193,"props":1388,"children":1389},{"class":195,"line":196},[1390,1394,1399],{"type":56,"tag":193,"props":1391,"children":1392},{"style":593},[1393],{"type":61,"value":771},{"type":56,"tag":193,"props":1395,"children":1396},{"style":216},[1397],{"type":61,"value":1398},"use client",{"type":56,"tag":193,"props":1400,"children":1401},{"style":593},[1402],{"type":61,"value":627},{"type":56,"tag":193,"props":1404,"children":1405},{"class":195,"line":206},[1406,1410,1414,1419,1423,1428,1432,1436,1440,1445],{"type":56,"tag":193,"props":1407,"children":1408},{"style":587},[1409],{"type":61,"value":590},{"type":56,"tag":193,"props":1411,"children":1412},{"style":593},[1413],{"type":61,"value":596},{"type":56,"tag":193,"props":1415,"children":1416},{"style":599},[1417],{"type":61,"value":1418}," ChakraProvider",{"type":56,"tag":193,"props":1420,"children":1421},{"style":593},[1422],{"type":61,"value":1036},{"type":56,"tag":193,"props":1424,"children":1425},{"style":599},[1426],{"type":61,"value":1427}," defaultSystem",{"type":56,"tag":193,"props":1429,"children":1430},{"style":593},[1431],{"type":61,"value":607},{"type":56,"tag":193,"props":1433,"children":1434},{"style":587},[1435],{"type":61,"value":612},{"type":56,"tag":193,"props":1437,"children":1438},{"style":593},[1439],{"type":61,"value":617},{"type":56,"tag":193,"props":1441,"children":1442},{"style":216},[1443],{"type":61,"value":1444},"@chakra-ui\u002Freact",{"type":56,"tag":193,"props":1446,"children":1447},{"style":593},[1448],{"type":61,"value":627},{"type":56,"tag":193,"props":1450,"children":1451},{"class":195,"line":232},[1452,1456,1460,1465,1469,1473,1477,1481],{"type":56,"tag":193,"props":1453,"children":1454},{"style":587},[1455],{"type":61,"value":590},{"type":56,"tag":193,"props":1457,"children":1458},{"style":593},[1459],{"type":61,"value":596},{"type":56,"tag":193,"props":1461,"children":1462},{"style":599},[1463],{"type":61,"value":1464}," ThemeProvider",{"type":56,"tag":193,"props":1466,"children":1467},{"style":593},[1468],{"type":61,"value":607},{"type":56,"tag":193,"props":1470,"children":1471},{"style":587},[1472],{"type":61,"value":612},{"type":56,"tag":193,"props":1474,"children":1475},{"style":593},[1476],{"type":61,"value":617},{"type":56,"tag":193,"props":1478,"children":1479},{"style":216},[1480],{"type":61,"value":416},{"type":56,"tag":193,"props":1482,"children":1483},{"style":593},[1484],{"type":61,"value":627},{"type":56,"tag":193,"props":1486,"children":1487},{"class":195,"line":242},[1488],{"type":56,"tag":193,"props":1489,"children":1490},{"emptyLinePlaceholder":236},[1491],{"type":61,"value":239},{"type":56,"tag":193,"props":1493,"children":1494},{"class":195,"line":251},[1495,1499,1503,1507,1511,1516,1521,1525,1529,1533,1537,1541,1546,1550],{"type":56,"tag":193,"props":1496,"children":1497},{"style":587},[1498],{"type":61,"value":642},{"type":56,"tag":193,"props":1500,"children":1501},{"style":650},[1502],{"type":61,"value":653},{"type":56,"tag":193,"props":1504,"children":1505},{"style":656},[1506],{"type":61,"value":602},{"type":56,"tag":193,"props":1508,"children":1509},{"style":593},[1510],{"type":61,"value":1026},{"type":56,"tag":193,"props":1512,"children":1513},{"style":670},[1514],{"type":61,"value":1515}," children",{"type":56,"tag":193,"props":1517,"children":1518},{"style":593},[1519],{"type":61,"value":1520}," }:",{"type":56,"tag":193,"props":1522,"children":1523},{"style":593},[1524],{"type":61,"value":596},{"type":56,"tag":193,"props":1526,"children":1527},{"style":696},[1528],{"type":61,"value":1515},{"type":56,"tag":193,"props":1530,"children":1531},{"style":593},[1532],{"type":61,"value":703},{"type":56,"tag":193,"props":1534,"children":1535},{"style":210},[1536],{"type":61,"value":708},{"type":56,"tag":193,"props":1538,"children":1539},{"style":593},[1540],{"type":61,"value":713},{"type":56,"tag":193,"props":1542,"children":1543},{"style":210},[1544],{"type":61,"value":1545},"ReactNode",{"type":56,"tag":193,"props":1547,"children":1548},{"style":593},[1549],{"type":61,"value":1046},{"type":56,"tag":193,"props":1551,"children":1552},{"style":593},[1553],{"type":61,"value":690},{"type":56,"tag":193,"props":1555,"children":1556},{"class":195,"line":273},[1557,1561],{"type":56,"tag":193,"props":1558,"children":1559},{"style":587},[1560],{"type":61,"value":738},{"type":56,"tag":193,"props":1562,"children":1563},{"style":696},[1564],{"type":61,"value":743},{"type":56,"tag":193,"props":1566,"children":1567},{"class":195,"line":281},[1568,1572,1577,1582,1587,1592],{"type":56,"tag":193,"props":1569,"children":1570},{"style":593},[1571],{"type":61,"value":751},{"type":56,"tag":193,"props":1573,"children":1574},{"style":210},[1575],{"type":61,"value":1576},"ChakraProvider",{"type":56,"tag":193,"props":1578,"children":1579},{"style":650},[1580],{"type":61,"value":1581}," value",{"type":56,"tag":193,"props":1583,"children":1584},{"style":593},[1585],{"type":61,"value":1586},"={",{"type":56,"tag":193,"props":1588,"children":1589},{"style":599},[1590],{"type":61,"value":1591},"defaultSystem",{"type":56,"tag":193,"props":1593,"children":1594},{"style":593},[1595],{"type":61,"value":1596},"}>\n",{"type":56,"tag":193,"props":1598,"children":1599},{"class":195,"line":290},[1600,1604,1609,1614,1618,1622,1627,1631,1636],{"type":56,"tag":193,"props":1601,"children":1602},{"style":593},[1603],{"type":61,"value":798},{"type":56,"tag":193,"props":1605,"children":1606},{"style":210},[1607],{"type":61,"value":1608},"ThemeProvider",{"type":56,"tag":193,"props":1610,"children":1611},{"style":650},[1612],{"type":61,"value":1613}," attribute",{"type":56,"tag":193,"props":1615,"children":1616},{"style":593},[1617],{"type":61,"value":766},{"type":56,"tag":193,"props":1619,"children":1620},{"style":593},[1621],{"type":61,"value":771},{"type":56,"tag":193,"props":1623,"children":1624},{"style":216},[1625],{"type":61,"value":1626},"class",{"type":56,"tag":193,"props":1628,"children":1629},{"style":593},[1630],{"type":61,"value":771},{"type":56,"tag":193,"props":1632,"children":1633},{"style":650},[1634],{"type":61,"value":1635}," disableTransitionOnChange",{"type":56,"tag":193,"props":1637,"children":1638},{"style":593},[1639],{"type":61,"value":790},{"type":56,"tag":193,"props":1641,"children":1642},{"class":195,"line":311},[1643,1648,1652],{"type":56,"tag":193,"props":1644,"children":1645},{"style":593},[1646],{"type":61,"value":1647},"        {",{"type":56,"tag":193,"props":1649,"children":1650},{"style":599},[1651],{"type":61,"value":830},{"type":56,"tag":193,"props":1653,"children":1654},{"style":593},[1655],{"type":61,"value":895},{"type":56,"tag":193,"props":1657,"children":1658},{"class":195,"line":319},[1659,1663,1667],{"type":56,"tag":193,"props":1660,"children":1661},{"style":593},[1662],{"type":61,"value":852},{"type":56,"tag":193,"props":1664,"children":1665},{"style":210},[1666],{"type":61,"value":1608},{"type":56,"tag":193,"props":1668,"children":1669},{"style":593},[1670],{"type":61,"value":790},{"type":56,"tag":193,"props":1672,"children":1673},{"class":195,"line":328},[1674,1678,1682],{"type":56,"tag":193,"props":1675,"children":1676},{"style":593},[1677],{"type":61,"value":869},{"type":56,"tag":193,"props":1679,"children":1680},{"style":210},[1681],{"type":61,"value":1576},{"type":56,"tag":193,"props":1683,"children":1684},{"style":593},[1685],{"type":61,"value":790},{"type":56,"tag":193,"props":1687,"children":1688},{"class":195,"line":846},[1689],{"type":56,"tag":193,"props":1690,"children":1691},{"style":696},[1692],{"type":61,"value":886},{"type":56,"tag":193,"props":1694,"children":1695},{"class":195,"line":863},[1696],{"type":56,"tag":193,"props":1697,"children":1698},{"style":593},[1699],{"type":61,"value":895},{"type":56,"tag":175,"props":1701,"children":1703},{"id":1702},"common-setup-issues",[1704],{"type":61,"value":1705},"Common setup issues",{"type":56,"tag":95,"props":1707,"children":1708},{},[1709,1734,1758,1781],{"type":56,"tag":99,"props":1710,"children":1711},{},[1712,1717,1719,1725,1727,1732],{"type":56,"tag":558,"props":1713,"children":1714},{},[1715],{"type":61,"value":1716},"Unstyled components",{"type":61,"value":1718}," — app is not wrapped in ",{"type":56,"tag":86,"props":1720,"children":1722},{"className":1721},[],[1723],{"type":61,"value":1724},"\u003CProvider>",{"type":61,"value":1726},". Check the import\npath and that ",{"type":56,"tag":86,"props":1728,"children":1730},{"className":1729},[],[1731],{"type":61,"value":820},{"type":61,"value":1733}," wraps the component tree.",{"type":56,"tag":99,"props":1735,"children":1736},{},[1737,1742,1744,1749,1750,1756],{"type":56,"tag":558,"props":1738,"children":1739},{},[1740],{"type":61,"value":1741},"Hydration mismatch",{"type":61,"value":1743}," — add ",{"type":56,"tag":86,"props":1745,"children":1747},{"className":1746},[],[1748],{"type":61,"value":904},{"type":61,"value":928},{"type":56,"tag":86,"props":1751,"children":1753},{"className":1752},[],[1754],{"type":61,"value":1755},"\u003Chtml>",{"type":61,"value":1757}," in App\nRouter.",{"type":56,"tag":99,"props":1759,"children":1760},{},[1761,1771,1773,1779],{"type":56,"tag":558,"props":1762,"children":1763},{},[1764,1769],{"type":56,"tag":86,"props":1765,"children":1767},{"className":1766},[],[1768],{"type":61,"value":416},{"type":61,"value":1770}," not found",{"type":61,"value":1772}," — install it: ",{"type":56,"tag":86,"props":1774,"children":1776},{"className":1775},[],[1777],{"type":61,"value":1778},"npm install next-themes",{"type":61,"value":1780}," (only\nneeded for the manual fallback; the CLI handles it automatically).",{"type":56,"tag":99,"props":1782,"children":1783},{},[1784,1795,1797,1803],{"type":56,"tag":558,"props":1785,"children":1786},{},[1787,1793],{"type":56,"tag":86,"props":1788,"children":1790},{"className":1789},[],[1791],{"type":61,"value":1792},"extendTheme",{"type":61,"value":1794}," not exported",{"type":61,"value":1796}," — this is a v2 pattern. Use ",{"type":56,"tag":86,"props":1798,"children":1800},{"className":1799},[],[1801],{"type":61,"value":1802},"createSystem",{"type":61,"value":1804}," in\nv3.",{"type":56,"tag":70,"props":1806,"children":1807},{},[],{"type":56,"tag":74,"props":1809,"children":1811},{"id":1810},"step-2-choose-the-right-layout-primitives",[1812],{"type":61,"value":1813},"Step 2 — Choose the right layout primitives",{"type":56,"tag":64,"props":1815,"children":1816},{},[1817,1819,1825],{"type":61,"value":1818},"Reach for the right Chakra primitive rather than wrapping everything in ",{"type":56,"tag":86,"props":1820,"children":1822},{"className":1821},[],[1823],{"type":61,"value":1824},"Box",{"type":61,"value":703},{"type":56,"tag":441,"props":1827,"children":1828},{},[1829,1845],{"type":56,"tag":445,"props":1830,"children":1831},{},[1832],{"type":56,"tag":449,"props":1833,"children":1834},{},[1835,1840],{"type":56,"tag":453,"props":1836,"children":1837},{},[1838],{"type":61,"value":1839},"Need",{"type":56,"tag":453,"props":1841,"children":1842},{},[1843],{"type":61,"value":1844},"Use",{"type":56,"tag":464,"props":1846,"children":1847},{},[1848,1873,1898,1923,1940,1957,1975],{"type":56,"tag":449,"props":1849,"children":1850},{},[1851,1856],{"type":56,"tag":471,"props":1852,"children":1853},{},[1854],{"type":61,"value":1855},"Vertical stack of items",{"type":56,"tag":471,"props":1857,"children":1858},{},[1859,1865,1867],{"type":56,"tag":86,"props":1860,"children":1862},{"className":1861},[],[1863],{"type":61,"value":1864},"Stack",{"type":61,"value":1866}," (default) or ",{"type":56,"tag":86,"props":1868,"children":1870},{"className":1869},[],[1871],{"type":61,"value":1872},"VStack",{"type":56,"tag":449,"props":1874,"children":1875},{},[1876,1881],{"type":56,"tag":471,"props":1877,"children":1878},{},[1879],{"type":61,"value":1880},"Horizontal row",{"type":56,"tag":471,"props":1882,"children":1883},{},[1884,1890,1892],{"type":56,"tag":86,"props":1885,"children":1887},{"className":1886},[],[1888],{"type":61,"value":1889},"HStack",{"type":61,"value":1891}," or ",{"type":56,"tag":86,"props":1893,"children":1895},{"className":1894},[],[1896],{"type":61,"value":1897},"Flex",{"type":56,"tag":449,"props":1899,"children":1900},{},[1901,1906],{"type":56,"tag":471,"props":1902,"children":1903},{},[1904],{"type":61,"value":1905},"CSS Grid",{"type":56,"tag":471,"props":1907,"children":1908},{},[1909,1915,1917],{"type":56,"tag":86,"props":1910,"children":1912},{"className":1911},[],[1913],{"type":61,"value":1914},"Grid",{"type":61,"value":1916}," + ",{"type":56,"tag":86,"props":1918,"children":1920},{"className":1919},[],[1921],{"type":61,"value":1922},"GridItem",{"type":56,"tag":449,"props":1924,"children":1925},{},[1926,1931],{"type":56,"tag":471,"props":1927,"children":1928},{},[1929],{"type":61,"value":1930},"Equal-column grid",{"type":56,"tag":471,"props":1932,"children":1933},{},[1934],{"type":56,"tag":86,"props":1935,"children":1937},{"className":1936},[],[1938],{"type":61,"value":1939},"SimpleGrid columns={N}",{"type":56,"tag":449,"props":1941,"children":1942},{},[1943,1948],{"type":56,"tag":471,"props":1944,"children":1945},{},[1946],{"type":61,"value":1947},"Centered page content",{"type":56,"tag":471,"props":1949,"children":1950},{},[1951],{"type":56,"tag":86,"props":1952,"children":1954},{"className":1953},[],[1955],{"type":61,"value":1956},"Container maxW=\"container.lg\"",{"type":56,"tag":449,"props":1958,"children":1959},{},[1960,1965],{"type":56,"tag":471,"props":1961,"children":1962},{},[1963],{"type":61,"value":1964},"Full flexbox control",{"type":56,"tag":471,"props":1966,"children":1967},{},[1968,1973],{"type":56,"tag":86,"props":1969,"children":1971},{"className":1970},[],[1972],{"type":61,"value":1897},{"type":61,"value":1974}," with explicit props",{"type":56,"tag":449,"props":1976,"children":1977},{},[1978,1983],{"type":56,"tag":471,"props":1979,"children":1980},{},[1981],{"type":61,"value":1982},"Semantic section\u002Farticle",{"type":56,"tag":471,"props":1984,"children":1985},{},[1986,1992,1994],{"type":56,"tag":86,"props":1987,"children":1989},{"className":1988},[],[1990],{"type":61,"value":1991},"Box as=\"section\"",{"type":61,"value":1993}," \u002F ",{"type":56,"tag":86,"props":1995,"children":1997},{"className":1996},[],[1998],{"type":61,"value":1999},"Box as=\"article\"",{"type":56,"tag":64,"props":2001,"children":2002},{},[2003,2005,2010,2012,2018],{"type":61,"value":2004},"Avoid deep nesting. If you're three ",{"type":56,"tag":86,"props":2006,"children":2008},{"className":2007},[],[2009],{"type":61,"value":1824},{"type":61,"value":2011}," levels deep with no semantic reason,\nflatten it. Prefer ",{"type":56,"tag":86,"props":2013,"children":2015},{"className":2014},[],[2016],{"type":61,"value":2017},"gap",{"type":61,"value":2019}," over margin between siblings.",{"type":56,"tag":70,"props":2021,"children":2022},{},[],{"type":56,"tag":74,"props":2024,"children":2026},{"id":2025},"step-3-use-tokens-not-raw-values",[2027],{"type":61,"value":2028},"Step 3 — Use tokens, not raw values",{"type":56,"tag":64,"props":2030,"children":2031},{},[2032],{"type":61,"value":2033},"Chakra v3 ships semantic tokens that automatically adapt to light\u002Fdark mode.\nPrefer them over hard-coded palette values — they make the component theme-aware\nwithout any extra work.",{"type":56,"tag":182,"props":2035,"children":2037},{"className":575,"code":2036,"language":577,"meta":187,"style":187},"\u002F\u002F Prefer semantic tokens\n\u003CBox bg=\"bg.subtle\" color=\"fg.default\" borderColor=\"border.subtle\" \u002F>\n\u003CText color=\"fg.muted\" \u002F>\n\u003CBox shadow=\"md\" rounded=\"lg\" \u002F>\n\n\u002F\u002F Use colorPalette for interactive components (not colorScheme)\n\u003CButton colorPalette=\"blue\">Submit\u003C\u002FButton>\n\u003CBadge colorPalette=\"green\">Active\u003C\u002FBadge>\n",[2038],{"type":56,"tag":86,"props":2039,"children":2040},{"__ignoreMap":187},[2041,2049,2131,2168,2227,2234,2242,2299],{"type":56,"tag":193,"props":2042,"children":2043},{"class":195,"line":196},[2044],{"type":56,"tag":193,"props":2045,"children":2046},{"style":200},[2047],{"type":61,"value":2048},"\u002F\u002F Prefer semantic tokens\n",{"type":56,"tag":193,"props":2050,"children":2051},{"class":195,"line":206},[2052,2057,2061,2066,2070,2074,2079,2083,2088,2092,2096,2101,2105,2110,2114,2118,2123,2127],{"type":56,"tag":193,"props":2053,"children":2054},{"style":593},[2055],{"type":61,"value":2056},"\u003C",{"type":56,"tag":193,"props":2058,"children":2059},{"style":210},[2060],{"type":61,"value":1824},{"type":56,"tag":193,"props":2062,"children":2063},{"style":650},[2064],{"type":61,"value":2065}," bg",{"type":56,"tag":193,"props":2067,"children":2068},{"style":593},[2069],{"type":61,"value":766},{"type":56,"tag":193,"props":2071,"children":2072},{"style":593},[2073],{"type":61,"value":771},{"type":56,"tag":193,"props":2075,"children":2076},{"style":216},[2077],{"type":61,"value":2078},"bg.subtle",{"type":56,"tag":193,"props":2080,"children":2081},{"style":593},[2082],{"type":61,"value":771},{"type":56,"tag":193,"props":2084,"children":2085},{"style":650},[2086],{"type":61,"value":2087}," color",{"type":56,"tag":193,"props":2089,"children":2090},{"style":593},[2091],{"type":61,"value":766},{"type":56,"tag":193,"props":2093,"children":2094},{"style":593},[2095],{"type":61,"value":771},{"type":56,"tag":193,"props":2097,"children":2098},{"style":216},[2099],{"type":61,"value":2100},"fg.default",{"type":56,"tag":193,"props":2102,"children":2103},{"style":593},[2104],{"type":61,"value":771},{"type":56,"tag":193,"props":2106,"children":2107},{"style":650},[2108],{"type":61,"value":2109}," borderColor",{"type":56,"tag":193,"props":2111,"children":2112},{"style":593},[2113],{"type":61,"value":766},{"type":56,"tag":193,"props":2115,"children":2116},{"style":593},[2117],{"type":61,"value":771},{"type":56,"tag":193,"props":2119,"children":2120},{"style":216},[2121],{"type":61,"value":2122},"border.subtle",{"type":56,"tag":193,"props":2124,"children":2125},{"style":593},[2126],{"type":61,"value":771},{"type":56,"tag":193,"props":2128,"children":2129},{"style":593},[2130],{"type":61,"value":1313},{"type":56,"tag":193,"props":2132,"children":2133},{"class":195,"line":232},[2134,2138,2143,2147,2151,2155,2160,2164],{"type":56,"tag":193,"props":2135,"children":2136},{"style":593},[2137],{"type":61,"value":2056},{"type":56,"tag":193,"props":2139,"children":2140},{"style":210},[2141],{"type":61,"value":2142},"Text",{"type":56,"tag":193,"props":2144,"children":2145},{"style":650},[2146],{"type":61,"value":2087},{"type":56,"tag":193,"props":2148,"children":2149},{"style":593},[2150],{"type":61,"value":766},{"type":56,"tag":193,"props":2152,"children":2153},{"style":593},[2154],{"type":61,"value":771},{"type":56,"tag":193,"props":2156,"children":2157},{"style":216},[2158],{"type":61,"value":2159},"fg.muted",{"type":56,"tag":193,"props":2161,"children":2162},{"style":593},[2163],{"type":61,"value":771},{"type":56,"tag":193,"props":2165,"children":2166},{"style":593},[2167],{"type":61,"value":1313},{"type":56,"tag":193,"props":2169,"children":2170},{"class":195,"line":242},[2171,2175,2179,2184,2188,2192,2197,2201,2206,2210,2214,2219,2223],{"type":56,"tag":193,"props":2172,"children":2173},{"style":593},[2174],{"type":61,"value":2056},{"type":56,"tag":193,"props":2176,"children":2177},{"style":210},[2178],{"type":61,"value":1824},{"type":56,"tag":193,"props":2180,"children":2181},{"style":650},[2182],{"type":61,"value":2183}," shadow",{"type":56,"tag":193,"props":2185,"children":2186},{"style":593},[2187],{"type":61,"value":766},{"type":56,"tag":193,"props":2189,"children":2190},{"style":593},[2191],{"type":61,"value":771},{"type":56,"tag":193,"props":2193,"children":2194},{"style":216},[2195],{"type":61,"value":2196},"md",{"type":56,"tag":193,"props":2198,"children":2199},{"style":593},[2200],{"type":61,"value":771},{"type":56,"tag":193,"props":2202,"children":2203},{"style":650},[2204],{"type":61,"value":2205}," rounded",{"type":56,"tag":193,"props":2207,"children":2208},{"style":593},[2209],{"type":61,"value":766},{"type":56,"tag":193,"props":2211,"children":2212},{"style":593},[2213],{"type":61,"value":771},{"type":56,"tag":193,"props":2215,"children":2216},{"style":216},[2217],{"type":61,"value":2218},"lg",{"type":56,"tag":193,"props":2220,"children":2221},{"style":593},[2222],{"type":61,"value":771},{"type":56,"tag":193,"props":2224,"children":2225},{"style":593},[2226],{"type":61,"value":1313},{"type":56,"tag":193,"props":2228,"children":2229},{"class":195,"line":251},[2230],{"type":56,"tag":193,"props":2231,"children":2232},{"emptyLinePlaceholder":236},[2233],{"type":61,"value":239},{"type":56,"tag":193,"props":2235,"children":2236},{"class":195,"line":273},[2237],{"type":56,"tag":193,"props":2238,"children":2239},{"style":200},[2240],{"type":61,"value":2241},"\u002F\u002F Use colorPalette for interactive components (not colorScheme)\n",{"type":56,"tag":193,"props":2243,"children":2244},{"class":195,"line":281},[2245,2249,2254,2259,2263,2267,2272,2276,2281,2286,2291,2295],{"type":56,"tag":193,"props":2246,"children":2247},{"style":593},[2248],{"type":61,"value":2056},{"type":56,"tag":193,"props":2250,"children":2251},{"style":210},[2252],{"type":61,"value":2253},"Button",{"type":56,"tag":193,"props":2255,"children":2256},{"style":650},[2257],{"type":61,"value":2258}," colorPalette",{"type":56,"tag":193,"props":2260,"children":2261},{"style":593},[2262],{"type":61,"value":766},{"type":56,"tag":193,"props":2264,"children":2265},{"style":593},[2266],{"type":61,"value":771},{"type":56,"tag":193,"props":2268,"children":2269},{"style":216},[2270],{"type":61,"value":2271},"blue",{"type":56,"tag":193,"props":2273,"children":2274},{"style":593},[2275],{"type":61,"value":771},{"type":56,"tag":193,"props":2277,"children":2278},{"style":593},[2279],{"type":61,"value":2280},">",{"type":56,"tag":193,"props":2282,"children":2283},{"style":599},[2284],{"type":61,"value":2285},"Submit",{"type":56,"tag":193,"props":2287,"children":2288},{"style":593},[2289],{"type":61,"value":2290},"\u003C\u002F",{"type":56,"tag":193,"props":2292,"children":2293},{"style":210},[2294],{"type":61,"value":2253},{"type":56,"tag":193,"props":2296,"children":2297},{"style":593},[2298],{"type":61,"value":790},{"type":56,"tag":193,"props":2300,"children":2301},{"class":195,"line":290},[2302,2306,2311,2315,2319,2323,2328,2332,2336,2341,2345,2349],{"type":56,"tag":193,"props":2303,"children":2304},{"style":593},[2305],{"type":61,"value":2056},{"type":56,"tag":193,"props":2307,"children":2308},{"style":210},[2309],{"type":61,"value":2310},"Badge",{"type":56,"tag":193,"props":2312,"children":2313},{"style":650},[2314],{"type":61,"value":2258},{"type":56,"tag":193,"props":2316,"children":2317},{"style":593},[2318],{"type":61,"value":766},{"type":56,"tag":193,"props":2320,"children":2321},{"style":593},[2322],{"type":61,"value":771},{"type":56,"tag":193,"props":2324,"children":2325},{"style":216},[2326],{"type":61,"value":2327},"green",{"type":56,"tag":193,"props":2329,"children":2330},{"style":593},[2331],{"type":61,"value":771},{"type":56,"tag":193,"props":2333,"children":2334},{"style":593},[2335],{"type":61,"value":2280},{"type":56,"tag":193,"props":2337,"children":2338},{"style":599},[2339],{"type":61,"value":2340},"Active",{"type":56,"tag":193,"props":2342,"children":2343},{"style":593},[2344],{"type":61,"value":2290},{"type":56,"tag":193,"props":2346,"children":2347},{"style":210},[2348],{"type":61,"value":2310},{"type":56,"tag":193,"props":2350,"children":2351},{"style":593},[2352],{"type":61,"value":790},{"type":56,"tag":64,"props":2354,"children":2355},{},[2356,2358,2364,2365,2371],{"type":61,"value":2357},"Use raw palette values (",{"type":56,"tag":86,"props":2359,"children":2361},{"className":2360},[],[2362],{"type":61,"value":2363},"blue.500",{"type":61,"value":126},{"type":56,"tag":86,"props":2366,"children":2368},{"className":2367},[],[2369],{"type":61,"value":2370},"gray.100",{"type":61,"value":2372},") only when a specific color is\nintentional and should not shift with color mode.",{"type":56,"tag":70,"props":2374,"children":2375},{},[],{"type":56,"tag":74,"props":2377,"children":2379},{"id":2378},"step-4-responsive-styles",[2380],{"type":61,"value":2381},"Step 4 — Responsive styles",{"type":56,"tag":64,"props":2383,"children":2384},{},[2385],{"type":61,"value":2386},"Chakra uses mobile-first breakpoints. Use array or object syntax consistently:",{"type":56,"tag":182,"props":2388,"children":2390},{"className":575,"code":2389,"language":577,"meta":187,"style":187},"\u002F\u002F Array: [base, sm, md, lg, xl]\n\u003CBox px={[4, 6, 8]} fontSize={[\"sm\", \"md\", \"lg\"]} \u002F>\n\n\u002F\u002F Object: explicit breakpoints\n\u003CSimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={6} \u002F>\n\u003CStack direction={{ base: \"column\", md: \"row\" }} gap={4} \u002F>\n",[2391],{"type":56,"tag":86,"props":2392,"children":2393},{"__ignoreMap":187},[2394,2402,2527,2534,2542,2636],{"type":56,"tag":193,"props":2395,"children":2396},{"class":195,"line":196},[2397],{"type":56,"tag":193,"props":2398,"children":2399},{"style":200},[2400],{"type":61,"value":2401},"\u002F\u002F Array: [base, sm, md, lg, xl]\n",{"type":56,"tag":193,"props":2403,"children":2404},{"class":195,"line":206},[2405,2409,2413,2418,2422,2427,2433,2437,2442,2446,2451,2456,2461,2466,2470,2474,2478,2483,2487,2491,2495,2499,2503,2507,2511,2515,2519,2523],{"type":56,"tag":193,"props":2406,"children":2407},{"style":593},[2408],{"type":61,"value":2056},{"type":56,"tag":193,"props":2410,"children":2411},{"style":210},[2412],{"type":61,"value":1824},{"type":56,"tag":193,"props":2414,"children":2415},{"style":650},[2416],{"type":61,"value":2417}," px",{"type":56,"tag":193,"props":2419,"children":2420},{"style":593},[2421],{"type":61,"value":1586},{"type":56,"tag":193,"props":2423,"children":2424},{"style":599},[2425],{"type":61,"value":2426},"[",{"type":56,"tag":193,"props":2428,"children":2430},{"style":2429},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[2431],{"type":61,"value":2432},"4",{"type":56,"tag":193,"props":2434,"children":2435},{"style":593},[2436],{"type":61,"value":1036},{"type":56,"tag":193,"props":2438,"children":2439},{"style":2429},[2440],{"type":61,"value":2441}," 6",{"type":56,"tag":193,"props":2443,"children":2444},{"style":593},[2445],{"type":61,"value":1036},{"type":56,"tag":193,"props":2447,"children":2448},{"style":2429},[2449],{"type":61,"value":2450}," 8",{"type":56,"tag":193,"props":2452,"children":2453},{"style":599},[2454],{"type":61,"value":2455},"]",{"type":56,"tag":193,"props":2457,"children":2458},{"style":593},[2459],{"type":61,"value":2460},"} ",{"type":56,"tag":193,"props":2462,"children":2463},{"style":650},[2464],{"type":61,"value":2465},"fontSize",{"type":56,"tag":193,"props":2467,"children":2468},{"style":593},[2469],{"type":61,"value":1586},{"type":56,"tag":193,"props":2471,"children":2472},{"style":599},[2473],{"type":61,"value":2426},{"type":56,"tag":193,"props":2475,"children":2476},{"style":593},[2477],{"type":61,"value":771},{"type":56,"tag":193,"props":2479,"children":2480},{"style":216},[2481],{"type":61,"value":2482},"sm",{"type":56,"tag":193,"props":2484,"children":2485},{"style":593},[2486],{"type":61,"value":771},{"type":56,"tag":193,"props":2488,"children":2489},{"style":593},[2490],{"type":61,"value":1036},{"type":56,"tag":193,"props":2492,"children":2493},{"style":593},[2494],{"type":61,"value":617},{"type":56,"tag":193,"props":2496,"children":2497},{"style":216},[2498],{"type":61,"value":2196},{"type":56,"tag":193,"props":2500,"children":2501},{"style":593},[2502],{"type":61,"value":771},{"type":56,"tag":193,"props":2504,"children":2505},{"style":593},[2506],{"type":61,"value":1036},{"type":56,"tag":193,"props":2508,"children":2509},{"style":593},[2510],{"type":61,"value":617},{"type":56,"tag":193,"props":2512,"children":2513},{"style":216},[2514],{"type":61,"value":2218},{"type":56,"tag":193,"props":2516,"children":2517},{"style":593},[2518],{"type":61,"value":771},{"type":56,"tag":193,"props":2520,"children":2521},{"style":599},[2522],{"type":61,"value":2455},{"type":56,"tag":193,"props":2524,"children":2525},{"style":593},[2526],{"type":61,"value":1103},{"type":56,"tag":193,"props":2528,"children":2529},{"class":195,"line":232},[2530],{"type":56,"tag":193,"props":2531,"children":2532},{"emptyLinePlaceholder":236},[2533],{"type":61,"value":239},{"type":56,"tag":193,"props":2535,"children":2536},{"class":195,"line":242},[2537],{"type":56,"tag":193,"props":2538,"children":2539},{"style":200},[2540],{"type":61,"value":2541},"\u002F\u002F Object: explicit breakpoints\n",{"type":56,"tag":193,"props":2543,"children":2544},{"class":195,"line":251},[2545,2549,2554,2559,2564,2569,2573,2578,2582,2587,2591,2596,2600,2605,2609,2614,2619,2623,2627,2632],{"type":56,"tag":193,"props":2546,"children":2547},{"style":593},[2548],{"type":61,"value":2056},{"type":56,"tag":193,"props":2550,"children":2551},{"style":210},[2552],{"type":61,"value":2553},"SimpleGrid",{"type":56,"tag":193,"props":2555,"children":2556},{"style":650},[2557],{"type":61,"value":2558}," columns",{"type":56,"tag":193,"props":2560,"children":2561},{"style":593},[2562],{"type":61,"value":2563},"={{",{"type":56,"tag":193,"props":2565,"children":2566},{"style":696},[2567],{"type":61,"value":2568}," base",{"type":56,"tag":193,"props":2570,"children":2571},{"style":593},[2572],{"type":61,"value":703},{"type":56,"tag":193,"props":2574,"children":2575},{"style":2429},[2576],{"type":61,"value":2577}," 1",{"type":56,"tag":193,"props":2579,"children":2580},{"style":593},[2581],{"type":61,"value":1036},{"type":56,"tag":193,"props":2583,"children":2584},{"style":696},[2585],{"type":61,"value":2586}," md",{"type":56,"tag":193,"props":2588,"children":2589},{"style":593},[2590],{"type":61,"value":703},{"type":56,"tag":193,"props":2592,"children":2593},{"style":2429},[2594],{"type":61,"value":2595}," 2",{"type":56,"tag":193,"props":2597,"children":2598},{"style":593},[2599],{"type":61,"value":1036},{"type":56,"tag":193,"props":2601,"children":2602},{"style":696},[2603],{"type":61,"value":2604}," lg",{"type":56,"tag":193,"props":2606,"children":2607},{"style":593},[2608],{"type":61,"value":703},{"type":56,"tag":193,"props":2610,"children":2611},{"style":2429},[2612],{"type":61,"value":2613}," 3",{"type":56,"tag":193,"props":2615,"children":2616},{"style":593},[2617],{"type":61,"value":2618}," }} ",{"type":56,"tag":193,"props":2620,"children":2621},{"style":650},[2622],{"type":61,"value":2017},{"type":56,"tag":193,"props":2624,"children":2625},{"style":593},[2626],{"type":61,"value":1586},{"type":56,"tag":193,"props":2628,"children":2629},{"style":2429},[2630],{"type":61,"value":2631},"6",{"type":56,"tag":193,"props":2633,"children":2634},{"style":593},[2635],{"type":61,"value":1103},{"type":56,"tag":193,"props":2637,"children":2638},{"class":195,"line":273},[2639,2643,2647,2652,2656,2660,2664,2668,2673,2677,2681,2685,2689,2693,2698,2702,2706,2710,2714,2718],{"type":56,"tag":193,"props":2640,"children":2641},{"style":593},[2642],{"type":61,"value":2056},{"type":56,"tag":193,"props":2644,"children":2645},{"style":210},[2646],{"type":61,"value":1864},{"type":56,"tag":193,"props":2648,"children":2649},{"style":650},[2650],{"type":61,"value":2651}," direction",{"type":56,"tag":193,"props":2653,"children":2654},{"style":593},[2655],{"type":61,"value":2563},{"type":56,"tag":193,"props":2657,"children":2658},{"style":696},[2659],{"type":61,"value":2568},{"type":56,"tag":193,"props":2661,"children":2662},{"style":593},[2663],{"type":61,"value":703},{"type":56,"tag":193,"props":2665,"children":2666},{"style":593},[2667],{"type":61,"value":617},{"type":56,"tag":193,"props":2669,"children":2670},{"style":216},[2671],{"type":61,"value":2672},"column",{"type":56,"tag":193,"props":2674,"children":2675},{"style":593},[2676],{"type":61,"value":771},{"type":56,"tag":193,"props":2678,"children":2679},{"style":593},[2680],{"type":61,"value":1036},{"type":56,"tag":193,"props":2682,"children":2683},{"style":696},[2684],{"type":61,"value":2586},{"type":56,"tag":193,"props":2686,"children":2687},{"style":593},[2688],{"type":61,"value":703},{"type":56,"tag":193,"props":2690,"children":2691},{"style":593},[2692],{"type":61,"value":617},{"type":56,"tag":193,"props":2694,"children":2695},{"style":216},[2696],{"type":61,"value":2697},"row",{"type":56,"tag":193,"props":2699,"children":2700},{"style":593},[2701],{"type":61,"value":771},{"type":56,"tag":193,"props":2703,"children":2704},{"style":593},[2705],{"type":61,"value":2618},{"type":56,"tag":193,"props":2707,"children":2708},{"style":650},[2709],{"type":61,"value":2017},{"type":56,"tag":193,"props":2711,"children":2712},{"style":593},[2713],{"type":61,"value":1586},{"type":56,"tag":193,"props":2715,"children":2716},{"style":2429},[2717],{"type":61,"value":2432},{"type":56,"tag":193,"props":2719,"children":2720},{"style":593},[2721],{"type":61,"value":1103},{"type":56,"tag":64,"props":2723,"children":2724},{},[2725,2727,2733,2735,2740],{"type":61,"value":2726},"Every layout component should handle at least ",{"type":56,"tag":86,"props":2728,"children":2730},{"className":2729},[],[2731],{"type":61,"value":2732},"base",{"type":61,"value":2734}," (mobile) and ",{"type":56,"tag":86,"props":2736,"children":2738},{"className":2737},[],[2739],{"type":61,"value":2196},{"type":61,"value":2741}," (desktop)\nbreakpoints unless the request is explicitly desktop-only.",{"type":56,"tag":70,"props":2743,"children":2744},{},[],{"type":56,"tag":74,"props":2746,"children":2748},{"id":2747},"step-5-forms",[2749],{"type":61,"value":2750},"Step 5 — Forms",{"type":56,"tag":64,"props":2752,"children":2753},{},[2754,2756,2762],{"type":61,"value":2755},"Use ",{"type":56,"tag":86,"props":2757,"children":2759},{"className":2758},[],[2760],{"type":61,"value":2761},"Field.Root",{"type":61,"value":2763}," for all form fields — it wires up label, input, error, and help\ntext correctly:",{"type":56,"tag":182,"props":2765,"children":2767},{"className":575,"code":2766,"language":577,"meta":187,"style":187},"\u003CField.Root invalid={!!error} required>\n  \u003CField.Label>Email address\u003C\u002FField.Label>\n  \u003CInput type=\"email\" placeholder=\"you@example.com\" \u002F>\n  \u003CField.ErrorText>{error}\u003C\u002FField.ErrorText>\n  \u003CField.HelpText>We'll never share your email.\u003C\u002FField.HelpText>\n\u003C\u002FField.Root>\n",[2768],{"type":56,"tag":86,"props":2769,"children":2770},{"__ignoreMap":187},[2771,2810,2843,2903,2935,2968],{"type":56,"tag":193,"props":2772,"children":2773},{"class":195,"line":196},[2774,2778,2782,2787,2792,2797,2801,2806],{"type":56,"tag":193,"props":2775,"children":2776},{"style":593},[2777],{"type":61,"value":2056},{"type":56,"tag":193,"props":2779,"children":2780},{"style":210},[2781],{"type":61,"value":2761},{"type":56,"tag":193,"props":2783,"children":2784},{"style":650},[2785],{"type":61,"value":2786}," invalid",{"type":56,"tag":193,"props":2788,"children":2789},{"style":593},[2790],{"type":61,"value":2791},"={!!",{"type":56,"tag":193,"props":2793,"children":2794},{"style":599},[2795],{"type":61,"value":2796},"error",{"type":56,"tag":193,"props":2798,"children":2799},{"style":593},[2800],{"type":61,"value":2460},{"type":56,"tag":193,"props":2802,"children":2803},{"style":650},[2804],{"type":61,"value":2805},"required",{"type":56,"tag":193,"props":2807,"children":2808},{"style":593},[2809],{"type":61,"value":790},{"type":56,"tag":193,"props":2811,"children":2812},{"class":195,"line":206},[2813,2817,2822,2826,2831,2835,2839],{"type":56,"tag":193,"props":2814,"children":2815},{"style":593},[2816],{"type":61,"value":1272},{"type":56,"tag":193,"props":2818,"children":2819},{"style":210},[2820],{"type":61,"value":2821},"Field.Label",{"type":56,"tag":193,"props":2823,"children":2824},{"style":593},[2825],{"type":61,"value":2280},{"type":56,"tag":193,"props":2827,"children":2828},{"style":599},[2829],{"type":61,"value":2830},"Email address",{"type":56,"tag":193,"props":2832,"children":2833},{"style":593},[2834],{"type":61,"value":2290},{"type":56,"tag":193,"props":2836,"children":2837},{"style":210},[2838],{"type":61,"value":2821},{"type":56,"tag":193,"props":2840,"children":2841},{"style":593},[2842],{"type":61,"value":790},{"type":56,"tag":193,"props":2844,"children":2845},{"class":195,"line":232},[2846,2850,2855,2860,2864,2868,2873,2877,2882,2886,2890,2895,2899],{"type":56,"tag":193,"props":2847,"children":2848},{"style":593},[2849],{"type":61,"value":1272},{"type":56,"tag":193,"props":2851,"children":2852},{"style":210},[2853],{"type":61,"value":2854},"Input",{"type":56,"tag":193,"props":2856,"children":2857},{"style":650},[2858],{"type":61,"value":2859}," type",{"type":56,"tag":193,"props":2861,"children":2862},{"style":593},[2863],{"type":61,"value":766},{"type":56,"tag":193,"props":2865,"children":2866},{"style":593},[2867],{"type":61,"value":771},{"type":56,"tag":193,"props":2869,"children":2870},{"style":216},[2871],{"type":61,"value":2872},"email",{"type":56,"tag":193,"props":2874,"children":2875},{"style":593},[2876],{"type":61,"value":771},{"type":56,"tag":193,"props":2878,"children":2879},{"style":650},[2880],{"type":61,"value":2881}," placeholder",{"type":56,"tag":193,"props":2883,"children":2884},{"style":593},[2885],{"type":61,"value":766},{"type":56,"tag":193,"props":2887,"children":2888},{"style":593},[2889],{"type":61,"value":771},{"type":56,"tag":193,"props":2891,"children":2892},{"style":216},[2893],{"type":61,"value":2894},"you@example.com",{"type":56,"tag":193,"props":2896,"children":2897},{"style":593},[2898],{"type":61,"value":771},{"type":56,"tag":193,"props":2900,"children":2901},{"style":593},[2902],{"type":61,"value":1313},{"type":56,"tag":193,"props":2904,"children":2905},{"class":195,"line":242},[2906,2910,2915,2919,2923,2927,2931],{"type":56,"tag":193,"props":2907,"children":2908},{"style":593},[2909],{"type":61,"value":1272},{"type":56,"tag":193,"props":2911,"children":2912},{"style":210},[2913],{"type":61,"value":2914},"Field.ErrorText",{"type":56,"tag":193,"props":2916,"children":2917},{"style":593},[2918],{"type":61,"value":825},{"type":56,"tag":193,"props":2920,"children":2921},{"style":599},[2922],{"type":61,"value":2796},{"type":56,"tag":193,"props":2924,"children":2925},{"style":593},[2926],{"type":61,"value":835},{"type":56,"tag":193,"props":2928,"children":2929},{"style":210},[2930],{"type":61,"value":2914},{"type":56,"tag":193,"props":2932,"children":2933},{"style":593},[2934],{"type":61,"value":790},{"type":56,"tag":193,"props":2936,"children":2937},{"class":195,"line":251},[2938,2942,2947,2951,2956,2960,2964],{"type":56,"tag":193,"props":2939,"children":2940},{"style":593},[2941],{"type":61,"value":1272},{"type":56,"tag":193,"props":2943,"children":2944},{"style":210},[2945],{"type":61,"value":2946},"Field.HelpText",{"type":56,"tag":193,"props":2948,"children":2949},{"style":593},[2950],{"type":61,"value":2280},{"type":56,"tag":193,"props":2952,"children":2953},{"style":599},[2954],{"type":61,"value":2955},"We'll never share your email.",{"type":56,"tag":193,"props":2957,"children":2958},{"style":593},[2959],{"type":61,"value":2290},{"type":56,"tag":193,"props":2961,"children":2962},{"style":210},[2963],{"type":61,"value":2946},{"type":56,"tag":193,"props":2965,"children":2966},{"style":593},[2967],{"type":61,"value":790},{"type":56,"tag":193,"props":2969,"children":2970},{"class":195,"line":273},[2971,2975,2979],{"type":56,"tag":193,"props":2972,"children":2973},{"style":593},[2974],{"type":61,"value":2290},{"type":56,"tag":193,"props":2976,"children":2977},{"style":210},[2978],{"type":61,"value":2761},{"type":56,"tag":193,"props":2980,"children":2981},{"style":593},[2982],{"type":61,"value":790},{"type":56,"tag":64,"props":2984,"children":2985},{},[2986,2988,2994,2996,3002,3004,3010],{"type":61,"value":2987},"For form submission state, use ",{"type":56,"tag":86,"props":2989,"children":2991},{"className":2990},[],[2992],{"type":61,"value":2993},"disabled",{"type":61,"value":2995}," (not ",{"type":56,"tag":86,"props":2997,"children":2999},{"className":2998},[],[3000],{"type":61,"value":3001},"isDisabled",{"type":61,"value":3003},") on inputs and\nbuttons. Group related fields in a ",{"type":56,"tag":86,"props":3005,"children":3007},{"className":3006},[],[3008],{"type":61,"value":3009},"Stack gap={4}",{"type":61,"value":713},{"type":56,"tag":70,"props":3012,"children":3013},{},[],{"type":56,"tag":74,"props":3015,"children":3017},{"id":3016},"step-6-accessibility",[3018],{"type":61,"value":3019},"Step 6 — Accessibility",{"type":56,"tag":64,"props":3021,"children":3022},{},[3023],{"type":61,"value":3024},"Chakra's built-in components handle most accessibility automatically — don't\noverride it. The things you do need to provide:",{"type":56,"tag":95,"props":3026,"children":3027},{},[3028,3105,3131,3162,3203,3227],{"type":56,"tag":99,"props":3029,"children":3030},{},[3031,3036,3038,3044],{"type":56,"tag":558,"props":3032,"children":3033},{},[3034],{"type":61,"value":3035},"Icon-only buttons",{"type":61,"value":3037},": always add ",{"type":56,"tag":86,"props":3039,"children":3041},{"className":3040},[],[3042],{"type":61,"value":3043},"aria-label",{"type":56,"tag":182,"props":3045,"children":3047},{"className":575,"code":3046,"language":577,"meta":187,"style":187},"\u003CIconButton aria-label=\"Close dialog\" icon={\u003CCloseIcon \u002F>} \u002F>\n",[3048],{"type":56,"tag":86,"props":3049,"children":3050},{"__ignoreMap":187},[3051],{"type":56,"tag":193,"props":3052,"children":3053},{"class":195,"line":196},[3054,3058,3063,3068,3072,3076,3081,3085,3090,3095,3100],{"type":56,"tag":193,"props":3055,"children":3056},{"style":593},[3057],{"type":61,"value":2056},{"type":56,"tag":193,"props":3059,"children":3060},{"style":210},[3061],{"type":61,"value":3062},"IconButton",{"type":56,"tag":193,"props":3064,"children":3065},{"style":650},[3066],{"type":61,"value":3067}," aria-label",{"type":56,"tag":193,"props":3069,"children":3070},{"style":593},[3071],{"type":61,"value":766},{"type":56,"tag":193,"props":3073,"children":3074},{"style":593},[3075],{"type":61,"value":771},{"type":56,"tag":193,"props":3077,"children":3078},{"style":216},[3079],{"type":61,"value":3080},"Close dialog",{"type":56,"tag":193,"props":3082,"children":3083},{"style":593},[3084],{"type":61,"value":771},{"type":56,"tag":193,"props":3086,"children":3087},{"style":650},[3088],{"type":61,"value":3089}," icon",{"type":56,"tag":193,"props":3091,"children":3092},{"style":593},[3093],{"type":61,"value":3094},"={\u003C",{"type":56,"tag":193,"props":3096,"children":3097},{"style":210},[3098],{"type":61,"value":3099},"CloseIcon",{"type":56,"tag":193,"props":3101,"children":3102},{"style":593},[3103],{"type":61,"value":3104}," \u002F>} \u002F>\n",{"type":56,"tag":99,"props":3106,"children":3107},{},[3108,3113,3115,3121,3123,3129],{"type":56,"tag":558,"props":3109,"children":3110},{},[3111],{"type":61,"value":3112},"Images",{"type":61,"value":3114},": always pass meaningful ",{"type":56,"tag":86,"props":3116,"children":3118},{"className":3117},[],[3119],{"type":61,"value":3120},"alt",{"type":61,"value":3122}," text (or ",{"type":56,"tag":86,"props":3124,"children":3126},{"className":3125},[],[3127],{"type":61,"value":3128},"alt=\"\"",{"type":61,"value":3130}," for decorative)",{"type":56,"tag":99,"props":3132,"children":3133},{},[3134,3139,3141,3146,3148,3154,3156],{"type":56,"tag":558,"props":3135,"children":3136},{},[3137],{"type":61,"value":3138},"Form labels",{"type":61,"value":3140},": use ",{"type":56,"tag":86,"props":3142,"children":3144},{"className":3143},[],[3145],{"type":61,"value":2821},{"type":61,"value":3147}," or ensure ",{"type":56,"tag":86,"props":3149,"children":3151},{"className":3150},[],[3152],{"type":61,"value":3153},"htmlFor",{"type":61,"value":3155}," matches the input ",{"type":56,"tag":86,"props":3157,"children":3159},{"className":3158},[],[3160],{"type":61,"value":3161},"id",{"type":56,"tag":99,"props":3163,"children":3164},{},[3165,3170,3172,3178,3180,3185,3187,3193,3195,3201],{"type":56,"tag":558,"props":3166,"children":3167},{},[3168],{"type":61,"value":3169},"Interactive custom elements",{"type":61,"value":3171},": if you build something with ",{"type":56,"tag":86,"props":3173,"children":3175},{"className":3174},[],[3176],{"type":61,"value":3177},"onClick",{"type":61,"value":3179}," on a\n",{"type":56,"tag":86,"props":3181,"children":3183},{"className":3182},[],[3184],{"type":61,"value":1824},{"type":61,"value":3186},", use ",{"type":56,"tag":86,"props":3188,"children":3190},{"className":3189},[],[3191],{"type":61,"value":3192},"as=\"button\"",{"type":61,"value":3194}," or an actual ",{"type":56,"tag":86,"props":3196,"children":3198},{"className":3197},[],[3199],{"type":61,"value":3200},"\u003Cbutton>",{"type":61,"value":3202}," so keyboard navigation works",{"type":56,"tag":99,"props":3204,"children":3205},{},[3206,3211,3212,3217,3219,3225],{"type":56,"tag":558,"props":3207,"children":3208},{},[3209],{"type":61,"value":3210},"Semantic headings",{"type":61,"value":3140},{"type":56,"tag":86,"props":3213,"children":3215},{"className":3214},[],[3216],{"type":61,"value":57},{"type":61,"value":3218},"–",{"type":56,"tag":86,"props":3220,"children":3222},{"className":3221},[],[3223],{"type":61,"value":3224},"h6",{"type":61,"value":3226}," hierarchy; don't skip levels",{"type":56,"tag":99,"props":3228,"children":3229},{},[3230,3235],{"type":56,"tag":558,"props":3231,"children":3232},{},[3233],{"type":61,"value":3234},"Color contrast",{"type":61,"value":3236},": don't use light gray text on white backgrounds; rely on\nsemantic tokens which are contrast-tested",{"type":56,"tag":70,"props":3238,"children":3239},{},[],{"type":56,"tag":74,"props":3241,"children":3243},{"id":3242},"step-7-nextjs-where-to-add-use-client",[3244,3246],{"type":61,"value":3245},"Step 7 — Next.js: where to add ",{"type":56,"tag":86,"props":3247,"children":3249},{"className":3248},[],[3250],{"type":61,"value":926},{"type":56,"tag":64,"props":3252,"children":3253},{},[3254,3256,3261],{"type":61,"value":3255},"In Next.js App Router, Server Components are the default. Add ",{"type":56,"tag":86,"props":3257,"children":3259},{"className":3258},[],[3260],{"type":61,"value":926},{"type":61,"value":3262},"\nonly to files that need it — not to entire layouts or pages.",{"type":56,"tag":64,"props":3264,"children":3265},{},[3266,3268,3273],{"type":61,"value":3267},"A component needs ",{"type":56,"tag":86,"props":3269,"children":3271},{"className":3270},[],[3272],{"type":61,"value":926},{"type":61,"value":3274}," when it:",{"type":56,"tag":95,"props":3276,"children":3277},{},[3278,3305,3317],{"type":56,"tag":99,"props":3279,"children":3280},{},[3281,3283,3289,3290,3296,3297,3303],{"type":61,"value":3282},"Uses React hooks (",{"type":56,"tag":86,"props":3284,"children":3286},{"className":3285},[],[3287],{"type":61,"value":3288},"useState",{"type":61,"value":126},{"type":56,"tag":86,"props":3291,"children":3293},{"className":3292},[],[3294],{"type":61,"value":3295},"useEffect",{"type":61,"value":126},{"type":56,"tag":86,"props":3298,"children":3300},{"className":3299},[],[3301],{"type":61,"value":3302},"useContext",{"type":61,"value":3304},", etc.)",{"type":56,"tag":99,"props":3306,"children":3307},{},[3308,3310,3315],{"type":61,"value":3309},"Handles browser events (",{"type":56,"tag":86,"props":3311,"children":3313},{"className":3312},[],[3314],{"type":61,"value":3177},{"type":61,"value":3316}," with state, form submission, etc.)",{"type":56,"tag":99,"props":3318,"children":3319},{},[3320],{"type":61,"value":3321},"Uses browser APIs",{"type":56,"tag":182,"props":3323,"children":3325},{"className":575,"code":3324,"language":577,"meta":187,"style":187},"\u002F\u002F Server Component — no directive needed\nexport default function ProductCard({ name, price }: Props) {\n  return (\n    \u003CBox p={4} borderWidth={1} rounded=\"md\">\n      \u003CText fontWeight=\"bold\">{name}\u003C\u002FText>\n      \u003CText color=\"fg.muted\">{price}\u003C\u002FText>\n    \u003C\u002FBox>\n  )\n}\n\n\u002F\u002F Client Component — needs the directive\n;(\"use client\")\nexport function AddToCartButton({ productId }: { productId: string }) {\n  const [added, setAdded] = useState(false)\n  return (\n    \u003CButton onClick={() => setAdded(true)} colorPalette=\"blue\">\n      {added ? \"Added!\" : \"Add to cart\"}\n    \u003C\u002FButton>\n  )\n}\n",[3326],{"type":56,"tag":86,"props":3327,"children":3328},{"__ignoreMap":187},[3329,3337,3392,3403,3474,3528,3580,3595,3602,3609,3616,3624,3652,3706,3761,3772,3845,3899,3915,3923],{"type":56,"tag":193,"props":3330,"children":3331},{"class":195,"line":196},[3332],{"type":56,"tag":193,"props":3333,"children":3334},{"style":200},[3335],{"type":61,"value":3336},"\u002F\u002F Server Component — no directive needed\n",{"type":56,"tag":193,"props":3338,"children":3339},{"class":195,"line":206},[3340,3344,3348,3352,3357,3361,3366,3370,3375,3379,3384,3388],{"type":56,"tag":193,"props":3341,"children":3342},{"style":587},[3343],{"type":61,"value":642},{"type":56,"tag":193,"props":3345,"children":3346},{"style":587},[3347],{"type":61,"value":647},{"type":56,"tag":193,"props":3349,"children":3350},{"style":650},[3351],{"type":61,"value":653},{"type":56,"tag":193,"props":3353,"children":3354},{"style":656},[3355],{"type":61,"value":3356}," ProductCard",{"type":56,"tag":193,"props":3358,"children":3359},{"style":593},[3360],{"type":61,"value":1026},{"type":56,"tag":193,"props":3362,"children":3363},{"style":670},[3364],{"type":61,"value":3365}," name",{"type":56,"tag":193,"props":3367,"children":3368},{"style":593},[3369],{"type":61,"value":1036},{"type":56,"tag":193,"props":3371,"children":3372},{"style":670},[3373],{"type":61,"value":3374}," price",{"type":56,"tag":193,"props":3376,"children":3377},{"style":593},[3378],{"type":61,"value":1520},{"type":56,"tag":193,"props":3380,"children":3381},{"style":210},[3382],{"type":61,"value":3383}," Props",{"type":56,"tag":193,"props":3385,"children":3386},{"style":593},[3387],{"type":61,"value":149},{"type":56,"tag":193,"props":3389,"children":3390},{"style":593},[3391],{"type":61,"value":690},{"type":56,"tag":193,"props":3393,"children":3394},{"class":195,"line":232},[3395,3399],{"type":56,"tag":193,"props":3396,"children":3397},{"style":587},[3398],{"type":61,"value":738},{"type":56,"tag":193,"props":3400,"children":3401},{"style":696},[3402],{"type":61,"value":743},{"type":56,"tag":193,"props":3404,"children":3405},{"class":195,"line":242},[3406,3410,3414,3419,3423,3427,3431,3436,3440,3445,3449,3454,3458,3462,3466,3470],{"type":56,"tag":193,"props":3407,"children":3408},{"style":593},[3409],{"type":61,"value":751},{"type":56,"tag":193,"props":3411,"children":3412},{"style":210},[3413],{"type":61,"value":1824},{"type":56,"tag":193,"props":3415,"children":3416},{"style":650},[3417],{"type":61,"value":3418}," p",{"type":56,"tag":193,"props":3420,"children":3421},{"style":593},[3422],{"type":61,"value":1586},{"type":56,"tag":193,"props":3424,"children":3425},{"style":2429},[3426],{"type":61,"value":2432},{"type":56,"tag":193,"props":3428,"children":3429},{"style":593},[3430],{"type":61,"value":2460},{"type":56,"tag":193,"props":3432,"children":3433},{"style":650},[3434],{"type":61,"value":3435},"borderWidth",{"type":56,"tag":193,"props":3437,"children":3438},{"style":593},[3439],{"type":61,"value":1586},{"type":56,"tag":193,"props":3441,"children":3442},{"style":2429},[3443],{"type":61,"value":3444},"1",{"type":56,"tag":193,"props":3446,"children":3447},{"style":593},[3448],{"type":61,"value":2460},{"type":56,"tag":193,"props":3450,"children":3451},{"style":650},[3452],{"type":61,"value":3453},"rounded",{"type":56,"tag":193,"props":3455,"children":3456},{"style":593},[3457],{"type":61,"value":766},{"type":56,"tag":193,"props":3459,"children":3460},{"style":593},[3461],{"type":61,"value":771},{"type":56,"tag":193,"props":3463,"children":3464},{"style":216},[3465],{"type":61,"value":2196},{"type":56,"tag":193,"props":3467,"children":3468},{"style":593},[3469],{"type":61,"value":771},{"type":56,"tag":193,"props":3471,"children":3472},{"style":593},[3473],{"type":61,"value":790},{"type":56,"tag":193,"props":3475,"children":3476},{"class":195,"line":251},[3477,3481,3485,3490,3494,3498,3503,3507,3511,3516,3520,3524],{"type":56,"tag":193,"props":3478,"children":3479},{"style":593},[3480],{"type":61,"value":798},{"type":56,"tag":193,"props":3482,"children":3483},{"style":210},[3484],{"type":61,"value":2142},{"type":56,"tag":193,"props":3486,"children":3487},{"style":650},[3488],{"type":61,"value":3489}," fontWeight",{"type":56,"tag":193,"props":3491,"children":3492},{"style":593},[3493],{"type":61,"value":766},{"type":56,"tag":193,"props":3495,"children":3496},{"style":593},[3497],{"type":61,"value":771},{"type":56,"tag":193,"props":3499,"children":3500},{"style":216},[3501],{"type":61,"value":3502},"bold",{"type":56,"tag":193,"props":3504,"children":3505},{"style":593},[3506],{"type":61,"value":771},{"type":56,"tag":193,"props":3508,"children":3509},{"style":593},[3510],{"type":61,"value":825},{"type":56,"tag":193,"props":3512,"children":3513},{"style":599},[3514],{"type":61,"value":3515},"name",{"type":56,"tag":193,"props":3517,"children":3518},{"style":593},[3519],{"type":61,"value":835},{"type":56,"tag":193,"props":3521,"children":3522},{"style":210},[3523],{"type":61,"value":2142},{"type":56,"tag":193,"props":3525,"children":3526},{"style":593},[3527],{"type":61,"value":790},{"type":56,"tag":193,"props":3529,"children":3530},{"class":195,"line":273},[3531,3535,3539,3543,3547,3551,3555,3559,3563,3568,3572,3576],{"type":56,"tag":193,"props":3532,"children":3533},{"style":593},[3534],{"type":61,"value":798},{"type":56,"tag":193,"props":3536,"children":3537},{"style":210},[3538],{"type":61,"value":2142},{"type":56,"tag":193,"props":3540,"children":3541},{"style":650},[3542],{"type":61,"value":2087},{"type":56,"tag":193,"props":3544,"children":3545},{"style":593},[3546],{"type":61,"value":766},{"type":56,"tag":193,"props":3548,"children":3549},{"style":593},[3550],{"type":61,"value":771},{"type":56,"tag":193,"props":3552,"children":3553},{"style":216},[3554],{"type":61,"value":2159},{"type":56,"tag":193,"props":3556,"children":3557},{"style":593},[3558],{"type":61,"value":771},{"type":56,"tag":193,"props":3560,"children":3561},{"style":593},[3562],{"type":61,"value":825},{"type":56,"tag":193,"props":3564,"children":3565},{"style":599},[3566],{"type":61,"value":3567},"price",{"type":56,"tag":193,"props":3569,"children":3570},{"style":593},[3571],{"type":61,"value":835},{"type":56,"tag":193,"props":3573,"children":3574},{"style":210},[3575],{"type":61,"value":2142},{"type":56,"tag":193,"props":3577,"children":3578},{"style":593},[3579],{"type":61,"value":790},{"type":56,"tag":193,"props":3581,"children":3582},{"class":195,"line":281},[3583,3587,3591],{"type":56,"tag":193,"props":3584,"children":3585},{"style":593},[3586],{"type":61,"value":869},{"type":56,"tag":193,"props":3588,"children":3589},{"style":210},[3590],{"type":61,"value":1824},{"type":56,"tag":193,"props":3592,"children":3593},{"style":593},[3594],{"type":61,"value":790},{"type":56,"tag":193,"props":3596,"children":3597},{"class":195,"line":290},[3598],{"type":56,"tag":193,"props":3599,"children":3600},{"style":696},[3601],{"type":61,"value":886},{"type":56,"tag":193,"props":3603,"children":3604},{"class":195,"line":311},[3605],{"type":56,"tag":193,"props":3606,"children":3607},{"style":593},[3608],{"type":61,"value":895},{"type":56,"tag":193,"props":3610,"children":3611},{"class":195,"line":319},[3612],{"type":56,"tag":193,"props":3613,"children":3614},{"emptyLinePlaceholder":236},[3615],{"type":61,"value":239},{"type":56,"tag":193,"props":3617,"children":3618},{"class":195,"line":328},[3619],{"type":56,"tag":193,"props":3620,"children":3621},{"style":200},[3622],{"type":61,"value":3623},"\u002F\u002F Client Component — needs the directive\n",{"type":56,"tag":193,"props":3625,"children":3626},{"class":195,"line":846},[3627,3632,3636,3640,3644,3648],{"type":56,"tag":193,"props":3628,"children":3629},{"style":593},[3630],{"type":61,"value":3631},";",{"type":56,"tag":193,"props":3633,"children":3634},{"style":599},[3635],{"type":61,"value":1225},{"type":56,"tag":193,"props":3637,"children":3638},{"style":593},[3639],{"type":61,"value":771},{"type":56,"tag":193,"props":3641,"children":3642},{"style":216},[3643],{"type":61,"value":1398},{"type":56,"tag":193,"props":3645,"children":3646},{"style":593},[3647],{"type":61,"value":771},{"type":56,"tag":193,"props":3649,"children":3650},{"style":599},[3651],{"type":61,"value":1353},{"type":56,"tag":193,"props":3653,"children":3654},{"class":195,"line":863},[3655,3659,3663,3668,3672,3677,3681,3685,3689,3693,3698,3702],{"type":56,"tag":193,"props":3656,"children":3657},{"style":587},[3658],{"type":61,"value":642},{"type":56,"tag":193,"props":3660,"children":3661},{"style":650},[3662],{"type":61,"value":653},{"type":56,"tag":193,"props":3664,"children":3665},{"style":656},[3666],{"type":61,"value":3667}," AddToCartButton",{"type":56,"tag":193,"props":3669,"children":3670},{"style":593},[3671],{"type":61,"value":1026},{"type":56,"tag":193,"props":3673,"children":3674},{"style":670},[3675],{"type":61,"value":3676}," productId",{"type":56,"tag":193,"props":3678,"children":3679},{"style":593},[3680],{"type":61,"value":1520},{"type":56,"tag":193,"props":3682,"children":3683},{"style":593},[3684],{"type":61,"value":596},{"type":56,"tag":193,"props":3686,"children":3687},{"style":696},[3688],{"type":61,"value":3676},{"type":56,"tag":193,"props":3690,"children":3691},{"style":593},[3692],{"type":61,"value":703},{"type":56,"tag":193,"props":3694,"children":3695},{"style":210},[3696],{"type":61,"value":3697}," string",{"type":56,"tag":193,"props":3699,"children":3700},{"style":593},[3701],{"type":61,"value":1046},{"type":56,"tag":193,"props":3703,"children":3704},{"style":593},[3705],{"type":61,"value":690},{"type":56,"tag":193,"props":3707,"children":3708},{"class":195,"line":880},[3709,3714,3719,3724,3728,3733,3737,3742,3747,3751,3757],{"type":56,"tag":193,"props":3710,"children":3711},{"style":650},[3712],{"type":61,"value":3713},"  const",{"type":56,"tag":193,"props":3715,"children":3716},{"style":593},[3717],{"type":61,"value":3718}," [",{"type":56,"tag":193,"props":3720,"children":3721},{"style":599},[3722],{"type":61,"value":3723},"added",{"type":56,"tag":193,"props":3725,"children":3726},{"style":593},[3727],{"type":61,"value":1036},{"type":56,"tag":193,"props":3729,"children":3730},{"style":599},[3731],{"type":61,"value":3732}," setAdded",{"type":56,"tag":193,"props":3734,"children":3735},{"style":593},[3736],{"type":61,"value":2455},{"type":56,"tag":193,"props":3738,"children":3739},{"style":593},[3740],{"type":61,"value":3741}," =",{"type":56,"tag":193,"props":3743,"children":3744},{"style":656},[3745],{"type":61,"value":3746}," useState",{"type":56,"tag":193,"props":3748,"children":3749},{"style":696},[3750],{"type":61,"value":1225},{"type":56,"tag":193,"props":3752,"children":3754},{"style":3753},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[3755],{"type":61,"value":3756},"false",{"type":56,"tag":193,"props":3758,"children":3759},{"style":696},[3760],{"type":61,"value":1353},{"type":56,"tag":193,"props":3762,"children":3763},{"class":195,"line":889},[3764,3768],{"type":56,"tag":193,"props":3765,"children":3766},{"style":587},[3767],{"type":61,"value":738},{"type":56,"tag":193,"props":3769,"children":3770},{"style":696},[3771],{"type":61,"value":743},{"type":56,"tag":193,"props":3773,"children":3775},{"class":195,"line":3774},16,[3776,3780,3784,3789,3794,3799,3803,3807,3812,3816,3820,3825,3829,3833,3837,3841],{"type":56,"tag":193,"props":3777,"children":3778},{"style":593},[3779],{"type":61,"value":751},{"type":56,"tag":193,"props":3781,"children":3782},{"style":210},[3783],{"type":61,"value":2253},{"type":56,"tag":193,"props":3785,"children":3786},{"style":650},[3787],{"type":61,"value":3788}," onClick",{"type":56,"tag":193,"props":3790,"children":3791},{"style":593},[3792],{"type":61,"value":3793},"={()",{"type":56,"tag":193,"props":3795,"children":3796},{"style":650},[3797],{"type":61,"value":3798}," =>",{"type":56,"tag":193,"props":3800,"children":3801},{"style":656},[3802],{"type":61,"value":3732},{"type":56,"tag":193,"props":3804,"children":3805},{"style":599},[3806],{"type":61,"value":1225},{"type":56,"tag":193,"props":3808,"children":3809},{"style":3753},[3810],{"type":61,"value":3811},"true",{"type":56,"tag":193,"props":3813,"children":3814},{"style":599},[3815],{"type":61,"value":149},{"type":56,"tag":193,"props":3817,"children":3818},{"style":593},[3819],{"type":61,"value":2460},{"type":56,"tag":193,"props":3821,"children":3822},{"style":650},[3823],{"type":61,"value":3824},"colorPalette",{"type":56,"tag":193,"props":3826,"children":3827},{"style":593},[3828],{"type":61,"value":766},{"type":56,"tag":193,"props":3830,"children":3831},{"style":593},[3832],{"type":61,"value":771},{"type":56,"tag":193,"props":3834,"children":3835},{"style":216},[3836],{"type":61,"value":2271},{"type":56,"tag":193,"props":3838,"children":3839},{"style":593},[3840],{"type":61,"value":771},{"type":56,"tag":193,"props":3842,"children":3843},{"style":593},[3844],{"type":61,"value":790},{"type":56,"tag":193,"props":3846,"children":3848},{"class":195,"line":3847},17,[3849,3854,3859,3864,3868,3873,3877,3882,3886,3891,3895],{"type":56,"tag":193,"props":3850,"children":3851},{"style":593},[3852],{"type":61,"value":3853},"      {",{"type":56,"tag":193,"props":3855,"children":3856},{"style":599},[3857],{"type":61,"value":3858},"added ",{"type":56,"tag":193,"props":3860,"children":3861},{"style":593},[3862],{"type":61,"value":3863},"?",{"type":56,"tag":193,"props":3865,"children":3866},{"style":593},[3867],{"type":61,"value":617},{"type":56,"tag":193,"props":3869,"children":3870},{"style":216},[3871],{"type":61,"value":3872},"Added!",{"type":56,"tag":193,"props":3874,"children":3875},{"style":593},[3876],{"type":61,"value":771},{"type":56,"tag":193,"props":3878,"children":3879},{"style":593},[3880],{"type":61,"value":3881}," :",{"type":56,"tag":193,"props":3883,"children":3884},{"style":593},[3885],{"type":61,"value":617},{"type":56,"tag":193,"props":3887,"children":3888},{"style":216},[3889],{"type":61,"value":3890},"Add to cart",{"type":56,"tag":193,"props":3892,"children":3893},{"style":593},[3894],{"type":61,"value":771},{"type":56,"tag":193,"props":3896,"children":3897},{"style":593},[3898],{"type":61,"value":895},{"type":56,"tag":193,"props":3900,"children":3902},{"class":195,"line":3901},18,[3903,3907,3911],{"type":56,"tag":193,"props":3904,"children":3905},{"style":593},[3906],{"type":61,"value":869},{"type":56,"tag":193,"props":3908,"children":3909},{"style":210},[3910],{"type":61,"value":2253},{"type":56,"tag":193,"props":3912,"children":3913},{"style":593},[3914],{"type":61,"value":790},{"type":56,"tag":193,"props":3916,"children":3918},{"class":195,"line":3917},19,[3919],{"type":56,"tag":193,"props":3920,"children":3921},{"style":696},[3922],{"type":61,"value":886},{"type":56,"tag":193,"props":3924,"children":3926},{"class":195,"line":3925},20,[3927],{"type":56,"tag":193,"props":3928,"children":3929},{"style":593},[3930],{"type":61,"value":895},{"type":56,"tag":64,"props":3932,"children":3933},{},[3934],{"type":61,"value":3935},"The goal is to push interactivity to the leaves — keep as much of the tree as\nServer Components as possible.",{"type":56,"tag":70,"props":3937,"children":3938},{},[],{"type":56,"tag":74,"props":3940,"children":3942},{"id":3941},"step-8-when-to-extract-components-use-recipes-and-customize-the-theme",[3943],{"type":61,"value":3944},"Step 8 — When to extract components, use recipes, and customize the theme",{"type":56,"tag":64,"props":3946,"children":3947},{},[3948],{"type":61,"value":3949},"Extract a component when the same structure appears more than twice, or when a\npiece is complex enough that naming it makes the parent clearer.",{"type":56,"tag":64,"props":3951,"children":3952},{},[3953,3955,3960,3962,3967],{"type":61,"value":3954},"Suggest a ",{"type":56,"tag":558,"props":3956,"children":3957},{},[3958],{"type":61,"value":3959},"recipe",{"type":61,"value":3961}," when a component has meaningful style variants that a\ndeveloper would want to customize. Suggest a ",{"type":56,"tag":558,"props":3963,"children":3964},{},[3965],{"type":61,"value":3966},"slot recipe",{"type":61,"value":3968}," for components with\nmultiple coordinated parts (card with header\u002Fbody\u002Ffooter, stat with\nlabel\u002Fvalue\u002Ficon, etc.).",{"type":56,"tag":64,"props":3970,"children":3971},{},[3972,3974,3980,3982,3988,3989,3994],{"type":61,"value":3973},"For deeper theming work — defining brand color tokens, semantic tokens with dark\nmode values, full recipe\u002Fslot-recipe authoring, typegen, or ejecting the default\ntheme — read ",{"type":56,"tag":86,"props":3975,"children":3977},{"className":3976},[],[3978],{"type":61,"value":3979},"references\u002Ftheming.md",{"type":61,"value":3981}," before responding. It covers the complete\n",{"type":56,"tag":86,"props":3983,"children":3985},{"className":3984},[],[3986],{"type":61,"value":3987},"defineConfig",{"type":61,"value":1993},{"type":56,"tag":86,"props":3990,"children":3992},{"className":3991},[],[3993],{"type":61,"value":1802},{"type":61,"value":3995}," API with full examples.",{"type":56,"tag":64,"props":3997,"children":3998},{},[3999,4001,4007,4008,4014,4016,4022,4024,4030,4032,4038],{"type":61,"value":4000},"For any chart request — bar charts, area charts, line charts, pie\u002Fdonut charts,\n",{"type":56,"tag":86,"props":4002,"children":4004},{"className":4003},[],[4005],{"type":61,"value":4006},"BarList",{"type":61,"value":126},{"type":56,"tag":86,"props":4009,"children":4011},{"className":4010},[],[4012],{"type":61,"value":4013},"BarSegment",{"type":61,"value":4015},", or anything involving ",{"type":56,"tag":86,"props":4017,"children":4019},{"className":4018},[],[4020],{"type":61,"value":4021},"@chakra-ui\u002Fcharts",{"type":61,"value":4023}," — read\n",{"type":56,"tag":86,"props":4025,"children":4027},{"className":4026},[],[4028],{"type":61,"value":4029},"references\u002Fcharts.md",{"type":61,"value":4031}," before responding. It covers the ",{"type":56,"tag":86,"props":4033,"children":4035},{"className":4034},[],[4036],{"type":61,"value":4037},"useChart",{"type":61,"value":4039}," hook, all\nthree chart types, Recharts integration, color tokens, and complete runnable\nexamples.",{"type":56,"tag":64,"props":4041,"children":4042},{},[4043,4045,4051],{"type":61,"value":4044},"When you're unsure which component to use, or the user hasn't specified one,\nread ",{"type":56,"tag":86,"props":4046,"children":4048},{"className":4047},[],[4049],{"type":61,"value":4050},"references\u002Fcomponent-decision-tree.md",{"type":61,"value":4052},". It covers every Chakra component\nwith guidance on when to choose one over a similar alternative.",{"type":56,"tag":70,"props":4054,"children":4055},{},[],{"type":56,"tag":74,"props":4057,"children":4059},{"id":4058},"output-format",[4060],{"type":61,"value":4061},"Output format",{"type":56,"tag":64,"props":4063,"children":4064},{},[4065],{"type":61,"value":4066},"Produce:",{"type":56,"tag":4068,"props":4069,"children":4070},"ol",{},[4071,4095,4105,4115,4139],{"type":56,"tag":99,"props":4072,"children":4073},{},[4074,4079,4081,4087,4089],{"type":56,"tag":558,"props":4075,"children":4076},{},[4077],{"type":61,"value":4078},"Complete, runnable code",{"type":61,"value":4080}," — correct imports, no placeholders like ",{"type":56,"tag":86,"props":4082,"children":4084},{"className":4083},[],[4085],{"type":61,"value":4086},"TODO",{"type":61,"value":4088}," or\n",{"type":56,"tag":86,"props":4090,"children":4092},{"className":4091},[],[4093],{"type":61,"value":4094},"...rest of component",{"type":56,"tag":99,"props":4096,"children":4097},{},[4098,4103],{"type":56,"tag":558,"props":4099,"children":4100},{},[4101],{"type":61,"value":4102},"Proper import statements",{"type":61,"value":4104}," — group Chakra imports, then local imports",{"type":56,"tag":99,"props":4106,"children":4107},{},[4108,4113],{"type":56,"tag":558,"props":4109,"children":4110},{},[4111],{"type":61,"value":4112},"Component separation",{"type":61,"value":4114}," — split into multiple components\u002Ffiles if the\ncomponent is complex or contains clearly separable parts",{"type":56,"tag":99,"props":4116,"children":4117},{},[4118,4123,4125,4130,4132,4137],{"type":56,"tag":558,"props":4119,"children":4120},{},[4121],{"type":61,"value":4122},"Responsive styles",{"type":61,"value":4124}," — at minimum ",{"type":56,"tag":86,"props":4126,"children":4128},{"className":4127},[],[4129],{"type":61,"value":2732},{"type":61,"value":4131}," and ",{"type":56,"tag":86,"props":4133,"children":4135},{"className":4134},[],[4136],{"type":61,"value":2196},{"type":61,"value":4138}," breakpoints for layout",{"type":56,"tag":99,"props":4140,"children":4141},{},[4142,4147],{"type":56,"tag":558,"props":4143,"children":4144},{},[4145],{"type":61,"value":4146},"Brief explanation after the code",{"type":61,"value":4148}," — 2–4 sentences on the key decisions\nmade (layout approach, accessibility choices, responsive strategy). Skip the\nexplanation if the request was trivial.",{"type":56,"tag":182,"props":4150,"children":4152},{"className":575,"code":4151,"language":577,"meta":187,"style":187},"\u002F\u002F Good import style\nimport { Box, Button, Field, Stack, Text } from \"@chakra-ui\u002Freact\"\n\u002F\u002F Then local\nimport { SomeLocalComponent } from \".\u002FSomeLocalComponent\"\n",[4153],{"type":56,"tag":86,"props":4154,"children":4155},{"__ignoreMap":187},[4156,4164,4236,4244],{"type":56,"tag":193,"props":4157,"children":4158},{"class":195,"line":196},[4159],{"type":56,"tag":193,"props":4160,"children":4161},{"style":200},[4162],{"type":61,"value":4163},"\u002F\u002F Good import style\n",{"type":56,"tag":193,"props":4165,"children":4166},{"class":195,"line":206},[4167,4171,4175,4180,4184,4189,4193,4198,4202,4207,4211,4216,4220,4224,4228,4232],{"type":56,"tag":193,"props":4168,"children":4169},{"style":587},[4170],{"type":61,"value":590},{"type":56,"tag":193,"props":4172,"children":4173},{"style":593},[4174],{"type":61,"value":596},{"type":56,"tag":193,"props":4176,"children":4177},{"style":599},[4178],{"type":61,"value":4179}," Box",{"type":56,"tag":193,"props":4181,"children":4182},{"style":593},[4183],{"type":61,"value":1036},{"type":56,"tag":193,"props":4185,"children":4186},{"style":599},[4187],{"type":61,"value":4188}," Button",{"type":56,"tag":193,"props":4190,"children":4191},{"style":593},[4192],{"type":61,"value":1036},{"type":56,"tag":193,"props":4194,"children":4195},{"style":599},[4196],{"type":61,"value":4197}," Field",{"type":56,"tag":193,"props":4199,"children":4200},{"style":593},[4201],{"type":61,"value":1036},{"type":56,"tag":193,"props":4203,"children":4204},{"style":599},[4205],{"type":61,"value":4206}," Stack",{"type":56,"tag":193,"props":4208,"children":4209},{"style":593},[4210],{"type":61,"value":1036},{"type":56,"tag":193,"props":4212,"children":4213},{"style":599},[4214],{"type":61,"value":4215}," Text",{"type":56,"tag":193,"props":4217,"children":4218},{"style":593},[4219],{"type":61,"value":607},{"type":56,"tag":193,"props":4221,"children":4222},{"style":587},[4223],{"type":61,"value":612},{"type":56,"tag":193,"props":4225,"children":4226},{"style":593},[4227],{"type":61,"value":617},{"type":56,"tag":193,"props":4229,"children":4230},{"style":216},[4231],{"type":61,"value":1444},{"type":56,"tag":193,"props":4233,"children":4234},{"style":593},[4235],{"type":61,"value":627},{"type":56,"tag":193,"props":4237,"children":4238},{"class":195,"line":232},[4239],{"type":56,"tag":193,"props":4240,"children":4241},{"style":200},[4242],{"type":61,"value":4243},"\u002F\u002F Then local\n",{"type":56,"tag":193,"props":4245,"children":4246},{"class":195,"line":242},[4247,4251,4255,4260,4264,4268,4272,4277],{"type":56,"tag":193,"props":4248,"children":4249},{"style":587},[4250],{"type":61,"value":590},{"type":56,"tag":193,"props":4252,"children":4253},{"style":593},[4254],{"type":61,"value":596},{"type":56,"tag":193,"props":4256,"children":4257},{"style":599},[4258],{"type":61,"value":4259}," SomeLocalComponent",{"type":56,"tag":193,"props":4261,"children":4262},{"style":593},[4263],{"type":61,"value":607},{"type":56,"tag":193,"props":4265,"children":4266},{"style":587},[4267],{"type":61,"value":612},{"type":56,"tag":193,"props":4269,"children":4270},{"style":593},[4271],{"type":61,"value":617},{"type":56,"tag":193,"props":4273,"children":4274},{"style":216},[4275],{"type":61,"value":4276},".\u002FSomeLocalComponent",{"type":56,"tag":193,"props":4278,"children":4279},{"style":593},[4280],{"type":61,"value":627},{"type":56,"tag":70,"props":4282,"children":4283},{},[],{"type":56,"tag":74,"props":4285,"children":4287},{"id":4286},"when-to-ask-first",[4288],{"type":61,"value":4289},"When to ask first",{"type":56,"tag":64,"props":4291,"children":4292},{},[4293],{"type":61,"value":4294},"Build immediately if the request is clear enough to produce something useful.\nAsk first when:",{"type":56,"tag":95,"props":4296,"children":4297},{},[4298,4303,4308],{"type":56,"tag":99,"props":4299,"children":4300},{},[4301],{"type":61,"value":4302},"The data shape is unknown and it changes the entire structure (e.g., \"build a\ntable\" — how many columns? what data?)",{"type":56,"tag":99,"props":4304,"children":4305},{},[4306],{"type":61,"value":4307},"There are meaningful design choices the user might care about (layout\ndirection, number of columns, color palette)",{"type":56,"tag":99,"props":4309,"children":4310},{},[4311],{"type":61,"value":4312},"The user references files or existing components you haven't seen",{"type":56,"tag":64,"props":4314,"children":4315},{},[4316],{"type":61,"value":4317},"When in doubt, state your assumptions at the top of the response and build —\nit's faster for the user to redirect from something concrete than from nothing.",{"type":56,"tag":4319,"props":4320,"children":4321},"style",{},[4322],{"type":61,"value":4323},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":4325,"total":232},[4326,4333,4350],{"slug":4,"name":4,"fn":5,"description":6,"org":4327,"tags":4328,"stars":25,"repoUrl":26,"updatedAt":27},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4329,4330,4331,4332],{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},{"slug":4334,"name":4334,"fn":4335,"description":4336,"org":4337,"tags":4338,"stars":25,"repoUrl":26,"updatedAt":4349},"chakra-ui-migrate","migrate Chakra UI projects to v3","Migrate Chakra UI projects from v2 to v3, covering package changes, codemods, provider setup, color mode, prop renaming, compound components, theming, recipes, and Next.js updates. Use this skill whenever a user is upgrading Chakra UI versions, encountering breaking changes after an upgrade, converting old v2 patterns (ColorModeScript, useColorModeValue, styleConfig, extendTheme, isDisabled, colorScheme, @chakra-ui\u002Ficons, framer-motion dependency), fixing compound component patterns, or asking about differences between Chakra UI v2 and v3 — even if they don't say \"migrate\" or \"upgrade\" explicitly.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4339,4340,4343,4346,4348],{"name":20,"slug":21,"type":15},{"name":4341,"slug":4342,"type":15},"Migration","migration",{"name":4344,"slug":4345,"type":15},"Next.js","next-js",{"name":4347,"slug":38,"type":15},"React",{"name":17,"slug":18,"type":15},"2026-07-12T08:48:25.08774",{"slug":4351,"name":4351,"fn":4352,"description":4353,"org":4354,"tags":4355,"stars":25,"repoUrl":26,"updatedAt":4360},"chakra-ui-refactor","refactor and improve Chakra UI components","Review, convert, and improve UI code using Chakra UI v3. Use this skill whenever a user wants to review Chakra UI code for issues, convert plain HTML\u002FCSS, Tailwind, CSS Modules, or styled-components to Chakra UI, clean up messy Chakra components, fix layout structure or token usage, or asks anything like \"is this correct\", \"what's wrong with this\", \"review my component\", \"refactor this\", \"clean up\", \"convert\", or \"chakra-ify this\" — even without the words \"review\" or \"refactor\". Trigger on any request to check, improve, or convert Chakra UI code, however casually phrased.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4356,4357,4358,4359],{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":4347,"slug":38,"type":15},{"name":17,"slug":18,"type":15},"2026-07-12T08:48:28.392675",{"items":4362,"total":232},[4363,4370,4378],{"slug":4,"name":4,"fn":5,"description":6,"org":4364,"tags":4365,"stars":25,"repoUrl":26,"updatedAt":27},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4366,4367,4368,4369],{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},{"slug":4334,"name":4334,"fn":4335,"description":4336,"org":4371,"tags":4372,"stars":25,"repoUrl":26,"updatedAt":4349},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4373,4374,4375,4376,4377],{"name":20,"slug":21,"type":15},{"name":4341,"slug":4342,"type":15},{"name":4344,"slug":4345,"type":15},{"name":4347,"slug":38,"type":15},{"name":17,"slug":18,"type":15},{"slug":4351,"name":4351,"fn":4352,"description":4353,"org":4379,"tags":4380,"stars":25,"repoUrl":26,"updatedAt":4360},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4381,4382,4383,4384],{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":4347,"slug":38,"type":15},{"name":17,"slug":18,"type":15}]