### Vue Tour Setup

Source: https://ark-ui.com/react/docs/components/tour

Initial setup for the Tour component in Vue using script setup syntax.

```vue
<script setup lang="ts">
import { Tour, useTour, type TourStepDetails } from '@ark-ui/vue/tour'
import { KeyboardIcon, SparklesIcon, XIcon } from 'lucide-vue-next'
import button from 'styles/button.module.css'
import styles from 'styles/tour.module.css'

const steps: TourStepDetails[] = [
 {
 id: 'step-1',
 type: 'tooltip',
```

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

### Vue Tour Component Setup

Source: https://ark-ui.com/react/docs/components/tour

Initial setup for the Tour component in Vue using the script setup syntax.

```vue
<script setup lang="ts">
import { Tour, useTour, type TourStepDetails } from '@ark-ui/vue/tour'
import { SparklesIcon, XIcon } from 'lucide-vue-next'
import { ref } from 'vue'
import button from 'styles/button.module.css'
import styles from 'styles/tour.module.css'

const steps: TourStepDetails[] = [
 {
 id: 'step-1',
 type: 'tooltip',
 title: 'First Step',
 description: 'Watch the event log below as you navigate.',
 target: () =>
```

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

### Toast Implementation Examples

Source: https://ark-ui.com/svelte/docs/components/toast

Examples of creating and displaying toast notifications in Solid, Vue, and Svelte.

```tsx
Toaster, createToaster } from '@ark-ui/solid/toast'
import { XIcon } from 'lucide-solid'
import { For } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/toast.module.css'

const durations = [
 { label: '1s', value: 1000 },
 { label: '3s', value: 3000 },
 { label: '5s', value: 5000 },
 { label: '∞', value: Infinity },
]

export const Duration = () => {
 const toaster = createToaster({
 overlap: true,
 placement: 'bottom-end',
 gap: 16,
 })

 return (
 <div>
 <div style={{ display: 'flex', 'flex-wrap': 'wrap', gap: '8px' }}>
 <For each={durations}>
 {(duration) => (
 <button
 type="button"
 class={button.Root}
 onClick={() =>
 toaster.create({
 title: `Duration: ${duration.label}`,
 description:
 duration.value === Infinity
 ? 'This toast will stay until you dismiss it.'
 : `This toast will automatically close in ${duration.label}.`,
 type: 'info',
 duration: duration.value,
 })
 }
 >
 {duration.label}
 </button>
 )}
 </For>
 </div>

 <Portal>
 <Toaster toaster={toaster}>
 {(toast) => (
 <Toast.Root class={styles.Root}>
 <Toast.Title class={styles.Title}>{toast().title}</Toast.Title>
 <Toast.Description class={styles.Description}>{toast().description}</Toast.Description>
 <Toast.CloseTrigger class={styles.CloseTrigger}>
 <XIcon />
 </Toast.CloseTrigger>
 </Toast.Root>
 )}
 </Toaster>
 </Portal>
 </div>
 )
}
```

```vue
<script setup lang="ts">
import { Toast, Toaster, createToaster } from '@ark-ui/vue/toast'
import { X } from 'lucide-vue-next'
import button from 'styles/button.module.css'
import styles from 'styles/toast.module.css'

const toaster = createToaster({
 overlap: true,
 placement: 'bottom-end',
 gap: 16,
})

const durations = [
 { label: '1s', value: 1000 },
 { label: '3s', value: 3000 },
 { label: '5s', value: 5000 },
 { label: '∞', value: Infinity },
]
</script>

<template>
 <div>
 <div style="display: flex; flex-wrap: wrap; gap: 8px">
 <button
 v-for="duration in durations"
 :key="duration.label"
 type="button"
 :class="button.Root"
 @click="
 toaster.create({
 title: `Duration: ${duration.label}`,
 description:
 duration.value === Infinity
 ? 'This toast will stay until you dismiss it.'
 : `This toast will automatically close in ${duration.label}.`,
 type: 'info',
 duration: duration.value,
 })
 "
 >
 {{ duration.label }}
 </button>
 </div>

 <Teleport to="body">
 <Toaster :toaster="toaster" v-slot="toast">
 <Toast.Root :class="styles.Root">
 <Toast.Title :class="styles.Title">{{ toast.title }}</Toast.Title>
 <Toast.Description :class="styles.Description">{{ toast.description }}</Toast.Description>
 <Toast.CloseTrigger :class="styles.CloseTrigger">
 <X />
 </Toast.CloseTrigger>
 </Toast.Root>
 </Toaster>
 </Teleport>
 </div>
</template>
```

```svelte
<script lang="ts">
 import { Portal } from '@ark-ui/svelte/portal'
 import { Toast, Toaster, createToaster } from '@ark-ui/svelte/toast'
 import { X } from 'lucide-svelte'
 import button from 'styles/button.module.css'
 import styles from 'styles/toast.module.css'

 const toaster = createToaster({
 overlap: true,
 placement: 'bottom-end',
 gap: 16,
 })

 const durations = [
 { label: '1s', value: 1000 },
 { label: '3s', value: 3000 },
 { label: '5s', value: 5000 },
 { label: '∞', value: Infinity },
 ]
</script>

<div>
 <div style="display: flex; flex-wrap: wrap; gap: 8px;">
 {#each durations as duration}
 <button
 type="button"
 class={button.Root}
 onclick={() =>
 toaster.create({
 title: `Duration: ${duration.label}`,
 description:
 duration.value === Infinity
 ? 'This toast will stay until you dismiss it.'
 : `This toast will automatically close in ${duration.label}.`,
 type: 'info',
 duration: duration.value,
 })}
 >
 {duration.label}
 </button>
 {/each}
 </div>

 <Portal>
 <Toaster {toaster}>
 {#snippet children(toast)}
 <Toast.Root class={styles.Root}>
```

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

### Vue Tour Setup

