### Start the development server

Source: https://github.com/frappe/frappe-ui/blob/main/docs/content/docs/getting-started.md

Installs dependencies and launches the Vite development server.

```sh
cd frontend
yarn
yarn dev
```

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

### Quick Start Example

Source: https://github.com/frappe/frappe-ui/blob/main/skills/frappe-ui/SKILL.md

Demonstrates basic usage of frappe-ui components like Button, Dialog, and FormControl with Vue 3's Composition API. Use this to scaffold new pages, forms, or dialogs.

```vue
<script setup>
import { Button, Dialog, TextInput, FormControl } from 'frappe-ui'
import { ref } from 'vue'

const open = ref(false)
const name = ref('')
</script>

<template>
  <div class="p-4 bg-surface-white text-ink-gray-9">
    <Button variant="solid" theme="gray" @click="open = true">New Task</Button>
    <Dialog v-model:open="open" title="Create Task">
      <FormControl v-model="name" label="Title" required />
    </Dialog>
  </div>
</template>
```

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

### Install Frappe UI

Source: https://github.com/frappe/frappe-ui/blob/main/readme.md

Install Frappe UI using npm or yarn.

```sh
npm install frappe-ui
# or
yarn add frappe-ui
```

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

### Autocomplete Component Setup

Source: https://github.com/frappe/frappe-ui/blob/main/src/components/Autocomplete/Autocomplete.api.md

This snippet shows the basic setup for the Autocomplete component, importing necessary table components for displaying props, slots, and emits.

```vue
<script setup>
  import PropsTable from '@/components/Docs/PropsTable.vue'
  import SlotsTable from '@/components/Docs/SlotsTable.vue'
  import EmitsTable from '@/components/Docs/EmitsTable.vue'
</script>
```

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

### Default Tooltip Example

Source: https://github.com/frappe/frappe-ui/blob/main/src/components/Tooltip/Tooltip.md

Demonstrates the basic usage of the Tooltip component.

```javascript
import { Tooltip } from "frappe-ui";

export default function App() {
  return (
    <Tooltip content="This is a tooltip">
      <button>Hover over me</button>
    </Tooltip>
  );
}
```

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

### Install Dependencies for Frappe UI

Source: https://github.com/frappe/frappe-ui/blob/main/skills/frappe-ui/SETUP.md

Installs specific versions of Vite, Tailwind CSS, and other necessary packages compatible with frappe-ui 0.1.x. This command replaces the default installations from `npm create vite@latest`.

```bash
npm uninstall tailwindcss @tailwindcss/vite vite @vitejs/plugin-vue
npm install -D \
  tailwindcss@^3.4 postcss autoprefixer \
  vite@^5 @vitejs/plugin-vue@^5 \
  vue-router@^4 \
  unplugin-auto-import unplugin-vue-components unplugin-icons \
  lucide-static @iconify/json
npm install frappe-ui@beta
```

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

### Divider Examples

Source: https://github.com/frappe/frappe-ui/blob/main/src/components/Divider/Divider.md

Demonstrates basic usage of the Divider component for visual separation.

```html
<Divider />
<Divider orientation="vertical" />
```

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

### Creating and Fetching a Resource

Source: https://github.com/frappe/frappe-ui/blob/main/docs/content/docs/data-fetching/resource.md

This example demonstrates how to create a resource to fetch a list of 'ToDo' items from the Frappe backend and manually trigger the fetch operation.

```APIDOC
## Creating and Fetching a Resource

### Description
This example shows how to initialize a resource to fetch a list of 'ToDo' items from the Frappe backend. It includes setting the URL, parameters, and then explicitly calling the `fetch` method to initiate the data retrieval.

### Method
`createResource(options)`

### Parameters
- **options** (object)
  - **url** (string) - Required - The endpoint URL to fetch data from.
  - **params** (object) - Optional - Parameters to send with the request.
    - **doctype** (string) - Required - The doctype to query.
    - **filters** (object) - Optional - Filters to apply to the query.
      - **allocated_to** (string) - Example filter.

### Request Example
```javascript
import { createResource } from 'frappe-ui'

