---
title: Using the Docs - Navigate and Learn Effectively
meta:
  - name: description
    content: "Master the v0 documentation with Ask AI, skill-level filtering, interactive examples, keyboard shortcuts, and learning tracks designed for your experience."
  - name: keywords
    content: "documentation, navigation, ask ai, search, examples, learning tracks, keyboard shortcuts, accessibility"
features:
  order: 1
  level: 1
related:
  - /guide
  - /guide/tooling/ai-tools
  - /introduction/getting-started
---

<script setup lang="ts">
import { useRtl } from '@vuetify/v0'
import { useSettings } from '@/composables/useSettings'

const { lineWrap, showInlineApi, collapsibleNav } = useSettings()
const rtl = useRtl()
</script>

# Using the Docs

This guide helps you get the most out of v0 documentation. Whether you're exploring headless components for the first time or diving deep into composable architecture, these features will accelerate your learning.

<DocsPageFeatures :frontmatter />

**Key features:**

- **Ask AI** — Context-aware assistant that knows every page
- **Skill filtering** — Show content matching your experience level
- **Interactive examples** — Live demos with editable code
- **Keyboard-first** — Navigate entirely without a mouse

## Documentation Structure

The docs are organized into distinct sections, each serving a specific purpose:

| Section | Purpose | When to use |
|---------|---------|-------------|
| <AppLink to="/guide" class="whitespace-nowrap"><AppIcon icon="book" :size="18" class="inline-block align-text-bottom mr-1" />**Guide**</AppLink> | Conceptual learning | Understanding architecture, patterns, best practices |
| <AppLink to="/components" class="whitespace-nowrap"><AppIcon icon="layers" :size="18" class="inline-block align-text-bottom mr-1" />**Components**</AppLink> | Headless UI primitives | Building accessible interfaces (Dialog, Popover, Selection) |
| <AppLink to="/composables" class="whitespace-nowrap"><AppIcon icon="puzzle" :size="18" class="inline-block align-text-bottom mr-1" />**Composables**</AppLink> | Logic building blocks | Adding behavior without UI (createContext, createSelection) |
| <AppLink to="/api" class="whitespace-nowrap"><AppIcon icon="beaker" :size="18" class="inline-block align-text-bottom mr-1" />**API**</AppLink> | Complete reference | Looking up props, events, slots, methods |

Each component and composable page follows a consistent structure: overview, usage examples, anatomy, and API reference.

### Page Header

Every page includes a header area (shown at the top of this page) with breadcrumbs, quick actions, and metadata.

**Breadcrumbs** show your current location in the documentation hierarchy. Click any segment to navigate back to that level:

<AppBreadcrumbs class="my-4" />

**Actions:**

| Example | Description |
|---------|-------------|
| <span class="whitespace-nowrap"><DocsActionChip color="text-info" icon="pencil" text="Edit this page" /></span> | Open the source file on GitHub for editing |
| <span class="whitespace-nowrap"><DocsActionChip color="text-error" icon="vuetify-issues" text="Report a Bug" /></span> | File an issue via Vuetify Issues |
| <span class="whitespace-nowrap"><DocsActionChip color="text-warning" icon="alert" text="Open issues" /></span> | View existing GitHub issues for this feature |
| <span class="whitespace-nowrap"><DocsActionChip icon="github" text="View on GitHub" /></span> | Browse source code for components/composables |
| <span class="whitespace-nowrap"><DocsActionChip icon="markdown" text="Copy Page as Markdown" /></span> | Copy page content for use with AI tools |

**Metadata** (component and composable pages):