Source: https://ark-ui.com/solid/docs/components/tour

Initial setup for the Tour component in a Vue environment.

```vue
<script setup lang="ts">
import { Tour, useTour, waitForEvent, type TourStepDetails } from '@ark-ui/vue/tour'
import { SparklesIcon, XIcon } from 'lucide-vue-next'
import button from 'styles/button.module.css'
import styles from 'styles/tour.module.css'

const steps: TourStepDetails[] = [
 {
 id: 'intro',
 type: 'dialog',
 title: 'Interactive Tutorial',
 description: 'This tour will guide you through actions.
```

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

### Vue Implementation Setup

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

Initial setup for the DatePicker component in a Vue environment.

```vue
<script setup
```

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

### Timer Implementation Examples

Source: https://ark-ui.com/solid/docs/components/timer

Examples showing how to implement a timer with work/break cycles in Vue and Svelte.

```vue
<script setup lang="ts">
// biome-ignore lint/correctness/noUnusedImports: used in template
import { Timer } from '@ark-ui/vue/timer'
import { PauseIcon, PlayIcon, RotateCcwIcon } from 'lucide-vue-next'
import { ref } from 'vue'
import button from 'styles/button.module.css'
import styles from 'styles/timer.module.css'

const isWorking = ref(true)
const cycles = ref(0)

const handleComplete = () => {
 isWorking.value = !isWorking.value
 if (!isWorking.value) cycles.value += 1
}
</script>

<template>
 <Timer.Root
 class="stack"
 :startMs="isWorking ? 25 * 60 * 1000 : 5 * 60 * 1000"
 :countdown="true"
 @complete="handleComplete"
 >
 <h2>{{ isWorking ? 'Work Session' : 'Break Session' }}</h2>

 <Timer.Area :class="styles.Area">
 <div :class="styles.ItemGroup">
 <Timer.Item :class="styles.Item" type="minutes" />
 <span :class="styles.ItemLabel">minutes</span>
 </div>
 <Timer.Separator :class="styles.Separator">:</Timer.Separator>
 <div :class="styles.ItemGroup">
 <Timer.Item :class="styles.Item" type="seconds" />
 <span :class="styles.ItemLabel">seconds</span>
 </div>
 </Timer.Area>

 <Timer.Control class="hstack">
 <Timer.ActionTrigger :class="button.Root" action="start">
 <PlayIcon />
 Start
 </Timer.ActionTrigger>
 <Timer.ActionTrigger :class="button.Root" action="pause">
 <PauseIcon />
 Pause
 </Timer.ActionTrigger>
 <Timer.ActionTrigger :class="button.Root" action="reset">
 <RotateCcwIcon />
 Reset
 </Timer.ActionTrigger>
 </Timer.Control>

 <output>Completed cycles: {{ cycles }}</output>
 </Timer.Root>
</template>
```

```svelte
<script lang="ts">
 import { Timer } from '@ark-ui/svelte/timer'
 import { PauseIcon, PlayIcon, RotateCcwIcon } from 'lucide-svelte'
 import button from 'styles/button.module.css'
 import styles from 'styles/timer.module.css'

 let isWorking = $state(true)
 let cycles = $state(0)

 const handleComplete = () => {
 isWorking = !isWorking
 if (!isWorking) {
 cycles += 1
 }
 }
</script>

<Timer.Root class="stack" startMs={isWorking ? 25 * 60 * 1000 : 5 * 60 * 1000} countdown onComplete={handleComplete}>
 <h2>{isWorking ? 'Work Session' : 'Break Session'}</h2>

 <Timer.Area class={styles.Area}>
 <div class={styles.ItemGroup}>
 <Timer.Item class={styles.Item} type="minutes" />
 <span class={styles.ItemLabel}>minutes</span>
 </div>
 <Timer.Separator class={styles.Separator}>:</Timer.Separator>
 <div class={styles.ItemGroup}>
 <Timer.Item class={styles.Item} type="seconds" />
 <span class={styles.ItemLabel}>seconds</span>
 </div>
 </Timer.Area>

 <Timer.Control class="hstack">
 <Timer.ActionTrigger class={button.Root} action="start">
 <PlayIcon /> Start
 </Timer.ActionTrigger>
 <Timer.ActionTrigger class={button.Root} action="pause">
 <PauseIcon /> Pause
 </Timer.ActionTrigger>
 <Timer.ActionTrigger class={button.Root} action="reset">
 <RotateCcwIcon /> Reset
 </Timer.ActionTrigger>
 </Timer.Control>

 <output>Completed cycles: {cycles}</output>
</Timer.Root>
```

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

### Combobox Root Provider Example

Source: https://ark-ui.com/solid/docs/components/combobox

This example demonstrates the basic setup of the Combobox component using the root provider pattern.

```tsx
import { Combobox } from '@ark-ui/react/combobox'

export const RootProvider = () => {
  return (
    <Combobox.RootProvider value={...}>
      <Combobox.Label>Framework</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input />
        <Combobox.Trigger />
      </Combobox.Control>
      <Combobox.Positioner>
        <Combobox.Content>
          <Combobox.ItemGroup>
            <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
            <Combobox.Item value="react">
              <Combobox.ItemText>React</Combobox.ItemText>
              <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
            </Combobox.Item>
          </Combobox.ItemGroup>
        </Combobox.Content>
      </Combobox.Positioner>
    </Combobox.RootProvider>
  )
}
```

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

### get_example

Source: https://ark-ui.com/react/docs/ai/mcp-server

Retrieves specific code examples and usage patterns for components.

```APIDOC
## get_example

### Description
Retrieves detailed code examples and usage patterns for a specific component or pattern.

### Usage
Invoke this tool to fetch the source code and implementation details for a requested example.
```

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

### list_examples

Source: https://ark-ui.com/react/docs/ai/mcp-server

Lists various component examples available in the library.