let todos = createResource({
  url: '/api/method/frappe.client.get_list',
  params: {
    doctype: 'ToDo',
    filters: {
      allocated_to: 'faris@example.com',
    },
  },
})

todos.fetch()
```

### Response
- **todos.data**: Will contain the fetched list of ToDos.
- **todos.loading**: Will be true during the fetch operation.
- **todos.error**: Will contain any errors encountered.
```

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

### Basic Data Fetching Example

Source: https://github.com/frappe/frappe-ui/blob/main/docs/content/docs/data-fetching/resource.md

Demonstrates traditional manual handling of async data fetching, including loading and error states.

```js
let data, loading, error
try {
  data = await fetch('https://jsonplaceholder.typicode.com/posts/1')
} catch (e) {
  error = e
}
// rest of your code
```

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

### App Setup with FrappeUIProvider

Source: https://github.com/frappe/frappe-ui/blob/main/spec/dialog.md

Wrap your application with FrappeUIProvider to enable the imperative dialog API. This component also hosts the toast viewport.

```vue
<template>
  <FrappeUIProvider>
    <RouterView />
  </FrappeUIProvider>
</template>
```

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

### Import Lucide Icons in Script Setup

Source: https://github.com/frappe/frappe-ui/blob/main/vite/README.md

Import Lucide icons explicitly for use within `<script setup>` blocks in Vue components. The import path follows the '~icons/' convention.

```typescript
import LucideArrowRight from '~icons/lucide/arrow-right'
```

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

### FrappeUIProvider Setup

Source: https://github.com/frappe/frappe-ui/blob/main/skills/frappe-ui/COMPONENTS.md

Mount FrappeUIProvider once at your app's root. It provides imperative dialog/toast mounts, theme management, and resource providers.

```vue
import { FrappeUIProvider } from 'frappe-ui'

createApp(App)
  .use(FrappeUIProvider)
  .mount('#app')
```

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

### Authoring Example with Inline Slots

Source: https://github.com/frappe/frappe-ui/blob/main/spec/selection.md

Demonstrates how to use inline slots to customize the prefix and suffix regions of items when options are generated in JavaScript. This example uses Vue's `h` function to render an Avatar as a prefix and a checkmark icon as a suffix.

```typescript
import { h } from 'vue'
import LucideCheck from '~icons/lucide/check'
import Avatar from '@/components/Avatar.vue'

const options = users.map((user) => ({
  label: user.name,
  value: user.id,
  slots: {
    prefix: ({ item }) => h(Avatar, { image: item.image, class: 'size-4' }),
    suffix: ({ selected }) =>
      selected ? h(LucideCheck, { class: 'size-4' }) : null,
  },
}))
```

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

### Importing Toast API and Provider

Source: https://github.com/frappe/frappe-ui/blob/main/spec/toast.md

Import the imperative `toast` API, the `ToastProvider` for mounting the viewport, or the `FrappeUIProvider` for a one-stop setup.

```typescript
// Imperative API — sonner's `toast`, re-exported as-is.
import { toast } from 'frappe-ui'

// Viewport — our styled wrapper around sonner's `<Toaster>`, with the
// frappe-ui defaults baked in. Raw `<Toaster>` is intentionally *not* 
// re-exported; consumers either mount `<FrappeUIProvider>` or
// `<ToastProvider>` directly.
import { ToastProvider } from 'frappe-ui'

// One-stop provider — mounts <ToastProvider> with our defaults next to <Dialogs />.
import { FrappeUIProvider } from 'frappe-ui'

// Vestigial back-compat export. Not documented; not promoted.
// Kept so that any code still importing `{ Toast }` keeps compiling.
import { Toast } from 'frappe-ui'
```

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

### Simple Combobox Example

Source: https://github.com/frappe/frappe-ui/blob/main/src/components/Combobox/Combobox.md

A basic Combobox with options provided as an array of strings. Suitable for simple selection tasks.

```vue
<template>
  <Combobox v-model="selected" :options="['Option 1', 'Option 2', 'Option 3']" />
</template>

<script setup>
import { ref } from 'vue';

const selected = ref(null);
</script>
```

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

