### Start Storybook

Source: https://chakra-ui.com/docs/get-started/contributing

Launch Storybook to view and test component examples locally.

```bash
pnpm storybook
```

--------------------------------

### Basic DatePicker Setup

Source: https://chakra-ui.com/docs/components/date-picker

This example demonstrates the basic setup of the DatePicker component, including importing necessary components and setting up the root element with a label.

```jsx
"use client"

import { DatePicker, HStack, Portal, Spacer } from "@chakra-ui/react"
import { LuCalendar } from "react-icons/lu"

const Demo = () => {
 return (
    <DatePicker.Root
      maxWidth="20rem"
    >
      <DatePicker.Label>Date</DatePicker.Label>
      <DatePicker.Content />
      <DatePicker.Positioner />
    </DatePicker.Root>
  )
}

```

--------------------------------

### Basic Overlay Manager Setup

Source: https://chakra-ui.com/docs/components/overlay-manager

This example shows the basic setup for using Chakra UI components like Box, Button, Dialog, and Portal, along with the `createOverlay` utility. It's a common pattern for applications that utilize overlays.

```javascript
"use client"

import { Box, Button, Dialog, Portal } from "@chakra-ui/react"
import { createOverlay } from "@chakra-ui/react"
```

--------------------------------

### Basic Date Picker Setup with Customizations

Source: https://chakra-ui.com/docs/components/date-picker

Demonstrates how to set up the Date Picker component with locale and start of the week configurations. This example uses 'de-DE' locale and starts the week on Monday.

```jsx
"use client"

import { DatePicker, Portal } from "@chakra-ui/react"
import { LuCalendar } from "react-icons/lu"

const Demo = () => {
 return (
    <DatePicker.Root
      locale="de-DE"
      startOfWeek={1}
      maxWidth="300px"
    >
      <DatePicker.Trigger>
        <DatePicker.Input placeholder="Select Date" />
        <DatePicker.Icon />
      </DatePicker.Trigger>
      <Portal>
        <DatePicker.Positioner />
        <DatePicker.Content />
      </Portal>
    </DatePicker.Root>
  )
}

```

--------------------------------

### Basic Date Picker Setup

Source: https://chakra-ui.com/docs/components/date-picker

This snippet demonstrates the basic setup for the Date Picker component, including necessary imports and its root element. Ensure you have the required dependencies installed.

```jsx
"use client"
import { DatePicker, Portal } from "@chakra-ui/react"
import type { DateValue } from "@chakra-ui/react"
import { CalendarDate } from "@internationalized/date"
import { LuCalendar } from "react-icons/lu"

const Demo = () => {
 return (
  <DatePicker.Root
   format="yyyy-MM-dd"
   onChange={(e) => console.log(e)}
   defaultValue={new CalendarDate(2023, 1, 1)}
  >
   <DatePicker.Label>Date</DatePicker.Label>
   <DatePicker.Field>
    <DatePicker.Input />
    <DatePicker.Trigger>
     <DatePicker.Icon />
    </DatePicker.Trigger>
   </DatePicker.Field>
   <Portal>
    <DatePicker.Popover>
     <DatePicker.Grid>
      <DatePicker.Header>
       <DatePicker.Arrow />
       <DatePicker.Heading />
       <DatePicker.PrevButton />
       <DatePicker.NextButton />
      </DatePicker.Header>
      <DatePicker.Calendar>
       <DatePicker.Body>
        <DatePicker.Row>
         <DatePicker.Dayاہد />
        </DatePicker.Row>
       </DatePicker.Body>
      </DatePicker.Calendar>
     </DatePicker.Grid>
    </DatePicker.Popover>
   </Portal>
  </DatePicker.Root>
 )
}

```

--------------------------------

### Install Tiptap StarterKit

Source: https://chakra-ui.com/llms-components.txt

Install the Tiptap StarterKit for core editor features.

```bash
npm i @tiptap/starter-kit
```

--------------------------------

### Basic Date Picker Usage

Source: https://chakra-ui.com/docs/components/date-picker

Demonstrates the basic setup and usage of the Date Picker component. This example shows how to render a simple date picker.

```jsx
import { DatePicker } from "@chakra-ui/react";

function MyDatePicker() {
  return <DatePicker />; 
}
```

--------------------------------

### Basic DatePicker Usage

Source: https://chakra-ui.com/docs/components/date-picker

This example demonstrates the basic setup of the DatePicker component. It includes importing necessary components and icons, and rendering a read-only DatePicker with a default value.

