### PageSection with Features and Provide Example

Source: https://ui.nuxt.com/docs/components/page-section

An alternative setup for the UPageSection component, explicitly importing 'provide' and demonstrating the same feature list structure. This example highlights the flexibility in script setup.

```vue
<script setup lang="ts">
import { ref, provide } from 'vue'
import type { PageFeatureProps } from '@nuxt/ui'
const features = ref<PageFeatureProps[]>([
  {
   title: 'Icons',
   description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
   icon: 'i-lucide-smile',
   to: '/docs/getting-started/integrations/icons'
  },
 {
   title: 'Fonts',
   description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
   icon: 'i-lucide-a-large-small',
   to: '/docs/getting-started/integrations/fonts'
  },
 {
   title: 'Color Mode',
   description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
   icon: 'i-lucide-sun-moon',
   to: '/docs/getting-started/integrations/color-mode'
  }
])
</script>

<template>
  <UPageSection
   title="Beautiful Vue UI components"
   description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
   :features="features"
  />
</template>
```

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

### Content TOC with Expanded Script Setup

Source: https://ui.nuxt.com/docs/components/content-toc

An expanded version of the Content TOC usage example, showing the full script setup with ref import and detailed link structure.

```vue
<script setup lang="ts"> import { ref } from 'vue' import type { ContentTocLink } from '@nuxt/ui' const links = ref<ContentTocLink[]>([   {    id: 'usage',    depth: 2,    text: 'Usage',    children: [      {        id: 'title',        depth: 3,        text: 'Title'      },      {        id: 'color',        depth: 3,        text: 'Color'      },      {        id: 'highlight',        depth: 3,        text: 'Highlight'      },      {        id: 'highlight-color',        depth: 3,        text: 'Highlight Color'      },      {        id: 'highlight-variant',        depth: 3,        text: 'Highlight Variant'      }    ]  },  {    id: 'examples',    depth: 2,    text: 'Examples',    children: [      {        id: 'within-a-page',        depth: 3,        text: 'Within a Page'      }    ]  },  {    id: 'api',    depth: 2,    text: 'API',    children: [      {        id: 'props',        depth: 3,        text: 'Props'      },      {        id: 'slots',        depth: 3,        text: 'Slots'      },      {        id: 'emits',        depth: 3,        text: 'Emits'      }    ]  },  {    id: 'theme',    depth: 2,    text: 'Theme'  } ]) </script> <template>   <UContentToc highlight highlight-color="primary" highlight-variant="circuit" :links="links" /> </template>
```

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

### Basic Content Search Setup

Source: https://ui.nuxt.com/docs/components/content-search

This snippet shows the basic setup for the Content Search component. Ensure you have the Nuxt Content module installed and configured.

```vue
<template>
  <UContentSearch />
</template>
```

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

### Pricing Plans Setup with Ref

Source: https://ui.nuxt.com/docs/components/pricing-plans

An alternative setup for the UPricingPlans component using `ref` to manage the array of pricing plan objects. This example is functionally identical to the previous one, showcasing a common Vue reactivity pattern.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import type { PricingPlanProps } from '@nuxt/ui'
const plans = ref<PricingPlanProps[]>([
  {
   title: 'Solo',
   description: 'Tailored for indie hackers.',
   price: '$249',
   features: [
     'One developer',
     'Lifetime access'
   ],
   button: {
     label: 'Buy now'
   }
  },
 {
   title: 'Startup',
   description: 'Best suited for small teams.',
   price: '$499',
   features: [
     'Up to 5 developers',
     'Everything in Solo'
   ],
   button: {
     label: 'Buy now'
   }
  },
 {
   title: 'Organization',
   description: 'Ideal for larger teams and organizations.',
   price: '$999',
   features: [
     'Up to 20 developers',
     'Everything in Startup'
   ],
   button: {
     label: 'Buy now'
   }
 }
])
</script>

<template>
  <UPricingPlans :plans="plans" />
</template>
```

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

### Create a New Nuxt Project

Source: https://content.nuxt.com/docs/getting-started/installation

Use the create-nuxt CLI to start a new Nuxt project. Select @nuxt/content from the module selector for automatic installation.

```bash
npm create nuxt <project-name>
```

```bash
yarn create nuxt <project-name>
```

```bash
pnpm create nuxt <project-name>
```

```bash
bun create nuxt <project-name>
```

```bash
deno -A npm:create-nuxt@latest <project-name>
```

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

### Basic useTour Example

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

Demonstrates how to use the useTour composable to create a guided tour with multiple steps. Each step targets a different element, and the Popover content is fully customizable.

```vue
<script setup lang="ts">
const dashboard = useTemplateRef('dashboard')
const profile = useTemplateRef('profile')
const settings = useTemplateRef('settings')

