### Toast Setup Example

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

Demonstrates the basic setup for using the Toast component. Ensure you have the necessary imports and context providers configured.

```jsx
import {
  ToastProvider,
  ToastRoot,
  ToastTitle,
  ToastDescription,
  ToastCloseTrigger,
} from '@ark-ui/react'

export const Toast = (props) => (
  <ToastProvider {...props}>
    {(toasts) =>
      toasts.map(({ id, title, description }) => (
        <ToastRoot key={id}>
          <ToastTitle>{title}</ToastTitle>
          <ToastDescription>{description}</ToastDescription>
          <ToastCloseTrigger>
            <button>Close</button>
          </ToastCloseTrigger>
        </ToastRoot>
      ))
    }
  </ToastProvider>
)
```

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

### Toast Setup Example

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

Demonstrates the basic setup for using the Toast component. Ensure you have the necessary imports and context providers in your application.

```typescript
import {
  ToastProvider,
  Toast,
  ToastCloseTrigger,
  ToastTitle,
  ToastDescription,
  ToastActionTrigger,
} from '@ark-ui/react';

export const Basic = () => (
  <ToastProvider>
    <Toast>
      <ToastTitle>Hello World</ToastTitle>
      <ToastDescription>This is a description</ToastDescription>
      <ToastCloseTrigger>X</ToastCloseTrigger>
      <ToastActionTrigger>Undo</ToastActionTrigger>
    </Toast>
  </ToastProvider>
);
```

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

### Tour Component Setup

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

This snippet demonstrates the basic setup of the Tour component, including necessary imports and JSX structure. It's a starting point for implementing guided tours in your application.

```jsx
import {
  Tour,
  TourStep,
  TourContext,
} from '@ark-ui/react'

export const MyTour = () => (
  <Tour initialStepIndex={0}>
    <TourStep index={0} title="Welcome!">
      <p>This is the first step of your tour.</p>
    </TourStep>
    <TourStep index={1} title="Next Step">
      <p>This is the second step.</p>
    </TourStep>
  </Tour>
)
```

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

### SolidJS Tour Example

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

Demonstrates how to use the useTour hook and Tour component in SolidJS to create a guided tour. Includes step configuration, starting the tour, and rendering tour content with actions.

```jsx
import { For } from 'solid-js';
import { Tour, useTour, type TourStepDetails } from '@ark-ui/solid/tour';
import { MoreHorizontalIcon, SaveIcon, SparklesIcon, UploadIcon, XIcon } from 'lucide-solid';
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' }],
  },
];

export const Basic = () => {
  const tour = useTour({ steps });

  return (
    <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={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>
                  {(actions) => (
                    <For each={actions()}>
                      {(action) => <Tour.ActionTrigger class={styles.ActionTrigger} action={action} />}
                    </For>
                  )}
                </Tour.Actions>
              </Tour.Control>
            </Tour.Content>
          </Tour.Positioner>
        </Portal>
      </Tour.Root>
    </div>
  );
}
```

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

### Basic Tour Initialization

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

Demonstrates how to initialize and start a tour. This is a fundamental example for getting started with the Tour component.

```javascript
Start Tour

0 of 4
```

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

### Basic Tour Example

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

Demonstrates how to initialize and start a tour using the `useTour` hook. This example includes multiple steps with different types (tooltip, dialog) and targets specific DOM elements.

```jsx
const steps = [
  {
    id: 'tour-1',
    type: 'tooltip',
    title: 'Welcome to Ark UI Tour!',
    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' }],
  },
]

export const Basic = () => {
  const tour = useTour({ steps })

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

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

      <Tour.Root tour={tour}>
        <Portal>
          <Tour.Backdrop className={styles.Backdrop} />
          <Tour.Spotlight className={styles.Spotlight} />
          <Tour.Positioner className={styles.Positioner}>
            <Tour.Content className={styles.Content}>
              <Tour.Arrow className={styles.Arrow}>
                <Tour.ArrowTip className={styles.ArrowTip} />
              </Tour.Arrow>
              <Tour.CloseTrigger className={styles.CloseTrigger}>
                <XIcon />
              </Tour.CloseTrigger>
              <Tour.ProgressText className={styles.ProgressText} />
              <Tour.Title className={styles.Title} />
              <Tour.Description className={styles.Description} />
              <Tour.Control className={styles.Control}>
                <Tour.Actions>
                  {(actions) =>
                    actions.map((action) => (
                      <Tour.ActionTrigger className={styles.ActionTrigger} key={action.label} action={action} />
                    ))
                  }
                </Tour.Actions>
              </Tour.Control>
            </Tour.Content>
          </Tour.Positioner>
        </Portal>
      </Tour.Root>
    </div>
  )
}
```

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

