### Install Progress Component

Source: https://reka-ui.com/docs/components/progress

Instructions for installing the Progress component using a command-line interface.

```bash
npm install reka-ui
# or
yarn add reka-ui
```

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

### Splitter Component Installation and Basic Usage

Source: https://reka-ui.com/docs/components/splitter

Demonstrates how to install the Splitter component and use its core elements: SplitterGroup, SplitterPanel, and SplitterResizeHandle.

```APIDOC
## Splitter Component Installation and Basic Usage

### Description
This snippet shows the basic installation and usage of the Reka UI Splitter component, including importing and structuring the main components.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A

### Request Example
```vue
<script setup>
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'reka-ui'
</script>

<template>
  <SplitterGroup>
    <SplitterPanel />
    <SplitterResizeHandle />
  </SplitterGroup>
</template>
```

### Response
N/A (Component Usage)
```

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

### Example LLM Prompts for Reka UI

Source: https://reka-ui.com/docs/overview/getting-started

This snippet provides example prompts for interacting with Large Language Models (LLMs) to get assistance with Reka UI components, referencing the LLM-optimized documentation.

```text
"Using the Reka UI documentation at https://reka-ui.com/llms.txt, help me implement a custom Dialog component with form validation."

"Based on the Reka UI llms.txt documentation, show me how to create an accessible Select component with custom styling."

"Refer to the Reka UI llms.txt file and explain how to properly implement keyboard navigation for a Combobox component."
```

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

### HoverCard: Instant Open Example

Source: https://reka-ui.com/docs/components/hover-card

Shows how to make the HoverCard appear instantly upon hover by setting the `openDelay` prop to 0. This example imports the necessary components and applies the prop to the HoverCardRoot.

```vue
<script setup>
import {
  HoverCardArrow,
  HoverCardContent,
  HoverCardPortal,
  HoverCardRoot,
  HoverCardTrigger,
} from 'reka-ui'
</script>

<template>
  <HoverCardRoot :open-delay="0">
    <HoverCardTrigger>…</HoverCardTrigger>
    <HoverCardContent>…</HoverCardContent>
  </HoverCardRoot>
</template>
```

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

### Basic Color Field Setup (Vue)

Source: https://reka-ui.com/docs/components/color-field

Demonstrates the fundamental setup of the Color Field component, including importing the necessary parts and structuring the template. It requires 'ColorFieldRoot' and 'ColorFieldInput' from 'reka-ui'.

```vue
<script setup>
import {
  ColorFieldInput,
  ColorFieldRoot,
} from 'reka-ui'
</script>

<template>
  <ColorFieldRoot>
    <ColorFieldInput />
  </ColorFieldRoot>
</template>
```

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

### Splitter - Pixel Sizing Example

Source: https://reka-ui.com/docs/components/splitter

Shows how to use pixel units for sizing splitter panels, useful for fixed-width elements like sidebars.

```APIDOC
## Splitter - Pixel Sizing Example

### Description
This example demonstrates using `sizeUnit="px"` to define fixed pixel dimensions for splitter panels. This is particularly useful for elements like sidebars that should maintain a consistent width regardless of parent container resizing. All sizing props (`defaultSize`, `minSize`, `maxSize`, `collapsedSize`) respect this unit.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```vue
<template>
  <SplitterGroup direction="horizontal">
    <SplitterPanel
      size-unit="px"
      :default-size="240"
      :min-size="160"
      :max-size="320"
    >
      Fixed-width sidebar
    </SplitterPanel>
    <SplitterResizeHandle />
    <SplitterPanel>
      Flexible content
    </SplitterPanel>
  </SplitterGroup>
</template>
```

### Response
N/A (Component Usage)
```

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

### HSL Saturation/Lightness Example

Source: https://reka-ui.com/docs/components/color-area

An example demonstrating the Color Area component used for selecting saturation and lightness within the HSL color space.

```APIDOC
### HSL Saturation/Lightness

A common use case for color area is selecting saturation and lightness in HSL color space.

```vue
<script setup>
import {
  ColorAreaArea,
  ColorAreaRoot,
  ColorAreaThumb,
} from 'reka-ui'
import { ref } from 'vue'

const color = ref('#3b82f6')
</script>

<template>
  <ColorAreaRoot
    v-slot="{ style }"
    v-model="color"
    color-space="hsl"
    x-channel="saturation"
    y-channel="lightness"
  >
    <ColorAreaArea :style="style">
      <ColorAreaThumb />
    </ColorAreaArea>
  </ColorAreaRoot>
</template>
```
```

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

### Basic Pin Input Setup

Source: https://reka-ui.com/docs/components/pin-input

Demonstrates the basic implementation of the Pin Input component by importing the necessary Root and Input parts from Reka UI.

```vue
<script setup>
import { PinInputInput, PinInputRoot } from 'reka-ui'
</script>

<template>
  <PinInputRoot>
    <PinInputInput />
  </PinInputRoot>
</template>
```

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

### Context Menu Example with Submenus

Source: https://reka-ui.com/docs/components/context-menu

Demonstrates how to create nested submenus within the Context Menu component.