const tour = useTour([
  {
    target: () => dashboard.value,
    title: 'Welcome aboard',
    body: 'The popover re-anchors to each target as you step through the tour.'
  },
  {
    target: () => profile.value,
    title: 'Make it yours',
    body: 'You own the content and the buttons — no extra theme or locale to maintain.',
    side: 'right' as const
  },
  {
    target: () => settings.value,
    title: 'You\'re all set',
    body: 'Press Finish to close the tour.'
  }
])
</script>

<template>
  <div class="w-full space-y-4">
    <div class="flex justify-end">
      <UButton icon="i-lucide-wand-sparkles" @click="tour.start()">
        Start tour
      </UButton>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div ref="dashboard" class="p-4 rounded-lg border border-default bg-elevated/50">
        <p class="font-medium text-highlighted">
          Dashboard
        </p>
        <p class="text-sm text-muted">
          Overview of your workspace.
        </p>
      </div>
      <div ref="profile" class="p-4 rounded-lg border border-default bg-elevated/50">
        <p class="font-medium text-highlighted">
          Profile
        </p>
        <p class="text-sm text-muted">
          Manage your account.
        </p>
      </div>
      <div ref="settings" class="p-4 rounded-lg border border-default bg-elevated/50">
        <p class="font-medium text-highlighted">
          Settings
        </p>
        <p class="text-sm text-muted">
          Configure your preferences.
        </p>
      </div>
    </div>

    <UPopover
      :open="tour.open.value"
      :reference="tour.reference.value"
      :content="{ side: tour.current.value?.side, sideOffset: 8 }"
      :dismissible="false"
      arrow
    >
      <template #content>
        <div class="p-4 max-w-xs space-y-2">
          <div class="flex items-center justify-between gap-4">
            <p class="font-semibold text-highlighted">
              {{ tour.current.value?.title }}
            </p>
            <span class="text-xs text-muted tabular-nums">
              {{ tour.index.value + 1 }} / {{ tour.total.value }}
            </span>
          </div>
          <p class="text-sm text-muted">
            {{ tour.current.value?.body }}
          </p>
          <div class="flex items-center justify-between pt-2">
            <UButton
              color="neutral"
              variant="outline"
              size="sm"
              :disabled="!tour.hasPrev.value"
              @click="tour.prev()">
              Back
            </UButton>
            <UButton size="sm" @click="tour.next()">
              {{ tour.hasNext.value ? 'Next' : 'Finish' }}
            </UButton>
          </div>
        </div>
      </template>
    </UPopover>
  </div>
</template>

```

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

### Content Navigation Setup with Vue Ref

Source: https://ui.nuxt.com/docs/components/content-navigation

This example shows the full setup for the `UContentNavigation` component, including importing `ref` and defining the navigation structure as a Vue ref. It's used to display a navigation tree with nested items.

```vue
<script setup lang="ts"> import { ref } from 'vue' import type { ContentNavigationLink } from '@nuxt/ui' const navigation = ref<ContentNavigationLink[]>([   {    title: 'Guide',    icon: 'i-lucide-book-open',    path: '#getting-started',    children: [      {        title: 'Introduction',        path: '#introduction',        active: true      },      {        title: 'Installation',        path: '#installation'      }    ]  },  {    title: 'Composables',    icon: 'i-lucide-database',    path: '#composables',    children: [      {        title: 'defineShortcuts',        path: '#defineshortcuts'      },      {        title: 'useModal',        path: '#usemodal'      }    ]  } ]) </script> <template>   <UContentNavigation color="neutral" /> </template>
```

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

### Run the Development Server

Source: https://content.nuxt.com/docs/getting-started/installation

Once dependencies are installed, you can start the Nuxt development server to see your application in action. This command typically watches for file changes and hot-reloads the application.

```bash
npm run dev  # or yarn dev or pnpm dev
```

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

### Install Vue Dependencies (bun)

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

Install the necessary packages for Vue using bun.

```bash
bun add ai @ai-sdk/gateway @ai-sdk/vue @comark/vue
```

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

### Navigate and Install Dependencies

Source: https://content.nuxt.com/docs/getting-started/installation

After creating the project, navigate into the project directory and install the necessary dependencies using your preferred package manager.

```bash
cd <project-name>
npm install  # or yarn install or pnpm install
```

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

### Basic Slider Usage

Source: https://ui.nuxt.com/docs/components/slider

Demonstrates the basic implementation of a slider component. This is a foundational example for getting started with sliders.

```vue
<template>
  <USlider v-model="value" />