### Basic JsonTreeView Example

Source: https://ark-ui.com/solid/docs/utilities/json-tree-view

Learn how to use the JsonTreeView component in your project. This is the most basic example to get started.

```javascript
self.__next_f.push([
  1,
  "41:[\"$\",\"path\",null,{\"d\":\"$7c\",\"fill\":\"#ffffff\"}]\n42:[\"$\",\"path\",null,{\"d\":\"M1135 579H1177V252H1135\",\"stroke\":\"#ff0000\",\"strokeWidth\":4}]\n43:[\"$\",\"path\",null,{\"d\":\"M1178.5 280.5H1225.5\",\"stroke\":\"#ff0000\",\"strokeWidth\":4}]\n44:[\"$\",\"path\",null,{\"d\":\"M1200.5 71H1064V120.5\",\"stroke\":\"#ff0000\",\"strokeWidth\":4}]\n45:[\"$\",\"path\",null,{\"d\":\"M244.5 162H324\",\"stroke\":\"#ff0000\",\"strokeWidth\":4}]\n46:[\"$\",\"path\",null,{\"d\":\"M250 310.5H351\",\"stroke\":\"#ff0000\",\"strokeWidth\":4}]\n47:[\"$\",\"path\",null,{\"d\":\"M307 366V576.5\",\"stroke\":\"#ff0000\",\"strokeWidth\":4}]\n48:[\"$\",\"path\",null,{\"d\":\"M253 474H307\",\"stroke\":\"#ff0000\",\"strokeWidth\":4}]\n49:[\"$\",\"path\",null,{\"d\":\"M248 647.5H381.5\",\"stroke\":\"#ff0000\",\"strokeWidth\":4}]\n4a:[\"$\",\"h2\",null,{\"ref\":\"$undefined\",\"id\":\"examples\",\"className\":\"fs_1.5em mt_2em mb_1em lh_1.3333333 fw_700 c_var(--colors-prose-heading) [\u0026_strong]:fw_800 [\u0026_strong]:c_inherit [\u0026_code]:fs_0.875em [\u0026_+_*]:mt_0\",\"children\":[[\"$\",\"a\",null,{\"ref\":\"$undefined\",\"className\":\"link subheading-anchor\",\"aria-label\":\"Link to section\",\"href\":\"#examples\",\"children\":[[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]]}],\"Examples\"}]}]\n4b:[\"$\",\"p\",null,{\"ref\":\"$undefined\",\"className\":\"mt_1.25em mb_1.25em c_var(--colors-prose-body) [\u0026_a]:td_underline [\u0026_a]:fw_500\",\"children\":[\"Learn how to use the \",[\"$\",\"code\",null,{\"ref\":\"$undefined\",\"className\":\"c_var(--colors-prose-code) fw_600 bd-w_1px fs_0.875em p_0.125em_0.25em bdr_0.25em bg-c_gray.a2\",\"children\":[\"JsonTreeView\"]},\" component in your project. Let's take a look at the most basic example:\"}]}]\n4d:[\"$\",\"h3\",null,{\"ref\":\"$undefined\",\"id\":\"different-data-types\",\"className\":\"fs_1.25em lh_1.6 mt_1.6em mb_0.6em fw_600 c_var(--colors-prose-heading) [\u0026_strong]:fw_700 [\u0026_strong]:c_inherit [\u0026_code]:fs_0.9em [\u0026_+_*]:mt_0\",\"children\":[[\"$\",\"a\",null,{\"ref\":\"$undefined\",\"className\":\"link subheading-anchor\",\"aria-label\":\"Link to section\",\"href\":\"#different-data-types\",\"children\":[[\"$\",\"span\",null,{\"className\":\"icon icon-link\"}]]}],\"Different Data Types\"}]]\n4e:[\"$\",\"p\",null,{\"ref\":\"$undefined\",\"className\":\"mt_1.25em mb_1.25em c_var(--colors-prose-body) [\u0026_a]:td_underline [\u0026_a]:fw_500\",\"children\":[\"The JSON tree view can display various JavaScript data types including objects, arrays, primitives, and special values:\"}]\n50:[\"$\",\"h3\",null,{\"ref\":\"$undefined\",\"id\":\"functions-and-methods\",\"className\":\"fs_1.25em lh_1.6 mt_1.6em mb_0.6em fw_600 c_var(--colors-prose-heading) [\u0026_strong]:fw_700 [\u0026_strong]:c_inherit [\u0026_code]:fs_0.9em\"}]])
```

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