### Configuring Frappe Request Fetcher

Source: https://github.com/frappe/frappe-ui/blob/main/docs/content/docs/data-fetching/resource.md

This example shows how to configure Frappe UI to use `frappeRequest` for resources, which automatically handles Frappe's response format for data and errors.

```APIDOC
## Configuring Frappe Request Fetcher

### Description
By default, resources use a generic `request` function. This example demonstrates how to configure `frappe-ui` to use `frappeRequest` instead. This specialized fetcher understands Frappe's standard response structure, automatically extracting data from the `message` key and errors from the `exc` key, and simplifies the URL by removing the `/api/method` prefix.

### Method
`setConfig(key, value)`

### Parameters
- **key** (string): The configuration key, set to `'resourceFetcher'`.
- **value** (function): The fetcher function to use, typically `frappeRequest`.

### Usage Example

**main.js**
```javascript
import { setConfig, frappeRequest } from 'frappe-ui'

setConfig('resourceFetcher', frappeRequest)
```

**Component Usage After Configuration**

When `resourceFetcher` is set to `frappeRequest`, the resource initialization simplifies:

```vue
<template>
  <Button @click="todos.reload()" :loading="todos.loading"> Reload </Button>
  <pre>{{ todos.data }}</pre>
</template>

<script setup>
import { createResource } from 'frappe-ui'

let todos = createResource({
  // Notice the URL is simplified
  url: 'frappe.client.get_list',
  params: {
    doctype: 'ToDo',
    filters: {
      allocated_to: 'faris@example.com',
    },
  },
})

todos.fetch()
</script>
```

### Response Handling with `frappeRequest`
- **Data Extraction**: The `data` property of the resource will be populated from the `message` field of the Frappe response.
- **Error Extraction**: The `error` property of the resource will be populated from the `exc` field of the Frappe response.
```

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

### Consumer Text Editor Implementation

Source: https://github.com/frappe/frappe-ui/blob/main/v1-release/research/11-texteditor-usage-audit.md

Example of how a consumer would use the headless primitives to build a text editor. All dependencies and configurations are explicitly imported and passed.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import StarterKit from '@tiptap/starter-kit'
import {
  useTextEditor,
  TextEditorContent,
  TextEditorFixedMenu,
  TextEditorBubbleMenu,
  Image,
  Link,
  Mention,
  Placeholder,
  commentToolbar,
} from 'frappe-ui'

const content = ref('')

const editor = useTextEditor({
  content,
  extensions: [
    StarterKit.configure({ heading: { levels: [2, 3, 4, 5, 6] } }),
    Placeholder.configure({ placeholder: 'Write a comment...' }),
    Link,
    Image.configure({ uploadFunction: uploadAttachment }),
    Mention.configure({ items: users }),
  ],
})
</script>

<template>
  <div class="rounded border">
    <TextEditorContent :editor="editor" class="prose-sm max-w-none min-h-16" />
    <TextEditorBubbleMenu :editor="editor" :buttons="commentToolbar" />
    <div class="flex justify-between border-t px-2 py-1.5">
      <TextEditorFixedMenu :editor="editor" :buttons="commentToolbar" />
      <Button variant="solid" :disabled="editor?.isEmpty">Submit</Button>
    </div>
  </div>
</template>

```

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

### Rating Component Labeling Example

Source: https://github.com/frappe/frappe-ui/blob/main/src/components/Rating/Rating.md

Demonstrates how to associate labels with the Rating component for improved accessibility and user experience.

```vue
<script setup>
import { ref } from 'vue'

const value = ref(3)
</script>

<template>
  <Rating id="my-rating" v-model="value" />
  <label for="my-rating">Rate this item</label>
</template>
```

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

### Importing Toast API and Provider

Source: https://github.com/frappe/frappe-ui/blob/main/v1-release/11-toast-spec.md

Import the imperative `toast` API and the `ToastProvider` component from `frappe-ui`. The `FrappeUIProvider` is also available for a one-stop setup.

```typescript
// Imperative API — sonner's `toast`, re-exported as-is.
import { toast } from 'frappe-ui'