</template>

<script setup>
const value = ref(50)
</script>
```

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

### Navigate and Install Dependencies

Source: https://content.nuxt.com/docs/getting-started/installation

After creating the project, navigate into the project directory and install the necessary dependencies using npm or yarn.

```bash
cd <project-name>
npm install
```

```bash
cd <project-name>
yarn install
```

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

### Create Nuxt Project with UI Starter

Source: https://ui3.nuxt.com/getting-started/installation/nuxt

Initialize a new Nuxt project with Nuxt UI pre-configured using the official starter template.

```bash
npm create nuxt@latest -- -t ui
```

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

### Stepper Component Usage Example

Source: https://go.nuxt.com/figma-ui

Illustrates a 'DO' example for using a Stepper component to guide users through a multi-step process. This helps in documenting navigation or layout components.

```jsx
<Stepper currentStep={1}><Step label="Step 1" /><Step label="Step 2" /></Stepper>
```

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

### Start Nuxt Development Server

Source: https://ui3.nuxt.com/getting-started/installation/nuxt

Navigate into your project directory and start the development server.

```bash
cd <my-app>
npm run dev
```

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

### Theme Configuration Examples

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

Demonstrates various theme configurations for different component variants, sizes, and layouts, including class customizations for specific elements like file trailing buttons and file containers. Also shows how to set default variants.

```javascript
{
          size: 'md',
          layout: 'list',
          class: {
            fileTrailingButton: '-me-1.5'
          }
        },
        {
          size: 'lg',
          layout: 'list',
          class: {
            fileTrailingButton: '-me-2'
          }
        },
        {
          size: 'xl',
          layout: 'list',
          class: {
            fileTrailingButton: '-me-2'
          }
        },
        {
          variant: 'button',
          size: 'xs',
          class: {
            base: 'p-1'
          }
        },
        {
          variant: 'button',
          size: 'sm',
          class: {
            base: 'p-1.5'
          }
        },
        {
          variant: 'button',
          size: 'md',
          class: {
            base: 'p-1.5'
          }
        },
        {
          variant: 'button',
          size: 'lg',
          class: {
            base: 'p-2'
          }
        },
        {
          variant: 'button',
          size: 'xl',
          class: {
            base: 'p-2'
          }
        },
        {
          layout: 'grid',
          multiple: true,
          class: {
            files: 'grid grid-cols-2 md:grid-cols-3 gap-4 w-full',
            file: 'p-0 aspect-square'
          }
        },
        {
          layout: 'grid',
          multiple: false,
          class: {
            file: 'absolute inset-0 p-0'
          }
        },
        {
          interactive: true,
          disabled: false,
          class: 'hover:bg-elevated/25'
        }
      ],
      defaultVariants: {
        color: 'primary',
        variant: 'area',
        size: 'md'
      }
    }
  }
})
```

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

### Joi Schema Validation

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

Implement form validation using Joi. This example requires Joi to be installed and imported.

```vue
<script setup lang="ts">
import Joi from 'joi'
type { FormSubmitEvent } from '@nuxt/ui'

const schema = Joi.object({
  email: Joi.string().required(),
  password: Joi.string()
    .min(8)
    .required()
})

const state = reactive({
  email: undefined,
  password: undefined
})

const toast = useToast()
async function onSubmit(event: FormSubmitEvent<typeof state>) {
  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
  console.log(event.data)
}
</script>

<template>
  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <UFormField label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormField>

    <UFormField label="Password" name="password">
      <UInput v-model="state.password" type="password" />
    </UFormField>

    <UButton type="submit">
      Submit
    </UButton>
  </UForm>
</template>
```

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

### Start the Production Server

Source: https://content.nuxt.com/docs/getting-started/installation

After building, start the production server to serve your optimized application. This is typically done after the build step.

```bash
npm run start
```

```bash
yarn start
```

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

### Yup Schema Validation

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

Use Yup for schema-based form validation. Ensure Yup is installed and imported for this example.

```vue
<script setup lang="ts">
import { object, string } from 'yup'
type { InferType } from 'yup'
type { FormSubmitEvent } from '@nuxt/ui'

const schema = object({
  email: string().email('Invalid email').required('Required'),
  password: string()
    .min(8, 'Must be at least 8 characters')
    .required('Required')
})

type Schema = InferType<typeof schema>

const state = reactive({
  email: undefined,
  password: undefined
})

const toast = useToast()
async function onSubmit(event: FormSubmitEvent<Schema>) {
  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
  console.log(event.data)
}
</script>