### Tour Component Setup and Basic Usage

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

This snippet demonstrates the basic setup of the Tour component, including event handlers for step changes and status updates. It also shows how to trigger the tour start and displays an event log.

```javascript
const { tour, logs, addLog } = useTour({
  steps: [
    { id: 'event-1', description: 'Step 1' },
    { id: 'event-2', description: 'Step 2' },
    { id: 'event-3', description: 'Step 3' },
  ],
  onStepChange(details) {
    addLog(`Step: ${details.step.id}\n`);
  },
  onStatusChange(details) {
    addLog(`Status: ${details.status}`)
  },
})

<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="event-1" class={styles.Target}>Step 1</div>
    <div id="event-2" class={styles.Target}>Step 2</div>
    <div id="event-3" class={styles.Target}>Step 3</div>
  </div>

  <div class={styles.EventLog}>
    <strong>Event Log:</strong>
    {#if logs.length === 0}
      <div class={styles.EventLogItem}>Start the tour to see events</div>
    {:else}
      {#each logs as log, i (i)}
        <div class={styles.EventLogItem}>{log}</div>
      {/each}
    {/if}
  </div>

  <Tour.Root tour={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>
        </Tour.Content>
      </Tour.Positioner>
    </Portal>
  </Tour.Root>
</div>
```

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

### Basic Tooltip Usage

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

Demonstrates the basic structure of a Tooltip component, including the Root and Trigger elements. This is a fundamental example for getting started with tooltips.

```jsx
<Tooltip.Root>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
</Tooltip.Root>
```

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

### Basic Tour Setup

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

This snippet demonstrates the basic setup for a Tour component, including importing necessary hooks and defining tour steps.

```javascript
import { Tour } from "@ark-ui/react";

function Example() {
  const steps: Tour.Step[] = [
    {
      title: "Welcome to Ark UI Tour!",
      description: "This is the first step of our tour.",
      target: "#step1",
    },
    {
      title: "Another Step",
      description: "This is the second step.",
      target: "#step2",
    },
  ];

  return (
    <Tour steps={steps}>
      {/* Your application content here */}
      <div id="step1">Step 1</div>
      <div id="step2">Step 2</div>
    </Tour>
  );
}
```

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

### Tour Component with Wait for Element

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

Demonstrates how to use the Tour component with the 'wait-for-element' example. This snippet includes the necessary imports and component setup for a guided tour.

```tsx
import { Portal } from '@ark-ui/react/portal'
import { Tour, useTour } from '@ark-ui/react/tour'
import { SparklesIcon, XIcon } from 'lucide-react'
import button from 'styles/button.module.css'
import styles from 'styles/tour.module.css'

const steps: Tour.StepDetails[] = [
 {
 id: 'intro',
 type: 'dialog',
 title: 'Async Data Loading',
 description: 'This tour demonstrates loading data before showing a step.',
 actions: [{ label: 'Next', action: 'next' }],
 },
 {
 id: 'user-info',
 type: 'tooltip',
 title: 
```

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

### Tour Component Setup and Usage

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

Demonstrates how to set up and use the Tour component with custom steps, including tooltips, descriptions, and actions. It also shows how to trigger the tour and render its elements.