// Viewport — our styled wrapper around sonner's `<Toaster>`, with the
// frappe-ui defaults baked in. Raw `<Toaster>` is intentionally *not* 
// re-exported; consumers either mount `<FrappeUIProvider>` or 
// `<ToastProvider>` directly.
import { ToastProvider } from 'frappe-ui'

// One-stop provider — mounts <ToastProvider> with our defaults next to <Dialogs />.
import { FrappeUIProvider } from 'frappe-ui'

// Vestigial back-compat export. Not documented; not promoted. 
// Kept so that any code still importing `{ Toast }` keeps compiling.
import { Toast } from 'frappe-ui'
```

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

### Install Frappe UI Claude Code Skill

Source: https://github.com/frappe/frappe-ui/blob/main/readme.md

Add the Frappe UI agent skill using Vercel's skills CLI for AI coding agents.

```sh
npx skills add https://github.com/frappe/frappe-ui/tree/main/skills/frappe-ui
```

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

### Dropdown Migration Example: Old to New

Source: https://github.com/frappe/frappe-ui/blob/main/v1-release/08b-dropdown-spec.md

Illustrates the migration from an older Dropdown template structure to the new recommended structure, focusing on how item rendering and conditional display of elements like checkmarks are handled.

```vue
<Dropdown :options="items">
  <template #item="{ item }">
    <button class="flex h-7 w-full items-center justify-between rounded px-2 hover:bg-surface-gray-3">
      <span>{{ item.label }}</span>
      <LucideCheck v-if="active === item.value" class="size-4" />
    </button>
  </template>
</Dropdown>
```

```vue
<Dropdown :options="items">
  <template #item-suffix="{ item }">
    <LucideCheck v-if="item.selected" class="size-4" />
  </template>
</Dropdown>
```

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

### Example: Grouped Options Data Structure

Source: https://github.com/frappe/frappe-ui/blob/main/spec/multiselect.md

Demonstrates the data structure for using grouped options in the MultiSelect component. Options are organized under 'group' keys.

```typescript
const options = [
  {
    group: 'Active',
    options: [
      { label: 'Alpha', value: 'alpha' },
      { label: 'Beta', value: 'beta' },
    ],
  },
  {
    group: 'Archived',
    options: [{ label: 'Gamma', value: 'gamma' }],
  },
]
```

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

### List Resource Initialization and Properties

Source: https://github.com/frappe/frappe-ui/blob/main/docs/content/docs/data-fetching/list-resource.md

Initialize a list resource and access its core properties for data and state management. Use this to get the fetched data, original response, or trigger a reload and pagination.

```javascript
let todos = createListResource({...})

todos.data // data returned from request
todos.originalData // response data before being transformed
todos.reload() // reload the existing list
todos.next() // fetch the next page
todos.hasNextPage // whether there is next page to fetch
```

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

### Initialize frappe-ui

Source: https://github.com/frappe/frappe-ui/blob/main/docs/content/docs/getting-started.md

Sets up a Vue project with frappe-ui inside the frontend directory.

```sh
cd apps/todo
# this will setup a vue project with frappe-ui set up
# inside the frontend directory
npx degit netchampfaris/frappe-ui-starter frontend
```

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

### Legacy Input Component Usage Examples

Source: https://github.com/frappe/frappe-ui/blob/main/v1-release/research/09-input-components-usage-audit.md

Examples of how the legacy Input.vue component is used with different types. These are candidates for migration to FormControl.

```vue
<Input type="number" min="0" v-model="..." />
```

```vue
<Input type="checkbox" v-model="..." :label="..." />
```

```vue
<Input type="password" ... />
```

```vue
<Input type="date" ... />
```

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

### Create a new Frappe app

Source: https://github.com/frappe/frappe-ui/blob/main/docs/content/docs/getting-started.md

Initializes a new Frappe application using the bench CLI.

```sh
bench new-app todo
```

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

### Vue App Entry Point with Frappe UI Plugin

Source: https://github.com/frappe/frappe-ui/blob/main/skills/frappe-ui/SETUP.md

Sets up the Vue application, registers the router, imports global styles, and uses the FrappeUI plugin.

```javascript
import { createApp } from 'vue'
import { FrappeUI } from 'frappe-ui'
import { router } from './router'
import './style.css'
import App from './App.vue'