<template>
  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <UFormField label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormField>

    <UFormField label="Password" name="password">
      <UInput v-model="state.password" type="password" />
    </UFormField>

    <UButton type="submit">
      Submit
    </UButton>
  </UForm>
</template>
```

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

### Complete Pricing Plan Example

Source: https://ui.nuxt.com/docs/components/pricing-plan

A complete example demonstrating how to define and render the UPricingPlan component with its features.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import type { PricingPlanFeature } from '@nuxt/ui'
const features = ref<PricingPlanFeature[]>([
  {
   title: 'One developer',
   icon: 'i-lucide-user'
  },
  {
   title: 'Unlimited projects',
   icon: 'i-lucide-infinity'
  },
  {
   title: 'Access to GitHub repository',
   icon: 'i-lucide-github'
  },
  {
   title: 'Unlimited patch & minor updates',
   icon: 'i-lucide-refresh-cw'
  },
  {
   title: 'Lifetime access',
   icon: 'i-lucide-clock'
  }
])
</script>

<template>
  <UPricingPlan
   title="Solo"
   description="For bootstrappers and indie hackers."
   price="$249"
   :features="features"
  />
</template>
```

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

### Basic Navigation Menu Setup

Source: https://ui.nuxt.com/docs/components/navigation-menu

This snippet demonstrates the basic setup of a Navigation Menu component with a list of items. It includes links to different sections of the documentation and an external GitHub link.

```vue
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items = ref<NavigationMenuItem[][]>([
  [
    {
      label: 'Guide',
      icon: 'i-lucide-book-open',
      to: '/docs/getting-started'
    },
    {
      label: 'Composables',
      icon: 'i-lucide-database',
      to: '/docs/composables'
    },
    {
      label: 'Components',
      icon: 'i-lucide-box',
      to: '/docs/components',
      active: true
    }
  ],
  [
    {
      label: 'GitHub',
      icon: 'i-simple-icons-github',
      badge: '6k',
      to: 'https://github.com/nuxt/ui',
      target: '_blank'
    }
  ]
])
</script>

<template>
  <UNavigationMenu color="neutral" :items="items" class="w-full" />
</template>
```

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

### Input with Script Setup and Import

Source: https://ui.nuxt.com/components/input

This snippet demonstrates the same basic input usage but explicitly includes the `ref` import from Vue, which is necessary when using `<script setup>`.

```vue
<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <UInput v-model="value" />
</template>
```

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

### ChatPalette within a Modal Example

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

This example shows how to embed the UChatPalette component inside a UModal. It includes setup for messages, a chat instance, and custom rendering for assistant messages using Comark for markdown and syntax highlighting.

```vue
<script setup lang="ts">
import { isTextUIPart } from 'ai'
import type { UIMessage } from 'ai'
import { Chat } from '@ai-sdk/vue'
import { isPartStreaming } from '@nuxt/ui/utils/ai'
import { Comark } from '@comark/vue'
import highlight from '@comark/vue/plugins/highlight'

const messages: UIMessage[] = [{
  id: '1',
  role: 'user',
  parts: [{ type: 'text', text: 'What is Nuxt UI?' }]
}, {
  id: '2',
  role: 'assistant',
  parts: [{ type: 'text', text: 'Nuxt UI is a Vue component library built on Reka UI, Tailwind CSS, and Tailwind Variants. It provides 125+ accessible components for building modern web apps.' }]
}]
const input = ref('')

const chat = new Chat({
  messages
})

function onSubmit() {
  if (!input.value.trim()) return

  chat.sendMessage({ text: input.value })

  input.value = ''
}

const ui = {
  prose: {
    p: { base: 'my-2 leading-6' },
    li: { base: 'my-0.5 leading-6' },
    ul: { base: 'my-2' },
    ol: { base: 'my-2' },
    h1: { base: 'text-xl my-2' },
    h2: { base: 'text-lg my-2' },
    h3: { base: 'text-base my-2' },
    h4: { base: 'text-sm my-2' },
    pre: { root: 'my-2' },
    table: { root: 'my-2' },
    hr: { base: 'my-2' }
  }
}
</script>

<template>
  <UModal open :ui="{ content: 'sm:max-w-3xl sm:h-[28rem]' }">
    <template #content>
      <UTheme :ui="ui">
        <UChatPalette>
          <UChatMessages
            :messages="chat.messages"
            :status="chat.status"
            :user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png', loading: 'lazy' as const } }"
            :assistant="{ icon: 'i-lucide-bot' }"
          >
            <template #content="{ message }">
              <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
                <template v-if="isTextUIPart(part)">
                  <Comark
                    v-if="message.role === 'assistant'"
                    :markdown="part.text"
                    :streaming="isPartStreaming(part)"
                    :plugins="[highlight()]"
                    class="*:first:mt-0 *:last:mb-0"
                  />
                  <p v-else-if="message.role === 'user'" class="whitespace-pre-wrap leading-6">
                    {{ part.text }}
                  </p>
                </template>
              </template>
            </template>
          </UChatMessages>

          <template #prompt>
            <UChatPrompt
              v-model="input"
              icon="i-lucide-search"
              variant="naked"
              :error="chat.error"
              @submit="onSubmit"
            />
          </template>
        </UChatPalette>
      </UTheme>
    </template>
  </UModal>
</template>

```

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