```jsx
"use client"

import { DatePicker, Portal, parseDate } from "@chakra-ui/react"
import { LuCalendar } from "react-icons/lu"

const Demo = () => {
  return (
    <DatePicker.Root
      readOnly
      defaultValue={[parseDate("2025-03-15")]}
      maxWidth="20rem"
    >
      <DatePicker.Label>Date of birth</DatePicker.Label>
      <DatePicker.Control>
        <DatePicker.Input />
        <DatePicker.Trigger>
          <DatePicker.Icon />
        </DatePicker.Trigger>
        <Portal>
          <DatePicker.Positioner>
            <DatePicker.Content>
              <DatePicker.Calendar>
                <DatePicker.Control>
                  <DatePicker.PrevButton />
                  <DatePicker.ViewControl>
                    <DatePicker.Breadcrumb>
                      <DatePicker.BreadcrumbTrigger>\n                        {
                          (date: DateValue) =>
                            date.year.toString() // or date.month.toString()
                        }
                      </DatePicker.BreadcrumbTrigger>
                      <DatePicker.BreadcrumbBtn />
                      <DatePicker.BreadcrumbList>
                        <DatePicker.BreadcrumbItem value="year">
                          Year
                        </DatePicker.BreadcrumbItem>
                        <DatePicker.BreadcrumbItem value="month">
                          Month
                        </DatePicker.BreadcrumbItem>
                      </DatePicker.BreadcrumbList>
                    </DatePicker.Breadcrumb>
                  </DatePicker.ViewControl>
                  <DatePicker.NextButton />
                </DatePicker.Control>
                <DatePicker.Grid />
              </DatePicker.Calendar>
            </DatePicker.Content>
          </DatePicker.Positioner>
        </Portal>
      </DatePicker.Control>
    </DatePicker.Root>
  )
}

```

--------------------------------

### Installation Command for Chakra UI

Source: https://chakra-ui.com/

Installs the Chakra UI React library using npm. Ensure you have Node.js and npm installed.

```bash
npm i @chakra-ui/react
```

--------------------------------

### Start Documentation Website

Source: https://chakra-ui.com/docs/get-started/contributing

Run the documentation website locally for development and testing.

```bash
pnpm www dev
```

--------------------------------

### Creatable Combobox Example

Source: https://chakra-ui.com/llms-components.txt

This example shows how to enable users to create new options in the Combobox. It utilizes `useCreatableCombobox` for managing new item creation and provides a starting point for customization.

```tsx
"use client"

import {
  Combobox,
  HStack,
  Portal,
  Span,
  createListCollection,
  useCombobox,
  useFilter,
} from "@chakra-ui/react"
import { useMemo, useRef, useState } from "react"
import { flushSync } from "react-dom"

export const ComboboxWithCreateable = () => {
  const combobox = useCreatableCombobox({
    initialItems: [
      { label: "React", value: "react" },
      { label: "Solid", value: "solid" },
      { label: "Vue", value: "vue" },
      { label: "Svelte", value: "svelte" },
    ],
    onCreateItem: (item) => {
      console.log("Created new item:", item)
    },
    createOptionMode: "prepend",
  })

  return (
    <Combobox.RootProvider value={combobox} maxW="320px">
      <Combobox.Label>Choose Framework</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input placeholder="Search or create..." />
        <Combobox.IndicatorGroup>
          <Combobox.ClearTrigger />
          <Combobox.Trigger />
        </Combobox.IndicatorGroup>
      </Combobox.Control>

```

--------------------------------

### Configure Pie Chart Start and End Angles

Source: https://chakra-ui.com/llms-full.txt

Adjust the `startAngle` and `endAngle` props on the `Pie` component to control the arc of the pie chart. This example demonstrates setting the start angle to 180 and end angle to 0.

```tsx
<Pie startAngle={180} endAngle={0}>
  {/* ... */}
</Pie>
```

```tsx
"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Pie, PieChart, Sector, Tooltip } from "recharts"

export const PieChartWithStartAngle = () => {
  const chart = useChart({
    data: [
      { name: "typescript", value: 400, color: "blue.solid" },
      { name: "javascript", value: 120, color: "orange.solid" },
      { name: "python", value: 300, color: "pink.solid" },
      { name: "rust", value: 278, color: "purple.solid" },
    ],
  })

  return (
    <Chart.Root boxSize="320px" mx="auto" chart={chart}>
      <PieChart responsive>
        <Tooltip
          cursor={false}
          animationDuration={100}
          content={<Chart.Tooltip hideLabel />}
        />
        <Pie
          isAnimationActive={false}
          data={chart.data}
          dataKey={chart.key("value")}
          nameKey="name"
          startAngle={180}
          endAngle={0}
          shape={(props) => (
            <Sector {...props} fill={chart.color(props.payload!.color)} />
          )}
        />
      </PieChart>
    </Chart.Root>
  )
}

```

--------------------------------

### Creating a System with Default Config

Source: https://chakra-ui.com/docs/get-started/migration

Demonstrates how to create a new theming system using `createSystem` and a default configuration object. This is the new approach for defining themes.

```javascript
import { defaultConfig } from "@chakra-ui/react"

export const system = createSystem({
  theme: {
    tokens: {
      fonts: {
        heading: {
          value: `'Figtree', sans-serif`
        },
        body: {
          value: `'Figtree', sans-serif`
        }
      }
    }
  }
})
```

--------------------------------

### Basic Steps Example

Source: https://chakra-ui.com/llms-components.txt

Demonstrates a basic implementation of the Steps component with navigation buttons. Ensure the 'steps' array is defined with titles and descriptions.

```tsx
import { Button, ButtonGroup, Steps } from "@chakra-ui/react"

export const StepsBasic = () => {
  return (
    <Steps.Root defaultStep={1} count={steps.length}>
      <Steps.List>
        {steps.map((step, index) => (
          <Steps.Item key={index} index={index} title={step.title}>
            <Steps.Indicator />
            <Steps.Title>{step.title}</Steps.Title>
            <Steps.Separator />
          </Steps.Item>
        ))}
      </Steps.List>

      {steps.map((step, index) => (
        <Steps.Content key={index} index={index}>
          {step.description}
        </Steps.Content>
      ))}
      <Steps.CompletedContent>All steps are complete!</Steps.CompletedContent>

      <ButtonGroup size="sm" variant="outline">
        <Steps.PrevTrigger asChild>
          <Button>Prev</Button>
        </Steps.PrevTrigger>
        <Steps.NextTrigger asChild>
          <Button>Next</Button>
        </Steps.NextTrigger>
      </ButtonGroup>
    </Steps.Root>
  )
}

const steps = [
  {
    title: "Step 1",
    description: "Step 1 description",
  },
  {
    title: "Step 2",
    description: "Step 2 description",
  },
  {
    title: "Step 3",
    description: "Step 3 description",
  },
]
```