```vue
<script setup lang="ts">
import { Portal } from '@ark-ui/vue/portal'
import { Tour, useTour } 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: Tour.StepDetails[] = [
  {
    id: 'step-1',
    type: 'tooltip',
    title: 'First Feature',
    description: 'This is the first step of the tour.',
    target: () => document.querySelector<HTMLElement>('#item-1'),
    actions: [
      { label: 'Skip', action: 'dismiss' },
      { label: 'Next', action: 'next' },
    ],
  },
  {
    id: 'step-2',
    type: 'tooltip',
    title: 'Second Feature',
    description: 'Continue or skip to end the tour early.',
    target: () => document.querySelector<HTMLElement>('#item-2'),
    actions: [
      { label: 'Skip', action: 'dismiss' },
      { label: 'Back', action: 'prev' },
      { label: 'Next', action: 'next' },
    ],
  },
  {
    id: 'step-3',
    type: 'tooltip',
    title: 'Final Feature',
    description: 'This is the last step of the tour.',
    target: () => document.querySelector<HTMLElement>('#item-3'),
    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="item-1" class={styles.Target}>Item 1</div>
    <div id="item-2" class={styles.Target}>Item 2</div>
    <div id="item-3" class={styles.Target}>Item 3</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>
        </Tour.Content>
      </Tour.Positioner>
    </Portal>
  </Tour.Root>
</div>
```

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

### Navigation Menu Structure

Source: https://ark-ui.com/react/docs/collections/list-collection

Defines the structure of the navigation menu, including overview sections and getting started guides. This snippet is part of the application's sidebar or navigation component.

```javascript
4b:[\"$\",\"$Lb\",null,{\"groups\":[{\"title\":\"Overview\",\"items\":[{\"id\":\"getting-started\",\"title\":\"Getting 
```

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

### Basic Tour Example

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

Demonstrates how to implement a basic tour with multiple steps, including tooltips and a dialog. The tour is initiated by clicking a 'Start Tour' button. It requires the `useTour` hook and defines steps with titles, descriptions, targets, and actions.

```javascript
import { SparklesIcon, UploadIcon, SaveIcon, MoreHorizontalIcon, XIcon } from '@ark-ui/react/icons'
import { Portal } from '@ark-ui/react/portal'
import { Tour } from '@ark-ui/react/tour'
import { useTour } from '@ark-ui/react/tour'
import * as button from '@ark-ui/react/button'
import * as styles from './styles.module.css'

const steps = [
  {
    id: 'intro',
    type: 'tooltip',
    title: 'Welcome to the app!',
    description: 'This is a quick tour of the main features.',
    target: () => document.querySelector('#btn-upload'),
    actions: [
      { label: 'Next', action: 'next' },
    ],
  },
  {
    id: 'save',
    type: 'tooltip',
    title: 'Save your work',
    description: 'Save your work to keep your progress.',
    target: () => document.querySelector('#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('#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' }],
  },
]

export const Basic = () => {
  const tour = useTour({ steps })

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

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

      <Tour.Root tour={tour}>
        <Portal>
          <Tour.Backdrop className={styles.Backdrop} />
          <Tour.Spotlight className={styles.Spotlight} />
          <Tour.Positioner className={styles.Positioner}>
            <Tour.Content className={styles.Content}>
              <Tour.Arrow className={styles.Arrow}>
                <Tour.ArrowTip className={styles.ArrowTip} />
              </Tour.Arrow>
              <Tour.CloseTrigger className={styles.CloseTrigger}>
                <XIcon />
              </Tour.CloseTrigger>
              <Tour.ProgressText className={styles.ProgressText} />
              <Tour.Title className={styles.Title} />
              <Tour.Description className={styles.Description} />
              <Tour.Control className={styles.Control}>
                <Tour.Actions>
                  {(actions) =>
                    actions.map((action) => (
                      <Tour.ActionTrigger className={styles.ActionTrigger} key={action.label} action={action} />
                    ))
                  }
                </Tour.Actions>
              </Tour.Control>
            </Tour.Content>
          </Tour.Positioner>
        </Portal>
      </Tour.Root>
    </div>
  )
}
```

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

### Toast Setup

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

Demonstrates how to create a toast engine using `createToaster` for managing toast placement and grouping.

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

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

### MCP Server Ready Message

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