### Icon File Naming Convention Example

Source: https://go.nuxt.com/figma-ui

Demonstrates the file naming pattern for icon files.

```bash
icon-{size}-{kebab-name}.tsx
```

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

### CheckboxGroup with Indicator Prop

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

Modify the indicator's position with the 'indicator' prop. Defaults to 'start'. This example places it at the 'end'.

```vue
<script setup lang="ts">
const items = ref([
  "System",
  "Light",
  "Dark"
])
</script>

<template>
  <UCheckboxGroup indicator="end" variant="card" :default-value="[
  'System'
]" :items="items" />
</template>
```

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

### Install Iconify Datasets Locally

Source: https://ui.nuxt.com/docs/getting-started/integrations/icons

Recommended for faster and more reliable icon loading. Install the specific collection for the icons you intend to use.

```bash
pnpm i @iconify-json/{collection_name}
```

```bash
yarn add @iconify-json/{collection_name}
```

```bash
npm install @iconify-json/{collection_name}
```

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

### Display Arrow on Select

Source: https://ui.nuxt.com/components/select

Use the `arrow` prop to display an arrow on the Select component. This example shows a basic setup with predefined items.

```vue
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <USelect v-model="value" arrow :items="items" class="w-48" />
</template>
```

```vue
<script setup lang="ts">
import { ref } from 'vue'
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <USelect v-model="value" arrow :items="items" class="w-48" />
</template>
```

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

### Install Nuxt UI Skill from URL

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

Install the Nuxt UI skill directly from a website URL if cloning from GitHub is slow.

```bash
npx skills add https://ui.nuxt.com
```

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

### Context Menu with Checkbox Items (Expanded)

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

An expanded version of the context menu example, showing the full script setup and template for creating reactive checkbox items within a context menu. This example emphasizes the use of `ref` and `computed` for managing item states.

```vue
<script setup lang="ts">
import { ref, computed } from 'vue'
import type { ContextMenuItem } from '@nuxt/ui'
const showSidebar = ref(true)
const showToolbar = ref(false)
const items = computed<ContextMenuItem[]>(() => [{
  label: 'View',
  type: 'label' as const
}, {
  type: 'separator' as const
}, {
  label: 'Show Sidebar',
  type: 'checkbox' as const,
  checked: showSidebar.value,
  onUpdateChecked(checked: boolean) {
    showSidebar.value = checked
  },
  onSelect(e: Event) {
    e.preventDefault()
  }
}, {
  label: 'Show Toolbar',
  type: 'checkbox' as const,
  checked: showToolbar.value,
  onUpdateChecked(checked: boolean) {
    showToolbar.value = checked
  }
}, {
  label: 'Collapse Pinned Tabs',
  type: 'checkbox' as const,
  disabled: true
}])
</script>

<template>
  <UContextMenu :items="items" :ui="{ content: 'w-48' }">
    <div class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72">
      Right click here
    </div>
  </UContextMenu>
</template>
```

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

### useTour(steps, options?)

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

Initializes and manages a guided tour. It takes a list of steps and optional configuration options to control the tour's behavior.