--------------------------------

### Basic Clipboard Setup

Source: https://chakra-ui.com/llms-components.txt

Demonstrates the basic setup of the Clipboard component with a root and trigger, using an IconButton.

```tsx
import { Clipboard, IconButton } from "@chakra-ui/react"

export const ClipboardBasic = () => {
  return (
    <Clipboard.Root value="https://chakra-ui.com">
      <Clipboard.Trigger asChild>
        <IconButton variant="surface" size="xs">
          <Clipboard.Indicator />
        </IconButton>
      </Clipboard.Trigger>
    </Clipboard.Root>
  )
}
```

--------------------------------

### Start Claude Code Session

Source: https://chakra-ui.com/docs/get-started/ai/mcp-server

After installing the MCP server, initiate a Claude Code session using the `claude` command.

```bash
claude
```

--------------------------------

### Overlay with Tabs and Example

Source: https://chakra-ui.com/docs/components/overlay-manager

Demonstrates how to create an overlay with tabs for preview and code views, managing its visibility and mounting behavior.

```javascript
self.__next_f.push([1,"4f:[\"$\",\"$L73\",null,{\"className\":\"example-tabs\",\"variant\":\"subtle\",\"defaultValue\":\"preview\",\"mb\":\"4em\",\"size\":\"sm\",\"unmountOnExit\":true,\"lazyMount\":true,\"children\":[[ \"$\",\"$L74\",null,{\"mb\":\"4\",\"width\":\"full\",\"children\":[[ \"$\",\"$L75\",null,{\"value\":\"preview\",\"children\":\"Preview\"}],[ \"$\",\"$L75\",null,{\"value\":\"code\",\"children\":\"Code\"}],[ \"$\",\"$L1f\",null,{\"flex\":\"1\",\"justifyContent\":\"flex-end\",\"children\":[ \"$\",\"$L76\",null,{\"exampleId\":\"overlay-with-menu-item\"}]}]}],[[ \"$\",\"$L77\",null,{\"borderWidth\":\"1px\",\"rounded\":\"md\",\"overflow\":\"hidden\",\"children\":[[ \"$\",\"$L78\",null,{\"value\":\"preview\",\"mt\":\"0!\",\"padding\":{\"base\":\"6\",\"sm\":\"10\"},\"children\":[ \"$\",\"$L79\",null,{\"children\":[[ \"$\",\"$L7a\",null,{\"moduleIds\":\"$undefined\"}],\"$L87\" ]}]}\},[ \"$\",\"$L78\",null,{\"value\":\"code\",\"pt\":\"0!\",\"children\":[ \"$\",\"$L7\",null,{\"height\":\"100%\",\"overflow\":\"auto\",\"colorScheme\":\"dark\",\"pos\":\"relative\",\"css\":{\"\u0026 pre\":{\"px\":\"6\",\"py\":\"6\",\"maxHeight\":\"480px\",\"overflow\":\"auto\",\"my\":\"0\",\"bg\":\"$undefined\"}},\"children\":\"$L88\"}]}]}]}]])
```

--------------------------------

### Basic DatePicker Usage

Source: https://chakra-ui.com/docs/components/date-picker

A simple example of how to render a DatePicker component. No specific setup is required beyond importing the component.

```jsx
import { DatePicker } from "@chakra-ui/react";

function App() {
  return <DatePicker />;
}
```

--------------------------------

### Monorepo setup for type generation

Source: https://chakra-ui.com/docs/get-started/cli

In a monorepo, install `@chakra-ui/cli` as a dev dependency in the frontend package and add the `postinstall` script to that package's `package.json`. This ensures types are generated in the correct location when `pnpm install` is run at the monorepo root.

```json
// packages/frontend/package.json
{
 "scripts": {
  "postinstall": "chakra typegen src/theme.ts"
 },
 "dependencies": {
  "@chakra-ui/react": "..."
 },
 "devDependencies": {
  "@chakra-ui/cli": "..."
 }
}
```

--------------------------------

### Basic Overlay Usage

Source: https://chakra-ui.com/docs/components/overlay-manager

This example shows how to open a modal using the Overlay Manager. Ensure you have the necessary imports for Modal, ModalOverlay, and ModalContent.

```jsx
function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <p>Modal Content</p>
          </ModalBody>
          <ModalFooter>
            <Button colorScheme='blue' mr={3} onClick={onClose}>
              Close
            </Button>
            <Button variant='ghost'>Secondary Action</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  )
}
```

--------------------------------

### Basic Scroll Area Example

Source: https://chakra-ui.com/llms-full.txt

Demonstrates the fundamental structure of a Scroll Area component with content. Ensure @chakra-ui/react and react-lorem-ipsum are installed.

