### Dev Setup: Run VitePress for Docs

Source: https://github.com/unovue/reka-ui/blob/v2/packages/core/README.md

Follow these steps to set up the development environment for the Reka UI documentation using VitePress. This includes installing dependencies, building the library locally, and starting the dev server.

```bash
pnpm i
pnpm build
pnpm docs:dev
```

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

### Start Documentation Development Server

Source: https://github.com/unovue/reka-ui/blob/v2/CONTRIBUTING.md

Installs documentation dependencies and starts the documentation development server.

```bash
pnpm docs:install && pnpm docs:dev
```

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

### Example prompts for LLM assistance with Reka UI

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/overview/getting-started.md

These example prompts demonstrate how to leverage LLM-optimized documentation for Reka UI to get AI-powered assistance with component implementation, styling, and accessibility.

```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."
```

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

### Install dependencies for Docs

Source: https://github.com/unovue/reka-ui/blob/v2/README.md

After cloning the repository, run this command to install all necessary dependencies for the documentation.

```bash
pnpm i
```

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

### Install Dependencies

Source: https://github.com/unovue/reka-ui/blob/v2/CLAUDE.md

Run this command from the repository root to install all project dependencies.

```bash
pnpm i
```

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

### Dev Setup: Run Histoire for Storybook

Source: https://github.com/unovue/reka-ui/blob/v2/packages/core/README.md

Follow these steps to set up the development environment for Reka UI components using Histoire (Storybook). This includes installing dependencies, starting the Storybook dev server, and running tests.

```bash
pnpm i
pnpm story:dev
pnpm test
```

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

### Custom hotkey Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/toast.md

Example demonstrating how to customize the hotkey for the ToastViewport using an array of key combinations.

```APIDOC
## Examples

### Custom hotkey

Override the default hotkey using the `event.code` value for each key from [keycode.info](https://keycode.info/).

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

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

### Force Mount Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/utilities/presence.md

Example demonstrating the use of the `forceMount` prop to ensure content is always rendered, even when not visually present.

```APIDOC
## Force Mount Example

When you need to ensure content is always rendered regardless of the present state:

```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>
```
```

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

### Clone and Install Project Dependencies

Source: https://github.com/unovue/reka-ui/blob/v2/CONTRIBUTING.md

Clone the repository and install project dependencies using pnpm.

```bash
git clone https://github.com/unovue/reka-ui.git
cd reka-ui
pnpm i
```

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

### Basic Usage Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/time-range-field.md

A basic example demonstrating how to use the TimeRangeFieldRoot and TimeRangeFieldInput components to create a time range input.

```APIDOC
```vue
<script setup>
import { Time } from '@internationalized/date'
import { TimeRangeFieldInput, TimeRangeFieldRoot } from 'reka-ui'
import { ref } from 'vue'

const timeRange = ref({
  start: new Time(9, 0),
  end: new Time(17, 0)
})
</script>

<template>
  <TimeRangeFieldRoot v-model="timeRange">
    <div class="flex items-center gap-2">
      <TimeRangeFieldInput part="hour" type="start" />
      <span>:</span>
      <TimeRangeFieldInput part="minute" type="start" />
      <span class="mx-2">to</span>
      <TimeRangeFieldInput part="hour" type="end" />
      <span>:</span>
      <TimeRangeFieldInput part="minute" type="end" />
    </div>
  </TimeRangeFieldRoot>
</template>
```
```

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

### OTP mode Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/pin-input.md

Example of how to configure the Pin Input component for OTP mode by setting the `otp` prop to `true`.

```APIDOC
### OTP mode

You can set the pin input to `otp` mode by setting otp to `true`.

```vue{6}
<script setup lang="ts">
import { Label, PinInputInput, PinInputRoot } from 'reka-ui'
</script>

<template>
  <PinInputRoot v-model="value" otp>
    …
  </PinInputRoot>
</template>
```
```

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

### Pagination Example: With first/last button

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/pagination.md

Example showing how to include PaginationFirst and PaginationLast buttons for direct navigation to the first and last pages.

```APIDOC
## With first/last button