| Example | Description |
|---------|-------------|
| <span class="inline-flex items-center text-xs whitespace-nowrap"><DocsMetaCoverage :coverage="{ value: 94, label: '94% coverage', color: 'text-success' }" /></span> | Test coverage percentage (links to test file) |
| <span class="inline-flex items-center text-xs whitespace-nowrap"><DocsMetaBenchmark :benchmark="{ label: 'Blazing Fast', icon: 'benchmark-blazing', color: 'text-error' }" /></span> | Performance tier: Blazing Fast, Fast, or Good |
| <span class="inline-flex items-center text-xs whitespace-nowrap"><DocsMetaRenderless :renderless="true" /></span> | Component renders no DOM element by default |
| <span class="inline-flex items-center text-xs whitespace-nowrap"><DocsMetaRenderless :renderless="false" /></span> | Component renders a DOM element by default |
| <span class="inline-flex items-center text-xs whitespace-nowrap"><DocsMetaSkillLevel :level="{ icon: 'level-beginner', color: 'text-success', label: 'Beginner' }" /></span> | Difficulty indicator — see [below](#skill-levels) |
| <span class="inline-flex items-center text-xs whitespace-nowrap"><DocsMetaLastUpdated date="Jan 10, 2026" /></span> | When the page was last modified (from git) |

These metadata items are standalone components usable anywhere. This page's actual metadata: <span class="inline-flex items-center text-xs"><DocsMetaSkillLevel /><DocsMetaLastUpdated /></span>

## Skill Levels & Learning Tracks { #skill-levels-learning-tracks }

Use the filter to show only pages matching your experience level: <AppSkillFilter />

### Skill Levels

Every page is tagged with a skill level to help you find content appropriate for your experience:

| Level | For | Filter |
|-------|-----|:------:|
| <span class="inline-flex items-center text-xs"><DocsMetaSkillLevel :level="{ icon: 'level-beginner', color: 'text-success', label: 'Beginner' }" /></span> | New to v0, learning fundamentals | <span class="flex justify-center"><DocsSkillToggle :level="1" /></span> |
| <span class="inline-flex items-center text-xs"><DocsMetaSkillLevel :level="{ icon: 'level-intermediate', color: 'text-info', label: 'Intermediate' }" /></span> | Building with components, practical usage | <span class="flex justify-center"><DocsSkillToggle :level="2" /></span> |
| <span class="inline-flex items-center text-xs"><DocsMetaSkillLevel :level="{ icon: 'level-advanced', color: 'text-warning', label: 'Advanced' }" /></span> | Architecture deep-dives, custom patterns | <span class="flex justify-center"><DocsSkillToggle :level="3" /></span> |

Not sure where you land? Take a short quiz and we'll suggest a level you can apply to the filter with one click.

<AppSkillQuiz />

### Learning Tracks

The [Guide overview](/guide) defines three learning tracks for structured progression:

**Track A: Fundamentals** — Understanding the system
1. [Core](/guide/fundamentals/core) — Trinity, Context, and Registry patterns
2. [Components](/guide/fundamentals/components) — Headless primitives and slot props
3. [Composables](/guide/fundamentals/composables) — Composables vs components
4. [Plugins](/guide/fundamentals/plugins) — Vue plugin integration

**Track B: Features** — Production-ready UIs
1. [Theming](/guide/features/theming) — CSS variables and design tokens
2. [Accessibility](/guide/features/accessibility) — ARIA patterns and keyboard navigation
3. [Utilities](/guide/features/utilities) — Helper functions and type guards

**Track C: Integration** — See v0 in production
1. [Nuxt](/guide/integration/nuxt) — SSR, auto-imports, theme persistence
2. [Building Docs](/guide/integration/building-docs) — How this documentation site uses v0

New to v0? Start with Track A. Already building? Jump to Track B as needed.

## Navigation

### Table of Contents

The right sidebar (desktop only) shows an outline of the current page:

- Auto-generated from H2, H3, and H4 headings
- **Scroll spy**: Highlights your current section as you read
- Click any heading to jump directly to that section

### Related Links

At the bottom of each page, you'll find links to related content. These cross-references help you discover connected concepts and navigate between related components and composables.

<DocsRelated :frontmatter="{ related: ['/guide/tooling/ai-tools', '/introduction/getting-started'] }" />

### Previous / Next

Footer navigation at the bottom of each page links to adjacent pages in the current section, allowing linear reading through the documentation.

<DocsNavigator />

<br>

## Search

### Opening Search

- Click the search button in the header, or try it here: <AppSearchInline />
- Press `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac)

### Using Search

The search system uses **fuzzy matching**, so typos and partial words still find results:

- `"creat contxt"` finds `createContext`
- `"dialg"` finds `Dialog`
- `"selec"` finds `Selection`, `createSelection`

Results are grouped by category, with Guide pages prioritized. Maximum 20 results are shown per query.

### Keyboard Navigation

| Key | Action |
|-----|--------|
| `↑` / `↓` | Navigate through results |
| `Enter` | Go to selected result |
| `Escape` | Close search |

> [!TIP] Search indexes page titles, headings, and content. For API lookups, try searching the exact function or component name.

## Ask AI

The documentation includes a context-aware AI assistant that understands v0 concepts and has access to the current page's content.

### Opening Ask AI

- Click the floating input at the bottom of any page
- Press `Ctrl+/` (Windows/Linux) or `Cmd+/` (Mac)

On desktop, the chat opens as a right-side panel. On mobile, it opens as a full-screen modal.

### What the AI Knows

The AI has access to the entire v0 documentation via [llms-full.txt](/guide/tooling/ai-tools), but prioritizes the current page for more relevant answers:

| Context | Description |
|---------|-------------|
| <span class="whitespace-nowrap"><AppIcon icon="book" :size="16" class="inline-block align-text-bottom" /> **Full docs**</span> | Complete documentation available for cross-referencing |
| <span class="whitespace-nowrap"><AppIcon icon="typescript" :size="16" class="inline-block align-text-bottom" /> **Examples**</span> | Live Vue code from the page's interactive demos |
| <span class="whitespace-nowrap"><AppIcon icon="beaker" :size="16" class="inline-block align-text-bottom" /> **API specs**</span> | Props, events, slots, and methods for the current component/composable |
| <span class="whitespace-nowrap"><AppIcon icon="benchmark" :size="16" class="inline-block align-text-bottom" /> **Benchmarks**</span> | Performance metrics (for composables) |
| <span class="whitespace-nowrap"><AppIcon icon="chat" :size="16" class="inline-block align-text-bottom" /> **History**</span> | Your last 6 messages in the conversation |

This context makes answers specific and actionable. Asking "How do I open this programmatically?" on the Dialog page gives you Dialog-specific code.

### ASKAI Callouts

Throughout the documentation, you'll find clickable "Ask AI" boxes:

> [!ASKAI] How do I add styling or CSS classes to headless components?

These are pre-written questions relevant to the current topic. Click one to instantly send it to Ask AI.

### Chat Features

- <AppIcon icon="send" :size="16" class="inline-block align-text-bottom" /> **Streaming**: Responses appear in real-time as they're generated
- <AppIcon icon="markdown" :size="16" class="inline-block align-text-bottom" /> **Markdown**: Responses include formatted code with syntax highlighting
- <AppIcon icon="map" :size="16" class="inline-block align-text-bottom" /> **Diagrams**: Mermaid diagrams render inline when relevant
- <AppIcon icon="copy" :size="16" class="inline-block align-text-bottom" /> **Copy**: Copy the entire conversation to clipboard
- <AppIcon icon="vuetify-bin" :size="16" class="inline-block align-text-bottom" /> **Bin**: Save to Vuetify Bin for sharing
- <AppIcon icon="stop" :size="16" class="inline-block align-text-bottom" /> **Stop**: Cancel generation mid-stream if needed

The AI can generate syntax-highlighted code blocks and Mermaid diagrams directly in responses. Ask for architecture diagrams, data flow visualizations, or working code examples.

> [!TIP] Ask AI works best on component and composable pages where it has access to examples and API data. For general questions, try the Guide pages.

### Example Prompts

Click any suggestion to send it to Ask AI:

- > [!ASKAI] Show me how to use Dialog with v-model
- > [!ASKAI] What's the difference between createSelection and createGroup?
- > [!ASKAI] Explain the slot props for Step.Item

Or type your own question:

<AppAskInline />

<br>

## Interactive Examples

Most component and composable pages include live, interactive examples.

### Live Previews

Examples render as functional components you can interact with directly:

- Click buttons, open dialogs, select items
- See real behavior without leaving the docs
- Examples use the same code shown below them

::: gn-example
/components/group/basic
:::

### Code Toggle

Click **"Show code"** to reveal the source code for any example:

- Syntax highlighted with proper Vue/TypeScript coloring
- Click **"Hide code"** to collapse

### Actions

Hover over the code block to reveal action buttons:

```vue Example.vue playground
<script setup lang="ts">
  import { shallowRef } from 'vue'

  const count = shallowRef(0)
</script>

<template>
  <button @click="count++">Count: {{ count }}</button>
</template>
```

| Button | Action |
|--------|--------|
| <span class="whitespace-nowrap"><AppIcon icon="vuetify-play" :size="16" class="inline-block align-text-bottom" /> **Play**</span> | Open in Vuetify Play with full editing environment |
| <span class="whitespace-nowrap"><AppIcon icon="vuetify-bin" :size="16" class="inline-block align-text-bottom" /> **Bin**</span> | Open in Vuetify Bin for sharing |
| <span class="whitespace-nowrap"><AppIcon icon="size-small" :size="16" class="inline-block align-text-bottom" /> **Size**</span> | Cycle code text size between small, medium, and large[^size-examples] |
| <span class="whitespace-nowrap"><AppIcon icon="wrap" :size="16" class="inline-block align-text-bottom" /> **Wrap**</span> | Toggle line wrapping for long lines |
| <span class="whitespace-nowrap"><AppIcon icon="copy" :size="16" class="inline-block align-text-bottom" /> **Copy**</span> | Copy code to clipboard (checkmark confirms success) |

[^size-examples]: The button appears on example code panes; the setting itself applies to every code block and can also be changed from the [settings panel](#code-size).

### Multiple Files

Larger examples span several real files — a composable, a component, and the app that wires them together:

- Each tab is one source file; the last one is what runs in the preview
- Play and Bin carry every file across together
- The combine action stitches all files into a single scrollable view

::: gn-example
/components/combobox/useUserSearch.ts 1
/components/combobox/UserPicker.vue 2
/components/combobox/user-picker.vue 3
:::

### Recipes

Component pages end with recipes — terse, single-purpose snippets in a plain code fence, designed to be lifted straight into an app:

```vue playground data-tour=example-recipe
<script setup lang="ts">
  import { useHotkey } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const count = shallowRef(0)

  useHotkey('shift+k', () => count.value++)
</script>

<template>
  <div class="flex items-center gap-3">
    <kbd class="px-2 py-1 border border-divider rounded bg-surface-tint text-xs font-mono">Shift+K</kbd>
    <span class="text-sm">Pressed {{ count }} times</span>
  </div>
</template>
```

### Code Groups

Some examples show multiple variants in tabbed code blocks:

- Click tabs to switch between versions
- Use `←` / `→` arrow keys when focused
- Tab state is independent per code group

::: code-group no-filename

```bash pnpm
pnpm add @vuetify/v0
```

```bash npm
npm install @vuetify/v0
```

```bash yarn
yarn add @vuetify/v0
```

```bash bun
bun add @vuetify/v0
```

:::

### Diagrams

Architecture and flow diagrams use Mermaid. Click any diagram to open an expanded view in a dialog.

**Horizontal flow** for pipelines and transformations:

```mermaid "Horizontal Flow"
flowchart LR
  A[Input] --> B[Transform]
  B --> C[Output]
```

**Vertical flow** for hierarchies and dependencies:

```mermaid "Vertical Flow"
flowchart TD
  A[Parent] --> B[Child A]
  A --> C[Child B]
  B --> D[Grandchild]
```

**Subgraphs** group related concepts (from [useProxyModel](/composables/reactivity/use-proxy-model)):

```mermaid "Subgraph Example"
flowchart LR
  subgraph External
    model[v-model ref]
  end

  subgraph Selection
    selectedIds[selectedIds]
    browse[browse]
  end

  model -- transformIn --> browse
  browse --> select/unselect
  select/unselect --> selectedIds
  selectedIds -- transformOut --> model
```

## API Reference

Every component and composable includes comprehensive API documentation.

### Inline API

By default, API tables appear directly on the page in expandable sections:

- **Props**: Input properties with types, defaults, and descriptions
- **Events**: Emitted events with payload types
- **Slots**: Template slots with scope props
- **Options**: Configuration options (composables)
- **Methods**: Exposed functions (composables)
- **Properties**: Reactive properties (composables)

Click any item to expand its details, including code examples where available.

### Dedicated API Pages

For focused reference, visit `/api/{name}` (kebab-case slug, e.g. `/api/dialog`):

- All component variants shown together (e.g. Dialog.Root, Dialog.Content)
- Full details without page navigation
- Useful for side-by-side comparison

Toggle between views using **"View standalone ↓"** / **"Show inline →"** in the API section header.

### API Hover

In code examples throughout the docs, component and composable names are interactive. Hover over any recognized name to see a quick reference popover:

```vue
<script setup lang="ts">
  import { Step } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const current = shallowRef<string>()
</script>

<template>
  <Step.Root v-model="current" mandatory>
    <Step.Item value="step1">Step 1</Step.Item>
    <Step.Item value="step2">Step 2</Step.Item>
  </Step.Root>
</template>
```

```ts
import { useTheme } from '@vuetify/v0'

const theme = useTheme()

theme.isDark.value // boolean
theme.toggle() // switch themes
```

- Hover over `Step.Root`, `Step.Item`, or `useTheme` above to see the popover
- Shows description and key API members
- Click **"View API →"** to jump to the full reference

> [!TIP] The hover works on any recognized v0 component or composable in code blocks, making it easy to explore without leaving your current page.

### Vue Documentation Links

Vue built-in functions like `ref`, `computed`, `onMounted`, and `watch` are recognized in both code blocks and inline code. Hover to see a summary, then click **"View Vue docs ↗"** in the popover footer to open the official Vue documentation in a new tab.

```ts
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

onMounted(() => {
  console.log('Component mounted')
})
```

| Type | Popover badge | Footer action |
|------|---------------|---------------|
| v0 API | Component / Composable | **View API →** (internal page) |
| Vue built-in | Function / Reactivity / Lifecycle | **View Vue docs ↗** (external) |

Both share the same dotted underline — the popover's colored badge and footer link tell you which kind you're looking at.

> [!TIP] Vue links also work in inline code. Try hovering `ref` or `computed` in this sentence.

## Callouts

The documentation uses callout boxes to highlight important information:

> [!TIP] Best practices and helpful hints you can apply immediately.

> [!NOTE] Additional context and notes for deeper understanding.

> [!IMPORTANT] Critical information you should not miss.

> [!WARNING] Cautions and common mistakes to avoid.

> [!CAUTION] Severe issues or destructive operations to watch out for.

> [!ASKAI] How do I find the right composable for what I'm building?

> [!TOUR] using-the-docs

## Keyboard Shortcuts

Navigate the entire documentation without touching a mouse:

| Shortcut | Action |
|----------|--------|
| `Ctrl/Cmd + K` | Open search |
| `Ctrl/Cmd + /` | Open/focus Ask AI |
| `Escape` | Close search or Ask AI |
| `↑` / `↓` | Navigate search results |
| `Enter` | Select search result |
| `←` / `→` | Navigate code group tabs |
| `Tab` | Move focus forward |
| `Shift + Tab` | Move focus backward |

All keyboard shortcuts work with both `Ctrl` (Windows/Linux) and `Cmd` (Mac).

## Settings

Click the settings button in the header to open the settings panel: <AppSettings />

The settings panel provides personalization options that persist across sessions.

### Theme

Choose your preferred color scheme:

<div class="max-w-xs mb-6">
  <AppSettingsTheme />
</div>

### Skill Level

Filter documentation pages by complexity. Selected levels appear in the navigation—pages outside your selection are hidden.

<div class="max-w-xs mb-6">
  <AppSettingsSkillLevel />
</div>

### Code Examples

Toggle line wrapping for long lines in code blocks:

<div class="max-w-xs mb-6">
  <AppSettingsToggle v-model="lineWrap" label="Line wrapping" description="Wrap long lines in code blocks" />
</div>

```ts
const veryLongVariableName = someFunction(argumentOne, argumentTwo, argumentThree, argumentFour, argumentFive)
```

### Code Size

Set the font size for code blocks across the docs — the same setting the size button on example code panes cycles through:

<div class="max-w-xs mb-6">
  <AppSettingsCodeSize />
</div>

```ts
function greet (name: string) {
  return `Hello, ${name}!`
}
```

### API Reference

Display API details inline on component and composable pages, or show links to dedicated API pages:

<div class="max-w-xs mb-6">
  <AppSettingsToggle v-model="showInlineApi" label="Show inline" description="Display API details inline instead of links" />
</div>

### Motion

Control animations: follow your OS preference, force reduce, or enable full motion.

<div class="max-w-xs mb-6">
  <AppSettingsMotion />
</div>

### Package Manager

Set your default for installation code examples:

<div class="max-w-xs mb-6">
  <AppSettingsPackageManager />
</div>

### Header Buttons

Toggle visibility of header controls to reduce clutter:

<div class="max-w-xs mb-6">
  <AppSettingsHeaderButtons />
</div>

### Direction

Switch the layout direction to right-to-left (RTL) for languages like Arabic and Hebrew:

<div class="max-w-xs mb-6">
  <AppSettingsToggle v-model="rtl.isRtl.value" label="RTL mode" description="Switch layout direction to right-to-left" />
</div>

### Navigation

Group sidebar navigation items into collapsible sections:

<div class="max-w-xs mb-6">
  <AppSettingsToggle v-model="collapsibleNav" label="Collapsible sections" description="Group navigation items into expandable sections" />
</div>

## Accessibility

The documentation is built with accessibility in mind:

- **Full keyboard navigation** — Every interactive element is reachable via keyboard
- **ARIA labels** — Screen readers announce all controls correctly
- **Skip link** — "Skip to main content" link appears on focus
- **Reduced motion** — Animations respect `prefers-reduced-motion`
- **Focus indicators** — Clear visual focus states throughout
- **Semantic HTML** — Proper heading hierarchy and landmarks

## Community & Contributing

### Contribute

Found an error or want to improve the docs? Contributions are welcome:

- Each page links to its source on GitHub
- Submit pull requests for fixes or enhancements
- See the [Contributing Guide](/introduction/contributing) for details

> [!TIP] The easiest way to contribute is to click <DocsActionChip color="text-info" icon="pencil" text="Edit this page" /> near the top of any documentation page.