```APIDOC
## list_examples

### Description
Lists various component examples to help understand how to implement specific UI patterns.

### Usage
Invoke this tool to see a list of available implementation examples.
```

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

### Vue FocusTrap Implementation

Source: https://ark-ui.com/react/docs/utilities/focus-trap

Example of using the FocusTrap component in a Vue 3 setup script.

```vue
<script setup lang="ts">
import { FocusTrap } from '@ark-ui/vue/focus-trap'
import { ref } from 'vue'

const trapped = ref(false)
const inputRef = ref<HTMLInputElement>()
const toggle = () => {
 trapped.value = !trapped.value
}
</script>

<template>
 <div>
 <button @click="toggle">{{ trapped ? 'End Trap' : 'Start Trap' }}</button>
 <FocusTrap :disabled="!trapped" :initial-focus="() => inputRef">
 <div style="display: flex; flex-direction: column; gap: 1rem; padding-block: 1rem">
 <input type="text" placeholder="First input" />
 <input ref="inputRef" type="text" placeholder="Second input (initial focus)" />
 <textarea placeholder="textarea" />
 <button @click="trapped = false">End Trap</button>
 </div>
 </FocusTrap>
 </div>
</template>
```

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

### Vue DownloadTrigger Implementation

Source: https://ark-ui.com/react/docs/utilities/download-trigger

Example of using the DownloadTrigger component in a Vue application with a script setup block.

```vue
<script setup lang="ts">
import { DownloadTrigger } from '@ark-ui/vue/download-trigger'
import { DownloadIcon, ImageIcon } from 'lucide-vue-next'
import button from 'styles/button.module.css'
import styles from 'styles/download-trigger.module.css'

const fetchImage = async () => {
 const response = await fetch('https://picsum.photos/200/300')
 return response.blob()
}
</script>

<template>
 <div :class="styles.Root">
 <div :class="styles.Preview">
 <ImageIcon />
 <span :class="styles.PreviewText">random-image.jpg (fetched on download)</span>
 </div>
 <DownloadTrigger :class="button.Root" :data="fetchImage" fileName="random-image.jpg" mimeType="image/jpeg">
 <DownloadIcon />
 Download Image
 </DownloadTrigger>
 </div>
</template>
```

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

### Implement Tour in Svelte

Source: https://ark-ui.com/react/docs/components/tour

Example of setting up a tour with steps and component structure in a Svelte application.

```svelte
<script lang="ts">
 import { Portal } from '@ark-ui/svelte/portal'
 import { Tour, useTour, type TourStepDetails } from '@ark-ui/svelte/tour'
 import { MoreHorizontalIcon, SaveIcon, SparklesIcon, UploadIcon, XIcon } from 'lucide-svelte'
 import button from 'styles/button.module.css'
 import styles from 'styles/tour.module.css'

 const steps: TourStepDetails[] = [
 {
 id: 'welcome',
 type: 'dialog',
 title: 'Welcome to the App!',
 description: "Let's take a quick tour to get you started with the main features.",
 actions: [{ label: 'Start Tour', action: 'next' }],
 },
 {
 id: 'upload',
 type: 'tooltip',
 title: 'Upload Files',
 description: 'Click here to upload your files to the cloud.',
 target: () => document.querySelector<HTMLElement>('#btn-upload'),
 actions: [
 { label: 'Back', action: 'prev' },
 { label: 'Next', action: 'next' },
 ],
 },
 {
 id: 'save',
 type: 'tooltip',
 title: 'Save Changes',
 description: 'Save your work to keep your progress.',
 target: () => document.querySelector<HTMLElement>('#btn-save'),
 actions: [
 { label: 'Back', action: 'prev' },
 { label: 'Next', action: 'next' },
 ],
 },
 {
 id: 'more',
 type: 'tooltip',
 title: 'More Options',
 description: 'Access additional settings and actions from this menu.',
 target: () => document.querySelector<HTMLElement>('#btn-more'),
 actions: [
 { label: 'Back', action: 'prev' },
 { label: 'Next', action: 'next' },
 ],
 },
 {
 id: 'complete',
 type: 'dialog',
 title: "You're all set!",
 description: 'You now know the basics. Enjoy using the app!',
 actions: [{ label: 'Finish', action: 'dismiss' }],
 },
 ]

 const tour = useTour({ steps })
</script>

<div class={styles.Root}>
 <button type="button" data-variant="surface" class={button.Root} onclick={() => tour().start()}>
 <SparklesIcon /> Start Tour
 </button>

 <div class={styles.ActionButtons}>
 <button id="btn-upload" type="button" class={button.Root}>
 <UploadIcon /> Upload
 </button>
 <button id="btn-save" type="button" class={button.Root}>
 <SaveIcon /> Save
 </button>
 <button id="btn-more" type="button" class={button.Root}>
 <MoreHorizontalIcon /> More
 </button>
 </div>

 <Tour.Root {tour}>
 <Portal>
```

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

### React Image Cropper Flip Example

Source: https://ark-ui.com/react/docs/components/image-cropper

Initial setup for the React Image Cropper flip functionality.

```tsx
import { ImageCropper } from '@ark-ui/react/image-cropper'
import { FlipHorizontalIcon, FlipVerticalIcon } from 
```

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

### Date Input Implementation in Vue

Source: https://ark-ui.com/solid/docs/components/date-input

Example showing the setup of DateInput and DatePicker using the Vue composition API.

```vue
<script setup lang="ts">
import { DateInput, useDateInput } from '@ark-ui/vue/date-input'
import { DatePicker, useDatePicker } from '@ark-ui/vue/date-picker'
import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-vue-next'
import { computed } from 'vue'
import styles from 'styles/date-input.module.css'
import datePickerStyles from 'styles/date-picker.module.css'

const datePicker = useDatePicker()
const dateInput = useDateInput(
 computed(() => ({
 value: datePicker.value.value,
 onValueChange(details) {
 datePicker.value.setValue(details.value)
 },
 })),
)
</script>

<template>
 <DateInput.RootProvider :value="dateInput" :class="styles.Root">
 <DateInput.Label :class="styles.Label">Date</DateInput.Label>
 <DateInput.Control :class="styles.Control">
 <DatePicker.RootProvider 
```

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