```tsx
import { ScrollArea } from "@chakra-ui/react"
import LoremIpsum from "react-lorem-ipsum"

export const ScrollAreaBasic = () => (
  <ScrollArea.Root height="8.5rem" maxW="lg">
    <ScrollArea.Viewport>
      <ScrollArea.Content spaceY="4" textStyle="sm">
        <LoremIpsum p={3} />
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar>
      <ScrollArea.Thumb />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner />
  </ScrollArea.Root>
)

```

--------------------------------

### Basic Drawer Example

Source: https://chakra-ui.com/docs/components/overlay-manager

Demonstrates how to open a drawer from the end of the screen with a title and description using the `createOverlay` utility.

```javascript
"use client"

import { Button, Drawer, Portal, createOverlay } from "@chakra-ui/react"

interface DialogProps {
  title: string
  description?: string
  content?: React.ReactNode
  placement?: Drawer.RootProps["placement"]
}

const drawer = createOverlay<DialogProps>((props) => {
  const { title, description, content, ...rest } = props
  return (
    <Drawer.Root {...rest}>
      <Portal>
        <Drawer.Backdrop />
        <Drawer.Positioner>
          <Drawer.Content>
            {title && (
              <Drawer.Header>
                <Drawer.Title>{title}</Drawer.Title>
              </Drawer.Header>
            )}
            <Drawer.Body spaceY="4">
              {description && (
                <Drawer.Description>{description}</Drawer.Description>
              )}
              {content}
            </Drawer.Body>
          </Drawer.Content>
        </Drawer.Positioner>
      </Portal>
    </Drawer.Root>
  )
})


const Demo = () => {
  return (
    <>
      <Button
        onClick={() => {
          drawer.open("a", {
            title: "Drawer Title",
            description: "Drawer Description",
            placement: "end",
          })
        }}
      >
        Open Drawer
      </Button>
      <drawer.Viewport />
    </>
  )
}

```

--------------------------------

### Setup Entry Point with RouterProvider

Source: https://chakra-ui.com/llms-full.txt

Initialize the TanStack Router and render the application using `RouterProvider` in the main entry point (`src/main.tsx`).

```typescriptx
import { RouterProvider, createRouter } from "@tanstack/react-router"
import React from "react"
import ReactDOM from "react-dom/client"
import { routeTree } from "./routeTree.gen"

const router = createRouter({ routeTree })

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router
  }
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)
```

--------------------------------

### Example of Tag Component Usage

Source: https://chakra-ui.com/docs/get-started/migration

This snippet demonstrates the structure of the Tag component, including its start and end elements, and the usage of AddIcon.

```jsx
<Tag.Root>
  <Tag.Label>Cyan</Tag.Label>
  <Tag.CloseTrigger />
</Tag.Root>
```

--------------------------------

### Forwarding Props with shouldForwardProp (Basic)

Source: https://chakra-ui.com/docs/styling/chakra-factory

Control which props are forwarded to the DOM by providing a shouldForwardProp function. This example forwards all props that do not start with '$'.

```tsx
function shouldForwardProp(prop: string) {
  return !prop.startsWith("$")
}

const Component = chakra("div", {}, { shouldForwardProp })
```

--------------------------------

### Drawer Example

Source: https://chakra-ui.com/docs/components/overlay-manager

This example demonstrates how to use `createOverlay` to create a custom Drawer component with title, description, and placement options.

```javascript
import { Button, Drawer, Portal, createOverlay } from "@chakra-ui/react"

interface DialogProps {
 title: string
 description?: string
 content?: React.ReactNode
 placement?: Drawer.RootProps["placement"]
}

const drawer = createOverlay<DialogProps>((props) => {
 const { title, description, content, ...rest } = props
 return (
 <Drawer.Root {...rest}>
 <Portal>
 <Drawer.Backdrop />
 <Drawer.Positioner>
 <Drawer.Content>
 {title && (
 <Drawer.Header>
 <Drawer.Title>{title}</Drawer.Title>
 </Drawer.Header>
 )}
 <Drawer.Body spaceY="4">
 {description && (
 <Drawer.Description>{description}</Drawer.Description>
 )}
 {content}
 </Drawer.Body>
 </Drawer.Content>
 </Drawer.Positioner>
 </Portal>
 </Drawer.Root>
 )
})


const Demo = () => {
 return (
 <>
 <Button
 onClick={() => {
 drawer.open("a", {
 title: "Drawer Title",
 description: "Drawer Description",
 placement: "end",
 })
 }}
 >
 Open Drawer
 </Button>
 <drawer.Viewport />
 </> 
 )
}

```

--------------------------------

### Basic Chakra UI Component Usage

Source: https://chakra-ui.com/docs/get-started/installation

Example of using Chakra UI components like HStack and Button within your application after setup.

```javascript
import { HStack, Button } from '@chakra-ui/react'

function MyComponent() {
  return (
    <HStack>
      <Button colorScheme='blue'>Button</Button>
      <Button colorScheme='blue'>Button</Button>
    </HStack>
  )
}
```

--------------------------------

### Hide Element From Breakpoint

Source: https://chakra-ui.com/docs/styling/responsive-design

Use the `hideFrom` utility to hide an element starting from a specified breakpoint. This example hides the content from the `md` breakpoint upwards.

```jsx
<Stack hideFrom="md">
  <Text>This text will be hidden from the `md` breakpoint</Text>
</Stack>
```

--------------------------------