```APIDOC
## useTour(steps, options?)

### Description

Initializes and manages a guided tour. It takes a list of steps and optional configuration options to control the tour's behavior.

### Parameters

#### Parameters

- **steps** (`MaybeRefOrGetter<TourStep[]>`) - Required - The list of tour steps. Can be a static array, a ref, or a getter for reactive steps. The element the step anchors to. Accepts a CSS selector ('#id', '.class', or a bare id resolved as #id), an element, a virtual element, or a ref/getter returning one. Use null to center the step in the viewport. Any additional fields (title, body, side, …) are passed through and available via current.
- **options** (`UseTourOptions`) - Optional - Configuration options for the tour. The step index the tour starts on. Loop back to the first step after the last one. Scroll the target into view when a step becomes active.

### Return

- **open** (`Ref<boolean>`) - Whether the tour is currently open.
- **index** (`Ref<number>`) - The current step index, clamped to the steps range.
- **current** (`ComputedRef<TourStep | undefined>`) - The current step object, or undefined when there are no steps.
- **reference** (`ComputedRef<ReferenceElement | undefined>`) - The resolved anchor for the current step, to pass to <UPopover :reference>.
- **total** (`ComputedRef<number>`) - The total number of steps.
- **hasNext** (`ComputedRef<boolean>`) - Whether a next step exists.
- **hasPrev** (`ComputedRef<boolean>`) - Whether a previous step exists.

### Methods

- **start** (`(index?: number) => void`) - Open the tour, optionally at a given index.
- **next** (`() => void`) - Go to the next step. Loops or finishes at the end depending on the loop option.
- **prev** (`() => void`) - Go to the previous step.
- **goTo** (`(index: number) => void`) - Jump to a specific step and open the tour.
- **finish** (`() => void`) - Close the tour.
```

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

### Enable Clear Button in USelectMenu

Source: https://ui.nuxt.com/components/select-menu

Use the `clear` prop to display a clear button when a value is selected in the USelectMenu. This example shows the basic setup.

```vue
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <USelectMenu v-model="value" clear :items="items" class="w-48" />
</template>
```

```vue
<script setup lang="ts">
import { ref } from 'vue'
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <USelectMenu v-model="value" clear :items="items" class="w-48" />
</template>
```

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

### Change RadioGroup Indicator Position

Source: https://ui.nuxt.com/docs/components/radio-group

Use the `indicator` prop to change the position of the indicator. Defaults to `start`. This example sets it to `end` and uses the `card` variant.

```vue
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <URadioGroup indicator="end" variant="card" default-value="System" :items="items" />
</template>
```

```vue
<script setup lang="ts">
import { ref } from 'vue'
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <URadioGroup indicator="end" variant="card" default-value="System" :items="items" />
</template>
```

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

### Select Component Usage Example

Source: https://go.nuxt.com/figma-ui

Demonstrates a 'DO' example for using a Select component, showing common props like placeholder and options. This helps in documenting component API and usage patterns.

```jsx
<Select placeholder="Select an option" options={['Option 1', 'Option 2']} />
```

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

### Table Component Example

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

Demonstrates the usage of the Nuxt UI Table component with sample payment data. Includes setup for clipboard functionality and toast notifications.

```vue
<script setup lang="ts">
import { h, resolveComponent } from 'vue'
import { upperFirst } from 'scule'
import type { TableColumn } from '@nuxt/ui'
import { useClipboard } from '@vueuse/core'

const UButton = resolveComponent('UButton')
const UCheckbox = resolveComponent('UCheckbox')
const UBadge = resolveComponent('UBadge')
const UDropdownMenu = resolveComponent('UDropdownMenu')

const toast = useToast()
const { copy } = useClipboard()

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([{
  id: '4600',
  date: '2024-03-11T15:30:00',
  status: 'paid',
  email: 'james.anderson@example.com',
  amount: 594
}, {
  id: '4599',
  date: '2024-03-11T10:10:00',
  status: 'failed',
  email: 'mia.white@example.com',
  amount: 276
}, {
  id: '4598',
  date: '2024-03-11T08:50:00',
  status: 'refunded',
  email: 'william.brown@example.com',
  amount: 315
}, {
  id: '4597',
  date: '2024-03-10T19:45:00',
  status: 'paid',
  email: 'emma.davis@example.com',
  amount: 529
}, {
  id: '4596',
  date: '2024-03-10T15:55:00',
  status: 'paid',
  email: 'ethan.harris@example.com',
  amount: 639
}, {
  id: '4595',
  date: '2024-03-10T13:40:00',
  status: 'refunded',
  email: 'ava.thomas@example.com',
  amount: 428
}, {
  id: '4594',
  date: '2024-03-10T09:15:00',
  status: 'paid',
  email: 'michael.wilson@example.com',
  amount: 683
}, {
  id: '4593',
  date: '2024-03-09T20:25:00',
  status: 'failed',
  email: 'olivia.taylor@example.com',
  amount: 947
}, {
  id: '4592',
  date: '2024-03-09T18:45:00',
  status: 'paid',
  email: 'benjamin.jackson@example.com',
  amount: 851
}, {
  id: '4591',
  date: '2024-03-09T16:05:00',
  status: 'paid',
  email: 'sophia.miller@example.com',
  amount: 762
}, {
  id: '4590',
  date: '2024-03-09T14:20:00',
  status: 'paid',
  email: 'noah.clark@example.com',
  amount: 573
}, {
  id: '4589',
  date: '2024-03-09T11:35:00',
  status: 'failed',
  email: 'isabella.lee@example.com',
  amount: 389
}, {
  id: '4588',
  date: '2024-03-08T22:50:00',
  status: 'refunded',
  email: 'liam.walker@example.com',
  amount: 701
}, {
  id: '4587',
  date: '2024-03-08T20:15:00',
  status: 'paid',
  email: 'charlotte.hall@example.com',
  amount: 856
}, {
  id: '4586',
  date: '2024-03-08T17:40:00',
  status: 'paid',
  email: 'mason.young@example.com',
  amount: 492
}, {
  id: '4585',
  date: '2024-03-08T14:55:00',
  status: 'failed',
  email: 'amelia.king@example.com',
  amount: 637
}, {
  id: '4584',
  date: '2024-03-08T12:30:00',
  status: 'paid',
  email: 'elijah.wright@example.com',
  amount: 784
}, {
  id: '4583',
  date: '2024-03-08T09:45:00',
  status: 'refunded',
  email: 'harper.scott@example.com',
  amount: 345
}, {
  id: '4582',
  date: '2024-03-07T23:10:00',
  status: 'paid',
  email: 'evelyn.green@example.com',
  amount: 918
}, {
  id: '4581',
  date: '2024-03-07T20:25:00',
  status: 'paid',
  email: 'logan.baker@example.com',
  amount: 567
}])
</script>
```

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