You can add `PaginationFirst` to allow user to navigate to first page, or `PaginationLast` to navigate to last page.

```vue line=8,10
<script setup lang="ts">
import { PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationRoot } from 'reka-ui'
</script>

<template>
  <PaginationRoot>
    <PaginationList>
      <PaginationFirst />
      ...
      <PaginationLast />
    </PaginationList>
  </PaginationRoot>
</template>
```
```

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

### Install Dependencies for Nuxt 3 Project

Source: https://github.com/unovue/reka-ui/blob/v2/playground/nuxt/README.md

Use these commands to install project dependencies using npm, pnpm, or yarn.

```bash
npm install
```

```bash
pnpm install
```

```bash
yarn install
```

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

### Install @internationalized/date Package

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/month-picker.md

Install the date utility package required for date-related components. This is a prerequisite for using the Month Picker.

```bash
npm install @internationalized/date
# or
yarn add @internationalized/date
```

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

### Nested Dialog Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/dialog.md

Example demonstrating how to nest multiple layers of dialogs.

```APIDOC
## Nested dialog

You can nest multiple layers of dialogs.

<ComponentPreview name="DialogNested" />
```

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

### Pagination Example: With ellipsis

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/pagination.md

Example demonstrating how to use PaginationEllipsis for visual cues in long page lists.

```APIDOC
## With ellipsis

You can add `PaginationEllipsis` as a visual cue for more previous and after items.

```vue line=10,14
<script setup lang="ts">
import { PaginationEllipsis, PaginationList, PaginationListItem, PaginationRoot } from 'reka-ui'
</script>

<template>
  <PaginationRoot>
    <PaginationList v-slot="{ items }">
      <template v-for="(page, index) in items">
        <PaginationListItem
          v-if="page.type === 'page'"
          :key="index"
        />
        <PaginationEllipsis
          v-else
          :key="page.type"
          :index="index"
        >
          &#8230;
        </PaginationEllipsis>
      </template>
    </PaginationList>
  </PaginationRoot>
</template>
```
```

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

### Duplicate toasts Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/toast.md

Example illustrating how to render multiple instances of the same toast by using state to control the count, suitable for actions that should trigger a toast each time.

```APIDOC
### Duplicate toasts