This message indicates that the MCP server is ready. It guides the user on how to start the server using the 'mcp.json' file and provides an example of initiating a chat interaction.

```markdown
The MCP server is now ready to use. Click the **"Start"** button in the `mcp.json` file.
Start a new chat VSCode Copilot like *"Build me a checkbox with ark ui"*
```

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

### Tour Component Setup and Steps

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

This snippet demonstrates how to set up the Tour component with defined steps, including dialog and tooltip types. It shows how to import necessary components and icons, and define the tour steps with titles, descriptions, actions, and targets.

```jsx
import { Portal } from '@ark-ui/react/portal'
import { Tour, useTour } from '@ark-ui/react/tour'
import { MoreHorizontalIcon, SaveIcon, SparklesIcon, UploadIcon, XIcon } from 'lucide-react'
import button from 'styles/button.module.css'
import styles from 'styles/tour.module.css'

const steps: Tour.StepDetails[] = [
 {
 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',

```

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

### Basic Steps Example

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

A simple example demonstrating the basic usage of the Steps component with three steps.

```html
1
First
2
Second
3
Third
```

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

### Progress Linear with Min and Max Values (Svelte)

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

Provides an example of configuring the Progress component with specific minimum and maximum values in Svelte. This setup allows the progress to be displayed between 10 and 30, starting at 20.

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

<Progress.Root class={styles.Root} defaultValue={20} min={10} max={30}>
 <Progress.Label class={styles.Label}>Label</Progress.Label>
 <Progress.ValueText class={styles.ValueText} />
 <Progress.Track class={styles.Track}>
  <Progress.Range class={styles.Range} />
 </Progress.Track>
</Progress.Root>
```

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

### Timer with Events and Controls

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

This example demonstrates a complete Timer component setup in React. It displays minutes and seconds, allows starting and resetting the timer, and logs completion and tick events. It also tracks and displays the number of ticks.

```jsx
import { Timer } from '@ark-ui/react/timer'
import { PlayIcon, RotateCcwIcon } from 'lucide-react'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/timer.module.css'

export const Events = () => {
 const [ticks, setTicks] = useState(0)

 return (
 <Timer.Root
 className="stack"
 targetMs={60 * 1000}
 onComplete={() => console.log('Timer completed')}
 onTick={() => setTicks((t) => t + 1)}
 >
 <Timer.Area className={styles.Area}>
 <div className={styles.ItemGroup}>
 <Timer.Item className={styles.Item} type="minutes" />
 <span className={styles.ItemLabel}>minutes</span>
 </div>
 <Timer.Separator className={styles.Separator}>:</Timer.Separator>
 <div className={styles.ItemGroup}>
 <Timer.Item className={styles.Item} type="seconds" />
 <span className={styles.ItemLabel}>seconds</span>
 </div>
 </Timer.Area>

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

 <output>Ticks: {ticks}</output>
 </Timer.Root>
 )
}

```

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

### Basic Tour Implementation

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

This snippet demonstrates the basic setup for a Tour component. It requires importing the necessary components and defining the steps for the tour.

```javascript
import { Tour } from "@ark-ui/react";

function Example() {
  const steps: Tour.Step[] = [
    {
      title: "Step 1",
      description: "This is the first step.",
      selector: "#step1",
    },
    {
      title: "Step 2",
      description: "This is the second step.",
      selector: "#step2",
    },
  ];

  return (
    <Tour steps={steps}>
      <Tour.Trigger>Start Tour</Tour.Trigger>
      <Tour.Content>
        {/* Tour content will be rendered here */}
      </Tour.Content>
    </Tour>
  );
}
```

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

### Basic Tour Implementation

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

This snippet demonstrates the basic setup of a tour with multiple steps, including tooltips and actions for navigation. It requires importing necessary components and defining the tour steps.

```tsx
import { Portal } from '@ark-ui/react/portal'
import { Tour, useTour } from '@ark-ui/react/tour'
import { SparklesIcon, XIcon } from 'lucide-react'
import button from 'styles/button.module.css'
import styles from 'styles/tour.module.css'