const app = createApp(App)
app.use(router)   // required — frappe-ui's <Button> injects Symbol(router)
app.use(FrappeUI) // installs the plugin (resource provider, etc.)
app.mount('#app')
```

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

### Vue Accessibility: Bad vs Good Dialog and TextInput

Source: https://github.com/frappe/frappe-ui/blob/main/PHILOSOPHY.md

Compares inaccessible and accessible implementations of a Dialog and TextInput component in Vue. The 'Bad' example shows missing focus trapping, Esc key handling, and ARIA attributes. The 'Good' example demonstrates proper focus management, keyboard interaction, and ARIA attribute usage for accessibility.

```vue
<!-- Bad -->
<Dialog open>                                  <!-- no focus trap, Esc doesn't close -->
  <button @click="confirm">                    <!-- icon-only, no aria-label -->
    <LucideX />
  </button>
</Dialog>
<TextInput :error="msg" />                     <!-- error not linked via aria-errormessage -->
```

```vue
<!-- Good -->
<Dialog v-model:open>                          <!-- focus trapped, Esc closes, role+aria-* wired -->
  <Button icon="lucide-x" aria-label="Close" />
</Dialog>
<TextInput v-model="x" label="Email" :error="msg" />
<!-- → renders <input aria-invalid="true" aria-errormessage="email-error">
        + <span id="email-error">{{ msg }}</span> -->
```

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

### Old Select Component Customization

Source: https://github.com/frappe/frappe-ui/blob/main/v1-release/08c-select-spec.md

Example of customizing the Select component using the #option slot in older versions.

```vue
<Select v-model="chartType" :options="options">
  <template #option="{ option }">
    <div class="flex items-center gap-2">
      <component :is="option.icon" class="size-4" />
      <span>{{ option.label }}</span>
    </div>
  </template>
</Select>
```

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

### Fetch and display data with createResource

Source: https://github.com/frappe/frappe-ui/blob/main/docs/content/docs/introduction.md

Demonstrates using createResource to fetch a list of ToDo items and rendering them with Frappe UI components.

```vue
<script setup>
import { Button, LoadingText, createResource } from 'frappe-ui'

let todos = createResource({
  type: 'list',
  doctype: 'ToDo',
  fields: ['name', 'description'],
  cache: 'ToDos',
  auto: true,
})
</script>

<template>
  <LoadingText v-if="todos.loading" />
  <ul v-else>
    <li v-for="todo in todos.data" :key="todo.name">
      {{ todo.description }}
    </li>
  </ul>
  <Button>Add ToDo</Button>
</template>
```

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

### Rating Component States Example

Source: https://github.com/frappe/frappe-ui/blob/main/src/components/Rating/Rating.md

Illustrates different visual states of the Rating component, such as valid, invalid, and disabled.

```vue
<script setup>
import { ref } from 'vue'

const value = ref(3)
</script>

<template>
  <Rating state="invalid" v-model="value" />
  <Rating disabled v-model="value" />
</template>
```

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

### MultiSelect Example

Source: https://github.com/frappe/frappe-ui/blob/main/src/components/MultiSelect/MultiSelect.md

A basic MultiSelect component with a button trigger, search input, option list, and default footer.

```vue
<template>
  <MultiSelect
    :options="[
      { label: 'One', value: 1 },
      { label: 'Two', value: 2 },
      { label: 'Three', value: 3 },
    ]"
  />
</template>

<script setup>
import MultiSelect from "@/components/MultiSelect.vue";
</script>
```

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

### Configuring Frappe Request Fetcher

Source: https://github.com/frappe/frappe-ui/blob/main/docs/content/docs/data-fetching/resource.md

Demonstrates how to configure Frappe UI to use `frappeRequest` for resource fetching, which simplifies handling Frappe backend responses.

```javascript
import { setConfig, frappeRequest } from 'frappe-ui'
setConfig('resourceFetcher', frappeRequest)
```

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

### Basic App Shell Structure

Source: https://github.com/frappe/frappe-ui/blob/main/skills/frappe-ui/PATTERNS.md

Sets up the fundamental application shell using FrappeUIProvider, a Sidebar, and a main content area with routing. Ensures imperative UI components like dialogs and toasts function correctly.

```vue
<script setup>
import { FrappeUIProvider, Sidebar } from 'frappe-ui'
</script>