When a toast must appear every time a user clicks a button, use state to render multiple instances of the same toast (see below). Alternatively, you can abstract the parts to create your own [imperative API](/docs/components/toast#imperative-api).

```vue line=3,8
<template>
  <div>
    <form @submit="count++">
      ...
      <button>save</button>
    </form>

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

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

### Start Nuxt 3 Development Server

Source: https://github.com/unovue/reka-ui/blob/v2/playground/nuxt/README.md

Commands to start the local development server for a Nuxt 3 project using npm, pnpm, or yarn. The server typically runs on http://localhost:3000.

```bash
npm run dev
```

```bash
pnpm run dev
```

```bash
yarn dev
```

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

### Pagination Example: Control page programmatically

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/pagination.md

Example demonstrating how to control the current page of the pagination component programmatically using a reactive value.

```APIDOC
## Control page programmatically

You can control the current page by passing it a reactive value.

```vue line=6,10,11
<script setup lang="ts">
import { PaginationRoot } from 'reka-ui'
import { ref } from 'vue'
import { Select } from './custom-select'

const currentPage = ref(1)
</script>

<template>
  <Select v-model="currentPage" />
  <PaginationRoot v-model:page="currentPage">
    ...
  </PaginationRoot>
</template>
```
```

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

### Stepper Anatomy Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/stepper.md

Demonstrates how to import and assemble all parts of the Stepper component to create a basic stepper structure.

```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>
```

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

### Custom Dropdown Menu API Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/dropdown-menu.md

An example demonstrating how to abstract primitive Dropdown Menu parts into a custom API, including checkbox and radio item implementations.

```vue
<script setup lang="ts">
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from './your-dropdown-menu'
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger>DropdownMenu trigger<\/DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>Item<\/DropdownMenuItem>
      <DropdownMenuLabel>Label<\/DropdownMenuLabel>
      <DropdownMenuGroup>Group<\/DropdownMenuGroup>
      <DropdownMenuCheckboxItem>CheckboxItem<\/DropdownMenuCheckboxItem>
      <DropdownMenuSeparator>Separator<\/DropdownMenuSeparator>
      <DropdownMenuRadioGroup>
        <DropdownMenuRadioItem>RadioItem<\/DropdownMenuRadioItem>
        <DropdownMenuRadioItem>RadioItem<\/DropdownMenuRadioItem>
      <\/DropdownMenuRadioGroup>
    <\/DropdownMenuContent>
  <\/DropdownMenu>
<\/template>
```

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

### Controlled Toggle Group Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/toggle-group.md

Example demonstrating how to control the Toggle Group component to ensure a value is always present.

```APIDOC
## Ensuring there is always a value

### Description
You can control the component to ensure a value.

### Code Example
```vue line=5,10-13
<script setup>
import { ToggleGroupItem, ToggleGroupRoot } from 'reka-ui'
import { ref } from 'vue'

const value = ref('left')
</script>

<template>
  <ToggleGroupRoot
    :model-value="value"
    @update:model-value="(val) => {
      if (val) value = val
    }"
  >
    <ToggleGroupItem value="left">
      <TextAlignLeftIcon />
    </ToggleGroupItem>
    <ToggleGroupItem value="center">
      <TextAlignCenterIcon />
    </ToggleGroupItem>
    <ToggleGroupItem value="right">
      <TextAlignRightIcon />
    </ToggleGroupItem>
  </ToggleGroupRoot>
</template>
```
```

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

### Accordion Example: Allow collapsing all items

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/accordion.md

Demonstrates how to use the `collapsible` prop to allow all items to be closed.

```APIDOC
### Allow collapsing all items

Use the `collapsible` prop to allow all items to close.

```vue line=4
<template>
  <AccordionRoot
    type="single"
    collapsible
  >
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>
```
```

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

### Custom Scroll Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/scroll-area.md

Example demonstrating how to use the exposed viewport to modify or set the scroll position outside of default methods.

```APIDOC
### Custom Scroll

Use the exposed `viewport` to modify / or set the scroll position outside default methods
```vue line=4,18
<script setup lang="ts">
import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'reka-ui'

const scrollArea = useTemplateRef('scrollArea')
function scrollToBottom() {
  const viewport = scrollArea.value?.viewport
  if (viewport) {
    const top = scrollArea.value?.$el.scrollHeight
    container.scrollTo({
      top,
      behavior: 'smooth'
    })
  }
}
</script>

<template>
  <ScrollAreaRoot ref="scrollArea">
    <ScrollAreaViewport />
    <ScrollAreaScrollbar orientation="horizontal">
      <ScrollAreaThumb />
    </ScrollAreaScrollbar>
    <ScrollAreaScrollbar orientation="vertical">
      <ScrollAreaThumb />
    </ScrollAreaScrollbar>
    <ScrollAreaCorner />
  </ScrollAreaRoot>
</template>
```
```

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

### Basic Usage

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/utilities/presence.md

Example of how to use the Presence component to conditionally render an element with fade-in/fade-out animations.

```APIDOC
## Basic Usage 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>
```
```

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

### Install Reka UI with pnpm

Source: https://github.com/unovue/reka-ui/blob/v2/README.md

Use this command to add Reka UI to your project using the pnpm package manager.

```bash
pnpm add reka-ui
```

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

### Install Reka UI Month Picker Component

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/month-picker.md

Install the Month Picker component from the Reka UI library. This command adds the component to your project's dependencies.

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

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

### Accordion Example: Expanded by default

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/accordion.md

Shows how to use the `defaultValue` prop to set an initially open item.

```APIDOC
## Examples

### Expanded by default

Use the `defaultValue` prop to define the open item by default.

```vue line=4
<template>
  <AccordionRoot
    type="single"
    default-value="item-2"
  >
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>
```
```

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

### RGB Channel Sliders Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/color-slider.md

Sliders for individual RGB channels, showing how to control red, green, and blue components.

```APIDOC
## RGB Channel Sliders

Sliders for individual RGB channels.

```vue
<script setup>
import {
  ColorSliderRoot,
  ColorSliderThumb,
  ColorSliderTrack,
} from 'reka-ui'
import { ref } from 'vue'

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

<template>
  <div class="flex flex-col gap-4">
    <ColorSliderRoot
      v-model="color"
      channel="red"
      color-space="rgb"
    >
      <ColorSliderTrack />
      <ColorSliderThumb />
    </ColorSliderRoot>

    <ColorSliderRoot
      v-model="color"
      channel="green"
      color-space="rgb"
    >
      <ColorSliderTrack />
      <ColorSliderThumb />
    </ColorSliderRoot>

    <ColorSliderRoot
      v-model="color"
      channel="blue"
      color-space="rgb"
    >
      <ColorSliderTrack />
      <ColorSliderThumb />
    </ColorSliderRoot>
  </div>
</template>
```
```

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

### Install Reka UI with yarn

Source: https://github.com/unovue/reka-ui/blob/v2/README.md

Use this command to add Reka UI to your project using the yarn package manager.

```bash
yarn add reka-ui
```

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

### Menubar Anatomy and Structure

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/menubar.md

Demonstrates the basic structure and import of all Menubar components. This serves as a foundational example for building a Menubar.

```vue
<script setup lang="ts">
import {
  MenubarArrow,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarItemIndicator,
  MenubarLabel,
  MenubarMenu,
  MenubarPortal,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarRoot,
  MenubarSeparator,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from './'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger />
      <MenubarPortal>
        <MenubarContent>
          <MenubarLabel />
          <MenubarItem />

          <MenubarGroup>
            <MenubarItem />
          </MenubarGroup>

          <MenubarCheckboxItem>
            <MenubarItemIndicator />
          </MenubarCheckboxItem>

          <MenubarRadioGroup>
            <MenubarRadioItem>
              <MenubarItemIndicator />
            </MenubarRadioItem>
          </MenubarRadioGroup>

          <MenubarSub>
            <MenubarSubTrigger />
            <MenubarPortal>
              <MenubarSubContent />
            </MenubarPortal>
          </MenubarSub>

          <MenubarSeparator />
          <MenubarArrow />
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>
```

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

### MenubarContent Emits Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/meta/MenubarContent.md

Lists the emitted events for the MenubarContent component, such as 'closeAutoFocus', 'escapeKeyDown', and 'focusOutside', along with their event types and descriptions.

```javascript
{
    'name': 'closeAutoFocus',
    'description': '<p>Event handler called when auto-focusing on close.
Can be prevented.</p>
',
    'type': '[event: Event]'
  },
  {
    'name': 'escapeKeyDown',
    'description': '<p>Event handler called when the escape key is down.
Can be prevented.</p>
',
    'type': '[event: KeyboardEvent]'
  },
  {
    'name': 'focusOutside',
    'description': '<p>Event handler called when the focus moves outside of the <code>DismissableLayer</code>.
Can be prevented.</p>
',
    'type': '[event: FocusOutsideEvent]'
  },
  {
    'name': 'interactOutside',
    'description': '<p>Event handler called when an interaction happens outside the <code>DismissableLayer</code>.
Specifically, when a <code>pointerdown</code> event happens outside or focus moves outside of it.
Can be prevented.</p>
',
    'type': '[event: PointerDownOutsideEvent | FocusOutsideEvent]'
  },
  {
    'name': 'pointerDownOutside',
    'description': '<p>Event handler called when a <code>pointerdown</code> event happens outside of the <code>DismissableLayer</code>.
Can be prevented.</p>
',
    'type': '[event: PointerDownOutsideEvent]'
  }
```

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

### Install Reka UI with npm

Source: https://github.com/unovue/reka-ui/blob/v2/README.md

Use this command to add Reka UI to your project using the npm package manager.

```bash
npm install reka-ui
```

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

### Accordion Example: Multiple items open

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/accordion.md

Illustrates how to set the `type` prop to `multiple` to enable multiple items to be open simultaneously.

```APIDOC
### Multiple items open at the same time

Set the `type` prop to `multiple` to enable opening multiple items at once.

```vue line=2
<template>
  <AccordionRoot type="multiple">
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>
```
```

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

### Import and Use Label Component

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/label.md

Demonstrates how to import and use the Label component in a Vue application. Ensure the component is installed before importing.

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

<template>
  <Label />
</template>
```

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

### Get Current Direction with useDirection

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/utilities/use-direction.md

Retrieve the current direction set by ConfigProvider. Ensure ConfigProvider is set up, for example, with `dir="rtl"`.

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

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

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

### Implement Advanced Validation for TimeRangeField

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/time-range-field.md

Implement complex validation rules, such as ensuring the end time is after the start time and within business hours. This example uses a watcher to check the time range validity.

```vue
<script setup>
import { Time } from '@internationalized/date'
import { TimeRangeFieldInput, TimeRangeFieldRoot } from 'reka-ui'
import { ref, watch } from 'vue'

const timeRange = ref({
  start: new Time(9, 0),
  end: new Time(17, 0)
})

const errors = ref([])

watch(timeRange, (newRange) => {
  errors.value = []
  if (newRange.start && newRange.end) {
    if (newRange.start.compare(newRange.end) >= 0) {
      errors.value.push('End time must be after start time')
    }
    if (newRange.start.hour < 8 || newRange.start.hour > 18) {
      errors.value.push('Start time must be between 8 AM and 6 PM')
    }
    if (newRange.end.hour < 8 || newRange.end.hour > 18) {
      errors.value.push('End time must be between 8 AM and 6 PM')
    }
  }
}, { deep: true })
</script>

<template>
  <TimeRangeFieldRoot v-model="timeRange">
    <div class="flex items-center gap-2">
      <TimeRangeFieldInput part="hour" type="start" />
      <span>:</span>
      <TimeRangeFieldInput part="minute" type="start" />
      <span class="mx-2">to</span>
      <TimeRangeFieldInput part="hour" type="end" />
      <span>:</span>
      <TimeRangeFieldInput part="minute" type="end" />
    </div>
    <div v-if="errors.length" class="mt-2">
      <p v-for="error in errors" :key="error" class="text-red-500 text-sm">
        {{ error }}
      </p>
    </div>
  </TimeRangeFieldRoot>
</template>
```

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

### Time Range Field Anatomy

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/time-range-field.md

Import and assemble the TimeRangeFieldRoot and TimeRangeFieldInput components to create a time range field. This example shows the basic structure for defining start and end hour and minute inputs.

```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>
```

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

### Get Direction with Fallback using useDirection

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/utilities/use-direction.md

Retrieve the current direction from ConfigProvider, or use the provided fallback value if no direction is set. For example, `useDirection('ltr')` will return 'ltr' if ConfigProvider does not specify a direction.

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

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

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

### Run Docs Development Server

Source: https://github.com/unovue/reka-ui/blob/v2/README.md

Starts the VitePress development server for the Reka UI documentation. Open http://localhost:5173 in your browser to view the docs.

```bash
pnpm docs:dev
```

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

### Run Histoire (Storybook) for Package Development

Source: https://github.com/unovue/reka-ui/blob/v2/README.md

Starts the Histoire development server for Reka UI components. Open http://localhost:6006 in your browser to view the component stories.

```bash
pnpm story:dev
```

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

### Build Reka UI locally for Docs

Source: https://github.com/unovue/reka-ui/blob/v2/README.md

Run this command to build the Reka UI package locally, which is required before running the documentation development server.

```bash
pnpm build
```

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

### Basic Context Menu Structure

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/context-menu.md

Set up a basic context menu using ContextMenuRoot, ContextMenuTrigger, ContextMenuPortal, and ContextMenuContent. Import necessary components from 'reka-ui'.

```vue
<script setup lang="ts">
import { ContextMenuContent, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from 'reka-ui'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent class="ContextMenuContent">
        …
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>
```

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

### Vertical Orientation Slider

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/color-slider.md

Example of a vertical color slider, suitable for space-constrained layouts. This example adjusts the lightness channel.

```vue
<script setup>
import {
  ColorSliderRoot,
  ColorSliderThumb,
  ColorSliderTrack,
} from 'reka-ui'
import { ref } from 'vue'

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

<template>
  <ColorSliderRoot
    v-model="color"
    channel="lightness"
    orientation="vertical"
    class="h-[200px]"
  >
    <ColorSliderTrack />
    <ColorSliderThumb />
  </ColorSliderRoot>
</template>
```

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

### Importing and Using DateField Components

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/date-field.md

Demonstrates how to import and assemble the DateFieldRoot and DateFieldInput components for basic usage.

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

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

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

### Show instantly

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/hover-card.md

Use the `openDelay` prop to control the time it takes for the hover card to open.

```APIDOC
## Show instantly

Use the `openDelay` prop to control the time it takes for the hover card to open.

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

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

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

### Numeric mode Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/pin-input.md

Example of how to configure the Pin Input component to accept only numeric input by setting the `type` prop to `number`.

```APIDOC
### Numeric mode

You can set the pin input to only accept `number` type by setting type to `number`.

```vue{6}
<script setup lang="ts">
import { Label, PinInputInput, PinInputRoot } from 'reka-ui'
</script>

<template>
  <PinInputRoot v-model="value" type="number">
    …
  </PinInputRoot>
</template>
```
```

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

### Import and Assemble Navigation Menu Components

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/navigation-menu.md

Import all necessary parts of the Navigation Menu component and assemble them to create a basic navigation structure. This example demonstrates how to use `NavigationMenuRoot`, `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuTrigger`, `NavigationMenuContent`, `NavigationMenuLink`, `NavigationMenuSub`, `NavigationMenuIndicator`, and `NavigationMenuViewport`.

```vue
<script setup lang="ts">
import {
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuSub,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from 'reka-ui'
</script>

<template>
  <NavigationMenuRoot>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger />
        <NavigationMenuContent>
          <NavigationMenuLink />
        </NavigationMenuContent>
      </NavigationMenuItem>

      <NavigationMenuItem>
        <NavigationMenuLink />
      </NavigationMenuItem>

      <NavigationMenuItem>
        <NavigationMenuTrigger />
        <NavigationMenuContent>
          <NavigationMenuSub>
            <NavigationMenuList />
            <NavigationMenuViewport />
          </NavigationMenuSub>
        </NavigationMenuContent>
      </NavigationMenuItem>

      <NavigationMenuIndicator />
    </NavigationMenuList>

    <NavigationMenuViewport />
  </NavigationMenuRoot>
</template>
```

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

### Close after asynchronous form submission Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/dialog.md

Example showing how to use controlled props to programmatically close the Dialog after an async operation.

```APIDOC
## Close after asynchronous form submission

Use the controlled props to programmatically close the Dialog after an async operation has completed.

```vue line=4,5,15-19,22-24
<script setup>
import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTrigger } from 'reka-ui'

const wait = () => new Promise(resolve => setTimeout(resolve, 1000))
const open = ref(false)
</script>

<template>
  <DialogRoot v-model:open="open">
    <DialogTrigger>Open</DialogTrigger>
    <DialogPortal>
      <DialogOverlay />
      <DialogContent>
        <form
          @submit.prevent=
            (event) => {
              wait().then(() => (open = false));
            }
          "
        >
          <!-- some inputs -->
          <button type="submit">
            Submit
          </button>
        </form>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>
```
```

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

### Basic Navigation Menu Structure

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/navigation-menu.md

Sets up a basic navigation menu with two items and a viewport. Imports necessary components from 'reka-ui'.

```vue
<script setup lang="ts">
import {
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from 'reka-ui'
</script>

<template>
  <NavigationMenuRoot>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item one</NavigationMenuTrigger>
        <NavigationMenuContent class="NavigationMenuContent">
          Item one content
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item two</NavigationMenuTrigger>
        <NavigationMenuContent class="NavigationMenuContent">
          Item two content
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>

    <NavigationMenuViewport class="NavigationMenuViewport" />
  </NavigationMenuRoot>
</template>
```

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

### Basic Autocomplete Usage

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/autocomplete.md

Demonstrates the fundamental setup of the Autocomplete component, including input, portal, content, and items. The `modelValue` reflects user input, and item selection populates the input.

```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>
```

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

### Custom duration Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/toast.md

Example showing how to set a custom duration for a specific ToastRoot component, overriding the provider's default duration.

```APIDOC
### Custom duration

Customise the duration of a toast to override the provider value.

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

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

### Preview Nuxt 3 Production Build Locally

Source: https://github.com/unovue/reka-ui/blob/v2/playground/nuxt/README.md

Commands to locally preview the production build of a Nuxt 3 application using npm, pnpm, or yarn.

```bash
npm run preview
```

```bash
pnpm run preview
```

```bash
yarn preview
```

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

### Number Field Example - Decimal

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/number-field.md

Example of using the NumberField with decimal formatting options, including sign display and minimum fraction digits.

```APIDOC
## Example - Decimal

All options supported by `Intl.NumberFormat` are supported, including configuration of minimum and maximum fraction digits, sign display, grouping separators, etc.

```vue line=3-7
<template>
  <NumberFieldRoot
    :default-value="5"
    :format-options="{
      signDisplay: 'exceptZero',
      minimumFractionDigits: 1,
    }"
  >
    …
  </NumberFieldRoot>
</template>
```
```

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

### Number Field Example - Percentage

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/number-field.md

Example of configuring the NumberField to display values as percentages using `formatOptions.style: 'percent'`. Requires manual step adjustment.

```APIDOC
## Example - Percentage

You can set `formatOptions.style` to `percent` to treat the value as a percentage. You need to set the step to 0.01 manually to allow an appropriate step size in this mode.

```vue line=3-7
<template>
  <NumberFieldRoot
    :default-value="0.05"
    :step="0.01"
    :format-options="{
      style: 'percent',
    }"
  >
    …
  </NumberFieldRoot>
</template>
```
```

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

### Command Menu Usage

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/combobox.md

Shows how to use Combobox primitives to build a custom Command Menu component. This example assumes the existence of 'Command' and 'CommandItem' components.

```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>
```

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

### Get Current Locale with useLocale

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/utilities/use-locale.md

Import and call `useLocale` to get the locale set by the nearest `ConfigProvider`. Ensure `ConfigProvider` is set up with a `locale` prop.

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

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

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

### Toolbar Anatomy and Import

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/toolbar.md

Demonstrates how to import and structure the basic Toolbar component with its various parts.

```vue
<script setup lang="ts">
import {
  ToolbarButton,
  ToolbarLink,
  ToolbarRoot,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from 'reka-ui'
</script>

<template>
  <ToolbarRoot>
    <ToolbarButton />
    <ToolbarSeparator />
    <ToolbarLink />
    <ToolbarToggleGroup>
      <ToolbarToggleItem />
    </ToolbarToggleGroup>
  </ToolbarRoot>
</template>
```

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

### Number Field Example - Currency

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/number-field.md

Example of using the NumberField for currency values with `formatOptions.style: 'currency'` and specifying the currency code. Note that currency changes require a separate control.

```APIDOC
## Example - Currency

You can set `formatOptions.style` to `currency` to treat the value as a currency value. The currency option must also be passed to set the currency code (e.g., USD).

If you need to allow the user to change the currency, you should include a separate dropdown next to the number field. The number field itself will not determine the currency from the user input.

```vue line=4-9
<template>
  <NumberFieldRoot
    :default-value="5"
    :format-options="{
      style: 'currency',
      currency: 'EUR',
      currencyDisplay: 'code',
      currencySign: 'accounting',
    }"
  >
    …
  </NumberFieldRoot>
</template>
```
```

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

### Select Component Anatomy

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/select.md

Demonstrates the basic structure and import of all Select component parts. This example shows how to assemble the various pieces of the Select component.

```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>
```

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

### Build Nuxt 3 Application for Production

Source: https://github.com/unovue/reka-ui/blob/v2/playground/nuxt/README.md

Commands to build the Nuxt 3 application for production deployment using npm, pnpm, or yarn.

```bash
npm run build
```

```bash
pnpm run build
```

```bash
yarn build
```

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

### Custom portal container

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/alert-dialog.md

Example of customizing the element that the alert dialog portals into.

```APIDOC
## Custom portal container

Customise the element that your alert dialog portals into.

```vue line=4,17
<script setup>
import { ref } from 'vue'

const container = ref(null)
</script>

<template>
  <div>
    <AlertDialogRoot>
      <AlertDialogTrigger />
      <AlertDialogPortal :to="container">
        <AlertDialogOverlay />
        <AlertDialogContent>...</AlertDialogContent>
      </AlertDialogPortal>
    </AlertDialogRoot>

    <div ref="container" />
  </div>
</template>
```
```

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

### Vertical Orientation Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/color-slider.md

A vertical slider for space-constrained layouts, demonstrating the `orientation` prop.

```APIDOC
## Vertical Orientation

A vertical slider for space-constrained layouts.

```vue
<script setup>
import {
  ColorSliderRoot,
  ColorSliderThumb,
  ColorSliderTrack,
} from 'reka-ui'
import { ref } from 'vue'

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

<template>
  <ColorSliderRoot
    v-model="color"
    channel="lightness"
    orientation="vertical"
    class="h-[200px]"
  >
    <ColorSliderTrack />
    <ColorSliderThumb />
  </ColorSliderRoot>
</template>
```
```

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

### Alpha Channel Slider Example

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/color-slider.md

Slider for adjusting the alpha (opacity) channel of a color.

```APIDOC
## Alpha Channel

Slider for adjusting the alpha (opacity) channel.

```vue
<script setup>
import {
  ColorSliderRoot,
  ColorSliderThumb,
  ColorSliderTrack,
} from 'reka-ui'
import { ref } from 'vue'

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

<template>
  <ColorSliderRoot
    v-model="color"
    channel="alpha"
  >
    <ColorSliderTrack />
    <ColorSliderThumb />
  </ColorSliderRoot>
</template>
```
```

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

### Dropdown Menu Basic Structure

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/components/dropdown-menu.md

Basic setup for the Dropdown Menu component, including importing necessary parts and structuring the template.

```vue
<script setup lang="ts">
import { DropdownMenuContent, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from 'reka-ui'
</script>

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger>…<\/DropdownMenuTrigger>
    <DropdownMenuPortal>
      <DropdownMenuContent class="DropdownMenuContent">
        …
      <\/DropdownMenuContent>
    <\/DropdownMenuPortal>
  <\/DropdownMenuRoot>
<\/template>
```

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

### Customizing Filter Sensitivity

Source: https://github.com/unovue/reka-ui/blob/v2/docs/content/docs/utilities/use-filter.md

Customize the filtering behavior by providing `Intl.CollatorOptions`. This example demonstrates case-insensitive filtering.

```typescript
const { startsWith } = useFilter({ sensitivity: 'base' })
console.log(startsWith('Résumé', 'resume')) // true (case-insensitive)
```