### Example Layout Utilities

Source: https://ark-ui.com/react/docs/components/file-upload

CSS utility classes used for styling the example preview containers.

```css
/* Utility classes for example layouts */

[hidden] {
 display: none !important;
}

output {
 display: flex;
 max-width: 32rem;
 flex-direction: column;
 gap: 0.5rem;
 border: 1px solid var(--demo-border-emphasized);
 padding: 0.5rem 0.625rem;
 margin-bottom: 0.5rem;
 font-family: monospace;
 max-height: 200px;
 overflow-y: auto;
 font-size: 0.725rem;

 .title {
 font-weight: 600;
 }
}

.stack {
 display: flex;
 flex-direction: column;
 align-items:
```

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

### DatePicker Implementation in Svelte

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

Example of a DatePicker component using Svelte's script setup and snippet-based rendering.

```svelte
<script lang="ts">\n import { DatePicker } from '@ark-ui/svelte/date-picker'\n import { Portal } from '@ark-ui/svelte/portal'\n import CalendarIcon from 'lucide-svelte/icons/calendar'\n import ChevronLeftIcon from 'lucide-svelte/icons/chevron-left'\n import ChevronRightIcon from 'lucide-svelte/icons/chevron-right'\n import button from 'styles/button.module.css'\n import styles from 'styles/date-picker.module.css'\n</script>\n\n<DatePicker.Root defaultView="month" class={styles.Root}>\n <DatePicker.Label class={styles.Label}>Label</DatePicker.Label>\n <DatePicker.Control class={styles.Control}>\n <DatePicker.Input class={styles.Input} />\n <DatePicker.Trigger class={styles.Trigger}>\n <CalendarIcon />\n </DatePicker.Trigger>\n <DatePicker.ClearTrigger class={button.Root}>Clear</DatePicker.ClearTrigger>\n </DatePicker.Control>\n <Portal>\n <DatePicker.Positioner>\n <DatePicker.Content class={styles.Content}>\n <DatePicker.View view="day" class={styles.View}>\n <DatePicker.Context>\n {#snippet render(datePicker)}\n <DatePicker.ViewControl class={styles.ViewControl}>\n <DatePicker.PrevTrigger class={styles.PrevTrigger}>\n <ChevronLeftIcon />\n </DatePicker.PrevTrigger>\n <DatePicker.ViewTrigger class={styles.ViewTrigger}>\n <DatePicker.RangeText />\n </DatePicker.ViewTrigger>\n <DatePicker.NextTrigger class={styles.NextTrigger}>\n <ChevronRightIcon />\n </DatePicker.NextTrigger>\n </DatePicker.ViewControl>\n <DatePicker.Table
```

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

### Splitter Component Framework Examples

Source: https://ark-ui.com/solid/docs/components/splitter

Examples showing how to implement a basic Splitter with panels and resize triggers in Vue and Svelte.

```vue
<script setup lang="ts">
import { Splitter } from '@ark-ui/vue/splitter'
import styles from 'styles/splitter.module.css'
</script>

<template>
 <Splitter.Root
 :class="styles.Root"
 :default-size="[15, 20]"
 :panels="[
 { id: 'a', collapsible: true, collapsedSize: 5, minSize: 10, maxSize: 20 },
 { id: 'b', minSize: 50 },
 ]"
 >
 <Splitter.Panel :class="styles.Panel" id="a">A</Splitter.Panel>
 <Splitter.ResizeTrigger :class="styles.ResizeTrigger" id="a:b" aria-label="Resize">
 <Splitter.ResizeTriggerIndicator :class="styles.ResizeTriggerIndicator" />
 </Splitter.ResizeTrigger>
 <Splitter.Panel :class="styles.Panel" id="b">B</Splitter.Panel>
 </Splitter.Root>
</template>
```

```svelte
<script lang="ts">
 import { Splitter } from '@ark-ui/svelte/splitter'
 import styles from 'styles/splitter.module.css'
</script>

<Splitter.Root
 class={styles.Root}
 defaultSize={[15, 20]}
 panels={[
 { id: 'a', collapsible: true, collapsedSize: 5, minSize: 10, maxSize: 20 },
 { id: 'b', minSize: 50 },
 ]}
>
 <Splitter.Panel class={styles.Panel} id="a">A</Splitter.Panel>
 <Splitter.ResizeTrigger class={styles.ResizeTrigger} id="a:b" aria-label="Resize">
 <Splitter.ResizeTriggerIndicator class={styles.ResizeTriggerIndicator} />
 </Splitter.ResizeTrigger>
 <Splitter.Panel class={styles.Panel} id="b">B</Splitter.Panel>
</Splitter.Root>
```

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

### Timer Implementation in Vue

Source: https://ark-ui.com/react/docs/components/timer

Example of a Timer component using Vue's script setup and template syntax.