const steps: Tour.StepDetails[] = [
 {
 id: 'step-1',
 type: 'tooltip',
 title: 'First Feature',
 description: 'This is the first step of the tour.',
 target: () => document.querySelector<'HTMLElement'>('#item-1'),
 actions: [
 { label: 'Skip', action: 'dismiss' },
 { label: 'Next', action: 'next' },
 ],
 },
 {
 id: 'step-2',
 type: 'tooltip',
 title: 'Second Feature',
 description: 'Continue or skip to end the tour early.',
 target: () => document.querySelector<'HTMLElement'>('#item-2'),
 actions: [
 { label: 'Skip', action: 'dismiss' },
 { label: 'Back', action: 'prev' },
 { label: 'Next', action: 'next' },
 ],
 },
 {
 id: 'step-3',
 type: 'tooltip',
 title: 'Final Feature',
 description: 'This is the last step of the tour.',
 target: () => document.querySelector<'HTMLElement'>('#item-3'),
 actions: [
 { label: 'Back', action: 'prev' },
 { label: 'Finish', action: 'dismiss' },
 ],
 },
]

export const BasicTour = () => {
 const tour = useTour({ steps })

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

 <div className={styles.ActionButtons}>
 <div id="item-1" className={styles.Target}>Item 1</div>
 <div id="item-2" className={styles.Target}>Item 2</div>
 <div id="item-3" className={styles.Target}>Item 3</div>
 </div>

 <Tour.Root tour={tour}>
 <Portal>
 <Tour.Backdrop className={styles.Backdrop} />
 <Tour.Spotlight className={styles.Spotlight} />
 <Tour.Positioner className={styles.Positioner}>
 <Tour.Content className={styles.Content}>
 <Tour.Arrow className={styles.Arrow}>
 <Tour.ArrowTip className={styles.ArrowTip} />
 </Tour.Arrow>
 <Tour.CloseTrigger className={styles.CloseTrigger}>
 <XIcon />
 </Tour.CloseTrigger>
 <Tour.ProgressText className={styles.ProgressText} />
 <Tour.Title className={styles.Title} />
 <Tour.Description className={styles.Description} />
 <Tour.Control className={styles.Control}>
 <Tour.Actions>
 {#snippet children(actions)}
 {#each actions() as action (action.label)}
 <Tour.ActionTrigger class={styles.ActionTrigger} action={action} />
 {/each}
 {/snippet}
 </Tour.Actions>
 </Tour.Control>
 </Tour.Content>
 </Tour.Positioner>
 </Portal>
 </Tour.Root>
</div>

```

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

### Timer with Controls and Display

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

This example demonstrates a complete Timer component setup, including displaying the time and providing controls for start, resume, pause, and reset. It utilizes the `useTimer` hook and integrates with `lucide-react` for icons. Ensure `styles/button.module.css` and `styles/timer.module.css` are available.

```jsx
import { Timer, useTimer } from '@ark-ui/react/timer'
import { PauseIcon, PlayIcon, RotateCcwIcon } from 'lucide-react'
import button from 'styles/button.module.css'
import styles from 'styles/timer.module.css'

export const RootProvider = () => {
 const timer = useTimer({ targetMs: 60 * 60 * 1000 })

 return (
 <div className="stack">
 <output>timer: {JSON.stringify(timer.time)}</output>
 <Timer.RootProvider className={styles.Root} value={timer}>
 <Timer.Area className={styles.Area}>
 <div className={styles.ItemGroup}>
 <Timer.Item className={styles.Item} type="hours" />
 <span className={styles.ItemLabel}>hours</span>
 </div>
 <Timer.Separator className={styles.Separator}>:</Timer.Separator>
 <div className={styles.ItemGroup}>
 <Timer.Item className={styles.Item} type="minutes" />
 <span className={styles.ItemLabel}>minutes</span>
 </div>
 <Timer.Separator className={styles.Separator}>:</Timer.Separator>
 <div className={styles.ItemGroup}>
 <Timer.Item className={styles.Item} type="seconds" />
 <span className={styles.ItemLabel}>seconds</span>
 </div>
 </Timer.Area>
 <Timer.Control className="hstack">
 <Timer.ActionTrigger className={button.Root} action="start">
 <PlayIcon /> Start
 </Timer.ActionTrigger>
 <Timer.ActionTrigger className={button.Root} action="resume">
 <PlayIcon /> Resume
 </Timer.ActionTrigger>
 <Timer.ActionTrigger className={button.Root} action="pause">
 <PauseIcon /> Pause
 </Timer.ActionTrigger>
 <Timer.ActionTrigger className={button.Root} action="reset">
 <RotateCcwIcon /> Reset
 </Timer.ActionTrigger>
 </Timer.Control>
 </Timer.RootProvider>
 </div>
 )
}
```

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

### Basic Textarea Example

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

A simple example demonstrating the basic usage of the Textarea component. No specific setup or imports are required beyond standard React and ark-ui setup.

```jsx
import { Textarea } from "@ark-ui/react"

export default function Page() {
  return (
    <Textarea placeholder="Type your message here..." />
  )
}
```

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

### Basic Tour Example

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

A simple example demonstrating how to set up and use the Tour component with a few steps. Ensure the `Tour` and `Tour.Trigger` components are imported.

```jsx
import {
 Tour,
 TourProvider,
 TourTrigger,
 TourContent,
 TourCloseTrigger,
 TourPrevButton,
 TourNextButton,
 TourIndicator,
} from "@ark-ui/react";

function Example() {
 return (
 <TourProvider initialStepIndex={0}>
 <Tour>
 <TourTrigger>
 <button>Open Tour</button>
 </TourTrigger>

 <TourContent>
 {(api) => (
 <>
 <div
 style={{
 position: "relative",
 padding: "1rem",
 border: "1px solid #ccc",
 background: "#f9f9f9",
 }}>
 <TourIndicator />

 <h3 style={{ marginTop: 0 }}>{api.steps[api.currentStep].title}</h3>
 <p>{api.steps[api.currentStep].description}</p>

 <div
 style={{
 display: "flex",
 justifyContent: "space-between",
 marginTop: "1rem",
 }}>
 <TourPrevButton>
 <button disabled={api.currentStep === 0}>Prev</button>
 </TourPrevButton>
 <TourNextButton>
 <button disabled={api.currentStep === api.steps.length - 1}>Next</button>
 </TourNextButton>
 </div>
 <TourCloseTrigger
 style={{
 position: "absolute",
 top: "0.5rem",
 right: "0.5rem",
 }}>
 <button>X</button>
 </TourCloseTrigger>
 </div>
 </>
 )}
 </TourContent>
 </Tour>
 </TourProvider>
 );
}

```

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

### Basic Steps Example

Source: https://ark-ui.com/vue/docs/components/steps

Demonstrates the basic usage of the Steps component. Ensure the component is rendered within a StepsProvider.

```vue
<script setup lang="ts">
import { Steps } from '../src'
</script>

<template>
  <Steps.Root>
    <Steps.Item>
      <Steps.Item.Trigger>Step 1</Steps.Item.Trigger>
      <Steps.Item.Content>Content 1</Steps.Item.Content>
    </Steps.Item>
    <Steps.Item>
      <Steps.Item.Trigger>Step 2</Steps.Item.Trigger>
      <Steps.Item.Content>Content 2</Steps.Item.Content>
    </Steps.Item>
    <Steps.Item>
      <Steps.Item.Trigger>Step 3</Steps.Item.Trigger>
      <Steps.Item.Content>Content 3</Steps.Item.Content>
    </Steps.Item>
  </Steps.Root>
</template>
```

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

### SolidStart Quickstart Example

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

Integrate Ark UI into your SolidStart project using this quickstart example. It offers a straightforward way to begin using Ark UI components in a SolidStart environment.

```jsx
<a href="https://stackblitz.com/edit/github-1hgkbbln" target="_blank" rel="noreferrer">
  <div>
    <div className="d-flex ai-center jc-center bdr_l3 bd-w_1px p_4 bg_bg.default c_fg.default">
      <div className="d-flex flex-d_column ai-center gap_2.5">
        <svg viewBox="0 0 190 162" fill="none" xmlns="http://www.w3.org/2000/svg" height="48">
          <title>Solid Start Icon</title>
          <mask id="mask0_1_11" maskUnits="userSpaceOnUse" x="87" y="132" width="43" height="18">
            <path d="M87.8 149.1L114.7 147C114.7 147 123.9 145.5 129.3 136.6L110.3 132L87.8 149.1Z" fill="white"></path>
          </mask>
          <g mask="url(#mask0_1_11)">
            <path d="M132.6 132.7L127.7 157.2L84.4 148.4L89.4 123.9L132.6"></path>
          </g>
        </svg>
        <p className="text textStyle_sm ta_center">Solid Start</p>
      </div>
    </div>
  </div>
</a>
```

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

### Basic Slider Example

Source: https://ark-ui.com/vue/docs/components/slider

A simple implementation of the Slider component. This example demonstrates the basic setup and usage of the slider.

```vue
<script setup lang="ts">
import { Slider } from "ark-ui/vue";
</script>

<template>
  <Slider>
    <Slider.Label>Label</Slider.Label>
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb />
    </Slider.Control>
    <Slider.MarkerGroup>
      <Slider.Marker :value="25" />
      <Slider.Marker :value="50" />
      <Slider.Marker :value="75" />
    </Slider.MarkerGroup>
  </Slider>
</template>
```

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

### Basic Tour Implementation

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

This snippet demonstrates the basic setup of the Tour component with multiple steps, including tooltips and action buttons. It shows how to define steps with IDs, types, titles, descriptions, target elements, and actions. The tour is initiated by clicking a 'Start Tour' button.

```tsx
import { Portal } from '@ark-ui/react/portal'
import { Tour, useTour } from '@ark-ui/react/tour'
import { SparklesIcon, XIcon } from 'lucide-react'
import button from 'styles/button.module.css'
import styles from 'styles/tour.module.css'

const steps: Tour.StepDetails[] = [
 {
 id: 'step-1',
 type: 'tooltip',
 title: 'First Feature',
 description: 'Continue or skip to end the tour early.',
 target: () => document.querySelector<'HTMLElement'>('#item-1'),
 actions: [
 { label: 'Skip', action: 'dismiss' },
 { label: 'Next', action: 'next' },
 ],
 },
 {
 id: 'step-2',
 type: 'tooltip',
 title: 'Second Feature',
 description: 'Continue or skip to end the tour early.',
 target: () => document.querySelector<'HTMLElement'>('#item-2'),
 actions: [
 { label: 'Skip', action: 'dismiss' },
 { label: 'Back', action: 'prev' },
 { label: 'Next', action: 'next' },
 ],
 },
 {
 id: 'step-3',
 type: 'tooltip',
 title: 'Final Feature',
 description: 'This is the last step of the tour.',
 target: () => document.querySelector<'HTMLElement'>('#item-3'),
 actions: [
 { label: 'Back', action: 'prev' },
 { label: 'Finish', action: 'dismiss' },
 ],
 },
]

export const TourBasic = () => {
 const tour = useTour({ steps })

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

 <div className={styles.ActionButtons}>
 <div id="item-1" className={styles.Target}>Item 1</div>
 <div id="item-2" className={styles.Target}>Item 2</div>
 <div id="item-3" className={styles.Target}>Item 3</div>
 </div>

 <Tour.Root tour={tour}>
 <Portal>
 <Tour.Backdrop className={styles.Backdrop} />
 <Tour.Spotlight className={styles.Spotlight} />
 <Tour.Positioner className={styles.Positioner}>
 <Tour.Content className={styles.Content}>
 <Tour.Arrow className={styles.Arrow}>
 <Tour.ArrowTip className={styles.ArrowTip} />
 </Tour.Arrow>
 <Tour.CloseTrigger className={styles.CloseTrigger}>
 <XIcon />
 </Tour.CloseTrigger>
 <Tour.ProgressText className={styles.ProgressText} />
 <Tour.Title className={styles.Title} />
 <Tour.Description className={styles.Description} />
 <Tour.Control className={styles.Control}>
 <Tour.Actions>
 {snippet children(actions)}
 {each actions() as action (action.label)}
 <Tour.ActionTrigger class={styles.ActionTrigger} action={action} />
 {/each}
 {/snippet}
 </Tour.Actions>
 </Tour.Control>
 </Tour.Content>
 </Tour.Positioner>
 </Portal>
 </Tour.Root>
</div>
)
```