### Start Documentation Development Server

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

Run the development server for the Nuxt UI documentation. This is used for working on the docs folder.

```sh
pnpm run docs
```

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

### Basic UPageCTA Example

Source: https://ui.nuxt.com/docs/components/page-cta

This example demonstrates a basic UPageCTA with a title, description, horizontal orientation, and reversed layout. It includes two links and an image.

```vue
<script setup lang="ts">
import type { ButtonProps } from '@nuxt/ui'
const links = ref<ButtonProps[]>([
  {
    label: 'Get started',
    color: 'neutral'
  },
  {
    label: 'Learn more',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageCTA
    title="Trusted and supported by our amazing community"
    description="We\'ve built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success."
    orientation="horizontal"
    reverse
    :links="links"
  >
    <img
      src="https://picsum.photos/640/728"
      width="320"
      height="364"
      alt="Illustration"
      class="w-full rounded-lg"
      loading="lazy"
    />
  </UPageCTA>
</template>
```

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

### Sidebar with Inset Variant

Source: https://ui.nuxt.com/docs/components/sidebar

Demonstrates how to use the `variant` prop to set the sidebar to an 'inset' style. This example also shows basic navigation item setup.

```vue
<script setup lang="ts">
import type { NavigationMenuItem, SidebarProps } from '@nuxt/ui'
// Ignore the props for the example
defineProps<Pick<SidebarProps, 'variant' | 'collapsible' | 'side'>>()
const open = ref(true)
const items: NavigationMenuItem[] = [
  {
    label: 'Home',
    icon: 'i-lucide-house',
    active: true
  },
  {
    label: 'Inbox',
    icon: 'i-lucide-inbox',
    badge: '4'
  },
  {
    label: 'Contacts',
    icon: 'i-lucide-users'
  }
]
</script>

<template>
  <div
    class="flex flex-1"
    :class="[
      variant === 'inset' && 'bg-neutral-50 dark:bg-neutral-950',
      side === 'right' && 'flex-row-reverse'
    ]"
  >
    <USidebar
      v-model:open="open"
      :variant="variant"
      :collapsible="collapsible"
      :side="side"
      :ui="{
        container: 'h-full'
      }"
    >
      <template #header>
        <UIcon name="i-logos-nuxt-icon" class="size-8" />
      </template>

      <UNavigationMenu
        :items="items"
        orientation="vertical"
        :ui="{ link: 'p-1.5 overflow-hidden' }"
      />
    </USidebar>

    <div
      class="flex-1 flex flex-col overflow-hidden lg:peer-data-[variant=floating]:my-4 peer-data-[variant=inset]:m-4 lg:peer-data-[variant=inset]:not-peer-data-[collapsible=offcanvas]:ms-0 peer-data-[variant=inset]:rounded-xl peer-data-[variant=inset]:shadow-sm peer-data-[variant=inset]:ring peer-data-[variant=inset]:ring-default bg-default"
    >
      <div
        class="h-(--ui-header-height) shrink-0 flex items-center px-4"
        :class="[
          variant !== 'floating' && 'border-b border-default',
          side === 'right' && 'justify-end'
        ]"
      >
        <UButton
          :icon="side === 'left' ? 'i-lucide-panel-left' : 'i-lucide-panel-right'"
          color="neutral"
          variant="ghost"
          aria-label="Toggle sidebar"
          @click="open = !open"
        />
      </div>

      <div class="flex-1 p-4">
        <Placeholder class="size-full" />
      </div>
    </div>
  </div>
</template>

```

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