### Forward specific props with shouldForwardProp

Source: https://chakra-ui.com/docs/styling/chakra-factory

Control which props are forwarded to the underlying DOM element using the `shouldForwardProp` option. This example forwards props that do not start with '$'.

```tsx
function shouldForwardProp(prop: string) {
 return !prop.startsWith("$")
}

const Component = chakra("div", {}, { shouldForwardProp })
```

--------------------------------

### Basic Modal Example

Source: https://chakra-ui.com/docs/components/overlay-manager

Demonstrates how to open a basic modal with a title and description using the `createOverlay` utility.

```javascript
import { Button, Modal, Portal, createOverlay } from "@chakra-ui/react"

interface DialogProps {
  title: string
  description?: string
  content?: React.ReactNode
}

const dialog = createOverlay<DialogProps>((props) => {
  const { title, description, content } = props
  return (
    <Modal.Root>
      <Portal>
        <Modal.Overlay />
        <Modal.Positioner>
          <Modal.Content>
            {title && (
              <Modal.Header>
                <Modal.Title>{title}</Modal.Title>
              </Modal.Header>
            )}
            <Modal.Body spaceY="4">
              {description && (
                <Modal.Description>{description}</Modal.Description>
              )}
              {content}
            </Modal.Body>
          </Modal.Content>
        </Modal.Positioner>
      </Portal>
    </Modal.Root>
  )
})

const Demo = () => {
  return (
    <>
      <Button
        onClick={() => {
          dialog.open("a", {
            title: "Dialog Title",
            description: "Dialog Description",
          })
        }}
      >
        Open Modal
      </Button>
      <dialog.Viewport />
    </>
  )
}

```

--------------------------------

### Terminal Output Example

Source: https://chakra-ui.com/llms-components.txt

Example output from running 'npm run dev' command, showing Vite build process and local server information.

```bash
$ npm run dev
  
  > dev@1.0.0 dev
  > vite
  
    VITE v5.0.0  ready in 234 ms
  
    ➜  Local:   http://localhost:5173/
    ➜  Network: use --host to expose
    ➜  press h + enter to show help
```

--------------------------------

### Forward Custom Props with shouldForwardProp

Source: https://chakra-ui.com/docs/styling/chakra-factory

Create a component that forwards specific props by defining a custom shouldForwardProp function. This example forwards props that do not start with '$'.

```javascript
function shouldForwardProp(prop) {
  return !prop.startsWith("$")
}

const Component = chakra("div", {}, { shouldForwardProp })
```

--------------------------------

### Start Storybook Server

Source: https://chakra-ui.com/llms-full.txt

Command to run the Storybook development server after setting up Chakra UI integration.

```bash
npm run storybook
```

--------------------------------

### Example: Programmatically Open a Drawer

Source: https://chakra-ui.com/docs/components/overlay-manager

Shows how to open a drawer using `drawer.open`, specifying title, description, and placement. The `Viewport` component is necessary for rendering.

```tsx
export const OverlayWithDrawer = () => {
 return (
 <>
 <Button
 onClick={() => {
 drawer.open("a", {
 title: "Drawer Title",
 description: "Drawer Description",
 placement: "end",
 })
 }}
 >
 Open Drawer
 </Button>
 <drawer.Viewport />
 </>
 )
}

```

--------------------------------

### Control Prop Forwarding with shouldForwardProp

Source: https://chakra-ui.com/docs/styling/chakra-factory

This example shows how to use the `shouldForwardProp` option with the Chakra Factory to control which props are forwarded to the DOM. It forwards all props that do not start with '$'.

```javascript
function shouldForwardProp(prop: string) {
 return !prop.startsWith('$')
}

const Component = 
```

--------------------------------

### Change Drawer Placement

Source: https://chakra-ui.com/llms-full.txt

Use the `placement` prop to change the placement of the drawer component. This example shows how to render drawers at 'bottom', 'top', 'start', and 'end' positions.

```tsx
import {
  Button,
  CloseButton,
  Drawer,
  For,
  HStack,
  Portal,
} from "@chakra-ui/react"

export const DrawerWithPlacement = () => {
  return (
    <HStack wrap="wrap">
      <For each={["bottom", "top", "start", "end"]}>
        {(placement) => (
          <Drawer.Root key={placement} placement={placement}>
            <Drawer.Trigger asChild>
              <Button variant="outline" size="sm">
                Open ({placement})
              </Button>
            </Drawer.Trigger>
            <Portal>
              <Drawer.Backdrop />
              <Drawer.Positioner>
                <Drawer.Content
                  roundedTop={placement === "bottom" ? "l3" : undefined}
                  roundedBottom={placement === "top" ? "l3" : undefined}
                >
                  <Drawer.Header>
                    <Drawer.Title>Drawer Title</Drawer.Title>
                  </Drawer.Header>
                  <Drawer.Body>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                    do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua.
                  </Drawer.Body>
                  <Drawer.Footer>
                    <Drawer.ActionTrigger asChild>
                      <Button variant="outline">Cancel</Button>
                    </Drawer.ActionTrigger>
                    <Button>Save</Button>
                  </Drawer.Footer>
                  <Drawer.CloseTrigger asChild>
                    <CloseButton size="sm" />
                  </Drawer.CloseTrigger>
                </Drawer.Content>
              </Drawer.Positioner>
            </Portal>
          </Drawer.Root>
        )}
      </For>
    </HStack>
  )
}
```

