code · pull · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025
diff --git a/.changeset/fix-mcp-codex-compatibility.md b/.changeset/fix-mcp-codex-compatibility.md
diff --git a/.changeset/public-turkeys-appear.md b/.changeset/public-turkeys-appear.md
@@ -2,5 +2,7 @@
 "@chakra-ui/react": patch
 ---
 
-**Combobox:** Refactor recipe for smarter padding management to prevent input
-text from overflowing unto triggers
+- **Combobox:** Refactor recipe for smarter padding management to prevent input
+  text from overflowing unto triggers
+
+- **CodeBlock:** Add missing `use client` directive
diff --git a/apps/www/components/component-explorer.tsx b/apps/www/components/component-explorer.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from "@chakra-ui/react"
+import { Box } from "@chakra-ui/react"
 import { ComponentExplorerWrapper } from "./component-snapshot"
 import { ExamplePreview } from "./example"
 

diff --git a/apps/www/components/component-snapshot.tsx b/apps/www/components/component-snapshot.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { highlightCode } from "@/lib/highlight-code"
-import { Box, Flex, Text } from "@chakra-ui/react"
+import { Box, Flex, Span } from "@chakra-ui/react"
 import { useEffect, useState } from "react"
 import { SiTypescript } from "react-icons/si"
 import ts from "typescript"