```vue
<script setup lang="ts">
// biome-ignore lint/correctness/noUnusedImports: used in template
import { Timer } from '@ark-ui/vue/timer'
import { PauseIcon, PlayIcon } from 'lucide-vue-next'
import button from 'styles/button.module.css'
import styles from 'styles/timer.module.css'
</script>

<template>
 <Timer.Root class="stack" :targetMs="60 * 60 * 1000" :startMs="40 * 60 * 1000">
 <Timer.Area :class="styles.Area">
 <div :class="styles.ItemGroup">
 <Timer.Item :class="styles.Item" type="days" />
 <span :class="styles.ItemLabel">days</span>
 </div>
 <Timer.Separator :class="styles.Separator">:</Timer.Separator>
 <div :class="styles.ItemGroup">
 <Timer.Item :class="styles.Item" type="hours" />
 <span :class="styles.ItemLabel">hours</span>
 </div>
 <Timer.Separator :class="styles.Separator">:</Timer.Separator>
 <div :class="styles.ItemGroup">
 <Timer.Item :class="styles.Item" type="minutes" />
 <span :class="styles.ItemLabel">minutes</span>
 </div>
 <Timer.Separator :class="styles.Separator">:</Timer.Separator>
 <div :class="styles.ItemGroup">
 <Timer.Item :class="styles.Item" type="seconds" />
 <span :class="styles.ItemLabel">seconds</span>
 </div>
 </Timer.Area>
 <Timer.Control class="hstack">
 <Timer.ActionTrigger :class="button.Root" action="start">
 <PlayIcon />
 Play
 </Timer.ActionTrigger>
 <Timer.ActionTrigger :class="button.Root" action="resume">
 <PlayIcon />
 Resume
 </Timer.ActionTrigger>
 <Timer.ActionTrigger :class="button.Root" action="pause">
 <PauseIcon />
 Pause
 </Timer.ActionTrigger>
 </Timer.Control>
 </Timer.Root>
</template>
```

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

### Global Styles for Example Layouts

Source: https://ark-ui.com/react/docs/components/listbox

Provides base font and layout utilities for the documentation examples.

```css
@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap');
body {
 font-family:
 'Wix Madefor Text',
 system-ui,
 -apple-system,
 sans-serif;
 position: relative;
}

*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 font: inherit;
}

#root,
#storybook-root {
 display: flex;
 flex-direction: column;
 align-items: center;
 min-height: 100vh;
 padding: 3rem;
 isolation: isolate;
}
```

```css
/* Utility classes for example layouts */

[hidden] {
 display: none !important;
}

output {
 display: flex;
 max-width: 32rem;
 flex-direction: column;
 gap: 0.5rem;
 border: 1px solid var(--demo-border-emphasized);
 padding: 0.5rem 0.625rem;
 margin-bottom: 0.5rem;
 font-family: monospace;
 max-height: 200px;
 overflow-y: auto;
 font-size: 0.725rem;

 .title {
 font-weight: 600;
 }
}

.stack {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 1rem;
}

.vstack {
 
```

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

### Accordion Implementation in Vue

Source: https://ark-ui.com/react/docs/components/accordion

Example of an Accordion component using Vue's script setup and template syntax.

```vue
<script setup lang="ts">
import { Accordion } from '@ark-ui/vue/accordion'
import styles from 'styles/accordion.module.css'

const items = [
 {
 value: 'ark-ui',
 title: 'What is Ark UI?',
 content: 'A headless component library for building accessible web apps.',
 },
 {
 value: 'getting-started',
 title: 'How to get started?',
 content: 'Install the package and import the components you need.',
 },
 {
 value: 'maintainers',
 title: 'Who maintains this project?',
 content: 'Ark UI is maintained by the Chakra UI team.',
 },
]
</script>

<template>
 <Accordion.Root :class="styles.Root" :defaultValue="['ark-ui']" orientation="horizontal">
 <Accordion.Item v-for="item in items" :key="item.value" :class="styles.Item" :value="item.value">
 <Accordion.ItemTrigger :class="styles.ItemTrigger">{{ item.title }}</Accordion.ItemTrigger>
 <Accordion.ItemContent :class="styles.ItemContent">
 <div :class="[styles.ItemBody, styles.Centered]">{{ item.content }}</div>
 </Accordion.ItemContent>
 </Accordion.Item>
 </Accordion.Root>
</template>
```

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

### Svelte Timer Implementation

Source: https://ark-ui.com/react/docs/components/timer

A countdown timer example using Svelte, featuring start, pause, and reset controls.

```svelte
<script lang="ts">
 import { Timer } from '@ark-ui/svelte/timer'
 import { PauseIcon, PlayIcon, RotateCcwIcon } from 'lucide-svelte'
 import button from 'styles/button.module.css'
 import styles from 'styles/timer.module.css'
</script>

<Timer.Root class="stack" countdown startMs={5 * 60 * 1000}>
 <Timer.Area class={styles.Area}>
 <div class={styles.ItemGroup}>
 <Timer.Item class={styles.Item} type="minutes" />
 <span class={styles.ItemLabel}>minutes</span>
 </div>
 <Timer.Separator class={styles.Separator}>:</Timer.Separator>
 <div class={styles.ItemGroup}>
 <Timer.Item class={styles.Item} type="seconds" />
 <span class={styles.ItemLabel}>seconds</span>
 </div>
 </Timer.Area>
 <Timer.Control class="hstack">
 <Timer.ActionTrigger class={button.Root} action="start">
 <PlayIcon /> Start
 </Timer.ActionTrigger>
 <Timer.ActionTrigger class={button.Root} action="pause">
 <PauseIcon /> Pause
 </Timer.ActionTrigger>
 <Timer.ActionTrigger class={button.Root} action="reset">
 <RotateCcwIcon /> Reset
 </Timer.ActionTrigger>
 </Timer.Control>
</Timer.Root>
```

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

### Svelte Tour Implementation

Source: https://ark-ui.com/react/docs/components/tour

A complete Svelte example showing tour steps, progress tracking, and component structure.