```APIDOC
## Examples

### With submenus

You can create submenus by using `ContextMenuSub` in combination with its parts.

```vue line=24-33
<script setup lang="ts">
import {
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuPortal,
  ContextMenuRoot,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from 'reka-ui'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger>Sub menu →</ContextMenuSubTrigger>
          <ContextMenuPortal>
            <ContextMenuSubContent>
              <ContextMenuItem>Sub menu item</ContextMenuItem>
              <ContextMenuItem>Sub menu item</ContextMenuItem>
              <ContextMenuArrow />
            </ContextMenuSubContent>
          </ContextMenuPortal>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuItem>…</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>
```
```

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

### Splitter - Collapsible Panels Example

Source: https://reka-ui.com/docs/components/splitter

Demonstrates how to make splitter panels collapsible using the `collapsible`, `collapsedSize`, and `minSize` props.

```APIDOC
## Splitter - Collapsible Panels Example

### Description
This example shows how to configure splitter panels to be collapsible. When a panel's size reaches `minSize`, it can collapse to `collapsedSize` if the `collapsible` prop is enabled.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```vue
<template>
  <SplitterGroup>
    <SplitterPanel
      collapsible
      :collapsed-size="10"
      :min-size="35"
    >
      Panel A
    </SplitterPanel>
    <SplitterResizeHandle />
    <SplitterPanel>
      Panel B
    </SplitterPanel>
  </SplitterGroup>
</template>
```

### Response
N/A (Component Usage)
```

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

### Channel Input Example (Vue)

Source: https://reka-ui.com/docs/components/color-field

Illustrates how to configure the Color Field component to input a specific color channel, such as 'hue' in the HSL color space. This example demonstrates the use of 'color-space' and 'channel' props.

```vue
<script setup>
import {
  ColorFieldInput,
  ColorFieldRoot,
} from 'reka-ui'
import { ref } from 'vue'

const color = ref('#3b82f6')
</script>

<template>
  <ColorFieldRoot
    v-model="color"
    color-space="hsl"
    channel="hue"
  >
    <ColorFieldInput />
  </ColorFieldRoot>
</template>
```

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

### Splitter - Custom Handle Example

Source: https://reka-ui.com/docs/components/splitter

Illustrates how to customize the appearance of the resize handle by passing custom content via slots.

```APIDOC
## Splitter - Custom Handle Example

### Description
This example shows how to customize the `SplitterResizeHandle` by providing custom content through its default slot. This allows for unique visual designs for the resizing interaction.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```vue
<template>
  <SplitterGroup>
    <SplitterPanel>
      ...
    </SplitterPanel>
    <SplitterResizeHandle>
      <Icon icon="radix-icons-drag-handle-dots-2" />
    </SplitterResizeHandle>
    <SplitterPanel>
      ...
    </SplitterPanel>
  </SplitterGroup>
</template>
```

### Response
N/A (Component Usage)
```

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

### Importing VisuallyHidden Component

Source: https://reka-ui.com/docs/utilities/visually-hidden

Demonstrates how to import and wrap content within the VisuallyHidden component in a Vue 3 setup script.

```vue
<script setup lang="ts">
import { VisuallyHidden } from 'reka-ui'
</script>

<template>
  <VisuallyHidden>
    <slot />
  </VisuallyHidden>
</template>
```

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

### RGB Red/Green Selector Example

Source: https://reka-ui.com/docs/components/color-area

An example showcasing the Color Area component configured for selecting red and green channels within the RGB color space.

```APIDOC
### RGB Red/Green Selector

Using RGB color space with red and green channels.

```vue
<script setup>
import {
  ColorAreaArea,
  ColorAreaRoot,
  ColorAreaThumb,
} from 'reka-ui'
import { ref } from 'vue'

const color = ref('#ff0000')
</script>

<template>
  <ColorAreaRoot
    v-slot="{ style }"
    v-model="color"
    color-space="rgb"
    x-channel="red"
    y-channel="green"
  >
    <ColorAreaArea :style="style">
      <ColorAreaThumb />
    </ColorAreaArea>
  </ColorAreaRoot>
</template>
```
```

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

### Basic Autocomplete Usage

Source: https://reka-ui.com/docs/components/autocomplete

A practical example showing how to bind the Autocomplete component to a reactive string variable and render a list of selectable items.

```vue
<script setup lang="ts">
import { AutocompleteContent, AutocompleteInput, AutocompleteItem, AutocompletePortal, AutocompleteRoot } from 'reka-ui'
import { ref } from 'vue'

const searchText = ref('')
const fruits = ['Apple', 'Banana', 'Orange', 'Grapes', 'Pineapple']
</script>

<template>
  <AutocompleteRoot v-model="searchText">
    <AutocompleteInput placeholder="Type a fruit..." />
    <AutocompletePortal>
      <AutocompleteContent>
        <AutocompleteItem
          v-for="fruit in fruits"
          :key="fruit"
          :value="fruit"
        >
          {{ fruit }}
        </AutocompleteItem>
      </AutocompleteContent>
    </AutocompletePortal>
  </AutocompleteRoot>
</template>
```

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

### Vertical Slider Example (Vue & CSS)

Source: https://reka-ui.com/docs/components/slider

Shows how to configure the slider for vertical orientation using the 'orientation' prop and provides corresponding CSS for styling. This example is useful for space-constrained layouts.

```vue
// index.vue
<script setup>
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui'
</script>

<template>
  <SliderRoot
    class="SliderRoot"
    :default-value="[50]"
    orientation="vertical"
  >
    <SliderTrack class="SliderTrack">
      <SliderRange class="SliderRange" />
    </SliderTrack>
    <SliderThumb class="SliderThumb" />
  </SliderRoot>
</template>
```

```css
/* styles.css */
.SliderRoot {
  position: relative;
  display: flex;
  align-items: center;
}
.SliderRoot[data-orientation="vertical"] {
  flex-direction: column;
  width: 20px;
  height: 100px;
}

.SliderTrack {
  position: relative;
  flex-grow: 1;
  background-color: grey;
}
.SliderTrack[data-orientation="vertical"] {
  width: 3px;
}

.SliderRange {
  position: absolute;
  background-color: black;
}
.SliderRange[data-orientation="vertical"] {
  width: 100%;
}

.SliderThumb {
  display: block;
  width: 20px;
  height: 20px;
  background-color: black;
}
```

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

### Global Tooltip Configuration (Vue)

Source: https://reka-ui.com/docs/components/tooltip

Shows how to configure tooltip behavior globally using the `TooltipProvider`. This example sets `delayDuration` and `skipDelayDuration` for all tooltips within the provider, affecting their appearance and disappearance timings.

```vue
<script setup>
import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
</script>

<template>
  <TooltipProvider
    :delay-duration="800"
    :skip-delay-duration="500"
  >
    <TooltipRoot>
      <TooltipTrigger>…</TooltipTrigger>
      <TooltipContent>…</TooltipContent>
    </TooltipRoot>
    <TooltipRoot>
      <TooltipTrigger>…</TooltipTrigger>
      <TooltipContent>…</TooltipContent>
    </TooltipRoot>
  </TooltipProvider>
</template>
```

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

### Basic Date Range Field Setup in Vue

Source: https://reka-ui.com/docs/components/date-range-field

Demonstrates the basic structure for implementing a Date Range Field component using Vue. It shows how to import and assemble the Root and Input components from 'reka-ui'. This setup requires the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package for date functionalities.

```vue
<script setup>
import {
  DateRangeFieldInput,
  DateRangeFieldRoot,
} from 'reka-ui'
</script>

<template>
  <DateRangeFieldRoot>
    <DateRangeFieldInput />
  </DateRangeFieldRoot>
</template>
```

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

### Basic Switch Anatomy

Source: https://reka-ui.com/docs/components/switch

Demonstrates the basic structure of the Switch component by importing and assembling its root and thumb parts. This is the foundational setup for using the Switch.

```vue
<script setup>
import { SwitchRoot, SwitchThumb } from 'reka-ui'
</script>

<template>
  <SwitchRoot>
    <SwitchThumb />
  </SwitchRoot>
</template>
```

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

### Create Custom Select API

Source: https://reka-ui.com/docs/components/select

Provides an example of creating a custom Select API by abstracting the primitive parts of the Reka UI Select component. This usage example shows a simplified 'Select' component that internally uses 'SelectItem' and manages its own default value, demonstrating how to build custom components on top of the primitives.

```vue
<script setup lang="ts">
import { Select, SelectItem } from './your-select'
</script>

<template>
  <Select default-value="2">
    <SelectItem value="1">
      Item 1
    </SelectItem>
    <SelectItem value="2">
      Item 2
    </SelectItem>
    <SelectItem value="3">
      Item 3
    </SelectItem>
  </Select>
</template>
```

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

### Hex Color Input Example (Vue)

Source: https://reka-ui.com/docs/components/color-field

Shows a basic example of using the Color Field component to input a hex color value. It utilizes Vue's 'ref' for state management and binds the color value to the 'v-model' directive of 'ColorFieldRoot'.

```vue
<script setup>
import {
  ColorFieldInput,
  ColorFieldRoot,
} from 'reka-ui'
import { ref } from 'vue'

const color = ref('#3b82f6')
</script>

<template>
  <ColorFieldRoot v-model="color">
    <ColorFieldInput />
  </ColorFieldRoot>
</template>
```

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

### Customizing Toast Behavior and Appearance

Source: https://reka-ui.com/docs/components/toast

Examples of customizing toast hotkeys, durations, handling multiple instances, and implementing swipe animations using CSS variables.

```vue
<template>
  <ToastProvider>
    <ToastViewport :hotkey="['altKey', 'KeyT']" />
  </ToastProvider>
</template>
```

```vue
<template>
  <ToastRoot :duration="3000">
    <ToastDescription>Saved!</ToastDescription>
  </ToastRoot>
</template>
```

```vue
<template>
  <div>
    <form @submit="count++">
      <button>save</button>
    </form>

    <ToastRoot v-for="(_, index) in count" :key="index">
      <ToastDescription>Saved!</ToastDescription>
    </ToastRoot>
  </div>
</template>
```

```vue
<template>
  <ToastProvider swipe-direction="right">
    <ToastRoot class="ToastRoot">
    </ToastRoot>
    <ToastViewport />
  </ToastProvider>
</template>
```

```css
.ToastRoot[data-swipe='move'] {
  transform: translateX(var(--reka-toast-swipe-move-x));
}
.ToastRoot[data-swipe='cancel'] {
  transform: translateX(0);
  transition: transform 200ms ease-out;
}
.ToastRoot[data-swipe='end'] {
  animation: slideRight 100ms ease-out;
}

@keyframes slideRight {
  from {
    transform: translateX(var(--reka-toast-swipe-end-x));
  }
  to {
    transform: translateX(100%);
  }
}
```

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

### Import Reka UI Tree Components

Source: https://reka-ui.com/docs/components/tree

Demonstrates how to import the necessary Tree components (TreeItem, TreeRoot, TreeVirtualizer) from the 'reka-ui' library for basic tree structure setup.

```vue
<script setup>
import { TreeItem, TreeRoot, TreeVirtualizer } from 'reka-ui'
</script>

<template>
  <TreeRoot>
    <TreeItem />

    <!-- or with virtual -->
    <TreeVirtualizer>
      <TreeItem />
    </TreeVirtualizer>
  </TreeRoot>
</template>
```

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

### Switch with Custom Values

Source: https://reka-ui.com/docs/components/switch

Shows how to use the `trueValue` and `falseValue` props to define custom values for the switch's on and off states, using both string and number examples.

```APIDOC
## Custom Values

Use the `trueValue` and `falseValue` props to specify custom values for the on and off states instead of the default `true`/`false`.

```vue line=4-5,9-10
<script setup>
import { SwitchRoot, SwitchThumb } from 'reka-ui'
import { ref } from 'vue'

// With string values
const status = ref('inactive')

// With number values
const enabled = ref(0)
</script>

<template>
  <!-- String values -->
  <SwitchRoot v-model="status" true-value="active" false-value="inactive">
    <SwitchThumb />
  </SwitchRoot>
  <span>Status: {{ status }}</span> <!-- "active" or "inactive" -->

  <!-- Number values -->
  <SwitchRoot v-model="enabled" :true-value="1" :false-value="0">
    <SwitchThumb />
  </SwitchRoot>
  <span>Enabled: {{ enabled }}</span> <!-- 1 or 0 -->
</template>
```
```

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

### Implement Reka UI Separator

Source: https://reka-ui.com/docs/components/separator

This snippet demonstrates how to import and use the Separator component within a Vue 3 setup script. It requires the reka-ui package to be installed in your project.

```vue
<script setup>
import { Separator } from 'reka-ui'
</script>

<template>
  <Separator />
</template>
```

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

### Animating Collapsible Content Size with CSS

Source: https://reka-ui.com/docs/components/collapsible

Shows how to animate the size of the collapsible content using CSS variables `--reka-collapsible-content-width` and `--reka-collapsible-content-height`. This example includes Vue component setup and the necessary CSS for slide animations.

```vue
// index.vue
<script setup>
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui'
import './styles.css'
</script>

<template>
  <CollapsibleRoot>
    <CollapsibleTrigger>…</CollapsibleTrigger>
    <CollapsibleContent class="CollapsibleContent">
      …
    </CollapsibleContent>
  </CollapsibleRoot>
</template>
```

```css
/* styles.css */
.CollapsibleContent {
  overflow: hidden;
}
.CollapsibleContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}
.CollapsibleContent[data-state="closed"] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--reka-collapsible-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--reka-collapsible-content-height);
  }
  to {
    height: 0;
  }
}
```

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

### Disabled State Example

Source: https://reka-ui.com/docs/components/color-area

An example illustrating how to disable user interaction with the Color Area component.

```APIDOC
### Disabled State

Disable interaction with the color area.

```vue
<script setup>
import {
  ColorAreaArea,
  ColorAreaRoot,
  ColorAreaThumb,
} from 'reka-ui'
import { ref } from 'vue'

const color = ref('#3b82f6')
</script>

<template>
  <ColorAreaRoot
    v-slot="{ style }"
    v-model="color"
    disabled
  >
    <ColorAreaArea :style="style">
      <ColorAreaThumb />
    </ColorAreaArea>
  </ColorAreaRoot>
</template>
```
```

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

### Toast with Alternative Action

Source: https://reka-ui.com/docs/components/toast

Demonstrates how to use the `altText` prop on `ToastAction` to provide screen reader users with an alternative way to action the toast. This example shows a toast for an upgrade notification and another for a file removal confirmation with an undo option.

```APIDOC
## Toast with Alternative Action

### Description
Use the `altText` prop on the `Action` to instruct an alternative way of actioning the toast to screen reader users. You can direct the user to a permanent place in your application where they can action it or implement your own custom hotkey logic. If implementing the latter, use `foreground` type to announce immediately and increase the duration to give the user ample time.

### Request Example
```vue
<template>
  <ToastRoot type="background">
    <ToastTitle>Upgrade Available!</ToastTitle>
    <ToastDescription>We've just released Reka UI 2.0.</ToastDescription>
    <ToastAction alt-text="Goto account settings to upgrade">
      Upgrade
    </ToastAction>
    <ToastClose>Dismiss</ToastClose>
  </ToastRoot>

  <ToastRoot type="foreground" :duration="10000">
    <ToastDescription>File removed successfully.</ToastDescription>
    <ToastAction alt-text="Undo (Alt+U)">
      Undo <kbd>Alt</kbd>+<kbd>U</kbd>
    </ToastAction>
    <ToastClose>Dismiss</ToastClose>
  </ToastRoot>
</template>
```
```

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

### Get Current Locale with useLocale Hook (TypeScript)

Source: https://reka-ui.com/docs/utilities/use-locale

Demonstrates how to import and use the useLocale hook from 'reka-ui' to get the currently configured locale. Assumes ConfigProvider is set up.

```typescript
import { useLocale } from 'reka-ui'

// With ConfigProvider setup as follows
// <ConfigProvider locale="fr-FR">
const locale = useLocale() // fr-FR
```

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

### Setup VueI18n for Multi-Language Support

Source: https://reka-ui.com/docs/guides/i18n

Configures VueI18n to manage multiple translation locales. This setup is essential for handling different language directions and text content within a Reka UI application.

```typescript
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

const messages = {
  en: { hello: 'Hello' },
  fa: { hello: 'درود' },
  ar: { hello: 'مرحبا' },
  ja: { hello: 'こんにちは' }
}

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  availableLocales: ['en', 'fa', 'ar', 'ja'],
  messages,
})

createApp(App)
  .use(i18n)
  .mount('#app')
```

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

### Reka UI Accordion Rotated Icon Example

Source: https://reka-ui.com/docs/components/accordion

Provides an example of how to add a decorative icon (like a chevron) to the Accordion Trigger and rotate it when the item is open, using CSS transitions and data attributes.

```vue
// index.vue
<script setup>
import { Icon } from '@iconify/vue'
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from 'reka-ui'
import './styles.css'
</script>

<template>
  <AccordionRoot type="single">
    <AccordionItem value="item-1">
      <AccordionHeader>
        <AccordionTrigger class="AccordionTrigger">
          <span>Trigger text</span>
          <Icon
            icon="radix-icons:chevron-down"
            class="AccordionChevron"
          />
        </AccordionTrigger>
      </AccordionHeader>
      <AccordionContent>…</AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>
```

```css
/* styles.css */
.AccordionChevron {
  transition: transform 300ms;
}
.AccordionTrigger[data-state="open"] > .AccordionChevron {
  transform: rotate(180deg);
}
```

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

### Presence Component - Force Mount

Source: https://reka-ui.com/docs/utilities/presence

Illustrates how to use the `force-mount` prop to ensure content is always rendered, even when the `present` prop is false.

```APIDOC
## Presence Component - Force Mount

### Description
Enables the `force-mount` prop to ensure that the content within the Presence component is always rendered in the DOM, regardless of the `present` prop's value. This is useful for maintaining component state or when animations need to be applied even to unmounted elements.

### Method
Component Usage (Vue.js)

### Endpoint
N/A (Component)

### Parameters
#### Props
- **present** (Boolean) - Required - Controls the visibility of the child element. If true, the element is present; if false, it is unmounted after its exit animation.
- **force-mount** (Boolean) - Optional - If true, the element will always be mounted in the DOM, even when `present` is false. Defaults to false.

### Request Example
```vue
<template>
  <Presence v-slot="{ present }" :present="isVisible" :force-mount="true">
    <div>
      This content will always be rendered

      <div v-if="present">
        This content is hidden
      </div>
    </div>
  </Presence>
</template>
```

### Response
#### Success Response (200)
N/A (Component renders UI elements)

#### Response Example
N/A
```

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

### Implement Basic Select Component

Source: https://reka-ui.com/docs/components/select

Demonstrates the standard implementation of the Select component by importing necessary sub-components and structuring the template with Root, Trigger, and Content parts.

```vue
<script setup lang="ts">
import {
  SelectContent,
  SelectGroup,
  SelectIcon,
  SelectItem,
  SelectItemIndicator,
  SelectLabel,
  SelectPortal,
  SelectRoot,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
  SelectViewport,
} from 'reka-ui'
</script>

<template>
  <SelectRoot>
    <SelectTrigger>
      <SelectValue />
      <SelectIcon />
    </SelectTrigger>

    <SelectPortal>
      <SelectContent>
        <SelectScrollUpButton />
        <SelectViewport>
          <SelectItem>
            <SelectItemText />
            <SelectItemIndicator />
          </SelectItem>
          <SelectGroup>
            <SelectLabel />
            <SelectItem>
              <SelectItemText />
              <SelectItemIndicator />
            </SelectItem>
          </SelectGroup>
          <SelectSeparator />
        </SelectViewport>
        <SelectScrollDownButton />
        <SelectArrow />
      </SelectContent>
    </SelectPortal>
  </SelectRoot>
</template>
```

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

### Get Current Direction with useDirection Hook (TypeScript)

Source: https://reka-ui.com/docs/utilities/use-direction

This snippet demonstrates how to import and use the useDirection hook from 'reka-ui' to get the current layout direction. It assumes a ConfigProvider is set up with a 'dir' prop. The hook returns the direction string.

```typescript
import { useDirection } from 'reka-ui'

// With ConfigProvider setup as follows
// <ConfigProvider dir="rtl">
const locale = useDirection() // rtl
```

```typescript
import { useDirection } from 'reka-ui'

// With ConfigProvider setup as follows
// <ConfigProvider dir="rtl">
const locale = useDirection('ltr') // ltr
```

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

### Native Vue Slot Example

Source: https://reka-ui.com/docs/utilities/slot

Demonstrates how native Vue slots handle attributes, converting them into scoped slots that require manual assignment in the parent template. This example shows the limitation where an 'id' attribute is not automatically inherited by a child element.

```vue
<!-- Native Slot -->
<!-- Comp.vue -->
<template>
  <slot id="reka-01">
    ...
  </slot>
</template>

<!-- parent template -->
<template>
  <Comp v-slot="slotProps">
    <button :id="slotProps.id">...<button>
  <Comp>
<template>
```

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

### Basic Stepper Implementation

Source: https://reka-ui.com/docs/components/stepper

Demonstrates the basic anatomy and import structure of the Stepper component using Reka UI primitives.

```vue
<script setup>
import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperTitle, StepperTrigger } from 'reka-ui'
</script>

<template>
  <StepperRoot>
    <StepperItem>
      <StepperTrigger />
      <StepperIndicator />

      <StepperTitle />
      <StepperDescription />

      <StepperSeparator />
    </StepperItem>
  </StepperRoot>
</template>
```

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

### Splitter - Programmatic Collapse/Expand

Source: https://reka-ui.com/docs/components/splitter

Demonstrates how to programmatically collapse and expand `SplitterPanel` components using exposed methods.

```APIDOC
## Splitter - Programmatic Collapse/Expand

### Description
This example illustrates how to control the collapse and expand state of `SplitterPanel` components programmatically. It utilizes refs to access the `collapse` and `expand` methods exposed by the `SplitterPanel` component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```vue
<script setup lang="ts">
import { ref } from 'vue'
import { SplitterPanel } from 'reka-ui'

const panelRef = ref<InstanceType<typeof SplitterPanel> | null>(null)
</script>

<template>
  <button
    @click="panelRef?.isCollapsed ? panelRef?.expand() : panelRef?.collapse()"
  >
    {{ panelRef?.isCollapsed ? 'Expand' : 'Collapse' }}
  </button>

  <SplitterGroup>
    <SplitterPanel
      ref="panelRef"
      collapsible
      :collapsed-size="10"
      :min-size="35"
    >
      ...
    </SplitterPanel>
    <SplitterResizeHandle />
    <SplitterPanel>
      ...
    </SplitterPanel>
  </SplitterGroup>
</template>
```

### Response
N/A (Component Usage)
```

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

### Presence Component - Basic Usage

Source: https://reka-ui.com/docs/utilities/presence

Demonstrates the basic usage of the Presence component to control element visibility with CSS transitions.

```APIDOC
## Presence Component - Basic Usage

### Description
Manages the mounting and unmounting of an element with CSS transition support. It ensures that animations complete before the element is removed from the DOM.

### Method
Component Usage (Vue.js)

### Endpoint
N/A (Component)

### Parameters
#### Props
- **present** (Boolean) - Required - Controls the visibility of the child element. If true, the element is present; if false, it is unmounted after its exit animation.

### Request Example
```vue
<template>
  <Presence :present="isVisible">
    <div
      :data-state="isVisible ? 'open' : 'closed'"
      class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut"
    >
      <slot />
    </div>
  </Presence>
</template>
```

### Response
#### Success Response (200)
N/A (Component renders UI elements)

#### Response Example
N/A
```

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

### Implement manual visibility with forceMount

Source: https://reka-ui.com/docs/guides/migration

Demonstrates how to handle component visibility manually when using forceMount in Presence-based components like Tabs. This ensures compatibility with SSR by rendering the component regardless of the active state.

```vue
<template>
  <TabsRoot
    v-slot="{ modelValue }"
    default-value="tab1"
  >
    <TabsContent
      value="tab1"
      force-mount
      :hidden="modelValue !== 'tab1'"
    >
      …
    </TabsContent>
    <TabsContent
      value="tab2"
      force-mount
      :hidden="modelValue !== 'tab2'"
    >
      …
    </TabsContent>
  </TabsRoot>
</template>
```

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

### Separator Component API

Source: https://reka-ui.com/docs/components/separator

Documentation for the Separator root component, including installation and implementation details.

```APIDOC
## Separator Component

### Description
The Separator component is used to visually or semantically separate content within an application. It adheres to the WAI-ARIA separator role requirements.

### Installation
```bash
npm install reka-ui
```

### Usage
```vue
<script setup>
import { Separator } from 'reka-ui'
</script>

<template>
  <Separator />
</template>
```

### API Reference
#### Root
- **Separator**: The primary component used to render the separator element.
```

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

### AspectRatio Component API

Source: https://reka-ui.com/docs/components/aspect-ratio

API reference for the AspectRatio component, including installation, anatomy, and usage.

```APIDOC
## AspectRatio Component

### Description
The AspectRatio component is used to display content within a desired ratio, ensuring consistent sizing across different viewports.

### Installation
```bash
npm install reka-ui
```

### Usage
```vue
<script setup>
import { AspectRatio } from 'reka-ui'
</script>

<template>
  <AspectRatio :ratio="16/9">
    <img src="..." />
  </AspectRatio>
</template>
```

### Props
- **ratio** (number) - Optional - The desired aspect ratio (e.g., 16/9, 4/3). Defaults to 1.

### Anatomy
- **Root**: The main wrapper component that applies the aspect ratio constraint to its children.
```

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

### Menubar with Radio Items

Source: https://reka-ui.com/docs/components/menubar

Demonstrates how to use `MenubarRadioGroup` and `MenubarRadioItem` for selecting one option from a group.

```APIDOC
## Menubar with Radio Items

### Description
This example illustrates how to use `MenubarRadioGroup` and `MenubarRadioItem` to allow users to select a single option from a list. `MenubarItemIndicator` is used to show the selected item.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A (Component Usage)

### Request Example
```vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import {
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarItemIndicator,
  MenubarMenu,
  MenubarPortal,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarRoot,
  MenubarSeparator,
  MenubarTrigger,
} from 'reka-ui'

const color = ref('blue')
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarRadioGroup v-model="color">
            <MenubarRadioItem value="red">
              <MenubarItemIndicator>
                <Icon icon="radix-icons:check" />
              </MenubarItemIndicator>
              Red
            </MenubarRadioItem>
            <MenubarRadioItem value="blue">
              <MenubarItemIndicator>
                <Icon icon="radix-icons:check" />
              </MenubarItemIndicator>
              Blue
            </MenubarRadioItem>
          </MenubarRadioGroup>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

### Response
N/A (Component Usage)
```

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

### Menubar with Checkbox Items

Source: https://reka-ui.com/docs/components/menubar

Shows how to implement `MenubarCheckboxItem` for options that can be toggled on or off.

```APIDOC
## Menubar with Checkbox Items

### Description
This example showcases `MenubarCheckboxItem` which allows users to select or deselect options. It includes `MenubarItemIndicator` to visually represent the checked state.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A (Component Usage)

### Request Example
```vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import {
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarItemIndicator,
  MenubarMenu,
  MenubarPortal,
  MenubarRoot,
  MenubarSeparator,
  MenubarTrigger,
} from 'reka-ui'

const checked = ref(true)
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarItem>…</MenubarItem>
          <MenubarItem>…</MenubarItem>
          <MenubarSeparator />
          <MenubarCheckboxItem v-model="checked">
            <MenubarItemIndicator>
              <Icon icon="radix-icons:check" />
            </MenubarItemIndicator>
            Checkbox item
          </MenubarCheckboxItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

### Response
N/A (Component Usage)
```

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

### Date Field Component API

Source: https://reka-ui.com/docs/components/date-field

API reference and usage guide for the Date Field component, including Root and Input parts.

```APIDOC
## Date Field Component

### Description
The Date Field component enables users to input specific dates within a designated field. It relies on the @internationalized/date package for handling complex date and time logic.

### Anatomy
- **DateFieldRoot**: The main container for all date field parts.
- **DateFieldInput**: The input component containing the date field segments.

### Installation
1. Install the date package: `npm install @internationalized/date`
2. Install the Reka UI component via your package manager.

### Usage Example
```vue
<script setup>
import { DateFieldInput, DateFieldRoot } from 'reka-ui'
</script>

<template>
  <DateFieldRoot>
    <DateFieldInput />
  </DateFieldRoot>
</template>
```
```

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

### Custom Command Menu Implementation

Source: https://reka-ui.com/docs/components/combobox

Provides the implementation details for creating a custom command menu using Reka UI's Combobox primitives. It includes usage examples and the necessary component implementations for `Command` and `CommandItem`.

```vue
<script setup lang="ts">
import { Command, CommandItem } from './your-command'
</script>

<template>
  <Command>
    <CommandItem value="1">
      Item 1
    </CommandItem>
    <CommandItem value="2">
      Item 2
    </CommandItem>
    <CommandItem value="3">
      Item 3
    </CommandItem>
  </Command>
</template>
```

```typescript
// your-command.ts
export { default as Command } from 'Command.vue'
export { default as CommandItem } from 'CommandItem.vue'
```

```vue
<!-- Command.vue -->
<script setup lang="ts">
import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'
import { CheckIcon, ChevronDownIcon, ChevronUpIcon, } from '@radix-icons/vue'
import { ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<ComboboxRootProps>()
const emits = defineEmits<ComboboxRootEmits>()

const forward = useForwardPropsEmits(props, emits)
</script>

<template>
  <ComboboxRoot
    v-bind="forward"
    :open="true"
    model-value=""
  >
    <ComboboxInput placeholder="Type a command or search…" />

    <ComboboxPortal>
      <ComboboxContent
        @escape-key-down.prevent
        @focus-outside.prevent
        @interact-outside.prevent
        @pointer-down-outside.prevent
      >
        <ComboboxViewport>
          <slot />
        </ComboboxViewport>
      </ComboboxContent>
    </ComboboxPortal>
  </ComboboxRoot>
</template>
```

```vue
<!-- ComboboxItem.vue -->
<script setup lang="ts">
import type { ComboboxItemProps } from 'reka-ui'
import { CheckIcon } from '@radix-icons/vue'
import { ComboboxItem } from 'reka-ui'

const props = defineProps<ComboboxItemProps>()
</script>

<template>
  <ComboboxItem
    v-bind="props"
    @select.prevent
  >
    <slot />
  </ComboboxItem>
</template>
```

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

### Presence Component forceMount Logic

Source: https://reka-ui.com/docs/guides/migration

Components utilizing Presence now require manual visibility handling when forceMount is enabled.

```APIDOC
## Presence Component forceMount

### Description
Components like Accordion, Collapsible, Tabs, and NavigationMenu now render even when inactive if forceMount is used. Developers must handle visibility logic manually.

### Example
```vue
<template>
  <TabsRoot v-slot="{ modelValue }" default-value="tab1">
    <TabsContent value="tab1" force-mount :hidden="modelValue !== 'tab1'">
      ...
    </TabsContent>
  </TabsRoot>
</template>
```
```

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

### Style Components with Tailwind CSS

Source: https://reka-ui.com/docs/guides/styling

Examples of using Tailwind CSS utility classes to style components and their states using data-attribute variants.

```vue
<script setup lang="ts">
import { AccordionRoot, AccordionItem, ... } from "reka-ui";
</script>

<template>
  <AccordionRoot>
    <AccordionItem
      class="
        border border-gray-400 rounded-2xl
        data-[state=open]:border-b-2 data-[state=open]:border-gray-800
      "
      value="item-1"
    />
  </AccordionRoot>
</template>
```

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

### Custom Toast API - Imperative API

Source: https://reka-ui.com/docs/components/toast

Demonstrates how to create an imperative API for the toast component, enabling features like toast duplication and programmatic control over toast display.

```APIDOC
## Custom Toast API - Imperative API

### Description
Create your own imperative API to allow [toast duplication](/docs/components/toast#duplicate-toasts) if preferred.

### Usage Example
```vue
<script setup lang="ts">
import Toast from './your-toast.vue'

const savedRef = ref<InstanceType<typeof Toast>>()
</script>

<template>
  <div>
    <form @submit="savedRef.publish()">
      ...
    </form>
    <Toast ref="savedRef">
      Saved successfully!
    </Toast>
  </div>
</template>
```

### Implementation Example (`your-toast.vue`)
```vue
// your-toast.vue
<script setup lang="ts">
import { ToastClose, ToastDescription, ToastRoot, ToastTitle } from 'reka-ui'
import { ref } from 'vue'

const count = ref(0)

function publish() {
  count.value++
}

defineExpose({
  publish
})
</script>

<template>
  <ToastRoot
    v-for="index in count"
    :key="index"
  >
    <ToastDescription>
      <slot />
    </ToastDescription>
    <ToastClose>Dismiss</ToastClose>
  </ToastRoot>
</template>
```
```

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

### Custom Toast Component - Imperative API (Usage)

Source: https://reka-ui.com/docs/components/toast

Demonstrates the usage of a custom Toast component with an imperative API. This example shows how to use a `ref` to access the component's methods, such as `publish`, to trigger toast notifications programmatically.

```vue
<script setup lang="ts">
import Toast from './your-toast.vue'

const savedRef = ref<InstanceType<typeof Toast>>()
</script>

<template>
  <div>
    <form @submit="savedRef.publish()">
      ...
    </form>
    <Toast ref="savedRef">
      Saved successfully!
    </Toast>
  </div>
</template>
```

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

### Implement Time Range Field Anatomy

Source: https://reka-ui.com/docs/components/time-range-field

Demonstrates the basic structural setup of the TimeRangeField component by importing and assembling the Root and Input parts.

```vue
<script setup>
import {
  TimeRangeFieldInput,
  TimeRangeFieldRoot,
} from 'reka-ui'
</script>

<template>
  <TimeRangeFieldRoot>
    <TimeRangeFieldInput part="hour" type="start" />
    <TimeRangeFieldInput part="minute" type="start" />
    <TimeRangeFieldInput part="hour" type="end" />
    <TimeRangeFieldInput part="minute" type="end" />
  </TimeRangeFieldRoot>
</template>
```

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

### Basic Splitter Implementation

Source: https://reka-ui.com/docs/components/splitter

Shows the fundamental structure of a Splitter component using SplitterGroup, SplitterPanel, and SplitterResizeHandle.

```vue
<script setup>
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'reka-ui'
</script>

<template>
  <SplitterGroup>
    <SplitterPanel />
    <SplitterResizeHandle />
  </SplitterGroup>
</template>
```

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

### Creating CalendarDate Objects

Source: https://reka-ui.com/docs/guides/dates

Demonstrates how to instantiate CalendarDate objects using year/month/day parameters, ISO 8601 strings, or the current date in a specific or local timezone.

```typescript
import { CalendarDate, getLocalTimeZone, parseDate, today } from '@internationalized/date';
const date = new CalendarDate(2024, 7, 10);
const parsedDate = parseDate('2024-07-10');
const losAngelesToday = today('America/Los_Angeles');
const localToday = today(getLocalTimeZone());
```