.changelog/v3.mdx

@@ -5,6 +5,15 @@ description:
   features, bug fixes, and improvements.
 ---
 
+## [3.14.0](./#3.14.0) - 2025-03-14
+
+### Changed
+
+- **General**: Improve render performance by upgrading to the latest Ark UI v5.
+  This brings a **1.5x - 4x** improvements across components. Learn more from
+  the
+  [Ark UI v5 changelog](https://ark-ui.com/react/docs/overview/changelog#500---2025-03-06).
+
 ## [3.13.0](./#3.13.0) - 2025-03-13
 
 ### Added

apps/compositions/package.json

@@ -19,17 +19,17 @@
     "@chakra-ui/react": "workspace:*",
     "@hookform/resolvers": "3.10.0",
     "@tanstack/react-table": "8.21.2",
-    "@tanstack/react-virtual": "3.13.2",
+    "@tanstack/react-virtual": "3.13.4",
     "es-toolkit": "1.33.0",
     "react-spinners": "0.15.0",
-    "next-themes": "0.4.5",
+    "next-themes": "0.4.6",
     "recharts": "2.13.3",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-use": "17.5.1",
+    "react": "^19",
+    "react-dom": "^19",
+    "react-use": "17.6.0",
     "react-frame-component": "5.2.7",
-    "react-hook-form": "7.53.2",
-    "react-markdown": "9.0.3",
+    "react-hook-form": "7.54.2",
+    "react-markdown": "10.1.0",
     "react-icons": "5.5.0",
     "react-lorem-ipsum": "1.4.10",
     "use-mask-input": "3.4.2",

apps/compositions/src/examples/radio-controlled.tsx

@@ -4,7 +4,7 @@ import { HStack, RadioGroup } from "@chakra-ui/react"
 import { useState } from "react"
 
 export const RadioControlled = () => {
-  const [value, setValue] = useState("1")
+  const [value, setValue] = useState<string | null>(null)
   return (
     <RadioGroup.Root value={value} onValueChange={(e) => setValue(e.value)}>
       <HStack gap="6">

apps/compositions/src/examples/segmented-control-controlled.tsx

@@ -4,7 +4,7 @@ import { SegmentGroup } from "@chakra-ui/react"
 import { useState } from "react"
 
 export const SegmentedControlControlled = () => {
-  const [value, setValue] = useState("React")
+  const [value, setValue] = useState<string | null>("React")
   return (
     <SegmentGroup.Root value={value} onValueChange={(e) => setValue(e.value)}>
       <SegmentGroup.Indicator />

apps/compositions/src/examples/segmented-control-in-card.tsx

@@ -11,18 +11,21 @@ export const SegmentedControlInCard = () => {
         <Field.Root>
           <Field.Label>Bedrooms</Field.Label>
           <SegmentGroup.Root defaultValue="Any">
+            <SegmentGroup.Indicator />
             <SegmentGroup.Items items={["Any", "1", "2", "3", "3+"]} />
           </SegmentGroup.Root>
         </Field.Root>
         <Field.Root>
           <Field.Label>Beds</Field.Label>
           <SegmentGroup.Root defaultValue="1">
+            <SegmentGroup.Indicator />
             <SegmentGroup.Items items={["Any", "1", "2", "2+"]} />
           </SegmentGroup.Root>
         </Field.Root>
         <Field.Root>
           <Field.Label>Bathrooms</Field.Label>
           <SegmentGroup.Root defaultValue="3">
+            <SegmentGroup.Indicator />
             <SegmentGroup.Items items={["Any", "1", "2", "3"]} />
           </SegmentGroup.Root>
         </Field.Root>

apps/compositions/src/examples/select-basic.tsx

@@ -18,9 +18,9 @@ export const SelectBasic = () => {
       <Portal>
         <Select.Positioner>
           <Select.Content>
-            {frameworks.items.map((movie) => (
-              <Select.Item item={movie} key={movie.value}>
-                {movie.label}
+            {frameworks.items.map((framework) => (
+              <Select.Item item={framework} key={framework.value}>
+                {framework.label}
                 <Select.ItemIndicator />
               </Select.Item>
             ))}

apps/compositions/src/examples/select-with-icon-button.tsx

@@ -47,11 +47,11 @@ export const SelectWithIconButton = () => {
       <Portal>
         <Select.Positioner>
           <Select.Content minW="32">
-            {frameworks.items.map((movie) => (
-              <Select.Item item={movie} key={movie.value}>
+            {frameworks.items.map((framework) => (
+              <Select.Item item={framework} key={framework.value}>
                 <HStack>
-                  {movie.icon}
-                  {movie.label}
+                  {framework.icon}
+                  {framework.label}
                 </HStack>
                 <Select.ItemIndicator />
               </Select.Item>

apps/compositions/src/examples/select-with-item-description.tsx

@@ -29,12 +29,12 @@ export const SelectWithItemDescription = () => {
       <Portal>
         <Select.Positioner>
           <Select.Content>
-            {frameworks.items.map((movie) => (
-              <Select.Item item={movie} key={movie.value}>
+            {frameworks.items.map((framework) => (
+              <Select.Item item={framework} key={framework.value}>
                 <Stack gap="0">
-                  <Select.ItemText>{movie.label}</Select.ItemText>
+                  <Select.ItemText>{framework.label}</Select.ItemText>
                   <Span color="fg.muted" textStyle="xs">
-                    {movie.description}
+                    {framework.description}
                   </Span>
                 </Stack>
                 <Select.ItemIndicator />

apps/compositions/src/examples/select-with-option-group.tsx

@@ -10,7 +10,7 @@ export const SelectWithOptionGroup = () => {
       <Select.Label>Select framework</Select.Label>
       <Select.Control>
         <Select.Trigger>
-          <Select.ValueText placeholder="Select movie" />
+          <Select.ValueText placeholder="Select framework" />
         </Select.Trigger>
         <Select.IndicatorGroup>
           <Select.Indicator />

apps/www/app/(llms)/llms-component/[component]/route.ts

@@ -0,0 +1,38 @@
+import {
+  cleanupContent,
+  findMatchingDocs,
+  minifyContent,
+  parseComponent,
+} from "../../shared"
+
+export const dynamic = "force-static"
+
+interface Params {
+  component: string
+}
+
+export async function GET(_request: Request, ctx: { params: Promise<Params> }) {
+  let { component: componentParam } = await ctx.params
+  const { minify, component } = parseComponent(componentParam)
+
+  let content = !minify
+    ? `<SYSTEM>Documentation for the ${component} component in Chakra UI v3.</SYSTEM>\n\n`
+    : ""
+
+  const componentDocs = findMatchingDocs(component)
+
+  for (const doc of componentDocs) {
+    let llm = doc.llm
+    if (!llm || llm?.length === 0) continue
+    if (minify) llm = minifyContent(llm)
+    llm = cleanupContent(llm)
+    content += `# ${doc.title}\n\n${llm}\n\n`
+  }
+
+  return new Response(content, {
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control": "public, max-age=3600",
+    },
+  })
+}

apps/www/app/(llms)/llms-component/route.ts

@@ -0,0 +1,32 @@
+import { getBaseUrl } from "../shared"
+import { default as docs } from ".velite/docs.json"
+
+export const dynamic = "force-static"
+
+export async function GET() {
+  const baseUrl = `${getBaseUrl()}/llms-component`
+  const components = new Set<{ id: string; path: string; fullPath: string }>()
+
+  docs
+    .filter(
+      (doc) =>
+        doc.slug.startsWith("docs/components/") &&
+        !doc.slug.includes("concepts"),
+    )
+    .forEach((doc) => {
+      const parts = doc.slug.split("/")
+      const component = parts[2]
+      components.add({
+        id: component,
+        path: `${baseUrl}/${component}.txt`,
+        fullPath: `${baseUrl}/${component}-full.txt`,
+      })
+    })
+
+  return Response.json(Array.from(components), {
+    headers: {
+      "Content-Type": "application/json",
+      "Cache-Control": "public, max-age=3600",
+    },
+  })
+}

apps/www/app/(llms)/llms-components.txt/route.ts

@@ -0,0 +1,26 @@
+import { cleanupContent } from "../shared"
+import { default as docs } from ".velite/docs.json"
+
+export const dynamic = "force-static"
+
+export async function GET() {
+  let content =
+    "<SYSTEM>Documentation for all components in Chakra UI v3.</SYSTEM>\n\n"
+
+  const componentDocs = docs.filter((doc) =>
+    doc.slug.startsWith("docs/components"),
+  )
+
+  for (const doc of componentDocs) {
+    if (!doc.llm || doc.llm?.length === 0) continue
+    const llm = cleanupContent(doc.llm)
+    content += `# ${doc.title}\n\n${llm}\n\n`
+  }
+
+  return new Response(content, {
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control": "public, max-age=3600",
+    },
+  })
+}

apps/www/app/(llms)/llms-full.txt/route.ts

@@ -0,0 +1,22 @@
+import { cleanupContent } from "../shared"
+import { default as docs } from ".velite/docs.json"
+
+export const dynamic = "force-static"
+
+export async function GET() {
+  let content =
+    "<SYSTEM>This is the full developer documentation for Chakra UI v3.</SYSTEM>\n\n"
+
+  for (const doc of docs) {
+    if (!doc.llm || doc.llm?.length === 0) continue
+    const llm = cleanupContent(doc.llm)
+    content += `# ${doc.title}\n\n${llm}\n\n`
+  }
+
+  return new Response(content, {
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control": "public, max-age=3600",
+    },
+  })
+}

apps/www/app/(llms)/llms-styling.txt/route.ts

@@ -0,0 +1,23 @@
+import { default as docs } from ".velite/docs.json"
+
+export const dynamic = "force-static"
+
+export async function GET() {
+  let content =
+    "<SYSTEM>Documentation for the styling system in Chakra UI v3.</SYSTEM>\n\n"
+
+  const stylingDocs = docs.filter((doc) => doc.slug.startsWith("docs/styling"))
+
+  for (const doc of stylingDocs) {
+    if (!doc.llm || doc.llm?.length === 0) continue
+
+    content += `# ${doc.title}\n\n${doc.llm}\n\n`
+  }
+
+  return new Response(content, {
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control": "public, max-age=3600",
+    },
+  })
+}

apps/www/app/(llms)/llms-theming.txt/route.ts

@@ -0,0 +1,22 @@
+import { default as docs } from ".velite/docs.json"
+
+export const dynamic = "force-static"
+
+export async function GET() {
+  let content = "<SYSTEM>Documentation for theming Chakra UI v3.</SYSTEM>\n\n"
+
+  const themingDocs = docs.filter((doc) => doc.slug.startsWith("docs/theming"))
+
+  for (const doc of themingDocs) {
+    if (!doc.llm || doc.llm?.length === 0) continue
+
+    content += `# ${doc.title}\n\n${doc.llm}\n\n`
+  }
+
+  return new Response(content, {
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control": "public, max-age=3600",
+    },
+  })
+}

apps/www/app/(llms)/llms-v3-migration.txt/route.ts

@@ -0,0 +1,25 @@
+import { default as docs } from ".velite/docs.json"
+
+export const dynamic = "force-static"
+
+export async function GET() {
+  let content =
+    "<SYSTEM>Documentation for migrating to Chakra UI v3.</SYSTEM>\n\n"
+
+  const stylingDocs = docs.filter((doc) =>
+    doc.slug.startsWith("docs/get-started/migration"),
+  )
+
+  for (const doc of stylingDocs) {
+    if (!doc.llm || doc.llm?.length === 0) continue
+
+    content += `# ${doc.title}\n\n${doc.llm}\n\n`
+  }
+
+  return new Response(content, {
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control": "public, max-age=3600",
+    },
+  })
+}

apps/www/app/(llms)/llms.txt/route.ts

@@ -0,0 +1,61 @@
+import { getBaseUrl } from "../shared"
+
+export const dynamic = "force-static"
+
+export const GET = async () => {
+  const baseUrl = getBaseUrl()
+
+  const documentSets = [
+    {
+      title: "Complete documentation",
+      href: `${baseUrl}/llms-full.txt`,
+      description:
+        "The complete Chakra UI v3 documentation including all components, styling and theming",
+    },
+    {
+      title: "Components",
+      href: `${baseUrl}/llms-components.txt`,
+      description: "Documentation for all components in Chakra UI v3.",
+    },
+    {
+      title: "Styling",
+      href: `${baseUrl}/llms-styling.txt`,
+      description: "Documentation for the styling system in Chakra UI v3.",
+    },
+    {
+      title: "Theming",
+      href: `${baseUrl}/llms-theming.txt`,
+      description: "Documentation for theming Chakra UI v3.",
+    },
+    {
+      title: "Migrating to v3",
+      href: `${baseUrl}/llms-v3-migration.txt`,
+      description: "Documentation for migrating to Chakra UI v3.",
+    },
+  ]
+
+  const content = TEMPLATE.replace(
+    "%DOCUMENT_SETS%",
+    documentSets
+      .map((set) => `- [${set.title}](${set.href}): ${set.description}`)
+      .join("\n"),
+  )
+
+  return new Response(content)
+}
+
+const TEMPLATE = `
+# Chakra UI v3 Documentation for LLMs
+
+> Chakra UI is an accessible component system for building products with speed
+
+## Documentation Sets
+
+%DOCUMENT_SETS%
+
+## Notes
+
+- The complete documentation includes all content from the official documentation
+- Package-specific documentation files contain only the content relevant to that package
+- The content is automatically generated from the same source as the official documentation
+`