--------------------------------

### Responsive Styles with Object Syntax (Example)

Source: https://chakra-ui.com/docs/styling/responsive-design

This example demonstrates how to apply responsive styles to the `variant` prop of a Button component using object syntax.

```jsx
<Button variant={{
  smDown: "solid",
  md: "outline",
}}>
  Button
</Button>
```

--------------------------------

### Drawer Migration Example (Before v3)

Source: https://chakra-ui.com/llms-v3-migration.txt

Demonstrates the Drawer component usage in Chakra UI v2.

```tsx
import {
  Drawer,
  DrawerBody,
  DrawerCloseButton,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
} from "@chakra-ui/react"

const Demo = () => (
  <Drawer isOpen={isOpen} placement="right" onClose={onClose} isFullHeight>
    <DrawerOverlay />
    <DrawerContent>
      <DrawerCloseButton />
      <DrawerHeader>Title</DrawerHeader>
      <DrawerBody>Content</DrawerBody>
      <DrawerFooter>
        <Button onClick={onClose}>Close</Button>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>
)
```

--------------------------------

### Date Parsing Utility

Source: https://chakra-ui.com/docs/components/date-picker

A utility function to parse a string into a DateValue object. This example shows the start of the parsing logic, defining a regex for full date matching.

```javascript
const parse = (string: string) => {
  const fullRegex = 
```

--------------------------------

### Basic Rich Text Editor Setup

Source: https://chakra-ui.com/llms-components.txt

Demonstrates how to set up and render a basic Rich Text Editor using Chakra UI and Tiptap. Ensure you have the necessary Tiptap extensions and Chakra UI components imported.

```tsx
"use client"

import Subscript from "@tiptap/extension-subscript"
import Superscript from "@tiptap/extension-superscript"
import TextAlign from "@tiptap/extension-text-align"
import { TextStyleKit } from "@tiptap/extension-text-style"
import { useEditor } from "@tiptap/react"
import StarterKit from "@tiptap/starter-kit"
import { Control, RichTextEditor } from "@/components/ui/rich-text-editor"

export const RichTextEditorBasic = () => {
  const editor = useEditor({
    extensions: [
      StarterKit.configure({ link: { openOnClick: false } }),
      Subscript,
      Superscript,
      TextAlign.configure({ types: ["paragraph", "heading"] }),
      TextStyleKit,
    ],
    content: `<h1>Welcome to Chakra UI + Tiptap!</h1><p>Edit using the toolbar below...</p>`,
    shouldRerenderOnTransaction: true,
    immediatelyRender: false,
  })

  if (!editor) return null

  return (
    <RichTextEditor.Root editor={editor}>
      <RichTextEditor.Toolbar>
        <RichTextEditor.ControlGroup>
          <Control.FontFamily />
          <Control.FontSize />
        </RichTextEditor.ControlGroup>

        <RichTextEditor.ControlGroup>
          <Control.Bold />
          <Control.Italic />
          <Control.Underline />
          <Control.Strikethrough />
          <Control.Code />
        </RichTextEditor.ControlGroup>

        <RichTextEditor.ControlGroup>
          <Control.H1 />
          <Control.H2 />
          <Control.H3 />
          <Control.H4 />
        </RichTextEditor.ControlGroup>
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor.Root>
  )
}

```

--------------------------------

### Hide Element From a Breakpoint (hideFrom)

Source: https://chakra-ui.com/docs/styling/responsive-design

Use the `hideFrom` utility to hide an element starting from a specified breakpoint. For example, `hideFrom='md'` will hide the element on 'md' screens and larger.

```jsx
<Stack hideFrom='md'>This text will be hidden from the `md` breakpoint and up.</Stack>
```

--------------------------------

### Custom `shouldForwardProp` Logic

Source: https://chakra-ui.com/docs/styling/chakra-factory