<template>
  <FrappeUIProvider>
    <div class="flex h-screen bg-surface-white text-ink-gray-9">
      <Sidebar />
      <main class="flex-1 overflow-y-auto">
        <router-view />
      </main>
    </div>
  </FrappeUIProvider>
</template>
```

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

### New Select Component Customization

Source: https://github.com/frappe/frappe-ui/blob/main/v1-release/08c-select-spec.md

Example of customizing the Select component using #item-prefix and #item-label slots in newer versions.

```vue
<Select v-model="chartType" :options="options">
  <template #item-prefix="{ option }">
    <component :is="option.icon" class="size-4" />
  </template>

  <template #item-label="{ option }">
    {{ option.label }}
  </template>
</Select>
```

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

### Create a Custom Quote Button

Source: https://github.com/frappe/frappe-ui/blob/main/spec/editor.md

Example of creating a custom menu item for toggling blockquotes, including icon and action.

```typescript
const QuoteButton: CommandMenuItem = {
  icon: LucideQuote,
  label: 'Quote',
  action: (e) => e.chain().focus().toggleBlockquote().run(),
  isActive: (e) => e.isActive('blockquote'),
}
```

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

### Required Indicator Rendering Example

Source: https://github.com/frappe/frappe-ui/blob/main/spec/inputs.md

Illustrates the canonical implementation for rendering a required indicator using FormLabel's pattern.

```html
<label for="...">
  Label text
  <span aria-hidden="true" class="text-ink-red-3 select-none">*</span>
  <span class="sr-only">(required)</span>
</label>
```

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

### Configure Frappe UI Build Settings

Source: https://github.com/frappe/frappe-ui/blob/main/vite/README.md

Defines the build output paths and asset serving URLs for the Frappe environment.

```javascript
frappeui({
  buildConfig: {
    outDir: '../app_name/public/frontend',
    baseUrl: '/assets/app_name/frontend/',
    indexHtmlPath: '../app_name/www/app_name.html',
    emptyOutDir: true,
    sourcemap: true,
  },
})
```

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

### Resource Options Configuration

Source: https://github.com/frappe/frappe-ui/blob/main/docs/content/docs/data-fetching/resource.md

Illustrates various configuration options for `createResource`, including URL formats, HTTP methods, parameters, debouncing, initial data, automatic fetching, caching strategies, and event hooks.

```js
let post = createResource({
    // partial rest api routes
    url: '/api/posts/1'
    // or full urls
    url: 'https://jsonplaceholder.typicode.com/posts/1',

    // http method: GET, POST, PUT, DELETE
    method: 'GET',

    // parameters
    params: {
      id: 1
    },
    // generate params from function
    makeParams() {
      return {
        id: 1
      }
    },

    // debounce request every 500ms
    debounce: 500,

    // initial data
    initialData: []

    // make the first request automatically
    auto: true,

    // cache key to cache the resource
    // can be a string
    cache: 'post',
    // or an array that can be serialized
    cache: ['post', '1'],
    // you can also pass reactive variable here
    cache: ['post', postId]

    // events
    // before making the request
    beforeSubmit(params) {

    },
    // validate parameters before making request
    validate(params) {
        if (!params.id) {
            // return a string message to throw an error
            return 'id is required'
        }
    },
    // error can occur from failed request and validate function
    onError(error) {

    },
    // on successful response
    onSuccess(data) {

    },
    // transform data before setting it
    transform(data) {
      for (let d of data) {
        d.open = false
      }
      return data
    },
})
```

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

### Icon Customization Examples (Vue)

Source: https://github.com/frappe/frappe-ui/blob/main/PHILOSOPHY.md

Illustrates correct and incorrect ways to customize icons in Vue components. Demonstrates string-based icon names, component fallbacks, and the use of generic slots versus component-specific props.

```Vue
<!-- Bad -->
<Dialog :icon="{ name: 'lucide-alert', theme: 'red' }" />   <!-- icon-config blob -->
<Button icon="edit" />                                       <!-- un-namespaced -->
<Combobox iconName="…" iconComponent="…" />                  <!-- competing channels -->