```svelte
<script lang="ts">
 import { Portal } from '@ark-ui/svelte/portal'
 import { Tour, useTour, type TourStepDetails } from '@ark-ui/svelte/tour'
 import { SparklesIcon, XIcon } from 'lucide-svelte'
 import button from 'styles/button.module.css'
 import styles from 'styles/tour.module.css'

 const steps: TourStepDetails[] = [
 {
 id: 'step-1',
 type: 'tooltip',
 title: 'Progress Tracking',
 description: 'Watch the progress bar at the bottom as you navigate.',
 target: () => document.querySelector<HTMLElement>('#progress-1'),
 actions: [{ label: 'Next', action: 'next' }],
 },
 {
 id: 'step-2',
 type: 'tooltip',
 title: 'Halfway There',
 description: 'The progress bar shows how far along you are.',
 target: () => document.querySelector<HTMLElement>('#progress-2'),
 actions: [
 { label: 'Back', action: 'prev' },
 { label: 'Next', action: 'next' },
 ],
 },
 {
 id: 'step-3',
 type: 'tooltip',
 title: 'Almost Done',
 description: 'One more step to complete the tour.',
 target: () => document.querySelector<HTMLElement>('#progress-3'),
 actions: [
 { label: 'Back', action: 'prev' },
 { label: 'Next', action: 'next' },
 ],
 },
 {
 id: 'step-4',
 type: 'tooltip',
 title: 'Complete!',
 description: 'You have completed all the steps.',
 target: () => document.querySelector<HTMLElement>('#progress-4'),
 actions: [
 { label: 'Back', action: 'prev' },
 { label: 'Finish', action: 'dismiss' },
 ],
 },
 ]

 const tour = useTour({ steps })
</script>

<div class={styles.Root}>
 <button type="button" data-variant="surface" class={button.Root} onclick={() => tour().start()}>
 <SparklesIcon /> Start Tour
 </button>

 <div class={styles.ActionButtons}>
 <div id="progress-1" class={styles.Target}>Step 1</div>
 <div id="progress-2" class={styles.Target}>Step 2</div>
 <div id="progress-3" class={styles.Target}>Step 3</div>
 <div id="progress-4" class={styles.Target}>Step 4</div>
 </div>

 <Tour.Root {tour}>
 <Portal>
 <Tour.Backdrop class={styles.Backdrop} />
 <Tour.Spotlight class={styles.Spotlight} />
 <Tour.Positioner class={styles.Positioner}>
 <Tour.Content class={styles.Content}>
 <Tour.Arrow class={styles.Arrow}>
 <Tour.ArrowTip class={styles.ArrowTip} />
 </Tour.Arrow>
 <Tour.CloseTrigger class={styles.CloseTrigger}>
 <XIcon />
 </Tour.CloseTrigger>
 <Tour.ProgressText class={styles.ProgressText} />
 <Tour.Title class={styles.Title} />
 <Tour.Description class={styles.Description} />
 <Tour.Control class={styles.Control}>
 <Tour.Actions>
 {#snippet children(actions)}
 {#each actions() as action (action.label)}
 <Tour.ActionTrigger class={styles.ActionTrigger} {action} />
 {/each}
 {/snippet}
 </Tour.Actions>
 </Tour.Control>
 <div class={styles.ProgressBarBottom}>
 <div class={styles.ProgressFill} style="width: {tour().getProgressPercent()}%"></div>
 </div>
 </Tour.Content>
 </Tour.Positioner>
 </Portal>
 </Tour.Root>
</div>
```

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

### Keyboard Support Implementation

Source: https://ark-ui.com/react/docs/components/tooltip

Examples showing how to control tooltip visibility programmatically using RootProvider.

```vue
<script setup lang="ts">
import { Tooltip, useTooltip } from '@ark-ui/vue/tooltip'
import styles from 'styles/tooltip.module.css'

const tooltip = useTooltip()
</script>

<template>
 <button @click="tooltip.setOpen(true)">Open</button>

 <Tooltip.RootProvider :value="tooltip">
 <Tooltip.Trigger :class="styles.Trigger">Hover Me</Tooltip.Trigger>
 <Teleport to="body">
 <Tooltip.Positioner>
 <Tooltip.Content :class="styles.Content">I am a tooltip!</Tooltip.Content>
 </Tooltip.Positioner>
 </Teleport>
 </Tooltip.RootProvider>
</template>
```

```svelte
<script lang="ts">
 import { Portal } from '@ark-ui/svelte/portal'
 import { Tooltip, useTooltip } from '@ark-ui/svelte/tooltip'
 import styles from 'styles/tooltip.module.css'

 const tooltip = useTooltip()
</script>

<button onclick={() => tooltip().setOpen(true)}>Open</button>

<Tooltip.RootProvider value={tooltip}>
 <Tooltip.Trigger class={styles.Trigger}>Hover Me</Tooltip.Trigger>
 <Portal>
 <Tooltip.Positioner>
 <Tooltip.Content class={styles.Content}>I am a tooltip!</Tooltip.Content>
 </Tooltip.Positioner>
 </Portal>
</Tooltip.RootProvider>
```

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

### Checkbox Implementation in Vue

Source: https://ark-ui.com/solid/docs/components/checkbox

Example of a checkbox with indeterminate state using Vue's script setup and template syntax.

```vue
<script setup lang="ts">
import { Checkbox } from '@ark-ui/vue/checkbox'
import { CheckIcon, MinusIcon } from 'lucide-vue-next'
import styles from 'styles/checkbox.module.css'
</script>

<template>
 <Checkbox.Root :class="styles.Root" checked="indeterminate">
 <Checkbox.Control :class="styles.Control">
 <Checkbox.Indicator :class="styles.Indicator">
 <CheckIcon />
 </Checkbox.Indicator>
 <Checkbox.Indicator :class="styles.Indicator" indeterminate>
 <MinusIcon />
 </Checkbox.Indicator>
 </Checkbox.Control>
 <Checkbox.Label :class="styles.Label">Checkbox</Checkbox.Label>
 <Checkbox.HiddenInput />
 </Checkbox.Root>
</template>
```

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

### Implement Tour in Vue

Source: https://ark-ui.com/react/docs/components/tour

Example of setting up a tour with steps and template structure in a Vue component.