@@ -76,39 +76,15 @@ export const ${pascal}SlotRecipe = defineSlotRecipe({
       colorScheme="dark"
       pos="relative"
       rounded="lg"
-      border="1px solid"
-      borderColor="border"
+      borderWidth="1px"
       bg="bg"
     >
-      <Flex
-        align="center"
-        px={4}
-        pt={2}
-        borderBottom="1px solid"
-        borderBottomColor="border.subtle"
-        position="relative"
-      >
-        <Flex
-          align="center"
-          gap={2}
-          px={3}
-          py={1.5}
-          bg="bg"
-          border="1px solid"
-          borderColor="border.subtle"
-          borderBottom="none"
-          borderTopRadius="md"
-        >
+      <Flex align="center" px="4" pt="2" position="relative">
+        <Flex align="center" gap="2" pb="2">
           <SiTypescript size={12} color="#3178c6" style={{ flexShrink: 0 }} />
-          <Text
-            fontSize="sm"
-            fontWeight="medium"
-            color="fg"
-            fontFamily="mono"
-            letterSpacing="tight"
-          >
+          <Span textStyle="sm" fontWeight="medium" fontFamily="mono">
             {kebab}.recipe.ts
-          </Text>
+          </Span>
 
           {activePart && (
             <Box

diff --git a/apps/www/components/example.tsx b/apps/www/components/example.tsx
@@ -57,7 +57,7 @@ export const ExampleCode = async (props: CodeProps) => {
 interface CodeWrapperProps extends BoxProps {}
 
 export const ExampleCodeWrapper = (props: CodeWrapperProps) => {
-  const { children, maxHeight, bg, px = "8", py = "6", ...rest } = props
+  const { children, maxHeight, bg, px = "6", py = "6", ...rest } = props
   return (
     <Box
       height="100%"
@@ -113,6 +113,7 @@ export const ExampleTabs = (props: Props) => {
       mb="4em"
       size="sm"
       unmountOnExit
+      lazyMount
     >
       <Tabs.List mb="4" width="full">
         <Tabs.Trigger value="preview">Preview</Tabs.Trigger>

diff --git a/apps/www/components/mdx/prop-table.tsx b/apps/www/components/mdx/prop-table.tsx
@@ -18,10 +18,24 @@ interface PropTableProps {
   omit?: string[]
 }
 
-const stringify = (value: any) => {
+const stringify = (property: any) => {
+  let value = property.defaultValue
   if (value === "true") return `true`
   if (value === "false") return `false`
-  return JSON.stringify(value)
+
+  if (typeof value === "string") {
+    try {
+      const parsed = JSON.parse(value)
+      if (typeof parsed === "string" && property.type?.includes("string")) {
+        return parsed
+      }
+      return JSON.stringify(parsed).replaceAll('"', "'")
+    } catch {
+      return value
+    }
+  }
+
+  return JSON.stringify(value).replaceAll('"', "'")
 }
 
 export const PropTable = async (props: PropTableProps) => {
@@ -74,7 +88,7 @@ export const PropTable = async (props: PropTableProps) => {
               <Table.Cell width="28" px="4" py="2" verticalAlign="top">
                 {property.defaultValue ? (
                   <Code size="sm" color="accent.fg" variant="surface">
-                    {stringify(property.defaultValue).replaceAll('"', "'")}
+                    {stringify(property)}
                   </Code>
                 ) : (
                   <Icon fontSize="xs" color="fg.subtle">

diff --git a/apps/www/content/docs/components/carousel.mdx b/apps/www/content/docs/components/carousel.mdx
@@ -1,6 +1,7 @@
 ---
 title: Carousel
-description: Used to display multiple items or images in a sliding view.
+description:
+  Used to cycle through a series of visual content within a container.
 links:
   source: components/carousel
   storybook: components-carousel--basic
@@ -21,28 +22,26 @@ import { Carousel } from "@chakra-ui/react"
   <Carousel.ItemGroup>
     <Carousel.Item />
   </Carousel.ItemGroup>
-
   <Carousel.Control>
+    <Carousel.AutoplayTrigger>
+      <Carousel.AutoplayIndicator />
+    </Carousel.AutoplayTrigger>
     <Carousel.PrevTrigger />
+    <Carousel.Indicators />
     <Carousel.NextTrigger />
+    <Carousel.ProgressText />
   </Carousel.Control>
-
-  <Carousel.IndicatorGroup>
-    <Carousel.Indicator />
-  </Carousel.IndicatorGroup>
 </Carousel.Root>
 ```
 
 ## Shortcuts
 
 The `Carousel` component also provides convenient shortcuts for common patterns.
 
-### CarouselIndicators
+### Carousel.Indicators
 
-The `CarouselIndicators` shortcut renders a full set of indicators automatically
-based on the number of slides.
-
-This works:
+The `Carousel.Indicators` shortcut renders a full set of indicators
+automatically based on the number of slides.
 
 ```jsx
 <Carousel.IndicatorGroup>
@@ -58,30 +57,12 @@ This might be more concise if you don't need to customize each indicator:
 <Carousel.Indicators />
 ```
 
-### CarouselAutoplayIndicator
-
-Renders a play or pause element based on the carousel’s autoplay state. Use it
-to toggle visuals when autoplay starts or stops.
-
-```jsx
-<Carousel.AutoplayIndicator play={<PlayIcon />} pause={<PauseIcon />} />
-```
-
-### CarouselProgressText
-
-Displays the current slide and total slide count (e.g. 2 / 5). Updates
-automatically as the carousel moves.
-
-```jsx
-<Carousel.ProgressText />
-```
-
 ## Examples
 
 ### Controlled
 
-Use the `page` and `onPageChange` props to manage the carousel's behavior
-externally.
+Use the `page` and `onPageChange` props to programatically control the active
+carousel page.
 
 <ExampleTabs name="carousel-controlled" />
 
@@ -94,62 +75,68 @@ to the `Carousel.RootProvider` component for full programmatic control.
 
 ### Arrows
 
-Enable intuitive navigation through your slides with previous and next arrows.
+Use the `Carousel.PrevTrigger` and `Carousel.NextTrigger` components to create
+arrows that navigate between slides.
 
 <ExampleTabs name="carousel-with-floating-arrow" />
 
 ### Indicators
 
-Add visual indicators to help users track their position within the carousel and
-jump to specific slides.
+Use the `Carousel.Indicators` component to render visual indicators that help
+users track the progress of the carousel and jump to specific slides.
 
 <ExampleTabs name="carousel-with-indicators" />
 
+### Thumbnail Indicators
+
+Here's an example that uses an image thumbnail as a custom indicator.
+
+<ExampleTabs name="carousel-with-thumbnails" />
+
 ### Spacing
 
-Use the `spacing` prop to control the gap between slides.
+Use the `spacing` prop to control the spacing between slides.
 
 <ExampleTabs name="carousel-spacing" />
 
 ### Vertical
 
-Transform your carousel into a vertical slider by setting the `orientation`
-prop.
+Use the `orientation` prop to `vertical` to transform your carousel into a
+vertical slider.
 
 <ExampleTabs name="carousel-vertical" />
 
 ### Mouse Drag
 
-Toggle whether the carousel can be scrolled using mouse dragging via the
-`allowMouseDrag` prop.
+Use the `allowMouseDrag` prop to enable mouse dragging on the carousel.
 
 <ExampleTabs name="carousel-with-mouse-drag" />
 
-### Lightbox
-
-Use carousel in a `Dialog` to create a first-run experience or modal gallery or
-a lightbox.
-
-<ExampleTabs name="carousel-with-dialog" />
-
-### Thumbnail
+### Autoplay
 
-Add custom indicators using thumbnails for navigation.
+Pass the `autoplay` prop to the `Carousel.Root` component to make the carousel
+automatically move between slides.
 
-<ExampleTabs name="carousel-with-thumbnails" />
+<ExampleTabs name="carousel-with-autoplay" />
 
-### Autoplay
+### Lightbox
 
-Automatically move between slides using the `autoplay` prop. Customize the
-autoplay interval using the `autoplay={{ delay }}` prop.
+Compose the `Carousel` component with the `Dialog` component to create a
+lightbox.
 
-<ExampleTabs name="carousel-with-autoplay" />
+<ExampleTabs name="carousel-with-dialog" />
 
 ### Image Carousel
 
+Here's an example that shows how to create an image carousel for a product
+showcase.
+
 <ExampleTabs name="carousel-with-images" />
 
-### Composition
+### Property Card
+
+Here's an example that shows how to compose the `Carousel` component with other
+components to create a property card carousel.
 
 <ExampleTabs name="carousel-composition" />
 

diff --git a/apps/www/content/docs/components/center.mdx b/apps/www/content/docs/components/center.mdx
@@ -30,32 +30,43 @@ Center can be used to create frames around icons or numbers.
 
 ### Center with Inline
 
-Use the `inline` to change the display to `inline-flex`.
+Use the `inline` prop to make `Center` behave like an inline element
+(`display: inline-flex`) instead of a block-level element (`display: flex`).
+This makes `Center` only take up as much width as its content needs, allowing it
+to fit inside links, buttons, or other inline contexts without breaking the
+layout.
 
 <ExampleTabs name="center-with-inline" />
 
 ### Square
 
-`Square` centers its child given the `size` (width and height).
+`Square` centers its child within a fixed-size container of equal width and
+height. It accepts a `size` prop that sets both width and height to the same
+value.
 
 <ExampleTabs name="center-with-square" />
 
 ### Circle
 
-`Circle` centers its child given the `size` and creates a circle around it.
+`Circle` extends `Square` by adding `borderRadius="9999px"` to create a perfect
+circle. Like `Square`, it accepts a `size` prop that sets both width and height
+to the same value.
 
 <ExampleTabs name="center-with-circle" />
 
 ## Props
 
 ### Center
 
-<PropTable component="Center" />
+<PropTable component="Center" part="Center" />
 
 ### Square
 
-<PropTable component="Center" part="Square" />
+<PropTable component="Square" part="Square" />
 
 ### Circle
 
-<PropTable component="Center" part="Circle" />
+`Circle` extends `Square` and accepts all the same props. The only difference is
+that `Circle` applies `borderRadius="9999px"`.
+
+<PropTable component="Circle" part="Circle" />
diff --git a/apps/www/lib/highlight-code.ts b/apps/www/lib/highlight-code.ts
@@ -1,12 +1,12 @@
-import { codeToHtml } from "shiki"
+import { getHighlighter } from "./highlighter"
 
-export const highlightCode = (
+export const highlightCode = async (
   code: string,
-  opts?: Partial<Parameters<typeof codeToHtml>[1]>,
+  opts?: { lang?: string; theme?: string },
 ) => {
-  return codeToHtml(code, {
-    lang: "tsx",
-    theme: "dark-plus",
-    ...opts,
+  const highlighter = await getHighlighter()
+  return highlighter.codeToHtml(code, {
+    lang: opts?.lang || "tsx",
+    theme: opts?.theme || "dark-plus",
   })
 }
diff --git a/apps/www/lib/highlighter.ts b/apps/www/lib/highlighter.ts
@@ -0,0 +1,28 @@
+import { type Highlighter, createHighlighter } from "shiki"
+
+const cache = new Map<string, Promise<unknown>>()
+
+function cachePromise<T>(
+  key: string,
+  setPromise: () => Promise<T>,
+): Promise<T> {
+  const cached = cache.get(key)
+  if (cached) return cached as Promise<T>
+
+  const promise = setPromise()
+  cache.set(key, promise)
+  return promise
+}
+
+export async function getHighlighter(): Promise<Highlighter> {
+  return cachePromise("highlighter", () =>
+    createHighlighter({
+      themes: ["dark-plus"],
+      langs: ["tsx", "typescript", "javascript", "json", "bash", "shell"],
+    }),
+  )
+}
+
+export function disposeHighlighter() {
+  cache.clear()
+}