<!-- Good -->
<Dialog icon="lucide-alert" theme="red" />                   <!-- string + theme on component -->
<Button icon="lucide-edit" />
<Button :icon="MyCustomLogo" />                              <!-- Component escape hatch -->
<Combobox>
  <template #prefix><LucideStar class="size-4" /></template> <!-- generic slot -->
</Combobox>
```

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

### Custom TextInput with Prefix

Source: https://github.com/frappe/frappe-ui/blob/main/v1-release/research/10-input-v1-coverage-verification.md

Example of wrapping a TextInput with a custom label and a prefix icon for styling purposes. This pattern is forward-compatible with v1.

```vue
<div class="space-y-2">
  <label class="block text-sm text-ink-gray-7">Location</label>
  <TextInput v-model="eventData.location" placeholder="Add location" size="md">
    <template #prefix>
      <LucideMapPin class="size-4 text-ink-gray-6" />
    </template>
  </TextInput>
</div>
```

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

### ItemListRow Row States Example

Source: https://github.com/frappe/frappe-ui/blob/main/src/components/ItemListRow/ItemListRow.md

Demonstrates the different visual states of the ItemListRow component, including active, selected, and disabled appearances.

```javascript
<ComponentPreview name="ItemListRow-RowStates" />
```

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

### Dropdown Migration: Old Vue Template

Source: https://github.com/frappe/frappe-ui/blob/main/spec/dropdown.md

Example of the old template structure for customizing dropdown items using the #item slot.

```vue
<Dropdown :options="items">
  <template #item="{ item }">
    <button class="flex h-7 w-full items-center justify-between rounded px-2 hover:bg-surface-gray-3">
      <span>{{ item.label }}</span>
      <LucideCheck v-if="active === item.value" class="size-4" />
    </button>
  </template>
</Dropdown>
```

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

### List Resource Configuration Options

Source: https://github.com/frappe/frappe-ui/blob/main/docs/content/docs/data-fetching/list-resource.md

Provides a comprehensive list of configuration options available when creating a list resource, including doctype, fields, filters, sorting, pagination, caching, and event handlers.

```javascript
let todos = createListResource({
    // name of the doctype
    doctype: 'ToDo',

    // list of fields
    fields: ['name', 'description', 'status', '...'],

    // object of filters to apply
    filters: {
        status: 'Open'
    },

    // the order in which records must be sorted
    orderBy: 'creation desc',

    // index from which records should be fetched
    // default value is 0
    start: 0,

    // number of records to fetch in a single request
    // default value is 20
    pageLength: 20,

    // parent doctype when you are fetching records of a child doctype
    parent: null,

    // set to 1 to enable debugging of list query
    debug: 0,

    // cache key to cache the resource
    // can be a string
    cache: 'todos',
    // or an array that can be serialized
    cache: ['todos', 'faris@example.com'],

    // default value for url is "frappe.client.get_list"
    // specify url if you want to use a custom API method
    url: 'todo_app.api.get_todos',

    // make the first request automatically
    auto: true,

    // events
    // error can occur from failed request
    onError(error) {

    },
    // on successful response
    onSuccess(data) {

    },
    // transform data before setting it
    transform(data) {
      for (let d of data) {
        d.open = false
      }
      return data
    },
    // other events
    fetchOne: {
        onSuccess() {},
        onError() {}
    },
    insert: {
        onSuccess() {},
        onError() {}
    },
    delete: {
        onSuccess() {},
        onError() {}
    },
    setValue: {
        onSuccess() {},
        onError() {}
    },
    runDocMethod: {
        onSuccess() {},
        onError() {}
    },
})
```

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

### Basic Resource Usage in Vue

Source: https://github.com/frappe/frappe-ui/blob/main/docs/content/docs/data-fetching/resource.md

Shows how to create a resource to fetch a list of ToDos and display them in a Vue component, including a reload button.

```vue
<template>
  <Button @click="todos.reload()" :loading="todos.loading"> Reload </Button>
  <pre>{{ todos }}</pre>