```vue
Enjoy using the app!',\n actions: [{ label: 'Finish', action: 'dismiss' }],\n },\n]\n\nconst tour = useTour({ steps })\n</script>\n\n<template>\n <div :class="styles.Root">\n <button type="button" data-variant="surface" :class="button.Root" @click="tour.start()">\n <SparklesIcon />\n Start Tour\n </button>\n\n <div :class="styles.ActionButtons">\n <button id="btn-upload" type="button" :class="button.Root">\n <UploadIcon />\n Upload\n </button>\n <button id="btn-save" type="button" :class="button.Root">\n <SaveIcon />\n Save\n </button>\n <button id="btn-more" type="button" :class="button.Root">\n <MoreHorizontalIcon />\n More\n </button>\n </div>\n\n <Tour.Root :tour="tour">\n <Teleport to="body">\n <Tour.Backdrop :class="styles.Backdrop" />\n <Tour.Spotlight :class="styles.Spotlight" />\n <Tour.Positioner :class="styles.Positioner">\n <Tour.Content :class="styles.Content">\n <Tour.Arrow :class="styles.Arrow">\n <Tour.ArrowTip :class="styles.ArrowTip" />\n </Tour.Arrow>\n <Tour.CloseTrigger :class="styles.CloseTrigger">\n <XIcon />\n </Tour.CloseTrigger>\n <Tour.ProgressText :class="styles.ProgressText" />\n <Tour.Title :class="styles.Title" />\n <Tour.Description :class="styles.Description" />\n <Tour.Control :class="styles.Control">\n <Tour.Actions v-slot="actions">\n <Tour.ActionTrigger\n v-for="action in actions"\n :key="action.label"\n :class="styles.ActionTrigger"\n :action="action"\n />\n </Tour.Actions>\n </Tour.Control>\n </Tour.Content>\n </Tour.Positioner>\n </Teleport>\n </Tour.Root>\n </div>\n</template>
```

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

### Implement Scroll Area in Vue

Source: https://ark-ui.com/react/docs/components/scroll-area

Example of a scroll area implementation using Vue's script setup syntax.

```vue
<script setup lang="ts">
import { ScrollArea } from '@ark-ui/vue/scroll-area'
import styles from 'styles/scroll-area.module.css'
</script>

<template>
 <ScrollArea.Root :class="styles.Root" :style="{ height: '12rem' }">
 <ScrollArea.Viewport :class="styles.Viewport">
 <ScrollArea.Content :class="styles.Content">
 <p :class="styles.Paragraph" :style="{ width: '50vw' }">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
 magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. 
```

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

### Utility Classes for Example Layouts

Source: https://ark-ui.com/react/docs/components/toast

Helper classes for positioning and styling example components within the documentation.

```css
/* Utility classes for example layouts */

[hidden] {
 display: none !important;
}

output {
 display: flex;
 max-width: 32rem;
 flex-direction: column;
 gap: 0.5rem;
 border: 1px solid var(--demo-border-emphasized);
 padding: 0.5rem 0.625rem;
 margin-bottom: 0.5rem;
 font-family: monospace;
 max-height: 200px;
 overflow-y: auto;
 font-size: 0.725rem;

 .title {
 font-weight: 600;
 }
}

.stack {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 1rem;
}

.vstack {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 1rem;
}

.hstack {
 display: flex;
 flex-direction: row;
 align-items: center;
 gap:
```

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

### Implementing a Localized DatePicker

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

This example demonstrates how to configure the DatePicker with a specific locale (de-DE) and set the start of the week to Monday.

```tsx
import { DatePicker } from '@ark-ui/react/date-picker'
import { Portal } from '@ark-ui/react/portal'
import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
import button from 'styles/button.module.css'
import styles from 'styles/date-picker.module.css'

export const Locale = () => {
 return (
 <DatePicker.Root className={styles.Root} locale="de-DE" startOfWeek={1}>
 <DatePicker.Label className={styles.Label}>Datum auswählen</DatePicker.Label>
 <DatePicker.Control className={styles.Control}>
 <DatePicker.Input className={styles.Input} />
 <DatePicker.Trigger className={styles.Trigger}>
 <CalendarIcon />
 </DatePicker.Trigger>
 <DatePicker.ClearTrigger className={button.Root}>Löschen</DatePicker.ClearTrigger>
 </DatePicker.Control>
 <Portal>
 <DatePicker.Positioner>
 <DatePicker.Content className={styles.Content}>
 <DatePicker.View view="day" className={styles.View}>
 <DatePicker.Context>
 {(datePicker) => (
 <>
 <DatePicker.ViewControl className={styles.ViewControl}>
 <DatePicker.PrevTrigger className={styles.PrevTrigger}>
 <ChevronLeftIcon />
 </DatePicker.PrevTrigger>
 <DatePicker.ViewTrigger className={styles.ViewTrigger}>
 <DatePicker.RangeText />
 </DatePicker.ViewTrigger>
 <DatePicker.NextTrigger className={styles.NextTrigger}>
 <ChevronRightIcon />
 </DatePicker.NextTrigger>
 </DatePicker.ViewControl>
 <DatePicker.Table className={styles.Table}>
 <DatePicker.TableHead className={styles.TableHead}>
 <DatePicker.TableRow className={styles.TableRow}>
 {datePicker.weekDays.map((weekDay, id) => (
 <DatePicker.TableHeader className={styles.TableHeader} key={id}>
 {weekDay.short}
```

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

### Download QR Code Example

Source: https://ark-ui.com/react/docs/components/qr-code

Demonstrates how to implement a QR code with a download trigger using Ark UI components.

```tsx
import { QrCode } from '@ark-ui/react/qr-code'
import button from 'styles/button.module.css'
import styles from 'styles/qr-code.module.css'

export const Download = () => {
 return (
 <QrCode.Root className={styles.Root} defaultValue="http://ark-ui.com">
 <QrCode.Frame className={styles.Frame}>
 <QrCode.Pattern className={styles.Pattern} />
 </QrCode.Frame>
 <QrCode.DownloadTrigger className={button.Root} fileName="qr-code.png" mimeType="image/png">
 Download
 </QrCode.DownloadTrigger>
 </QrCode.Root>
 )
}
```

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