### Editor Drag Handle with Suggestion Menu (Expanded)

Source: https://ui.nuxt.com/docs/components/editor-drag-handle

An expanded version of the EditorDragHandle example, showing the full script setup and template for integrating with a suggestion menu.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import type { EditorSuggestionMenuItem } from '@nuxt/ui'
const value = ref(`Click the plus button to open the suggestion menu and add new blocks. The button appears when hovering over blocks.`)
const suggestionItems: EditorSuggestionMenuItem[][] = [[{
  kind: 'heading',
  level: 1,
  label: 'Heading 1',
  icon: 'i-lucide-heading-1'
}, {
  kind: 'heading',
  level: 2,
  label: 'Heading 2',
  icon: 'i-lucide-heading-2'
}, {
  kind: 'bulletList',
  label: 'Bullet List',
  icon: 'i-lucide-list'
}, {
  kind: 'blockquote',
  label: 'Blockquote',
  icon: 'i-lucide-text-quote'
}]]
</script>

<template>
  <UEditor
    v-slot="{ editor, handlers }"
    v-model="value"
    content-type="markdown"
    class="w-full min-h-35"
    :ui="{ base: 'p-8 sm:px-16' }"
  >
    <UEditorSuggestionMenu :editor="editor" :items="suggestionItems" />

    <UEditorDragHandle v-slot="{ ui, onClick }" :editor="editor">
      <UButton
        icon="i-lucide-plus"
        color="neutral"
        variant="ghost"
        size="sm"
        :class="ui.handle()"
        @click="(e) => {
          e.stopPropagation()
          const selected = onClick()
          handlers.suggestion?.execute(editor, { pos: selected?.pos }).run()
        }"
      />
      <UButton
        icon="i-lucide-grip-vertical"
        color="neutral"
        variant="ghost"
        size="sm"
        :class="ui.handle()"
      />
    </UEditorDragHandle>
  </UEditor>
</template>
```

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

### Basic Editor Toolbar Setup

Source: https://ui.nuxt.com/docs/components/editor-toolbar

Demonstrates the basic setup of the Editor Toolbar component. This is useful for initializing a simple toolbar for rich text editors.

```vue
<template>
  <UEditorToolbar v-model="value" />
</template>

<script setup>
const value = ref('')
</script>
```

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

### Basic Content Search Implementation

Source: https://ui.nuxt.com/docs/components/content-search

This snippet shows the fundamental setup for the Content Search component. It requires the "@nuxt/content" module to be installed and configured.

```vue
<template>
  <UCard>
    <template #header>
      <UInput
        v-model="query"
        name="email"
        placeholder="Search content..."
      />
    </template>

    <ContentList :query="query" v-slot="{ list }">
      <template v-for="{ _path, title, description } in list"
        :key="_path"
      >
        <ULink :to="_path" class="block space-y-1 hover:bg-gray-50 dark:hover:bg-gray-800/50 p-2 rounded-md">
          <div class="font-medium">
            {{ title }}
          </div>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            {{ description }}
          </p>
        </ULink>
      </template>
    </ContentList>
  </UCard>
</template>

<script setup>
const query = ref('')
</script>
```

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

### DropdownMenu with Filter (Expanded)

Source: https://ui.nuxt.com/components/dropdown-menu

This example demonstrates the same DropdownMenu with a filter, showing the full script setup and template. It's useful for understanding the complete component integration.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import type { DropdownMenuItem } from '@nuxt/ui'

const items = ref<DropdownMenuItem[]>([
  {
    label: 'Profile',
    icon: 'i-lucide-user'
  },
  {
    label: 'Billing',
    icon: 'i-lucide-credit-card'
  },
  {
    label: 'Settings',
    icon: 'i-lucide-cog'
  },
  {
    label: 'Team',
    icon: 'i-lucide-users'
  },
  {
    label: 'Invite users',
    icon: 'i-lucide-user-plus'
  },
  {
    label: 'New team',
    icon: 'i-lucide-plus'
  }
])
</script>

<template>
  <UDropdownMenu
    :filter="{
      icon: 'i-lucide-search'
    }"
    :items="items"
    :content="{
      align: 'start'
    }"
    :ui="{
      content: 'w-48'
    }"
  >
    <UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
  </UDropdownMenu>
</template>
```