</template>

<script setup>
import { createResource } from 'frappe-ui'
let todos = createResource({
  url: '/api/method/frappe.client.get_list',
  params: {
    doctype: 'ToDo',
    filters: {
      allocated_to: 'faris@example.com',
    },
  },
})
todos.fetch()
</script>
```

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

### Default Calendar View

Source: https://github.com/frappe/frappe-ui/blob/main/src/components/Calendar/Calendar.md

Displays the standard calendar interface for organizing schedules. No specific setup is required beyond importing the component.

```javascript
import Calendar from "@frappe/ui/Calendar";

export default function App() {
  return <Calendar />;
}
```

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

### CSS Entry Point with Frappe UI Styles

Source: https://github.com/frappe/frappe-ui/blob/main/skills/frappe-ui/SETUP.md

Imports frappe-ui's base styles and Tailwind CSS directives into the main CSS file.

```css
@import 'frappe-ui/style.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

### Deprecated Combobox Placement Alias

Source: https://github.com/frappe/frappe-ui/blob/main/spec/selection.md

Combobox's `placement` prop is a deprecated alias for `align`. It accepts 'start', 'center', or 'end'.

```typescript
placement?: 'start' | 'center' | 'end' // Deprecated alias for align
```

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

### Resource Usage with Frappe Request Fetcher

Source: https://github.com/frappe/frappe-ui/blob/main/docs/content/docs/data-fetching/resource.md

Illustrates using `createResource` with the configured `frappeRequest` fetcher, simplifying the URL and automatically parsing Frappe's 'message' and 'exc' keys.

```vue
<template>
  <Button @click="todos.reload()" :loading="todos.loading"> Reload </Button>
  <pre>{{ post }}</pre>
</template>

<script setup>
import { createResource } from 'frappe-ui'
let todos = createResource({
url: 'frappe.client.get_list',
  params: {
    doctype: 'ToDo',
    filters: {
      allocated_to: 'faris@example.com',
    },
  },
})
todos.fetch()
</script>
```

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

### ErrorMessage Component Usage with String Messages

Source: https://github.com/frappe/frappe-ui/blob/main/v1-release/research/09-input-components-usage-audit.md

Example of passing a plain string message to the ErrorMessage component. This is the most common way ErrorMessage is used.

```vue
<ErrorMessage :message="errorString" />
```

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

### Standard vs. Custom Slot Names

Source: https://github.com/frappe/frappe-ui/blob/main/PHILOSOPHY.md

Demonstrates the correct usage of predefined, generic slot names over custom ones for better discoverability and composability. Use `#prefix` and `#suffix` instead of `#icon-left` or `#avatar-right`. Use `#empty` instead of `#emptyState`.

```vue
<!-- Bad -->
<Combobox><template #icon-left>…</template></Combobox>
<Combobox><template #avatar-right>…</template></Combobox>
<List><template #emptyState>…</template></List>
<Dropdown><template #after>…</template></Dropdown>

<!-- Good -->
<Combobox><template #prefix>…</template></Combobox>
<Combobox><template #suffix>…</template></Combobox>
<List><template #empty>…</template></List>
<Dropdown><template #footer>…</template></Dropdown>
```

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

### Combobox within a Dialog

Source: https://github.com/frappe/frappe-ui/blob/main/src/components/Combobox/Combobox.md

Example of a Combobox used inside a Dialog component. It verifies that focus is correctly restored to the trigger element after the popover closes.

```vue
<template>
  <Dialog>
    <template #trigger>
      <button>Open Dialog</button>
    </template>
    <Combobox v-model="selectedInDialog" :options="['Dialog Option 1', 'Dialog Option 2']" />
  </Dialog>
</template>

<script setup>
import { ref } from 'vue';

const selectedInDialog = ref(null);
</script>
```