Define a custom `shouldForwardProp` function to control which props are forwarded. This example forwards props that do not start with `$` (Chakra UI's internal prefix).

```javascript
function shouldForwardProp(prop) {
  return !prop.startsWith("$")
}

const Component = chakra("div", {}, {
  shouldForwardProp
})
```

--------------------------------

### Setup Test File with Mocks

Source: https://chakra-ui.com/llms-components.txt

Configure the testing environment by importing necessary libraries and mocking unimplemented APIs like ResizeObserver, IntersectionObserver, and scroll methods.

```ts
import "@testing-library/jest-dom/vitest"
import { JSDOM } from "jsdom"
import ResizeObserver from "resize-observer-polyfill"
import { vi } from "vitest"
import "vitest-axe/extend-expect"

const { window } = new JSDOM()

// ResizeObserver mock
vi.stubGlobal("ResizeObserver", ResizeObserver)
window["ResizeObserver"] = ResizeObserver

// matchMedia mock
Object.defineProperty(window, "matchMedia", {
  writable: true,
  value: vi.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: vi.fn(), // deprecated
    removeListener: vi.fn(), // deprecated
    addEventListener: vi.fn(),
    removeEventListener: vi.fn(),
    dispatchEvent: vi.fn(),
  })),
});

// IntersectionObserver mock
const IntersectionObserverMock = vi.fn(() => ({
  disconnect: vi.fn(),
  observe: vi.fn(),
  takeRecords: vi.fn(),
  unobserve: vi.fn(),
}))
vi.stubGlobal("IntersectionObserver", IntersectionObserverMock)
window["IntersectionObserver"] = IntersectionObserverMock

// Scroll Methods mock
window.Element.prototype.scrollTo = () => {}
window.Element.prototype.scrollIntoView = () => {}

// requestAnimationFrame mock
window.requestAnimationFrame = (cb) => setTimeout(cb, 1000 / 60)

// URL object mock
window.URL.createObjectURL = () => "https://i.pravatar.cc/300"
window.URL.revokeObjectURL = () => {}

// navigator mock
Object.defineProperty(window, "navigator", {
  value: {
    clipboard: {
      writeText: vi.fn(),
    },
  },
})

// Override globalThis
Object.assign(global, { window, document: window.document })
```

--------------------------------

### Pause Marquee Animation on Interaction

Source: https://chakra-ui.com/llms-components.txt

Use the `pauseOnInteraction` prop to stop the marquee animation when a user hovers or focuses on it. This example demonstrates a basic setup with several icons.

```tsx
"use client"
import { Marquee } from "@chakra-ui/react"
import {
  IoLogoFigma,
  IoLogoGitlab,
  IoLogoJavascript,
  IoLogoLinkedin,
  IoLogoTwitter,
  IoLogoVimeo,
} from "react-icons/io5"

export const MarqueePauseInteractions = () => (
  <Marquee.Root pauseOnInteraction>
    <Marquee.Viewport>
      <Marquee.Content>
        {items.map((item, i) => (
          <Marquee.Item key={i} px="2rem">
            {item.icon && (
              <item.icon
                size="3rem"
                aria-label={item.label}
                color={item.color}
              />
            )}
          </Marquee.Item>
        ))}
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)

const items = [
  { icon: IoLogoFigma, label: "Figma", color: "#F24E1E" },
  { icon: IoLogoTwitter, label: "Twitter", color: "#1da1f2" },
  { icon: IoLogoLinkedin, label: "LinkedIn", color: "#0077b5" },
  { icon: IoLogoGitlab, label: "GitLab", color: "#fc6d26" },
  { icon: IoLogoVimeo, label: "Vimeo", color: "#1ab7ea" },
  { icon: IoLogoJavascript, label: "JavaScript", color: "#f7df1e" },
]

```

--------------------------------

### Initialize Styling System

Source: https://chakra-ui.com/llms-theming.txt

Create the styling engine by passing your default and custom configurations to the `createSystem` function. The returned `system` object is framework-agnostic.

```tsx
const system = createSystem(defaultConfig, config)
```

--------------------------------

### Drawer Sizes Example

Source: https://chakra-ui.com/llms-components.txt

Demonstrates how to change the size of the drawer using the `size` prop. Various sizes from 'xs' to 'full' are shown, each with a button to open it.

```tsx
import {
  Button,
  CloseButton,
  Drawer,
  For,
  HStack,
  Kbd,
  Portal,
} from "@chakra-ui/react"

export const DrawerWithSizes = () => {
  return (
    <HStack wrap="wrap">
      <For each={["xs", "sm", "md", "lg", "xl", "full"]}>
        {(size) => (
          <Drawer.Root key={size} size={size}>
            <Drawer.Trigger asChild>
              <Button variant="outline" size="sm">
                Open ({size})
              </Button>
            </Drawer.Trigger>
            <Portal>
              <Drawer.Backdrop />
              <Drawer.Positioner>
                <Drawer.Content>
                  <Drawer.Header>
                    <Drawer.Title>Drawer Title</Drawer.Title>
                  </Drawer.Header>
                  <Drawer.Body>
                    Press the <Kbd>esc</Kbd> key to close the drawer.
                  </Drawer.Body>
                  <Drawer.Footer>
                    <Drawer.ActionTrigger asChild>
                      <Button variant="outline">Cancel</Button>
                    </Drawer.ActionTrigger>
                    <Button>Save</Button>
                  </Drawer.Footer>
                  <Drawer.CloseTrigger asChild>
                    <CloseButton size="sm" />
                  </Drawer.CloseTrigger>
                </Drawer.Content>
              </Drawer.Positioner>
            </Portal>
          </Drawer.Root>
        )}
      </For>
    </HStack>
  )
}

```

--------------------------------

### Creating a Custom ColorModeProvider

Source: https://chakra-ui.com/guides/theming-custom-colors

Wrap your application with ChakraProvider and optionally use ColorModeProvider to manage color mode settings. This example shows a basic setup for a custom provider.

```javascript
import { ChakraProvider, ColorModeProvider } from "@chakra-ui/react"
import { theme } from "@/components/ui/color-mode"

export function Provider(props) {
  return (
    <ChakraProvider theme={theme}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  )
}

```

--------------------------------

### Basic DatePicker with Input Group

Source: https://chakra-ui.com/docs/components/date-picker

This example demonstrates a basic DatePicker integrated with an InputGroup. It includes calendar and chevron icons for navigation and selection. Ensure you have `react-icons` installed for the icons.

```javascript
"use client"

import { DatePicker, InputGroup, Portal } from "@chakra-ui/react"
import { LuCalendar, LuChevronsUpDown } from "react-icons/lu"


const Demo = () => {
 return (
 <DatePicker.Root maxWidth="20rem">
 <DatePicker.Label>Date</DatePicker.Label>
 <InputGroup
 as={DatePicker.Control}
 startElement={<LuCalendar />}
 endElement={
 <DatePicker.Trigger>
 <LuChevronsUpDown />
 </DatePicker.Trigger>
 }
 >
 <DatePicker.Input />
 </InputGroup>
 <Portal>
 <DatePicker.Positioner>
 <DatePicker.Content>
 <DatePicker.View view="day">
 <DatePicker.Header />
 <DatePicker.DayTable />
 </DatePicker.View>
 <DatePicker.View view="month">
 <DatePicker.Header />
 <DatePicker.MonthTable />
 </DatePicker.View>
 <DatePicker.View view="year">
 <DatePicker.Header />
 <DatePicker.YearTable />
 </DatePicker.View>
 </DatePicker.Content>
 </DatePicker.Positioner>
 </Portal>
 </DatePicker.Root>
 )
}

```

--------------------------------

### Creating a Component with chakra Factory

Source: https://chakra-ui.com/docs/theming/recipes

This example shows the recommended way to use theming recipes by creating a new component using the 'chakra' factory. This approach promotes reusability and cleaner component definitions.

```typescript
import { chakra } from "@chakra-ui/react";

const MyButton = chakra("button", {
  baseStyle: {
    // base styles
  },
  variants: {
    // variants
  },
  sizes: {
    // sizes
  },
});

function App() {
  return <MyButton variant="solid" size="lg">Click me</MyButton>;
}
```

--------------------------------

### PresetTrigger Example

Source: https://chakra-ui.com/docs/components/date-picker

Demonstrates how to use the PresetTrigger with specific children and styling. It includes a default rendered element and a description of its behavior.

```javascript
self.__next_f.push([1,"12d:[\"$\",\"$L11e\",\"asChild\",{\"children\":[[\"$\",\"$L121\",null,{\"width\":\"36\",\"px\":\"4\",\"py\":\"2\",\"verticalAlign\":\"top\",\"children\":[[\"$\",\"$L122\",null,{\"size\":\"sm\",\"variant\":\"surface\",\"fontWeight\":\"bold\",\"children\":[\"asChild\",\" \" ]}]],false]},[\"$\",\"$L121\",null,{\"width\":\"28\",\"px\":\"4\",\"py\":\"2\",\"verticalAlign\":\"top\",\"children\":[\"$\",\"$Lb\",null,{\"fontSize\":\"xs\",\"color\":\"fg.subtle\",\"children\":[\"$\",\"svg\",null,{\"stroke\":\"currentColor\",\"fill\":\"none\",\"strokeWidth\":\"2\",\"viewBox\":\"0 0 24 24\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"children\":[\"$undefined\",[[\"$\",\"path\",\"0\",{\"d\":\"M5 12h14\",\"children\":[]}]]],\"className\":\"$undefined\",\"style\":{\"color\":\"$undefined\"},\"height\":\"1em\",\"width\":\"1em\",\"xmlns\":\"http://www.w3.org/2000/svg\"}]}]], [\"$\",\"$L121\",null,{\"px\":\"4\",\"py\":\"2\",\"verticalAlign\":\"top\",\"children\":[\"$\",\"$L1e\",null,{\"gap\":\"2\",\"align\":\"start\",\"children\":[[\"$\",\"$L122\",null,{\"size\":\"sm\",\"variant\":\"surface\",\"color\":\"accent.fg\",\"children\":\"boolean\"},[\"$\",\"$Ld\",null,{\"fontSize\":\"sm\",\"children\":\"Use the provided child element as the default rendered element, combining their props and behavior.\"},[\"$\",\"$Ld\",null,{\"as\":\"span\",\"children\":[\"For more details, read our\",\" \",[[\"$\",\"$L20\",null,{\"asChild\":true,\"children\":[[\"$\",\"$L29\",null,{\"href\":\"/docs/components/concepts/composition\",\"children\":\"Composition\"}]], \" \",\"guide.\" ]]}]]]}]]]}]]\n"])
```

--------------------------------

### Provider Component Setup

Source: https://chakra-ui.com/docs/theming/customization/overview

Set up a Provider component that wraps your application with ChakraProvider and ThemeProvider. This example demonstrates integrating with next-themes for dark mode support and importing a custom theme.

```typescript
import { ChakraProvider } from "@chakra-ui/react"
import { ThemeProvider } from "next-themes"
import system from "./theme"

export function Provider(props: { children: React.ReactNode }) {
  return (
    <ChakraProvider>
      <ThemeProvider>
        {props.children}
      </ThemeProvider>
    </ChakraProvider>
  )
}
```

--------------------------------

### Create a Theme System with Custom Tokens

Source: https://chakra-ui.com/docs/theming/tokens

Use `createSystem` to build a theme object that includes your custom tokens. This example integrates the previously defined `tokens` into the theme.

```javascript
import { createSystem } from "@chakra-ui/react"

export default createSystem({
  theme: {
    tokens,
  },
})
```

--------------------------------

### Apply a Recipe to a Component

Source: https://chakra-ui.com/docs/theming/recipes

This example demonstrates how to apply a defined recipe to a component. It shows the usage of the `useRecipe` hook to get the styles and then applies them to the component's `sx` prop.

```javascript
import { useRecipe } from "@chakra-ui/react";

function MyButton(props) {
  const buttonStyles = useRecipe("Button", props);
  return <chakra.button {...props} sx={buttonStyles} />;
}
```