### Multiple Triggers Setup

Source: https://ark-ui.com/react/docs/components/drawer

Example of using the value prop on Drawer.Trigger to share a single drawer across multiple trigger elements.

```tsx
import { Drawer } from '@ark-ui/react/drawer'
import { XIcon } from 'lucide-react'
import { useState } from 'react'
import button from 'styles/button.module.css'
```

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

### Implement Rating Group in Vue

Source: https://ark-ui.com/react/docs/components/rating-group

Example of a disabled Rating Group component using Vue's script setup and template syntax.

```vue
<script setup lang="ts">
import { RatingGroup } from '@ark-ui/vue/rating-group'
import { StarIcon } from 'lucide-vue-next'
import styles from 'styles/rating-group.module.css'
</script>

<template>
 <RatingGroup.Root :class="styles.Root" :default-value="3" disabled>
 <RatingGroup.Label :class="styles.Label">Label</RatingGroup.Label>
 <RatingGroup.Control :class="styles.Control">
 <RatingGroup.Context v-slot="{ items }">
 <RatingGroup.Item v-for="item in items" :key="item" :class="styles.Item" :index="item">
 <RatingGroup.ItemContext v-slot="{ highlighted }">
 <span :class="styles.ItemIndicator" :data-highlighted="highlighted ? '' : undefined">
 <StarIcon data-bg="" />
 <StarIcon data-fg="" fill="currentColor" />
 </span>
 </RatingGroup.ItemContext>
 </RatingGroup.Item>
 </RatingGroup.Context>
 <RatingGroup.HiddenInput />
 </RatingGroup.Control>
 </RatingGroup.Root>
</template>
```

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

### Svelte Tour Setup

Source: https://ark-ui.com/react/docs/components/tour

Initial setup for the Tour component in Svelte, including imports and step definition.

```svelte
<script lang="ts">
 import { Portal } from '@ark-ui/svelte/portal'
 import { Tour, useTour, type TourStepDetails } from '@ark-ui/svelte/tour'
 import { SparklesIcon, XIcon } from 'lucide-svelte'
 import button from 'styles/button.module.css'
 import styles from 'styles/tour.module.css'

 const steps: TourStepDetails[] = [
 {
 id: 'step-1',
 type: 'tooltip',
 title: 'First Feature',
 description: 'You can skip this tour at any time using the Skip button.',
 target: () =>
```

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

### Basic Usage

Source: https://ark-ui.com/solid/docs/components/tooltip

Example of how to implement a basic Tooltip using the component structure.

```APIDOC
## Basic Tooltip Implementation

```tsx
<Tooltip.Root>
  <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
  <Portal>
    <Tooltip.Positioner>
      <Tooltip.Content>I am a tooltip!</Tooltip.Content>
    </Tooltip.Positioner>
  </Portal>
</Tooltip.Root>
```
```

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

### Floating Panel Implementation in Vue

Source: https://ark-ui.com/react/docs/components/floating-panel

Example of a functional Floating Panel using Vue's script setup and Teleport for portal rendering.

```vue
<script setup lang="ts">
import { FloatingPanel } from '@ark-ui/vue/floating-panel'
import { ArrowDownLeft, GripVertical, Maximize2, Minus, XIcon } from 'lucide-vue-next'
import { ref } from 'vue'
import styles from 'styles/floating-panel.module.css'

const open = ref(false)
</script>

<template>
 <FloatingPanel.Root v-model:open="open">
 <FloatingPanel.Trigger :class="styles.Trigger">Toggle Panel</FloatingPanel.Trigger>
 <Teleport to="body">
 <FloatingPanel.Positioner :class="styles.Positioner">
 <FloatingPanel.Content :class="styles.Content">
 <FloatingPanel.DragTrigger>
 <FloatingPanel.Header :class="styles.Header">
 <FloatingPanel.Title :class="styles.Title">
 <GripVertical />
 Floating Panel
 </FloatingPanel.Title>
 <FloatingPanel.Control :class="styles.Control">
 <FloatingPanel.StageTrigger stage="minimized" :class="styles.ControlButton">
 <Minus />
 </FloatingPanel.StageTrigger>
 <FloatingPanel.StageTrigger stage="maximized" :class="styles.ControlButton">
 <Maximize2 />
 </FloatingPanel.StageTrigger>
 <FloatingPanel.StageTrigger stage="default" :class="styles.ControlButton">
 <ArrowDownLeft />
 </FloatingPanel.StageTrigger>
 <FloatingPanel.CloseTrigger :class="styles.ControlButton">
 <XIcon />
 </FloatingPanel.CloseTrigger>
 </FloatingPanel.Control>
 </FloatingPanel.Header>
 </FloatingPanel.DragTrigger>
 <FloatingPanel.Body :class="styles.Body">
 <p>Some content</p>
 </FloatingPanel.Body>

 <FloatingPanel.ResizeTrigger axis="n" :class="styles.ResizeTrigger" />
 <FloatingPanel.ResizeTrigger axis="e" :class="styles.ResizeTrigger" />
 <FloatingPanel.ResizeTrigger axis="w" :class="styles.ResizeTrigger" />
 <FloatingPanel.ResizeTrigger axis="s" :class="styles.ResizeTrigger" />
 <FloatingPanel.ResizeTrigger axis="ne" :class="styles.ResizeTrigger" />
 <FloatingPanel.ResizeTrigger axis="se" :class="styles.ResizeTrigger" />
 <FloatingPanel.ResizeTrigger axis="sw" :class="styles.ResizeTrigger" />
 <FloatingPanel.ResizeTrigger axis="nw" :class="styles.ResizeTrigger" />
 </FloatingPanel.Content>
 </FloatingPanel.Positioner>
 </Teleport>
 </FloatingPanel.Root>
</template>
```