# UI Thing Documentation
    
> **Note:** This documentation corresponds to **UI Thing CLI v0.2.0** (major update).
 

# Introduction

**UI Thing** is a collection of beautifully designed, reusable UI components built specifically for **Nuxt**, powered by Reka UI and Tailwind CSS. This project is inspired by **shadcn/ui**, with adaptations to fit Nuxt's framework and developer ecosystem.

> **Note:** This is *not* a traditional component library you install via npm. Instead, it hands you open, editable code-so you can pick the components you need, copy them into your app, and customize as you see fit.

## Why "UI Thing" for Nuxt?

- **Open Code Philosophy**:br
  Every component is fully visible and editable-no wrappers or opaque abstractions. This gives you full control to adapt the UI to your design system. This makes it especially AI-friendly, letting models read, understand, and even generate new components.
- **Nuxt-Native**:br
  Created with the Nuxt ecosystem at heart, UI Thing respects Nuxt's conventions-whether you're on Nuxt 3 or upgrading to Nuxt 4-and integrates smoothly with your app's structure and tooling.
- **DIY, Your Way**:br
  Rather than bundling code you can't touch, UI Thing encourages you to copy, paste, and personalize any component. The code becomes entirely yours-no extra layers, no wrappers.
- **Learn & Build**:br
  This project started as an experiment-and a fun one at that. I wanted to explore building an entire component reference for Nuxt, and along the way, I created a CLI to streamline the dev experience.

---

## Comparison Table

| Feature            | UI Thing (for Nuxt)        | Traditional Component Library    |
| ------------------ | -------------------------- | -------------------------------- |
| Distribution       | Copy-paste + CLI           | Publish to npm, import as a dep  |
| Customization      | Directly edit code         | Override or wrap components      |
| Nuxt Compatibility | Built for Nuxt conventions | Generic (may require adaptation) |
| CLI Support        | Yes                        | Sometimes minimal or none        |
| Ideal Use Case     | Highly customizable UIs    | Quick plug-and-play UIs          |

---

## How to Use It

1. **Browse** [component](https://uithing.com/components/accordion) docs and [examples](https://uithing.com/examples/cards).
2. **Use the CLI** (`npx ui-thing@latest add <component>`) to scaffold components into your project, or copy-paste code manually.
3. **Customize** each component freely-tweak styles, logic, responsive behavior, or layout as needed.


# Setup

So you want to use UI Thing in your Nuxt project? Great! This guide will walk you through the steps to get started.

## Prerequisites

Before you can use UI Thing, you need to have a Nuxt project. If you don't have one yet, you can create one with the following command:

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx nuxi@latest init my-app
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx nuxi@latest init my-app
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x nuxi@latest init my-app
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx nuxi@latest init my-app
```
::

This will create a new Nuxt project in the `my-app` directory. You can then navigate to that directory and start the development server:

```bash
cd my-app && npm run dev
```

## Initialization

Once you have a Nuxt project, you can initialize UI Thing with the following command:

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest init
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest init
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest init
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest init
```
::

This command will ask you a bunch of question the first time you run it

```bash
✔ Which theme do you want to start with? › Violet
✔ Where is your tailwind.css file located? … app/assets/css/tailwind.css
✔ Where should your components be stored? … app/components/Ui
✔ Where should your composables be stored? … app/composables
✔ Where should your plugins be stored? … app/plugins
✔ Where should your utils be stored? … app/utils
✔ Should we just replace component files if they already exist? … yes
✔ Would you like to use the default filename when adding components? … yes
✔ Which package manager do you use? › Npm
```

## Adding components

Once initialized, add components by running:

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add
```
::

You'll be prompted to select the components you want.

**UI Thing** will then:

- Copy the selected components into your components directory
- Add any required composables, utils, and plugins
- Install missing dependencies
- Update `nuxt.config` with necessary configuration

## Adding themes

UI Thing ships with several pre-made themes.

Add one to your project with:

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest theme
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest theme
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest theme
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest theme
```
::

This will ask you to select the theme you want to add to your project. Once you have selected a theme, UI Thing will ask you if you want to overwrite your `tailwind.css` file. If you answer yes, it will overwrite your `tailwind.css` file with the theme you selected.

⚠️ Please note that this will overwrite your `tailwind.css` file. If you have made any changes to this file, you will lose them.

### Theme source

The themes included in this cli all come from [shadcn/ui theme page](https://ui.shadcn.com/themes){rel="&#x22;nofollow&#x22;"}.

So if you don't want to use this CLI to add themes, you can just customize your theme on that page and copy the code into your `tailwind.css` file.

> Thanks shadcn for making these themes available for free! 🙏


# CLI

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest
```
::

```sh
Usage: ui-thing [options] [command]

CLI for adding ui-thing components to your Nuxt application

Options:
  -V, --version                      output the version number
  -h, --help                         display help for command

Commands:
  init [options]                     Initialize UI Thing in your Nuxt project.
  add [options] [componentNames...]  Add a list of components to your project.
  theme                              Add a new theme to your project.
  shortcuts                          Add the shortcuts composable to your project.
  prettier                           Add prettier config to your project.
  help [command]                     display help for command
```

## init

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest init
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest init
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest init
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest init
```
::

This command will initialize UI Thing in your Nuxt project. This will:

- Update your `nuxt.config` file
- Add the necessary dependencies
- Create a `ui-thing.config.ts` file with the default configuration

It is recommended that you run this command in a new Nuxt project before adding any components.

```sh
Usage: ui-thing init [options]

Initialize UI Thing in your Nuxt project.

  ✅ Add tailwindcss to your project
  ✅ Update your nuxt.config file
  ✅ Add the necessary dependencies
  ✅ Create a ui-thing.config file with the default configuration

Options:
  -f --force                 Overwrite config file if it exists. (default: false)
  -y --yes                   Skip prompts and use default values. (default: false)
  -n --nuxtVersion <number>  Specify the Nuxt version you are using.
  -h, --help                 display help for command
```

## add

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add
```
::

This command will add a list of components to your project. If no argument is passed, it will ask you to select from a list of available components.

```sh
? Select the components you want to add >
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    [a,b,c]/delete: Filter choices
    enter/return: Complete answer

Filtered results for: Enter something to filter

◯  Accordion
◯  Alert
◯  Alert Dialog
◯  ApexCharts
◯  Apexcharts
◯  Aspect Ratio
◯  Autocomplete
◯  Avatar
◯  Badge
◯  Border Beam
```

## theme

The theme command allows you to add a new theme to your project.

You can visit the [themes page](https://ui.shadcn.com/themes){rel="&#x22;nofollow&#x22;"} on shadcn to see the available themes.

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest theme
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest theme
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest theme
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest theme
```
::

Running this command allows you to select a theme from the list

```sh
? Which theme do you want to add? »
>   Zinc
    Slate
    Stone
    Gray
    Neutral
    Red
    Rose
    Orange
    Green
  ↓ Blue
```

## prettier

The prettier command allows you to add an opinionated prettier config to your project.

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest prettier
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest prettier
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest prettier
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest prettier
```
::

This will create a `.prettierrc` file that looks like this

```json
{
  "arrowParens": "always",
  "endOfLine": "lf",
  "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
  "printWidth": 100,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": true,
  "tailwindFunctions": ["tv"],
  "importOrder": ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "<TYPES>", "", "^[.]"]
}
```

It will then instal the necessary dependencies and format your code.

## shortcuts

The shortcuts command allows you to add the `shortcuts` composables to your project.

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest shortcuts
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest shortcuts
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest shortcuts
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest shortcuts
```
::

This will create a `shortcuts.ts` file in your `composables` directory.


# Starters

## Counter

![Counter Starter Image](https://ui-thing-starter.behonbaker.com/__og-image__/image/og.png){.border}

[Live Demo](https://ui-thing-starter.behonbaker.com/){rel="&#x22;nofollow&#x22;"} • [Github Repo](https://github.com/BayBreezy/ui-thing-starter){rel="&#x22;nofollow&#x22;"}

The counter starter is a Nuxt app with UI Thing already initialized.

### Features

- **Pinia** - A state management library for Vue/Nuxt
- **Es Lint** - Nuxt eslint installed and configured
- **Prettier** - Code formatter for consistent style
- **Commit Lint** - Lint your commit messages
- **Husky** - Git hooks for linting
- **Lint Staged** - Lint staged files before commit


# Shortcuts

## Credits

I just want to say that this composable is coming directly from [Nuxt UI](https://ui.nuxt.com/){rel="&#x22;nofollow&#x22;"}. I am not the creator of this composable, I just wanted to share it with you because I think it's a really cool feature to have in your project. You can find the original docs here: [Nuxt UI - Shortcuts](https://ui.nuxt.com/composables/define-shortcuts){rel="&#x22;nofollow&#x22;"}.

> Thanks Nuxt UI ♥

## `defineShortcuts`

The `defineShortcuts` composable allows you to define keyboard shortcuts in your app really easily. Try it out by pressing `Ctrl + v`

:shortcuts-ex-one

```vue [ShortcutsExOne.vue]
<template>
  <div />
</template>
<script lang="ts" setup>
  defineShortcuts({
    ctrl_v: {
      usingInput: false,
      handler: () => {
        useSonner("Nice!", { description: "You just used a shortcut!" });
      },
    },
  });
</script>
```

## API

### `defineShortcuts(config: ShortcutsConfig, options?: ShortcutsOptions)`

Define keyboard shortcuts for your application.

- `config`: An object where keys are shortcut definitions and values are either handler functions or shortcut configuration objects.
- `options`: Optional configuration for the shortcuts behavior.
  - `chainDelay`: The delay between key presses to consider the shortcut as chained. Default is `250`.

Shortcuts keys are written as the literal keyboard key value. For a complete list of available shortcut keys, refer to the [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values){rel="&#x22;nofollow&#x22;"} API documentation. Note that the key should be written in lowercase.

#### Shortcut Definition

Shortcuts are defined using the following format:

- Single key: `a`, `b`, `1`, `?`, etc.
- Key combinations: Use `_` to separate keys, e.g., `meta_k`, `ctrl_shift_f`
- Key sequences: Use `-` to define a sequence, e.g., `g-d`

#### Modifiers

- `meta`: Represents `⌘ Command` on macOS and `Ctrl` on other platforms
- `ctrl`: Represents `Ctrl` on all platforms
- `shift`: Used for alphabetic keys when Shift is required

#### Special Keys

- `escape`: Triggers on Esc key
- `enter`: Triggers on Enter key
- `arrowleft`, `arrowright`, `arrowup`, `arrowdown`: Trigger on respective arrow keys

Examples of keys:

- `escape`: will trigger by hitting `Esc`
- `meta_k`: will trigger by hitting `⌘` and `K` at the same time on MacOS, and `Ctrl` and `K` on Windows and Linux
- `ctrl_k`: will trigger by hitting `Ctrl` and `K` at the same time on MacOS, Windows and Linux
- `shift_e`: will trigger by hitting `Shift` and `E` at the same time on MacOS, Windows and Linux
- `?`: will trigger by hitting ? on some keyboard layouts, or for example Shift and /, which results in ? on US Mac keyboards
- `g-d`: will trigger by hitting `g` then `d` with a maximum delay of 800ms by default
- `arrowleft`: will trigger by hitting `←` (also: `arrowright`, `arrowup`, `arrowdown`)

### Shortcut Configuration

Each shortcut can be defined as a function or an object with the following properties:

```ts
interface ShortcutConfig {
  handler: () => void;
  usingInput?: boolean | string;
}
```

- `handler`: Function to be executed when the shortcut is triggered
- `usingInput`:
  - `false` (default): Shortcut only triggers when no input is focused
  - `true`: Shortcut triggers even when any input is focused
  - `string`: Shortcut only triggers when the specified input (by name) is focused

### `usingInput`

Prop: `usingInput?: string | boolean`

By default, `usingInput` is `false`, meaning it will only trigger when no input is focused. When set to `true`, the shortcut will also trigger when any input is focused.

For a more advanced behavior, `usingInput` can be set to the name of an input, so it only triggers when focusing this specific input.

::prose-show-case
:shortcuts-ex-two

#code
```vue [ShortcutsExTwo.vue]
<template>
  <div class="flex flex-col gap-3">
    <UiLabel>Enter your name</UiLabel>
    <UiInput v-model="query" name="queryInput" />
  </div>
</template>

<script setup lang="ts">
  const query = ref("");

  defineShortcuts({
    enter: {
      usingInput: "queryInput",
      handler: () => {
        useSonner.info("Triggered", {
          description: query.value
            ? `You just typed ${query.value} and pressed enter!`
            : `You just pressed enter with nothing typed!`,
        });
      },
    },
  });
</script>
```
::

### Simple shortcut

In case the shortcut does not need any config, it can be written as a function.

:shortcuts-ex-three

```vue [ShortcutsExThree.vue]
<script lang="ts" setup>
  defineShortcuts({
    "?": () => useSonner.info("Question Mark", { description: "This is the question mark key." }),
    "g-d": () => useSonner.info("G D", { description: "This is the G D key combination." }),
  });
</script>
<!-- eslint-disable-next-line vue/valid-template-root -->
<template>
  <!-- Nothing to see here -->
</template>
```

## `useKbd`

To get the OS specific meta key symbol, you can use the `useKbd` composable.

```vue
<script setup>
  const { getKbdKey } = useKbd();
  const metaSymbol = computed(() => getKbdKey("meta"));
</script>

<template>
  <UKbd>{{ metaSymbol }}</UKbd>
</template>
```

*`metaSymbol` will display either `⌘` on MacOS or `Ctrl` on any other OS*


# MCP Server

## What it gives you

The UI Thing MCP server exposes the library in a way that is useful to agents:

- small discovery indexes for components, blocks, docs, examples, and page templates
- exact detail tools for full source code and markdown docs
- install-plan tools for mixed selections
- scaffold-first planning tools for new Nuxt projects

This matters because UI Thing is a copy-paste library. The files are the product, so the MCP server is designed to help agents find the right files, dependencies, and docs before implementation.

## Available resources

These resources are intentionally compact indexes:

- `resource://uithing/components`
- `resource://uithing/blocks`
- `resource://uithing/documentation-pages`
- `resource://uithing/examples`
- `resource://uithing/page-templates`
- `resource://uithing/quick-start`
- `resource://uithing/design-patterns`

Use the detail tools when you need full source or full markdown.

## Available tools

### Discovery

- `list-components`
- `list-blocks`
- `list-documentation-pages`
- `list-block-pages`
- `search-components`
- `search-documentation-pages`
- `resolve-library-item`

### Details

- `get-component`
- `get-block`
- `get-documentation-page`

### Planning

- `get-project-setup`
- `get-install-plan`
- `plan-page`
- `plan-form`
- `validate-dependencies`:br
  Compatibility alias for `get-install-plan`

## Available prompts

- `setup-project`
- `build-page`
- `create-form`
- `implement-component`
- `create-documentation`
- `fix-component-issue`
- `optimize-accessibility`

Prompts now point to the tools above instead of trying to embed the whole workflow in prompt text.

## Recommended workflow

For a new Nuxt project:

1. Call `get-project-setup`
2. Call `plan-page` or `plan-form`
3. Call `resolve-library-item` if the target names are fuzzy
4. Call `get-install-plan`
5. Call `get-component`, `get-block`, or `get-documentation-page`

## Codex

Codex does not read `.vscode/mcp.json`. Add MCP servers with `codex mcp add` or by editing `~/.codex/config.toml`.

### Recommended entries

- `nuxtMcpToolkit`:br
  Reference docs server for current Nuxt guidance
- `uiThingLocal`:br
  Local development server for authoring and testing
- `uiThingHosted`:br
  Hosted production endpoint for end-user flows

### CLI setup

```bash
codex mcp add nuxtMcpToolkit --url https://mcp-toolkit.nuxt.dev/mcp
codex mcp add uiThingLocal --url http://localhost:3000/mcp
codex mcp add uiThingHosted --url https://uithing.com/mcp
```

### Manual config

```toml [~/.codex/config.toml]
[mcp_servers.nuxtMcpToolkit]
url = "https://mcp-toolkit.nuxt.dev/mcp"

[mcp_servers.uiThingLocal]
url = "http://localhost:3000/mcp"

[mcp_servers.uiThingHosted]
url = "https://uithing.com/mcp"
```

## VS Code

If you are using VS Code MCP support, add UI Thing alongside the Nuxt MCP Toolkit docs server:

```json [.vscode/mcp.json]
{
  "servers": {
    "Nuxt MCP Toolkit": {
      "type": "http",
      "url": "https://mcp-toolkit.nuxt.dev/mcp"
    },
    "UI Thing": {
      "type": "http",
      "url": "https://uithing.com/mcp"
    }
  },
  "inputs": []
}
```

For local development, switch the UI Thing URL to `http://localhost:3000/mcp`.

## Cursor

```json [~/.cursor/mcp.json]
{
  "mcpServers": {
    "ui-thing": {
      "type": "http",
      "url": "https://uithing.com/mcp"
    }
  }
}
```

## Claude Desktop

```json [claude_desktop_config.json]
{
  "mcpServers": {
    "ui-thing": {
      "command": "npx",
      "args": ["mcp-remote", "https://uithing.com/mcp"]
    }
  }
}
```

## Windsurf

```json [.codeium/windsurf/mcp_config.json]
{
  "mcpServers": {
    "ui-thing": {
      "type": "http",
      "url": "https://uithing.com/mcp"
    }
  }
}
```

## Example requests

```sh
"Set up UI Thing in a new Nuxt app"
```

```sh
"Plan a landing page using UI Thing blocks"
```

```sh
"Build an install plan for button, dialog, and Hero 1"
```

```sh
"Resolve the best UI Thing match for a date picker"
```

```sh
"Fetch the full Button component source and docs"
```

```sh
"Search the documentation for sidebar persistence"
```


# Changelog

The changelog has moved to [/changelog](https://uithing.com/changelog), where you can filter by category, search with the command palette, and subscribe via RSS.


# Cards

:page-ex-cards


# Dashboard

::div{.not-prose.border.rounded-lg.overflow-hidden}
:block-dashboards4
::


# Landing Page

:page-ex-landing


# Schema Visualizer

:page-ex-schema-visualizer


# All Components

:page-components-search


# Accordion

## Source code

Click :source-code-link{component="Accordion"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Anatomy

Pass a list of `items` to the component.

```vue [Accordion Anatomy.vue] lines
<template>
  <UiAccordion :items />
</template>

<script lang="ts" setup>
  const items = [];
</script>
```

Or use each part individually

```vue [Accordion Anatomy.vue] lines
<template>
  <UiAccordion>
    <UiAccordionItem>
      <UiAccordionHeader>
        <UiAccordionTrigger />
      </UiAccordionHeader>
      <UiAccordionContent />
    </UiAccordionItem>
  </UiAccordion>
</template>
```

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add accordion
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add accordion
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add accordion
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add accordion
```
::

## Usage

### Basic

The most common way to use the accordion is by just passing an array of items to the `items` prop. Each item should have a `value`, `title`, and `content`.

::prose-show-case
:docs-accordion

#code
```vue [DocsAccordion.vue]
<template>
  <div class="mx-auto max-w-lg">
    <UiAccordion type="single" default-value="item-2" :items="accordionItems" />
  </div>
</template>

<script lang="ts" setup>
  const accordionItems = [
    {
      value: "item-1",
      title: "Is it accessible?",
      content: "Yes. It adheres to the WAI-ARIA design pattern.",
    },
    {
      value: "item-2",
      title: "Is it unstyled?",
      content: "Yes. It's unstyled by default, giving you freedom over the look and feel.",
    },
    {
      value: "item-3",
      title: "Can it be animated?",
      content: "Yes! You can use the transition prop to configure the animation.",
    },
  ];
</script>
```
::

### Custom styling

If you want to change the way that the items look, you can do so by using the different components that the accordion is composed of.

::prose-show-case
:docs-accordion-variant

#code
```vue [DocsAccordionVariant.vue]
<template>
  <div class="mx-auto max-w-lg">
    <UiAccordion
      :default-value="[accordionItems[1]!.value]"
      type="multiple"
      :items="accordionItems"
    >
      <template v-for="(i, k) in accordionItems" :key="k">
        <UiAccordionItem v-slot="{ open }" class="border-b-0" :value="i.value">
          <UiAccordionHeader>
            <UiAccordionTrigger
              :class="[open ? 'bg-muted underline hover:!underline' : 'bg-muted/50 no-underline']"
              class="hover:bg-muted mb-2 rounded-md px-3 text-left text-sm underline-offset-2 hover:no-underline"
              >{{ i.title }}</UiAccordionTrigger
            >
          </UiAccordionHeader>
          <UiAccordionContent>
            <div class="px-3 py-2 leading-8" v-html="i.content" />
          </UiAccordionContent>
        </UiAccordionItem>
      </template>
    </UiAccordion>
  </div>
</template>

<script lang="ts" setup>
  const accordionItems = [
    {
      value: "item-1",
      title: "What is a Javascript framework?",
      content:
        "A JavaScript framework is an application framework written in JavaScript. It differs from a JavaScript library in its control flow: a library offers functions to be called by its parent code, whereas a framework defines the entire application design.",
    },
    {
      value: "item-2",
      title: "Is it easy to create a design system with Reka UI?",
      content:
        "Yes! Reka UI is a collection of low-level UI components that you can use to create a design system.",
    },
    {
      value: "item-3",
      title: "Can I customize the animation of the accordion?",
      content:
        "Of course! You can customize the animation of the accordion by updating the animation that is in the tailwind.config file.",
    },
  ];
</script>
```
::

### Custom icon

You can change the `icon` that is displayed based on the open state of an item. Just override the the `trigger` slot and then override the `icon` slot.

::prose-show-case
:docs-accordion-icon

#code
```vue [DocsAccordionIcon.vue]
<template>
  <div class="mx-auto max-w-lg">
    <UiAccordion type="single" default-value="item-2" :items="accordionItems">
      <template #trigger="{ open, item }">
        <UiAccordionTrigger
          class="text-left text-sm"
          :class="[open && 'underline underline-offset-2']"
          :title="item.title"
        >
          <template #icon>
            <Icon v-if="!open" name="lucide:plus" class="size-4 shrink-0" />
            <Icon v-else name="lucide:minus" class="size-4 shrink-0" />
          </template>
        </UiAccordionTrigger>
      </template>
    </UiAccordion>
  </div>
</template>

<script lang="ts" setup>
  const accordionItems = [
    {
      value: "item-1",
      title: "What does it take to get a job at Apple?",
      content:
        "A lot of hard work and dedication. Apple is a great place to work, but it's not easy to get a job there. You need to be passionate about technology and willing to put in the time and effort to succeed.",
    },
    {
      value: "item-2",
      title: "How long does it take to learn a new programming language?",
      content:
        "It depends on the language and your level of experience. Some languages are easier to learn than others, but most people can learn the basics of a new language in a few weeks. To become proficient, it can take several months or even years of practice.",
    },
    {
      value: "item-3",
      title: "How many languages do I need to learn to become a software developer?",
      content:
        "You don't need to learn multiple languages to become a software developer, but it can be helpful. Most developers are proficient in at least one language, but knowing multiple languages can make you more versatile and marketable.",
    },
  ];
</script>
```
::

## Origin UI Examples

These are some examples that I found today over here [Origin UI](https://originui.com/accordions){rel="&#x22;nofollow&#x22;"}. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

### With Chevron

::prose-show-case
:docs-accordion-with-chevron

#code
```vue [DocsAccordionWithChevron.vue]
<script lang="ts" setup>
  const items = [
    {
      id: "1",
      value: "1",
      title: "What makes UI Thing different?",
      content:
        "UI Thing focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.",
    },
    {
      id: "2",
      value: "2",
      title: "How can I customize the components?",
      content:
        "Use our CSS variables for global styling, or class and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.",
    },
    {
      id: "3",
      value: "3",
      title: "Is UI Thing optimized for performance?",
      content:
        "Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.",
    },
    {
      id: "4",
      value: "4",
      title: "How accessible are the components?",
      content:
        "All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.",
    },
  ];
</script>

<template>
  <div class="mx-auto max-w-lg">
    <UiAccordion :items type="single" collapsible class="w-full" default-value="3">
      <template #trigger="{ item, open }">
        <UiAccordionTrigger class="text-[15px] leading-6 hover:no-underline">
          {{ item.title }}
          <template #icon>
            <Icon name="lucide:chevron-down" :class="['transition', open && 'rotate-180']" />
          </template>
        </UiAccordionTrigger>
      </template>
      <template #content="{ item }">
        <UiAccordionContent class="text-muted-foreground">{{ item.content }}</UiAccordionContent>
      </template>
    </UiAccordion>
  </div>
</template>
```
::

### With Chevron Left

::prose-show-case
:docs-accordion-with-chevron-left

#code
```vue [DocsAccordionWithChevronLeft.vue]
<script lang="ts" setup>
  const items = [
    {
      id: "1",
      value: "1",
      title: "What makes UI Thing different?",
      content:
        "UI Thing focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.",
    },
    {
      id: "2",
      value: "2",
      title: "How can I customize the components?",
      content:
        "Use our CSS variables for global styling, or class and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.",
    },
    {
      id: "3",
      value: "3",
      title: "Is UI Thing optimized for performance?",
      content:
        "Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.",
    },
    {
      id: "4",
      value: "4",
      title: "How accessible are the components?",
      content:
        "All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.",
    },
  ];
</script>

<template>
  <div class="mx-auto max-w-lg">
    <UiAccordion :items type="single" collapsible class="w-full" default-value="3">
      <template #trigger="{ item, open }">
        <UiAccordionTrigger
          :icon="''"
          class="justify-start gap-3 text-[15px] leading-6 hover:no-underline"
        >
          <Icon name="lucide:chevron-down" :class="['transition', open && 'rotate-180']" />
          {{ item.title }}
        </UiAccordionTrigger>
      </template>
      <template #content="{ item }">
        <UiAccordionContent class="text-muted-foreground">{{ item.content }}</UiAccordionContent>
      </template>
    </UiAccordion>
  </div>
</template>
```
::

### With Chevron & Icon

::prose-show-case
:docs-accordion-with-chevron-icon

#code
```vue [DocsAccordionWithChevronIcon.vue]
<script lang="ts" setup>
  const items = [
    {
      id: "1",
      icon: "lucide:command",
      value: "1",
      title: "What makes UI Thing different?",
      content:
        "UI Thing focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.",
    },
    {
      id: "2",
      icon: "lucide:eclipse",
      value: "2",
      title: "How can I customize the components?",
      content:
        "Use our CSS variables for global styling, or class and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.",
    },
    {
      id: "3",
      icon: "lucide:zap",
      value: "3",
      title: "Is UI Thing optimized for performance?",
      content:
        "Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.",
    },
    {
      id: "4",
      icon: "lucide:at-sign",
      value: "4",
      title: "How accessible are the components?",
      content:
        "All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.",
    },
  ];
</script>

<template>
  <div class="mx-auto max-w-lg">
    <UiAccordion :items type="single" collapsible class="w-full" default-value="3">
      <template #trigger="{ item }">
        <UiAccordionTrigger class="text-[15px] leading-6 hover:no-underline">
          <div class="flex items-center gap-3">
            <Icon :name="item.icon!" class="shrink-0 opacity-60" />
            {{ item.title }}
          </div>
        </UiAccordionTrigger>
      </template>
      <template #content="{ item }">
        <UiAccordionContent class="text-muted-foreground ps-7">{{
          item.content
        }}</UiAccordionContent>
      </template>
    </UiAccordion>
  </div>
</template>
```
::

### With Sub-Header & Chevron

::prose-show-case
:docs-accordion-with-chevron-sub-header

#code
```vue [DocsAccordionWithChevronSubHeader.vue]
<script lang="ts" setup>
  const items = [
    {
      id: "1",
      value: "1",
      title: "Connected accounts",
      sub: "Manage your linked social and work accounts",
      content:
        "Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.",
    },
    {
      id: "2",
      value: "2",
      title: "Notifications",
      sub: "Customize your notification preferences",
      content:
        "Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.",
    },
    {
      id: "3",
      value: "3",
      title: "2-step verification",
      sub: "Add an extra layer of security to your account",
      content:
        "Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.",
    },
    {
      id: "4",
      value: "4",
      title: "Contact support",
      sub: "We're here to help 24/7",
      content:
        "Our support team is available around the clock to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.",
    },
  ];
</script>

<template>
  <div class="mx-auto max-w-lg">
    <UiAccordion :items type="single" collapsible class="w-full" default-value="3">
      <template #trigger="{ item }">
        <UiAccordionTrigger class="text-[15px] leading-6 hover:no-underline">
          <div class="flex flex-col items-start space-y-1">
            {{ item.title }}
            <span v-if="item.sub" class="text-sm font-normal">{{ item.sub }}</span>
          </div>
        </UiAccordionTrigger>
      </template>
      <template #content="{ item }">
        <UiAccordionContent class="text-muted-foreground">{{ item.content }}</UiAccordionContent>
      </template>
    </UiAccordion>
  </div>
</template>
```
::

### With Icon, Sub-Header & Chevron

::prose-show-case
:docs-accordion-with-chevron-sub-header-icon

#code
```vue [DocsAccordionWithChevronSubHeaderIcon.vue]
<script lang="ts" setup>
  const items = [
    {
      id: "1",
      icon: "lucide:link-2",
      value: "1",
      title: "Connected accounts",
      sub: "Manage your linked social and work accounts",
      content:
        "Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.",
    },
    {
      id: "2",
      icon: "lucide:bell",
      value: "2",
      title: "Notifications",
      sub: "Customize your notification preferences",
      content:
        "Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.",
    },
    {
      id: "3",
      icon: "lucide:shield-check",
      value: "3",
      title: "2-step verification",
      sub: "Add an extra layer of security to your account",
      content:
        "Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.",
    },
    {
      id: "4",
      icon: "lucide:life-buoy",
      value: "4",
      title: "Contact support",
      sub: "We're here to help 24/7",
      content:
        "Our support team is available around the clock to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.",
    },
  ];
</script>

<template>
  <div class="mx-auto max-w-lg">
    <UiAccordion :items type="single" collapsible class="w-full" default-value="3">
      <template #trigger="{ item }">
        <UiAccordionTrigger class="text-[15px] leading-6 hover:no-underline">
          <div class="flex items-center gap-3">
            <UiFancyIcon size="md" circle :icon="item.icon" />
            <div class="flex flex-col items-start space-y-1">
              {{ item.title }}
              <span v-if="item.sub" class="text-sm font-normal">{{ item.sub }}</span>
            </div>
          </div>
        </UiAccordionTrigger>
      </template>
      <template #content="{ item }">
        <UiAccordionContent class="text-muted-foreground ps-12">{{
          item.content
        }}</UiAccordionContent>
      </template>
    </UiAccordion>
  </div>
</template>
```
::

### Tabs with Chevron

::prose-show-case
:docs-accordion-tabs-with-chevron

#code
```vue [DocsAccordionTabsWithChevron.vue]
<script lang="ts" setup>
  const items = [
    {
      id: "1",
      value: "1",
      title: "What makes UI Thing different?",
      content:
        "UI Thing focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.",
    },
    {
      id: "2",
      value: "2",
      title: "How can I customize the components?",
      content:
        "Use our CSS variables for global styling, or class and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.",
    },
    {
      id: "3",
      value: "3",
      title: "Is UI Thing optimized for performance?",
      content:
        "Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.",
    },
    {
      id: "4",
      value: "4",
      title: "How accessible are the components?",
      content:
        "All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.",
    },
  ];
</script>

<template>
  <div class="mx-auto max-w-lg p-2">
    <UiAccordion :items type="single" collapsible class="w-full space-y-2" default-value="3">
      <UiAccordionItem
        v-for="item in items"
        :key="item.id"
        :value="item.value"
        class="bg-background rounded-lg border px-4 py-1 last:border-b"
      >
        <UiAccordionTrigger class="w-full py-2 text-[15px] leading-6 hover:no-underline">
          {{ item.title }}
        </UiAccordionTrigger>
        <UiAccordionContent class="text-muted-foreground">
          {{ item.content }}
        </UiAccordionContent>
      </UiAccordionItem>
    </UiAccordion>
  </div>
</template>
```
::

### Tabs with Left Chevron

::prose-show-case
:docs-accordion-tabs-with-chevron-left

#code
```vue [DocsAccordionTabsWithChevronLeft.vue]
<script lang="ts" setup>
  const items = [
    {
      id: "1",
      value: "1",
      title: "What makes UI Thing different?",
      content:
        "UI Thing focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.",
    },
    {
      id: "2",
      value: "2",
      title: "How can I customize the components?",
      content:
        "Use our CSS variables for global styling, or class and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.",
    },
    {
      id: "3",
      value: "3",
      title: "Is UI Thing optimized for performance?",
      content:
        "Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.",
    },
    {
      id: "4",
      value: "4",
      title: "How accessible are the components?",
      content:
        "All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.",
    },
  ];
</script>

<template>
  <div class="mx-auto max-w-lg">
    <UiAccordion :items type="single" collapsible class="w-full space-y-2" default-value="3">
      <UiAccordionItem
        v-for="item in items"
        :key="item.id"
        :value="item.value"
        class="bg-background rounded-lg border px-4 last:border-b"
      >
        <UiAccordionTrigger
          :icon="''"
          class="justify-start gap-3 text-[15px] leading-6 hover:no-underline"
        >
          <Icon mode="svg" class="transition" name="lucide:chevron-down" />
          {{ item.title }}
        </UiAccordionTrigger>
        <UiAccordionContent class="text-muted-foreground">
          {{ item.content }}
        </UiAccordionContent>
      </UiAccordionItem>
    </UiAccordion>
  </div>
</template>
```
::

### Table with Chevron

::prose-show-case
:docs-accordion-table-with-chevron

#code
```vue [DocsAccordionTableWithChevron.vue]
<script lang="ts" setup>
  const items = [
    {
      id: "1",
      value: "1",
      title: "What makes UI Thing different?",
      content:
        "UI Thing focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.",
    },
    {
      id: "2",
      value: "2",
      title: "How can I customize the components?",
      content:
        "Use our CSS variables for global styling, or class and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.",
    },
    {
      id: "3",
      value: "3",
      title: "Is UI Thing optimized for performance?",
      content:
        "Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.",
    },
    {
      id: "4",
      value: "4",
      title: "How accessible are the components?",
      content:
        "All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.",
    },
  ];
</script>

<template>
  <div class="mx-auto max-w-lg">
    <UiAccordion :items type="single" collapsible class="w-full -space-y-px" default-value="3">
      <UiAccordionItem
        v-for="item in items"
        :key="item.id"
        :value="item.value"
        class="bg-background border px-4 py-1 first:rounded-t-lg last:rounded-b-lg last:border-b"
      >
        <UiAccordionTrigger class="w-full py-2 text-[15px] leading-6 hover:no-underline">
          {{ item.title }}
        </UiAccordionTrigger>
        <UiAccordionContent class="text-muted-foreground">
          {{ item.content }}
        </UiAccordionContent>
      </UiAccordionItem>
    </UiAccordion>
  </div>
</template>
```
::

### Table with Left Chevron

::prose-show-case
:docs-accordion-table-with-chevron-left

#code
```vue [DocsAccordionTableWithChevronLeft.vue]
<script lang="ts" setup>
  const items = [
    {
      id: "1",
      value: "1",
      title: "What makes UI Thing different?",
      content:
        "UI Thing focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.",
    },
    {
      id: "2",
      value: "2",
      title: "How can I customize the components?",
      content:
        "Use our CSS variables for global styling, or class and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.",
    },
    {
      id: "3",
      value: "3",
      title: "Is UI Thing optimized for performance?",
      content:
        "Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.",
    },
    {
      id: "4",
      value: "4",
      title: "How accessible are the components?",
      content:
        "All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.",
    },
  ];
</script>

<template>
  <div class="mx-auto max-w-lg">
    <UiAccordion :items type="single" collapsible class="w-full -space-y-px" default-value="3">
      <UiAccordionItem
        v-for="item in items"
        :key="item.id"
        :value="item.value"
        class="bg-background border px-4 py-1 first:rounded-t-lg last:rounded-b-lg last:border-b"
      >
        <UiAccordionTrigger
          :icon="''"
          class="justify-start gap-3 text-[15px] leading-6 hover:no-underline"
        >
          <Icon mode="svg" class="transition" name="lucide:chevron-down" />
          {{ item.title }}
        </UiAccordionTrigger>
        <UiAccordionContent class="text-muted-foreground">
          {{ item.content }}
        </UiAccordionContent>
      </UiAccordionItem>
    </UiAccordion>
  </div>
</template>
```
::

### Multi-Level

::prose-show-case
:docs-accordion-multi-level

#code
```vue [DocsAccordionMultiLevel.vue]
<script lang="ts" setup>
  const items = [
    {
      id: "1",
      title: "What makes UI Thing different?",
      collapsibles: [
        {
          title: "What about performance?",
          content: "We optimize every component for maximum performance and minimal bundle size.",
        },
        {
          title: "How is the documentation?",
          content:
            "Our documentation is comprehensive and includes live examples for every component.",
        },
      ],
    },
    {
      id: "2",
      title: "How can I customize the components?",
      collapsibles: [
        {
          title: "Can I use custom themes?",
          content:
            "Yes, our theming system is fully customizable and supports both light and dark modes.",
        },
        {
          title: "What about Tailwind support?",
          content: "We have first-class support for Tailwind CSS with custom utility classes.",
        },
      ],
    },
    {
      id: "3",
      title: "Is UI Thing optimized for performance?",
      collapsibles: [
        {
          title: "What's the bundle size impact?",
          content:
            "Our components are tree-shakeable and typically add minimal overhead to your bundle.",
          open: true,
        },
        {
          title: "How is code splitting handled?",
          content: "We support automatic code splitting for optimal loading performance.",
        },
      ],
    },
    {
      id: "4",
      title: "How accessible are the components?",
      collapsibles: [
        {
          title: "Which screen readers are supported?",
          content: "We test with NVDA, VoiceOver, and JAWS to ensure broad compatibility.",
        },
        {
          title: "What about keyboard navigation?",
          content:
            "Full keyboard navigation support is implemented following WAI-ARIA best practices.",
        },
      ],
    },
  ];
</script>

<template>
  <div class="mx-auto max-w-lg">
    <UiAccordion type="single" collapsible class="w-full -space-y-px" default-value="3">
      <UiAccordionItem
        v-for="item in items"
        :key="item.id"
        :value="item.id"
        class="bg-background overflow-hidden border first:rounded-t-lg last:rounded-b-lg last:border-b"
      >
        <UiAccordionTrigger
          :title="item.title"
          class="w-full px-4 py-3 text-[15px] leading-6 hover:no-underline"
        />
        <UiAccordionContent class="p-0 [&>div]:pb-0">
          <UiCollapsible
            v-for="collapsible in item.collapsibles"
            :key="collapsible.title"
            class="border-border bg-accent space-y-1 border-t px-4 py-3"
            :default-open="collapsible.open"
          >
            <UiCollapsibleTrigger
              class="flex gap-2 text-[15px] leading-6 font-semibold [&[data-state=open]>svg]:rotate-180"
            >
              <Icon
                name="lucide:chevron-down"
                mode="svg"
                class="mt-1 size-4 shrink-0 opacity-60 transition-transform duration-200"
                aria-hidden="true"
              />

              {{ collapsible.title }}
            </UiCollapsibleTrigger>
            <UiCollapsibleContent
              class="text-muted-foreground data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden ps-6 text-sm transition-all"
            >
              {{ collapsible.content }}
            </UiCollapsibleContent>
          </UiCollapsible>
        </UiAccordionContent>
      </UiAccordionItem>
    </UiAccordion>
  </div>
</template>
```
::

## API Reference

### Accordion Root

:prose-component-api{path="app/components/Ui/Accordion/Accordion.vue" sections="props,slots,events,exposed"}

### Accordion Content

:prose-component-api{path="app/components/Ui/Accordion/Content.vue" sections="props,slots,events,exposed"}

### Accordion Header

:prose-component-api{path="app/components/Ui/Accordion/Header.vue" sections="props,slots,events,exposed"}

### Accordion Item

:prose-component-api{path="app/components/Ui/Accordion/Item.vue" sections="props,slots,events,exposed"}

### Accordion Trigger

:prose-component-api{path="app/components/Ui/Accordion/Trigger.vue" sections="props,slots,events,exposed"}


# Alert

## Source code

Click :source-code-link{component="Alert"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add alert
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add alert
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add alert
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add alert
```
::

## Usage

### Basic

::prose-show-case
:docs-alert

#code
```vue [DocsAlert.vue]
<template>
  <div>
    <UiAlert title="Heads up" description="You have 23 new messages" icon="lucide:mail" />
  </div>
</template>
```
::

### Destructive

::prose-show-case
:docs-alert-destructive

#code
```vue [DocsAlertDestructive.vue]
<template>
  <div>
    <UiAlert
      class="mt-5"
      variant="destructive"
      title="Error"
      description="Your session has expired. Please log in again."
      icon="lucide:alert-circle"
    />
  </div>
</template>
```
::

### Border

::prose-show-case
:docs-alert-border

#code
```vue [DocsAlertBorder.vue]
<template>
  <div>
    <UiAlert
      class="border-l-primary border-l-8"
      title="New users"
      description="Over 25K new users joined today!"
      icon="lucide:users"
    />
  </div>
</template>
```
::

## Origin UI Examples

These are some examples that I found today over here [Origin UI](https://originui.com/alerts-notifications-banners){rel="&#x22;nofollow&#x22;"}. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

### Warning

::prose-show-case
:docs-alert-warning

#code
```vue [DocsAlertWarning.vue]
<template>
  <div>
    <UiAlert description="Some information is missing!">
      <template #icon>
        <Icon
          name="lucide:triangle-alert"
          class="mt-0.5 size-4 text-amber-500"
          aria-hidden="true"
        />
      </template>
    </UiAlert>
  </div>
</template>
```
::

### Warning Outline

::prose-show-case
:docs-alert-warning-outline

#code
```vue [DocsAlertWarningOutline.vue]
<template>
  <UiAlert
    icon="lucide:triangle-alert"
    variant="warning"
    description="Some information is missing!"
    icon-class="mt-0.5"
  />
</template>
```
::

### Error

::prose-show-case
:docs-alert-error

#code
```vue [DocsAlertError.vue]
<template>
  <div>
    <UiAlert description="An error occurred!">
      <template #icon>
        <Icon name="lucide:circle-alert" class="mt-0.5 size-4 text-red-500" aria-hidden="true" />
      </template>
    </UiAlert>
  </div>
</template>
```
::

### Error Outline

::prose-show-case
:docs-alert-error-outline

#code
```vue [DocsAlertErrorOutline.vue]
<template>
  <UiAlert
    icon="lucide:circle-alert"
    variant="destructive"
    icon-class="mt-0.5"
    description="An error occurred!"
  />
</template>
```
::

### Info

::prose-show-case
:docs-alert-info

#code
```vue [DocsAlertInfo.vue]
<template>
  <div>
    <UiAlert description="Just a quick note!">
      <template #icon>
        <Icon name="lucide:info" class="mt-0.5 size-4 text-blue-500" aria-hidden="true" />
      </template>
    </UiAlert>
  </div>
</template>
```
::

### Info Outline

::prose-show-case
:docs-alert-info-outline

#code
```vue [DocsAlertInfoOutline.vue]
<template>
  <UiAlert icon="lucide:info" variant="info" description="Just a quick note!" icon-class="mt-0.5" />
</template>
```
::

### Success

::prose-show-case
:docs-alert-success

#code
```vue [DocsAlertSuccess.vue]
<template>
  <div>
    <UiAlert description="Completed successfully!">
      <template #icon>
        <Icon
          name="lucide:circle-check"
          class="mt-0.5 size-4 text-emerald-500"
          aria-hidden="true"
        />
      </template>
    </UiAlert>
  </div>
</template>
```
::

### Success Outline

::prose-show-case
:docs-alert-success-outline

#code
```vue [DocsAlertSuccessOutline.vue]
<template>
  <UiAlert
    icon="lucide:circle-check"
    variant="success"
    icon-class="mt-0.5"
    description="Some information is missing!"
  />
</template>
```
::

### End Link

::prose-show-case
:docs-alert-end-link

#code
```vue [DocsAlertEndLink.vue]
<template>
  <div>
    <UiAlert
      icon-class="mt-0.5 size-4 text-amber-500"
      icon="lucide:triangle-alert"
      description="Some information is missing!"
    >
      <UiAlertDescription class="flex w-full items-center justify-between">
        Some information is missing!
        <NuxtLink
          href="#"
          class="group flex items-center gap-2 transition-colors hover:text-amber-500"
          >Add it
          <Icon
            name="lucide:arrow-right"
            class="size-4 shrink-0 transform transition-transform group-hover:translate-x-1"
        /></NuxtLink>
      </UiAlertDescription>
    </UiAlert>
  </div>
</template>
```
::

### Sub Data

::prose-show-case
:docs-alert-sub-data

#code
```vue [DocsAlertSubData.vue]
<template>
  <UiAlert
    icon="lucide:circle-alert"
    icon-class="mt-0.5 size-4 shrink-0 text-red-500 opacity-60"
    class="border-border rounded-lg border px-4 py-3"
  >
    <div class="grow space-y-1">
      <p class="text-sm font-medium">Password does not meet requirements:</p>
      <ul class="text-muted-foreground list-inside list-disc text-sm">
        <li>Minimum 8 characters</li>
        <li>Include a special character</li>
      </ul>
    </div>
  </UiAlert>
</template>
```
::

### Close Button

::prose-show-case
:docs-alert-close-button

#code
```vue [DocsAlertCloseButton.vue]
<template>
  <TransitionScale :scale="0.98">
    <UiAlert
      v-model="open"
      icon="lucide:circle-alert"
      variant="destructive"
      icon-class="mt-0.5"
      description="An error occurred!"
    >
      <UiAlertDescription class="flex w-full items-center justify-between">
        This is a description of the error that occurred.
        <UiButton variant="ghost" size="icon-xs" class="size-5" @click="open = false">
          <Icon name="lucide:x" class="size-3.5" />
        </UiButton>
      </UiAlertDescription>
    </UiAlert>
  </TransitionScale>
</template>

<script lang="ts" setup>
  const open = ref(true);

  watch(open, (value) => {
    if (!value) {
      setTimeout(() => {
        open.value = true;
      }, 1000);
    }
  });
</script>
```
::

## Notifications

### Close Button w/ Undo

::prose-show-case
:docs-alert-notification-single-button

#code
```vue [DocsAlertNotificationSingleButton.vue]
<template>
  <TransitionScale :scale="0.98">
    <UiAlert
      v-if="open"
      icon="lucide:circle-check"
      class="items-center"
      icon-class="text-emerald-500"
    >
      <UiAlertDescription class="flex items-center justify-between">
        Your profile has been updated!
        <div class="flex items-center gap-3">
          <UiButton class="text-xs" size="xs" @click="useSonner('Changes reverted')">Undo</UiButton>
          <UiButton variant="ghost" size="icon-xs" @click="open = false">
            <Icon name="lucide:x" class="size-3.5" />
          </UiButton>
        </div>
      </UiAlertDescription>
    </UiAlert>
  </TransitionScale>
</template>

<script lang="ts" setup>
  const open = ref(true);

  watch(open, (value) => {
    if (!value) {
      setTimeout(() => {
        open.value = true;
      }, 1000);
    }
  });
</script>
```
::

### Double Button

::prose-show-case
:docs-alert-notification-double-button

#code
```vue [DocsAlertNotificationDoubleButton.vue]
<template>
  <TransitionScale :scale="0.98">
    <UiAlert
      v-if="open"
      icon="lucide:circle-check"
      class="items-center"
      icon-class="text-emerald-500"
    >
      <UiAlertDescription class="flex items-center justify-between">
        Message sent
        <div class="flex items-center gap-1">
          <UiButton variant="link" class="text-sm" size="xs">View</UiButton>
          <span>•</span>
          <UiButton variant="link" class="text-sm" size="xs">Undo</UiButton>
          <UiButton variant="ghost" size="icon-xs" class="ml-2 size-6" @click="open = false">
            <Icon name="lucide:x" class="size-3.5" />
          </UiButton>
        </div>
      </UiAlertDescription>
    </UiAlert>
  </TransitionScale>
</template>

<script lang="ts" setup>
  const open = ref(true);

  watch(open, (value) => {
    if (!value) {
      setTimeout(() => {
        open.value = true;
      }, 1000);
    }
  });
</script>
```
::

### Success Learn More

::prose-show-case
:docs-alert-notification-success-more

#code
```vue [DocsAlertNotificationSuccessMore.vue]
<template>
  <div class="mx-auto max-w-[400px]">
    <TransitionScale :scale="0.98">
      <UiAlert v-if="open" icon="lucide:circle-check" icon-class="text-emerald-500 mt-0.5">
        <UiAlertDescription class="mb-1 flex items-center justify-between font-medium">
          Your request was completed!
          <UiButton variant="ghost" size="icon-xs" class="size-5" @click="open = false">
            <Icon name="lucide:x" class="size-3.5" />
          </UiButton>
        </UiAlertDescription>
        <p class="text-muted-foreground mb-3 text-sm">
          It demonstrates that the task or request has been processed.
        </p>
        <UiButton class="text-xs" size="xs">Learn more</UiButton>
      </UiAlert>
    </TransitionScale>
  </div>
</template>

<script lang="ts" setup>
  const open = ref(true);

  watch(open, (value) => {
    if (!value) {
      setTimeout(() => {
        open.value = true;
      }, 1000);
    }
  });
</script>
```
::

### Privacy

::prose-show-case
:docs-alert-notification-privacy

#code
```vue [DocsAlertNotificationPrivacy.vue]
<template>
  <div class="mx-auto max-w-[400px]">
    <TransitionScale :scale="0.98">
      <UiAlert v-if="open">
        <UiAlertDescription class="mb-1 flex items-center justify-between font-medium">
          We Value Your Privacy 🍪
          <UiButton variant="ghost" size="icon-xs" class="size-5" @click="open = false">
            <Icon name="lucide:x" class="size-3.5" />
          </UiButton>
        </UiAlertDescription>
        <p class="text-muted-foreground mb-3 text-sm">
          We use cookies to improve your experience, and show personalized content.
        </p>
        <div class="flex items-center gap-2">
          <UiButton class="text-xs" size="xs">Accept</UiButton>
          <UiButton class="text-xs" size="xs" variant="outline">Decline</UiButton>
        </div>
      </UiAlert>
    </TransitionScale>
  </div>
</template>

<script lang="ts" setup>
  const open = ref(true);

  watch(open, (value) => {
    if (!value) {
      setTimeout(() => {
        open.value = true;
      }, 1000);
    }
  });
</script>
```
::

### Version Update

::prose-show-case
:docs-alert-notification-version

#code
```vue [DocsAlertNotificationVersion.vue]
<template>
  <div class="mx-auto max-w-[400px]">
    <TransitionScale :scale="0.98">
      <UiAlert v-if="open">
        <template #icon>
          <UiFancyIcon size="md" circle>
            <Icon name="lucide:refresh-cw" class="size-4" />
          </UiFancyIcon>
        </template>
        <UiAlertDescription class="mb-1 flex items-center justify-between font-medium">
          Version 1.4 is now available!
          <UiButton variant="ghost" size="icon-xs" class="size-5" @click="open = false">
            <Icon name="lucide:x" class="size-3.5" />
          </UiButton>
        </UiAlertDescription>
        <p class="text-muted-foreground mb-3 text-sm">
          This update contains several bug fixes and performance improvements.
        </p>
        <div class="flex items-center gap-2">
          <UiButton class="text-xs" size="xs">Install</UiButton>
          <UiButton class="text-xs" size="xs" variant="link">Later</UiButton>
        </div>
      </UiAlert>
    </TransitionScale>
  </div>
</template>

<script lang="ts" setup>
  const open = ref(true);

  watch(open, (value) => {
    if (!value) {
      setTimeout(() => {
        open.value = true;
      }, 1000);
    }
  });
</script>
```
::

### Mentioned

::prose-show-case
:docs-alert-notification-mention

#code
```vue [DocsAlertNotificationMention.vue]
<template>
  <div class="mx-auto max-w-[400px]">
    <TransitionScale :scale="0.98">
      <UiAlert v-if="open">
        <template #icon>
          <UiAvatar class="size-8">
            <UiAvatarFallback>MP</UiAvatarFallback>
            <UiAvatarImage src="https://i.pravatar.cc/300" alt="Mary Palmer" />
          </UiAvatar>
        </template>
        <UiAlertDescription class="text-muted-foreground mb-1 flex items-start justify-between">
          <div>
            <a class="text-foreground font-medium hover:underline" href="#"> Mary Palmer </a>
            mentioned you in
            <a class="text-foreground font-medium hover:underline" href="#">
              project-campaign-02
            </a>
          </div>
          <UiButton variant="ghost" size="icon-xs" class="size-5" @click="open = false">
            <Icon name="lucide:x" class="size-3.5" />
          </UiButton>
        </UiAlertDescription>
        <p class="text-muted-foreground mb-3 text-sm">2 min ago</p>
        <div class="flex items-center gap-2">
          <UiButton class="text-xs" size="xs">Accept</UiButton>
          <UiButton class="text-xs" size="xs" variant="outline">Decline</UiButton>
        </div>
      </UiAlert>
    </TransitionScale>
  </div>
</template>

<script lang="ts" setup>
  const open = ref(true);

  watch(open, (value) => {
    if (!value) {
      setTimeout(() => {
        open.value = true;
      }, 1000);
    }
  });
</script>
```
::

## API Reference

### Alert

:prose-component-api{path="app/components/Ui/Alert/Alert.vue" sections="props,slots,events,exposed"}

### Alert Description

:prose-component-api{path="app/components/Ui/Alert/Description.vue" sections="props,slots,events,exposed"}

### Alert Title

:prose-component-api{path="app/components/Ui/Alert/Title.vue" sections="props,slots,events,exposed"}


# Alert Dialog

## Source code

Click :source-code-link{component="AlertDialog"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add alert-dialog
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add alert-dialog
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add alert-dialog
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add alert-dialog
```
::

## Usage

### Simple

::prose-show-case
:docs-alert-dialog

#code
```vue [DocsAlertDialog.vue]
<template>
  <div class="flex justify-center">
    <UiAlertDialog v-model:open="model">
      <UiAlertDialogTrigger as-child>
        <UiButton variant="outline">Show Dialog</UiButton>
      </UiAlertDialogTrigger>
      <UiAlertDialogContent @escape-key-down="showMessage('Escape key pressed')">
        <UiAlertDialogHeader>
          <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
          <UiAlertDialogDescription>
            This action cannot be undone. This will permanently delete your account and remove your
            data from our servers.
          </UiAlertDialogDescription>
        </UiAlertDialogHeader>
        <UiAlertDialogFooter>
          <UiAlertDialogCancel @click="showMessage('Action cancelled')" />
          <UiAlertDialogAction @click="showMessage('Action confirmed!')" />
        </UiAlertDialogFooter>
      </UiAlertDialogContent>
    </UiAlertDialog>
  </div>
</template>

<script lang="ts" setup>
  const showMessage = (message: string) => {
    useSonner(message);
  };
  const model = ref(false);
</script>
```
::

### Stacked Left

::prose-show-case
:docs-alert-dialog-stacked-left

#code
```vue [DocsAlertDialogStackedLeft.vue]
<template>
  <div class="flex justify-center">
    <UiAlertDialog>
      <UiAlertDialogTrigger as-child>
        <UiButton variant="outline">Save Changes</UiButton>
      </UiAlertDialogTrigger>
      <UiAlertDialogContent class="max-w-[400px]">
        <UiFancyIcon type="light" color="success" circle icon="lucide:check" />
        <UiAlertDialogHeader>
          <UiAlertDialogTitle class="text-left">Save Successfully</UiAlertDialogTitle>
          <UiAlertDialogDescription class="text-left">
            Your changes have been saved successfully. Feel free to continue editing or close this
            dialog.
          </UiAlertDialogDescription>
        </UiAlertDialogHeader>
        <UiAlertDialogFooter class="grid grid-cols-2">
          <UiAlertDialogCancel />
          <UiAlertDialogAction />
        </UiAlertDialogFooter>
      </UiAlertDialogContent>
    </UiAlertDialog>
  </div>
</template>
```
::

### Media

::prose-show-case
:docs-alert-dialog-media

#code
```vue [DocsAlertDialogMedia.vue]
<template>
  <div class="flex justify-center">
    <UiAlertDialog>
      <UiAlertDialogTrigger as-child>
        <UiButton variant="outline">Post Blog</UiButton>
      </UiAlertDialogTrigger>
      <UiAlertDialogContent class="max-w-[400px]">
        <img
          src="https://images.unsplash.com/photo-1515865404355-ddb5b0910878?q=60&w=2969&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          class="h-[200px] w-full rounded-lg object-cover shadow-xs"
        />
        <UiAlertDialogHeader>
          <UiAlertDialogTitle class="text-center">Blog post published</UiAlertDialogTitle>
          <UiAlertDialogDescription class="text-center">
            This blog post has been published. Team members will be able to edit this post and
            republish changes.
          </UiAlertDialogDescription>
        </UiAlertDialogHeader>
        <UiAlertDialogFooter class="grid grid-cols-2">
          <UiAlertDialogCancel> <Icon name="lucide:copy" /> Copy Link </UiAlertDialogCancel>
          <UiAlertDialogAction>Finish</UiAlertDialogAction>
        </UiAlertDialogFooter>
      </UiAlertDialogContent>
    </UiAlertDialog>
  </div>
</template>
```
::

### Alert w/ Icon

::prose-show-case
:docs-alert-dialog-with-icon

#code
```vue [DocsAlertDialogWithIcon.vue]
<template>
  <div class="flex justify-center">
    <UiAlertDialog>
      <UiAlertDialogTrigger as-child>
        <UiButton variant="outline">Alert dialog with icon</UiButton>
      </UiAlertDialogTrigger>
      <UiAlertDialogContent>
        <div class="flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4">
          <div
            class="border-border flex size-9 shrink-0 items-center justify-center rounded-full border"
            aria-hidden="true"
          >
            <Icon name="lucide:circle-alert" class="size-4 opacity-80" />
          </div>
          <UiAlertDialogHeader>
            <UiAlertDialogTitle>Are you sure?</UiAlertDialogTitle>
            <UiAlertDialogDescription>
              Are you sure you want to delete your account? All your data will be removed.
            </UiAlertDialogDescription>
          </UiAlertDialogHeader>
        </div>
        <UiAlertDialogFooter>
          <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
          <UiAlertDialogAction>Confirm</UiAlertDialogAction>
        </UiAlertDialogFooter>
      </UiAlertDialogContent>
    </UiAlertDialog>
  </div>
</template>
```
::


# Animated Tooltip

## Source code

Click :source-code-link{component="AnimatedTooltip.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add animated-tooltip
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add animated-tooltip
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add animated-tooltip
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add animated-tooltip
```
::

## Anatomy

Pass a list of `items` to the component. Each item should contain an image, title, and optionally a description.

```vue [AnimatedTooltip Anatomy.vue]
<template>
  <div class="flex">
    <UiAnimatedTooltip :items />
  </div>
</template>

<script lang="ts" setup>
  const items = [
    {
      id: "1",
      title: "John Doe",
      description: "Software Engineer",
      image: "https://i.pravatar.cc/150?img=1",
    },
    // ... more items
  ];
</script>
```

## Usage

### Basic

Display a group of avatars with animated tooltips that appear on hover. The tooltips follow mouse movement with smooth spring animations.

::prose-show-case
:docs-animated-tooltip

#code
```vue [DocsAnimatedTooltip.vue]
<template>
  <div class="flex items-center justify-center py-20">
    <UiAnimatedTooltip :items="people" />
  </div>
</template>

<script lang="ts" setup>
  const people = [
    {
      id: "1",
      title: "John Doe",
      description: "Software Engineer",
      image: "https://i.pravatar.cc/150?img=1",
    },
    {
      id: "2",
      title: "Jane Smith",
      description: "Product Designer",
      image: "https://i.pravatar.cc/150?img=5",
    },
    {
      id: "3",
      title: "Mike Johnson",
      description: "DevOps Engineer",
      image: "https://i.pravatar.cc/150?img=8",
    },
    {
      id: "4",
      title: "Sarah Williams",
      description: "UX Researcher",
      image: "https://i.pravatar.cc/150?img=9",
    },
    {
      id: "5",
      title: "Tom Brown",
      description: "Backend Developer",
      image: "https://i.pravatar.cc/150?img=12",
    },
  ];
</script>
```
::

### Without Description

You can omit the description field to show only the title in the tooltip.

::prose-show-case
:docs-animated-tooltip-no-description

#code
```vue [DocsAnimatedTooltipNoDescription.vue]
<template>
  <div class="flex items-center justify-center py-20">
    <UiAnimatedTooltip :items="team" />
  </div>
</template>

<script lang="ts" setup>
  const team = [
    {
      id: "1",
      title: "Alex Turner",
      image: "https://i.pravatar.cc/150?img=3",
    },
    {
      id: "2",
      title: "Emma Davis",
      image: "https://i.pravatar.cc/150?img=10",
    },
    {
      id: "3",
      title: "Chris Martin",
      image: "https://i.pravatar.cc/150?img=7",
    },
    {
      id: "4",
      title: "Lisa Anderson",
      image: "https://i.pravatar.cc/150?img=16",
    },
  ];
</script>
```
::

### Large Group

The component works well with larger groups of people. The avatars automatically stack with negative margin.

::prose-show-case
:docs-animated-tooltip-large

#code
```vue [DocsAnimatedTooltipLarge.vue]
<template>
  <div class="flex items-center justify-center py-20">
    <UiAnimatedTooltip :items="teamMembers" />
  </div>
</template>

<script lang="ts" setup>
  const teamMembers = [
    {
      id: "1",
      title: "John Doe",
      description: "CEO",
      image: "https://i.pravatar.cc/150?img=1",
    },
    {
      id: "2",
      title: "Jane Smith",
      description: "CTO",
      image: "https://i.pravatar.cc/150?img=5",
    },
    {
      id: "3",
      title: "Mike Johnson",
      description: "Lead Developer",
      image: "https://i.pravatar.cc/150?img=8",
    },
    {
      id: "4",
      title: "Sarah Williams",
      description: "Designer",
      image: "https://i.pravatar.cc/150?img=9",
    },
    {
      id: "5",
      title: "Tom Brown",
      description: "Developer",
      image: "https://i.pravatar.cc/150?img=12",
    },
    {
      id: "6",
      title: "Emily Davis",
      description: "Marketing",
      image: "https://i.pravatar.cc/150?img=10",
    },
    {
      id: "7",
      title: "David Wilson",
      description: "Sales",
      image: "https://i.pravatar.cc/150?img=13",
    },
    {
      id: "8",
      title: "Lisa Anderson",
      description: "HR Manager",
      image: "https://i.pravatar.cc/150?img=16",
    },
  ];
</script>
```
::

## Features

- **Dynamic Animation**: Tooltips animate in with smooth spring physics using Motion V
- **Mouse Tracking**: Tooltips rotate and translate based on mouse position for a natural feel
- **Auto-generated IDs**: If no ID is provided, the component automatically generates unique IDs
- **Flexible Content**: Support for title and optional description in tooltips
- **Stacked Layout**: Avatars stack with negative margin for a compact group display
- **Hover Effects**: Smooth scale and z-index transitions on hover

## Props

The component accepts an `items` prop with the following interface:

```ts
interface Item {
  id?: string; // Optional: Auto-generated if not provided
  title: string; // Required: Displayed in tooltip
  description?: string; // Optional: Secondary text in tooltip
  image: string; // Required: Avatar image URL
}
```

## Customization

You can customize the component by modifying the styles directly in the component file:

- **Avatar size**: Change `size-14` class on the image element
- **Tooltip styling**: Modify the tooltip container classes
- **Animation parameters**: Adjust `stiffness` and `damping` in the Motion component
- **Gradient colors**: Update the `via-emerald-500` and `via-sky-500` classes for different accent colors


# Aspect Ratio

## Source code

Click :source-code-link{component="AspectRatio"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add aspect-ratio
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add aspect-ratio
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add aspect-ratio
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add aspect-ratio
```
::

## Usage

Right click the image to perform different actions.

::prose-show-case
:docs-aspect-ratio

#code
```vue [DocsAspectRatio.vue]
<template>
  <div>
    <UiAspectRatio :ratio="16 / 9">
      <UiContextMenu>
        <UiContextMenuTrigger as-child>
          <img
            src="https://cdn.pixabay.com/photo/2023/05/02/21/08/river-7966163_1280.png"
            alt="Snow Lake"
            class="h-full w-full rounded-md object-cover"
          />
        </UiContextMenuTrigger>
        <UiContextMenuContent class="w-[150px]">
          <UiContextMenuGroup>
            <UiContextMenuItem @select="showMessage('Now sharing...')">Share</UiContextMenuItem>
            <UiContextMenuItem @select="showMessage('Moving image...')">Move</UiContextMenuItem>
            <UiContextMenuItem @select="showMessage('Please hold as we rename the image...')"
              >Rename</UiContextMenuItem
            >
          </UiContextMenuGroup>
          <UiContextMenuSeparator />
          <UiContextMenuGroup>
            <UiContextMenuItem @select="showMessage('Deleting the image...')"
              >Delete</UiContextMenuItem
            >
          </UiContextMenuGroup>
        </UiContextMenuContent>
      </UiContextMenu>
    </UiAspectRatio>
  </div>
</template>

<script lang="ts" setup>
  const showMessage = (message: string) => {
    useSonner(message);
  };
</script>
```
::


# Attachment

## Source code

Click :source-code-link{component="Attachment"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add attachment
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add attachment
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add attachment
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add attachment
```
::

## Usage

The `Attachment` component displays a file or image attachment, its media, name, and metadata, with optional actions and upload state. Use it for files and images in chat composers, message threads, and upload lists.

::prose-show-case
:docs-attachment-demo

#code
```vue [DocsAttachmentDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-3 py-12">
    <UiAttachmentGroup>
      <template v-for="image in images" :key="image.name">
        <UiAttachment orientation="vertical">
          <UiAttachmentMedia variant="image">
            <img :src="image.src" :alt="image.alt" />
          </UiAttachmentMedia>
          <UiAttachmentContent>
            <UiAttachmentTitle>{{ image.name }}</UiAttachmentTitle>
            <UiAttachmentDescription>{{ image.meta }}</UiAttachmentDescription>
          </UiAttachmentContent>
        </UiAttachment>
      </template>
    </UiAttachmentGroup>
    <UiAttachment state="uploading" class="w-full">
      <UiAttachmentMedia>
        <Icon name="lucide:loader-circle" class="animate-spin" data-slot="spinner" />
      </UiAttachmentMedia>
      <UiAttachmentContent>
        <UiAttachmentTitle>sales-dashboard.pdf</UiAttachmentTitle>
        <UiAttachmentDescription>Uploading · 64%</UiAttachmentDescription>
      </UiAttachmentContent>
      <UiAttachmentActions>
        <UiAttachmentAction aria-label="Cancel upload">
          <Icon name="lucide:x" />
        </UiAttachmentAction>
      </UiAttachmentActions>
    </UiAttachment>
    <UiAttachment class="w-full">
      <UiAttachmentMedia>
        <Icon name="lucide:file-code" />
      </UiAttachmentMedia>
      <UiAttachmentContent>
        <UiAttachmentTitle>message-renderer.vue</UiAttachmentTitle>
        <UiAttachmentDescription>TypeScript · 12 KB</UiAttachmentDescription>
      </UiAttachmentContent>
      <UiAttachmentActions>
        <UiAttachmentAction aria-label="Remove message-renderer.vue">
          <Icon name="lucide:x" />
        </UiAttachmentAction>
      </UiAttachmentActions>
    </UiAttachment>
  </div>
</template>

<script lang="ts" setup>
  const images = [
    {
      name: "workspace.png",
      meta: "PNG · 820 KB",
      src: "https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80",
      alt: "Workspace",
    },
    {
      name: "desk-reference.jpg",
      meta: "JPG · 1.1 MB",
      src: "https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80",
      alt: "Desk",
    },
    {
      name: "office-reference.jpg",
      meta: "JPG · 940 KB",
      src: "https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80",
      alt: "Office",
    },
  ];
</script>
```
::

## Anatomy

```vue [Attachment Anatomy.vue] lines
<template>
  <UiAttachmentGroup>
    <UiAttachment>
      <UiAttachmentMedia />
      <UiAttachmentContent>
        <UiAttachmentTitle />
        <UiAttachmentDescription />
      </UiAttachmentContent>
      <UiAttachmentActions>
        <UiAttachmentAction />
      </UiAttachmentActions>
      <UiAttachmentTrigger />
    </UiAttachment>
  </UiAttachmentGroup>
</template>
```

Wrap multiple attachments in `UiAttachmentGroup` to lay them out in a scrollable, snapping row.

## Features

- Icon and image media through `UiAttachmentMedia`
- Upload states: `idle`, `uploading`, `processing`, `error`, and `done` with built-in styling and a shimmer while in progress
- Three sizes and horizontal or vertical orientation
- A full-card `UiAttachmentTrigger` that opens a link or dialog while the actions stay independently clickable
- Scrollable, snapping `UiAttachmentGroup` with an edge fade
- Every part renders through `Primitive`, so `as` / `as-child` and Vue `class` overrides work on any part

## Examples

### Image

Set `variant="image"` on `UiAttachmentMedia` and render an `<img>` inside it. Use `orientation="vertical"` to stack the media above the content.

::prose-show-case
:docs-attachment-image-demo

#code
```vue [DocsAttachmentImageDemo.vue]
<template>
  <div class="mx-auto w-full max-w-sm py-12">
    <UiAttachmentGroup class="w-full">
      <template v-for="image in images" :key="image.name">
        <UiAttachment orientation="vertical">
          <UiAttachmentMedia variant="image">
            <img :src="image.src" :alt="image.alt" />
          </UiAttachmentMedia>
          <UiAttachmentContent>
            <UiAttachmentTitle>{{ image.name }}</UiAttachmentTitle>
            <UiAttachmentDescription>{{ image.meta }}</UiAttachmentDescription>
          </UiAttachmentContent>
          <UiAttachmentActions>
            <UiAttachmentAction :aria-label="`Remove ${image.name}`">
              <Icon name="lucide:x" />
            </UiAttachmentAction>
          </UiAttachmentActions>
          <UiAttachmentTrigger as-child>
            <a
              :href="image.src"
              target="_blank"
              rel="noreferrer"
              :aria-label="`Open ${image.name}`"
            />
          </UiAttachmentTrigger>
        </UiAttachment>
      </template>
    </UiAttachmentGroup>
  </div>
</template>

<script lang="ts" setup>
  const images = [
    {
      name: "workspace.png",
      meta: "PNG · 820 KB",
      src: "https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80",
      alt: "Workspace",
    },
    {
      name: "desk-reference.jpg",
      meta: "JPG · 1.1 MB",
      src: "https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80",
      alt: "Desk",
    },
    {
      name: "office-reference.jpg",
      meta: "JPG · 940 KB",
      src: "https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80",
      alt: "Office",
    },
  ];
</script>
```
::

### States

Set `state` to reflect the upload lifecycle. `uploading` and `processing` shimmer the title, and `error` switches to a destructive treatment.

::prose-show-case
:docs-attachment-states-demo

#code
```vue [DocsAttachmentStatesDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-2 py-12">
    <UiAttachment state="idle" class="w-full">
      <UiAttachmentMedia>
        <Icon name="lucide:clock" />
      </UiAttachmentMedia>
      <UiAttachmentContent>
        <UiAttachmentTitle>selected-file.pdf</UiAttachmentTitle>
        <UiAttachmentDescription>Ready to upload</UiAttachmentDescription>
      </UiAttachmentContent>
      <UiAttachmentActions>
        <UiAttachmentAction aria-label="Remove selected-file.pdf">
          <Icon name="lucide:x" />
        </UiAttachmentAction>
      </UiAttachmentActions>
    </UiAttachment>
    <UiAttachment state="uploading" class="w-full">
      <UiAttachmentMedia>
        <Icon name="lucide:loader-circle" class="animate-spin" data-slot="spinner" />
      </UiAttachmentMedia>
      <UiAttachmentContent>
        <UiAttachmentTitle>design-system.zip</UiAttachmentTitle>
        <UiAttachmentDescription>Uploading · 64%</UiAttachmentDescription>
      </UiAttachmentContent>
      <UiAttachmentActions>
        <UiAttachmentAction aria-label="Cancel upload">
          <Icon name="lucide:x" />
        </UiAttachmentAction>
      </UiAttachmentActions>
    </UiAttachment>
    <UiAttachment state="processing" class="w-full">
      <UiAttachmentMedia>
        <Icon name="lucide:file-text" />
      </UiAttachmentMedia>
      <UiAttachmentContent>
        <UiAttachmentTitle>market-research.pdf</UiAttachmentTitle>
        <UiAttachmentDescription>Processing document</UiAttachmentDescription>
      </UiAttachmentContent>
      <UiAttachmentActions>
        <UiAttachmentAction aria-label="Remove market-research.pdf">
          <Icon name="lucide:x" />
        </UiAttachmentAction>
      </UiAttachmentActions>
    </UiAttachment>
    <UiAttachment state="error" class="w-full">
      <UiAttachmentMedia>
        <Icon name="lucide:file-warning" />
      </UiAttachmentMedia>
      <UiAttachmentContent>
        <UiAttachmentTitle>financial-model.xlsx</UiAttachmentTitle>
        <UiAttachmentDescription> Upload failed. Try again. </UiAttachmentDescription>
      </UiAttachmentContent>
      <UiAttachmentActions>
        <UiAttachmentAction aria-label="Retry upload">
          <Icon name="lucide:refresh-cw" />
        </UiAttachmentAction>
        <UiAttachmentAction aria-label="Remove financial-model.xlsx">
          <Icon name="lucide:x" />
        </UiAttachmentAction>
      </UiAttachmentActions>
    </UiAttachment>
    <UiAttachment state="done" class="w-full">
      <UiAttachmentMedia>
        <Icon name="lucide:check" />
      </UiAttachmentMedia>
      <UiAttachmentContent>
        <UiAttachmentTitle>uploaded-report.pdf</UiAttachmentTitle>
        <UiAttachmentDescription>Uploaded · 1.8 MB</UiAttachmentDescription>
      </UiAttachmentContent>
      <UiAttachmentActions>
        <UiAttachmentAction aria-label="Remove uploaded-report.pdf">
          <Icon name="lucide:x" />
        </UiAttachmentAction>
      </UiAttachmentActions>
    </UiAttachment>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Sizes

Use `size` to switch between `default`, `sm`, and `xs`.

::prose-show-case
:docs-attachment-sizes-demo

#code
```vue [DocsAttachmentSizesDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-3 py-12">
    <UiAttachment size="default" class="w-full">
      <UiAttachmentMedia>
        <Icon name="lucide:file-text" />
      </UiAttachmentMedia>
      <UiAttachmentContent>
        <UiAttachmentTitle>Default attachment</UiAttachmentTitle>
        <UiAttachmentDescription>PDF · 2.4 MB</UiAttachmentDescription>
      </UiAttachmentContent>
    </UiAttachment>
    <UiAttachment size="sm" class="w-full">
      <UiAttachmentMedia>
        <Icon name="lucide:file-text" />
      </UiAttachmentMedia>
      <UiAttachmentContent>
        <UiAttachmentTitle>Small attachment</UiAttachmentTitle>
        <UiAttachmentDescription>PDF · 2.4 MB</UiAttachmentDescription>
      </UiAttachmentContent>
    </UiAttachment>
    <UiAttachment size="xs" class="w-full">
      <UiAttachmentMedia>
        <Icon name="lucide:file-text" />
      </UiAttachmentMedia>
      <UiAttachmentContent>
        <UiAttachmentTitle>Extra small attachment</UiAttachmentTitle>
      </UiAttachmentContent>
    </UiAttachment>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Group

Wrap attachments in `UiAttachmentGroup` to lay them out in a horizontally scrollable, snapping row with an edge fade.

::prose-show-case
:docs-attachment-group-demo

#code
```vue [DocsAttachmentGroupDemo.vue]
<template>
  <div class="mx-auto w-full max-w-sm py-12">
    <UiAttachmentGroup class="w-full">
      <template v-for="item in items" :key="item.name">
        <UiAttachment class="w-64">
          <UiAttachmentMedia v-if="item.src" variant="image">
            <img :src="item.src" :alt="item.name" />
          </UiAttachmentMedia>

          <UiAttachmentMedia v-if="item.icon">
            <Icon :name="item.icon" />
          </UiAttachmentMedia>

          <UiAttachmentContent>
            <UiAttachmentTitle>{{ item.name }}</UiAttachmentTitle>
            <UiAttachmentDescription>{{ item.meta }}</UiAttachmentDescription>
          </UiAttachmentContent>
          <UiAttachmentActions>
            <UiAttachmentAction :aria-label="`Remove ${item.name}`">
              <Icon name="lucide:x" />
            </UiAttachmentAction>
          </UiAttachmentActions>
        </UiAttachment>
      </template>
    </UiAttachmentGroup>
  </div>
</template>

<script lang="ts" setup>
  interface Item {
    name: string;
    meta: string;
    icon?: string;
    src?: string;
  }

  const items: Item[] = [
    { name: "briefing-notes.pdf", meta: "PDF · 1.4 MB", icon: "lucide:file-text" },
    {
      name: "workspace.png",
      meta: "PNG · 820 KB",
      src: "https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80",
    },
    { name: "customers.csv", meta: "CSV · 18 KB", icon: "lucide:table" },
    { name: "renderer.vue", meta: "Vue · 12 KB", icon: "lucide:file-code" },
  ];
</script>
```
::

### Trigger

Add an `UiAttachmentTrigger` to make the whole card open a link or dialog. It fills the card behind the actions, so the actions stay clickable.

::prose-show-case
:docs-attachment-trigger-demo

#code
```vue [DocsAttachmentTriggerDemo.vue]
<template>
  <div class="mx-auto w-full max-w-sm py-12">
    <UiDialog>
      <UiAttachment class="w-full">
        <UiAttachmentMedia>
          <Icon name="lucide:file-search" />
        </UiAttachmentMedia>
        <UiAttachmentContent>
          <UiAttachmentTitle>research-summary.pdf</UiAttachmentTitle>
          <UiAttachmentDescription>Open preview dialog</UiAttachmentDescription>
        </UiAttachmentContent>
        <UiAttachmentActions>
          <UiAttachmentAction aria-label="Copy link">
            <Icon name="lucide:copy" />
          </UiAttachmentAction>
          <UiAttachmentAction aria-label="Remove research-summary.pdf">
            <Icon name="lucide:x" />
          </UiAttachmentAction>
        </UiAttachmentActions>
        <UiDialogTrigger as-child>
          <UiAttachmentTrigger aria-label="Preview research-summary.pdf" />
        </UiDialogTrigger>
      </UiAttachment>

      <UiDialogContent class="sm:max-w-md">
        <UiDialogHeader>
          <UiDialogTitle>research-summary.pdf</UiDialogTitle>
          <UiDialogDescription>
            The attachment trigger fills the card and opens the dialog, while the actions stay
            independently clickable above it.
          </UiDialogDescription>
        </UiDialogHeader>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>

<script lang="ts" setup></script>
```
::

## Accessibility

`UiAttachmentAction` renders a [`Button`](https://uithing.com/docs/components/button), and `UiAttachmentTrigger` renders a real `<button>` (or your element via `as-child`). Follow the guidance below so both are operable and announced.

### Label icon-only actions

`UiAttachmentAction` is usually icon-only, so give each one an `aria-label` describing the action and its target.

```vue
<template>
  <UiAttachmentAction aria-label="Remove sales-dashboard.pdf">
    <Icon name="lucide:x" />
  </UiAttachmentAction>
</template>
```

### Label the trigger

`UiAttachmentTrigger` covers the card with no text of its own, so give it an `aria-label` for what activating it does.

```vue
<template>
  <UiAttachmentTrigger as-child>
    <a :href="url" target="_blank" rel="noreferrer" aria-label="Open workspace.png" />
  </UiAttachmentTrigger>
</template>
```

The trigger sits behind the actions in the stacking order, so an `UiAttachmentAction` and the `UiAttachmentTrigger` never trap each other — both remain separately focusable and clickable.

### Keyboard scrolling

An `UiAttachmentGroup` scrolls horizontally. When its attachments are interactive: a trigger or actions, keyboard users reach off-screen items by tabbing to them. For a row of presentational attachments, make the group itself focusable and scrollable by adding `tabindex="0"`, `role="group"`, and an `aria-label`.

### Meaning beyond color

The `error` state uses a destructive color. Keep the failure reason in `UiAttachmentDescription` so the state is not conveyed by color alone.

## API Reference

### Attachment

The root attachment container.

| Prop          | Type                                                     | Default        | Description                                       |
| ------------- | -------------------------------------------------------- | -------------- | ------------------------------------------------- |
| `state`       | `"idle" | "uploading" | "processing" | "error" | "done"` | `"done"`       | The upload state. Drives styling and the shimmer. |
| `size`        | `"default" | "sm" | "xs"`                                | `"default"`    | The attachment size.                              |
| `orientation` | `"horizontal" | "vertical"`                              | `"horizontal"` | Lay the media beside or above the content.        |
| `as`          | `PrimitiveProps["as"]`                                   | `"div"`        | Element or component to render.                   |
| `as-child`    | `boolean`                                                | `false`        | Render as the child element.                      |
| `class`       | `HTMLAttributes["class"]`                                | -              | Additional classes to apply to the root element.  |

### AttachmentMedia

The media slot for an icon or image preview.

| Prop      | Type                      | Default  | Description                                    |
| --------- | ------------------------- | -------- | ---------------------------------------------- |
| `variant` | `"icon" | "image"`        | `"icon"` | Whether the media holds an icon or an `<img>`. |
| `class`   | `HTMLAttributes["class"]` | -        | Additional classes to apply to the media slot. |

### AttachmentContent

Wraps the title and description.

| Prop    | Type                      | Default | Description                                      |
| ------- | ------------------------- | ------- | ------------------------------------------------ |
| `class` | `HTMLAttributes["class"]` | -       | Additional classes to apply to the content slot. |

### AttachmentTitle

The attachment name. Shimmers while the attachment is `uploading` or `processing`.

| Prop    | Type                      | Default | Description                               |
| ------- | ------------------------- | ------- | ----------------------------------------- |
| `class` | `HTMLAttributes["class"]` | -       | Additional classes to apply to the title. |

### AttachmentDescription

Secondary metadata such as the file type, size, or upload status.

| Prop    | Type                      | Default | Description                                     |
| ------- | ------------------------- | ------- | ----------------------------------------------- |
| `class` | `HTMLAttributes["class"]` | -       | Additional classes to apply to the description. |

### AttachmentActions

A container for one or more actions, aligned to the end of the attachment.

| Prop    | Type                      | Default | Description                                 |
| ------- | ------------------------- | ------- | ------------------------------------------- |
| `class` | `HTMLAttributes["class"]` | -       | Additional classes to apply to the actions. |

### AttachmentAction

An action button. Renders a [`Button`](https://uithing.com/docs/components/button) and accepts Vue fallthrough attributes such as `aria-label`.

| Prop      | Type                        | Default     | Description                                |
| --------- | --------------------------- | ----------- | ------------------------------------------ |
| `variant` | `ButtonVariants["variant"]` | `"ghost"`   | The button variant.                        |
| `size`    | `ButtonVariants["size"]`    | `"icon-xs"` | The button size.                           |
| `class`   | `HTMLAttributes["class"]`   | -           | Additional classes to apply to the action. |

### AttachmentTrigger

A full-card overlay that activates the attachment. Renders a `<button>` by default and accepts Vue fallthrough attributes such as `aria-label`.

| Prop       | Type                      | Default    | Description                                  |
| ---------- | ------------------------- | ---------- | -------------------------------------------- |
| `as`       | `PrimitiveProps["as"]`    | `"button"` | Element or component to render.              |
| `as-child` | `boolean`                 | `false`    | Render as the child element, such as a link. |
| `class`    | `HTMLAttributes["class"]` | -          | Additional classes to apply to the trigger.  |

### AttachmentGroup

Lays out attachments in a horizontally scrollable, snapping row.

| Prop    | Type                      | Default | Description                               |
| ------- | ------------------------- | ------- | ----------------------------------------- |
| `class` | `HTMLAttributes["class"]` | -       | Additional classes to apply to the group. |


# Autocomplete

## Source code

Click :source-code-link{component="Autocomplete"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add autocomplete
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add autocomplete
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add autocomplete
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add autocomplete
```
::

## Usage

### Basic

::prose-show-case
:docs-auto-complete-basic

#code
```vue [DocsAutoCompleteBasic.vue]
<template>
  <div class="mx-auto max-w-sm">
    <UiAutocomplete>
      <UiAutocompleteAnchor>
        <UiAutocompleteInput placeholder="Select an item" />
        <UiAutocompleteTrigger>
          <Icon name="lucide:chevron-down" class="text-muted-foreground size-4" />
        </UiAutocompleteTrigger>
      </UiAutocompleteAnchor>

      <UiAutocompleteContent>
        <UiAutocompleteEmpty
          class="flex items-center justify-center p-4 text-center text-sm font-medium text-pretty"
        />
        <UiAutocompleteGroup>
          <UiAutocompleteLabel>Fruits</UiAutocompleteLabel>
          <template v-for="f in fruits" :key="f">
            <UiAutocompleteItem :value="f" icon="lucide:check">{{ f }}</UiAutocompleteItem>
          </template>
        </UiAutocompleteGroup>
      </UiAutocompleteContent>
    </UiAutocomplete>
  </div>
</template>

<script lang="ts" setup>
  const fruits = [
    "Apple",
    "Banana",
    "Cherry",
    "Date",
    "Elderberry",
    "Fig",
    "Grape",
    "Honeydew",
    "Kiwi",
    "Lemon",
    "Mango",
    "Nectarine",
    "Orange",
    "Papaya",
    "Quince",
    "Raspberry",
    "Strawberry",
    "Tangerine",
    "Ugli fruit",
    "Vanilla bean",
    "Watermelon",
    "Ximenia caffra",
    "Yellow passion fruit",
    "Zucchini",
  ];
</script>
```
::

### Objects

::prose-show-case
:docs-auto-complete-objects

#code
```vue [DocsAutoCompleteObjects.vue]
<template>
  <div class="mx-auto max-w-sm">
    <UiAutocomplete v-model="selected">
      <UiAutocompleteAnchor>
        <UiAutocompleteInput :display-value="displaySelected" placeholder="Select a car..." />
        <UiAutocompleteTrigger>
          <Icon name="lucide:chevron-down" class="text-muted-foreground size-4" />
        </UiAutocompleteTrigger>
      </UiAutocompleteAnchor>

      <UiAutocompleteContent>
        <UiAutocompleteEmpty
          class="flex items-center justify-center p-4 text-center text-sm font-medium text-pretty"
        />
        <UiAutocompleteGroup>
          <UiAutocompleteLabel>Cars</UiAutocompleteLabel>
          <template v-for="(c, i) in cars" :key="i">
            <UiAutocompleteItem :value="c" icon="lucide:check">{{ c.name }}</UiAutocompleteItem>
          </template>
        </UiAutocompleteGroup>
      </UiAutocompleteContent>
    </UiAutocomplete>
  </div>
</template>

<script lang="ts" setup>
  const cars = [
    { name: "Audi", value: "audi" },
    { name: "BMW", value: "bmw" },
    { name: "Chevrolet", value: "chevrolet" },
    { name: "Dodge", value: "dodge" },
    { name: "Ford", value: "ford" },
    { name: "GMC", value: "gmc" },
    { name: "Honda", value: "honda" },
    { name: "Infiniti", value: "infiniti" },
    { name: "Jeep", value: "jeep" },
    { name: "Kia", value: "kia" },
    { name: "Lexus", value: "lexus" },
  ];

  const selected = ref(cars[2]);

  const displaySelected = (car: any) => car.name;
</script>
```
::

### Multiple

::prose-show-case
:docs-auto-complete-multiple

#code
```vue [DocsAutoCompleteMultiple.vue]
<template>
  <div class="mx-auto max-w-sm">
    <UiAutocomplete v-model="selectedPeople" multiple>
      <UiAutocompleteAnchor>
        <UiAutocompleteInput :display-value="displaySelected" placeholder="Select people..." />
        <UiAutocompleteTrigger>
          <Icon name="lucide:chevron-down" class="text-muted-foreground size-4" />
        </UiAutocompleteTrigger>
      </UiAutocompleteAnchor>

      <UiAutocompleteContent>
        <UiAutocompleteEmpty
          class="flex items-center justify-center p-4 text-center text-sm font-medium text-pretty"
        />
        <UiAutocompleteGroup>
          <UiAutocompleteLabel>People</UiAutocompleteLabel>
          <template v-for="(p, i) in people" :key="i">
            <UiAutocompleteItem class="mb-1 last:mb-0" :value="p" icon="lucide:check">{{
              p.name
            }}</UiAutocompleteItem>
          </template>
        </UiAutocompleteGroup>
      </UiAutocompleteContent>
    </UiAutocomplete>
  </div>
</template>

<script lang="ts" setup>
  const people = [
    { id: 1, name: "Durward Reynolds" },
    { id: 2, name: "Kenton Towne" },
    { id: 3, name: "Therese Wunsch" },
    { id: 4, name: "Benedict Kessler" },
    { id: 5, name: "Katelyn Rohan" },
  ];
  const selectedPeople = ref([people[0], people[1]]);

  type Person = (typeof people)[number];

  const displaySelected = (p: any) => {
    if (!p) return;
    if (p && p.length == 1) return p[0]?.name;
    return p.map((i: Person) => i.name).join(", ");
  };
</script>
```
::

### Async

This example shows how you can search for a value and make a call to your API for the results.

::prose-show-case
:docs-auto-complete-async

#code
```vue [DocsAutoCompleteAsync.vue]
<template>
  <div class="mx-auto max-w-sm">
    <UiAutocomplete v-model="selectedUser" ignore-filter>
      <UiAutocompleteAnchor>
        <UiAutocompleteInput
          v-model="search"
          :display-value="displaySelected"
          placeholder="Search for user..."
        />
        <UiAutocompleteTrigger :disabled="loading">
          <Icon v-if="!loading" name="lucide:chevron-down" class="text-muted-foreground size-4" />
          <Icon
            v-else
            name="lucide:loader-circle"
            class="text-muted-foreground size-4 animate-spin"
          />
        </UiAutocompleteTrigger>
      </UiAutocompleteAnchor>

      <UiAutocompleteContent>
        <UiAutocompleteEmpty
          v-if="!users.length"
          class="flex items-center justify-center p-4 text-center text-sm font-medium text-pretty"
        >
          <p v-if="search && loading">Please wait while we get your users</p>
          <p v-else>Please enter the name of a user to start searching</p>
        </UiAutocompleteEmpty>
        <UiAutocompleteGroup v-else>
          <UiAutocompleteLabel>Results</UiAutocompleteLabel>
          <template v-for="(p, i) in users" :key="i">
            <UiAutocompleteItem
              class="mb-1 last:mb-0"
              :disabled="p.disabled"
              :value="p"
              icon="lucide:check"
            >
              <div class="flex items-center gap-3">
                <UiAvatar class="size-7" :src="p.image" />
                <p :class="[p.disabled ? 'line-through' : '']">{{ p.name }}</p>
              </div>
            </UiAutocompleteItem>
          </template>
        </UiAutocompleteGroup>
      </UiAutocompleteContent>
    </UiAutocomplete>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import { promiseTimeout } from "@vueuse/core";

  type Person = {
    id: number;
    name: string;
    image: string;
    disabled?: boolean;
  };

  const loading = ref(false);
  const search = ref<string>();
  const selectedUser = ref<Person>();
  const users = ref<Person[]>([]);

  const getUsers = async () => {
    // if user list is empty, make API call
    if (users.value.length) return;
    // simulate making an api call
    await promiseTimeout(2000);
    //  create 6 random users. Acts as response from API call
    users.value = Array.from({ length: 6 }, (_, i) => ({
      id: i + 1,
      name: faker.person.fullName(),
      image: faker.image.avatar(),
      disabled: faker.datatype.boolean(0.5),
    }));
  };

  watchDebounced(
    search,
    async () => {
      loading.value = true;
      await getUsers();
      loading.value = false;
    },
    { debounce: 300 }
  );

  const displaySelected = (p: Person) => {
    return p?.name;
  };
</script>
```
::


# Avatar

## Source code

Click :source-code-link{component="Avatar"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add avatar
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add avatar
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add avatar
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add avatar
```
::

## Usage

::prose-show-case
:docs-avatar

#code
```vue [DocsAvatar.vue]
<template>
  <div class="flex flex-row flex-wrap items-center justify-center gap-6 md:gap-12">
    <UiAvatar class="grayscale" :src fallback="BB" :alt />
    <UiAvatar>
      <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
      <UiAvatarFallback>ER</UiAvatarFallback>
      <UiAvatarBadge class="bg-green-600 dark:bg-green-800" />
    </UiAvatar>
    <UiAvatarGroup class="grayscale">
      <UiAvatar>
        <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <UiAvatarFallback>CN</UiAvatarFallback>
      </UiAvatar>
      <UiAvatar>
        <UiAvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
        <UiAvatarFallback>LR</UiAvatarFallback>
      </UiAvatar>
      <UiAvatar>
        <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
        <UiAvatarFallback>ER</UiAvatarFallback>
      </UiAvatar>
      <UiAvatarGroupCount>+3</UiAvatarGroupCount>
    </UiAvatarGroup>
  </div>
</template>

<script lang="ts" setup>
  const src = "https://behonbaker.com/icon.png";
  const alt = "Behon Baker";
</script>
```
::

## Origin UI Examples

These are some examples that I found today over here [Origin UI](https://originui.com/avatars-badges){rel="&#x22;nofollow&#x22;"}. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

### Simple

::prose-show-case
:docs-avatar-simple

#code
```vue [DocsAvatarSimple.vue]
<template>
  <div class="flex items-center justify-center gap-10">
    <UiAvatar>
      <UiAvatarImage src="https://i.pravatar.cc/150?img=1" alt="Kelly King" />
      <UiAvatarFallback>KK</UiAvatarFallback>
    </UiAvatar>
    <UiAvatar class="rounded-lg">
      <UiAvatarImage src="https://i.pravatar.cc/150?img=4" alt="Ryan Author" />
      <UiAvatarFallback>RA</UiAvatarFallback>
    </UiAvatar>
    <UiAvatar class="rounded-none">
      <UiAvatarImage src="https://i.pravatar.cc/150?img=20" alt="Shelly White" />
      <UiAvatarFallback>SW</UiAvatarFallback>
    </UiAvatar>
  </div>
</template>
```
::

### Initials Only

::prose-show-case
:docs-avatar-initial-only

#code
```vue [DocsAvatarInitialOnly.vue]
<template>
  <div class="flex items-center justify-center gap-10">
    <UiAvatar fallback="KK" />
    <UiAvatar class="rounded-lg" fallback="MW" />
    <UiAvatar class="rounded-none" fallback="BB" />
  </div>
</template>
```
::

### Icon Only

::prose-show-case
:docs-avatar-icon-only

#code
```vue [DocsAvatarIconOnly.vue]
<template>
  <div class="flex items-center justify-center gap-10">
    <UiAvatar>
      <UiAvatarFallback>
        <Icon name="lucide:user-round" class="opacity-80" aria-hidden="true" />
      </UiAvatarFallback>
    </UiAvatar>
    <UiAvatar>
      <UiAvatarFallback>
        <Icon name="lucide:rocket" class="opacity-80" aria-hidden="true" />
      </UiAvatarFallback>
    </UiAvatar>
    <UiAvatar>
      <UiAvatarFallback>
        <Icon name="lucide:accessibility" class="opacity-80" aria-hidden="true" />
      </UiAvatarFallback>
    </UiAvatar>
  </div>
</template>
```
::

### Chip

::prose-show-case
:docs-avatar-chip

#code
```vue [DocsAvatarChip.vue]
<template>
  <div class="flex items-center justify-center gap-10">
    <UiChip color="bg-teal-500" position="bottom-right">
      <UiAvatar>
        <UiAvatarImage src="https://i.pravatar.cc/150?img=1" alt="Kelly King" />
        <UiAvatarFallback>KK</UiAvatarFallback>
      </UiAvatar>
    </UiChip>
    <UiChip color="bg-emerald-500">
      <UiAvatar class="rounded-lg">
        <UiAvatarImage src="https://i.pravatar.cc/150?img=4" alt="Ryan Author" />
        <UiAvatarFallback>RA</UiAvatarFallback>
      </UiAvatar>
    </UiChip>
    <UiChip color="bg-orange-500" position="bottom-left" inset>
      <UiAvatar class="rounded-none">
        <UiAvatarImage src="https://i.pravatar.cc/150?img=20" alt="Shelly White" />
        <UiAvatarFallback>SW</UiAvatarFallback>
      </UiAvatar>
    </UiChip>
  </div>
</template>
```
::

### Badge

::prose-show-case
:docs-avatar-badge

#code
```vue [DocsAvatarBadge.vue]
<template>
  <div class="flex items-center justify-center gap-10">
    <UiChip size="3xl" class="bg-background h-auto min-w-fit translate-x-0 p-0 ring-1">
      <template #content>
        <div class="flex items-center justify-center">
          <Icon name="heroicons:check-badge-solid" class="text-foreground size-5" />
        </div>
      </template>
      <UiAvatar>
        <UiAvatarImage src="https://i.pravatar.cc/150?img=1" alt="Kelly King" />
        <UiAvatarFallback>KK</UiAvatarFallback>
      </UiAvatar>
    </UiChip>
    <UiChip size="2xl" class="bg-emerald-500 text-white" text="6">
      <UiAvatar class="rounded-lg">
        <UiAvatarImage src="https://i.pravatar.cc/150?img=4" alt="Ryan Author" />
        <UiAvatarFallback>RA</UiAvatarFallback>
      </UiAvatar>
    </UiChip>
  </div>
</template>
```
::

### Group

::prose-show-case
:docs-avatar-group

#code
```vue [DocsAvatarGroup.vue]
<template>
  <div class="flex flex-col items-center justify-center gap-10">
    <div class="flex -space-x-1">
      <UiAvatar v-for="u in users" :key="u.name" class="ring-background size-8 ring-2">
        <UiAvatarImage :src="u.avatar" :alt="u.name" />
        <UiAvatarFallback>{{ u.initials }}</UiAvatarFallback>
      </UiAvatar>
    </div>
    <div class="flex -space-x-1">
      <UiAvatar v-for="u in users" :key="u.name" class="ring-background size-8 ring-2">
        <UiAvatarImage :src="u.avatar" :alt="u.name" />
        <UiAvatarFallback>{{ u.initials }}</UiAvatarFallback>
      </UiAvatar>
      <UiButton
        v-tippy="{ content: 'Add user' }"
        variant="secondary"
        class="bg-secondary text-muted-foreground ring-background hover:bg-secondary hover:text-foreground z-10 flex size-8 items-center justify-center rounded-full text-xs ring-2"
        size="icon"
      >
        +3
      </UiButton>
    </div>
    <div class="flex -space-x-3">
      <UiAvatar v-for="u in users" :key="u.name" class="ring-background size-12 ring-2">
        <UiAvatarImage :src="u.avatar" :alt="u.name" />
        <UiAvatarFallback>{{ u.initials }}</UiAvatarFallback>
      </UiAvatar>
    </div>
    <div class="flex -space-x-2">
      <UiAvatar v-for="u in users" :key="u.name" class="ring-background size-20 ring-2">
        <UiAvatarImage :src="u.avatar" :alt="u.name" />
        <UiAvatarFallback>{{ u.initials }}</UiAvatarFallback>
      </UiAvatar>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const users = [
    {
      name: "Kelly King",
      avatar: "https://i.pravatar.cc/150?img=1",
      initials: "KK",
    },
    {
      name: "Ryan Author",
      avatar: "https://i.pravatar.cc/150?img=2",
      initials: "RA",
    },
    {
      name: "Megan Author",
      avatar: "https://i.pravatar.cc/150?img=3",
      initials: "MA",
    },
    {
      name: "John Doe",
      avatar: "https://i.pravatar.cc/150?img=4",
      initials: "JD",
    },
  ];
</script>
```
::

### Badge Group

::prose-show-case
:docs-avatar-badge-group

#code
```vue [DocsAvatarBadgeGroup.vue]
<template>
  <div class="flex items-center justify-center gap-10">
    <div
      class="border-border bg-background flex items-center rounded-full border p-1 shadow shadow-black/5"
    >
      <div class="flex -space-x-1">
        <UiAvatar v-for="u in users" :key="u.name" class="ring-background size-5 ring-1">
          <UiAvatarImage :src="u.avatar" :alt="u.name" />
          <UiAvatarFallback>{{ u.initials }}</UiAvatarFallback>
        </UiAvatar>
      </div>
      <p class="text-muted-foreground px-2 text-xs">
        Trusted by <strong class="text-foreground font-medium">60K+</strong> developers.
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const users = [
    {
      name: "Kelly King",
      avatar: "https://i.pravatar.cc/150?img=1",
      initials: "KK",
    },
    {
      name: "Ryan Author",
      avatar: "https://i.pravatar.cc/150?img=2",
      initials: "RA",
    },
    {
      name: "Megan Author",
      avatar: "https://i.pravatar.cc/150?img=3",
      initials: "MA",
    },
    {
      name: "John Doe",
      avatar: "https://i.pravatar.cc/150?img=4",
      initials: "JD",
    },
  ];
</script>
```
::

### Avatar Label Group

::prose-show-case
:docs-avatar-label-group

#code
```vue [DocsAvatarLabelGroup.vue]
<template>
  <div class="flex flex-col gap-6">
    <UiAvatarLabelGroup
      v-for="s in sizes"
      :key="s"
      title="Behon Baker"
      subtitle="behon.baker@yahoo.com"
      src="https://behonbaker.com/icon.png"
      :size="s"
    />
  </div>
</template>
<script lang="ts" setup>
  const sizes = ["sm", "md", "lg", "xl"] as const;
</script>
```
::


# Badge

## Source code

Click :source-code-link{component="Badge.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add badge
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add badge
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add badge
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add badge
```
::

## Variants

### Default

::prose-show-case
:docs-badge-default

#code
```vue [DocsBadgeDefault.vue]
<template>
  <div class="text-center">
    <UiBadge>Default</UiBadge>
  </div>
</template>
```
::

### Destructive

::prose-show-case
:docs-badge-destructive

#code
```vue [DocsBadgeDestructive.vue]
<template>
  <div class="text-center">
    <UiBadge variant="destructive">Destructive</UiBadge>
  </div>
</template>
```
::

### Outline

::prose-show-case
:docs-badge-outline

#code
```vue [DocsBadgeOutline.vue]
<template>
  <div class="text-center">
    <UiBadge variant="outline">Outline</UiBadge>
  </div>
</template>
```
::

### Secondary

::prose-show-case
:docs-badge-secondary

#code
```vue [DocsBadgeSecondary.vue]
<template>
  <div class="text-center">
    <UiBadge variant="secondary">Secondary</UiBadge>
  </div>
</template>
```
::

### Shadcn

::prose-show-case
:docs-badge-shadcn

#code
```vue [DocsBadgeShadcn.vue]
<template>
  <div class="flex justify-center">
    <div class="flex flex-col items-center justify-center gap-2">
      <div class="flex w-full flex-wrap justify-center gap-2">
        <UiBadge>Badge</UiBadge>
        <UiBadge variant="secondary">Secondary</UiBadge>
        <UiBadge variant="destructive">Destructive</UiBadge>
        <UiBadge variant="outline">Outline</UiBadge>
      </div>
      <div class="flex w-full flex-wrap justify-center gap-2">
        <UiBadge variant="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
          <Icon name="lucide:badge-check" />
          Verified
        </UiBadge>
        <UiBadge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"> 8 </UiBadge>
        <UiBadge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums" variant="destructive">
          99
        </UiBadge>
        <UiBadge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums" variant="outline">
          20+
        </UiBadge>
      </div>
    </div>
  </div>
</template>
```
::

### Origin UI

::prose-show-case
:docs-badge-origin-u-i

#code
```vue [DocsBadgeOriginUI.vue]
<template>
  <div class="flex justify-center">
    <div class="flex flex-wrap justify-center gap-2">
      <UiBadge>
        <Icon name="lucide:zap" class="-ms-0.5 size-3 opacity-60" aria-hidden="true" />
        Badge
      </UiBadge>
      <UiBadge class="items-baseline gap-1.5">
        Badge
        <span class="text-primary-foreground/60 text-[0.625rem] font-medium"> 73 </span>
      </UiBadge>
      <UiBadge variant="outline" class="gap-1">
        <Icon name="lucide:check" class="size-3 text-emerald-500" aria-hidden="true" />
        Badge
      </UiBadge>
      <UiBadge variant="outline" class="gap-1.5">
        <span class="size-1.5 rounded-full bg-emerald-500" aria-hidden="true" />
        Badge
      </UiBadge>
      <UiBadge variant="outline" class="gap-1.5">
        <span class="size-1.5 rounded-full bg-amber-500" aria-hidden="true" />
        Badge
      </UiBadge>
      <UiBadge variant="outline" class="gap-1.5">
        <span class="size-1.5 rounded-full bg-red-500" aria-hidden="true" />
        Badge
      </UiBadge>
      <UiBadge
        class="has-focus-visible:border-ring has-focus-visible:ring-ring/50 has-data-[state=unchecked]:bg-muted has-data-[state=unchecked]:text-muted-foreground relative outline-none has-focus-visible:ring-[3px]"
      >
        <UiCheckbox :id class="peer sr-only after:absolute after:inset-0" default-checked />
        <div class="hidden items-center justify-center peer-data-[state=checked]:flex">
          <Icon name="lucide:check" class="size-2.5" aria-hidden="true" />
        </div>
        <label :for="id" class="cursor-pointer select-none after:absolute after:inset-0">
          Selectable
        </label>
      </UiBadge>

      <UiBadge v-if="open" class="gap-0 rounded-full">
        Removable
        <button
          class="text-primary-foreground/60 hover:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 -my-px -ms-px -me-1.5 inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-[inherit] p-0 transition-[color,box-shadow] outline-none focus-visible:ring-[3px]"
          @click="open = false"
        >
          <Icon name="lucide:x" class="size-3" aria-hidden="true" />
        </button>
      </UiBadge>

      <UiBadge v-if="tagActive" variant="outline" class="gap-0 rounded-md px-2">
        Tag
        <button
          class="text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 -my-[5px] -ms-0.5 -me-2 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-[inherit] p-0 transition-[color,box-shadow] outline-none focus-visible:ring-[3px]"
          aria-label="Delete"
          @click="tagActive = false"
        >
          <Icon name="lucide:x" class="size-3" aria-hidden="true" />
        </button>
      </UiBadge>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const id = useId();

  const open = ref(true);
  const tagActive = ref(true);

  watch(open, (value) => {
    if (!value) {
      setTimeout(() => {
        open.value = true;
      }, 1000);
    }
  });
  watch(tagActive, (value) => {
    if (!value) {
      setTimeout(() => {
        tagActive.value = true;
      }, 1000);
    }
  });
</script>
```
::

## Sizes

Three sizes are available for badges: `sm`, `md`, and `lg`.

::prose-show-case
:docs-badge-sizes

#code
```vue [DocsBadgeSizes.vue]
<template>
  <div class="flex items-center justify-center gap-2">
    <UiBadge v-for="s in sizes" :key="s" :size="s" variant="secondary">Label</UiBadge>
  </div>
</template>

<script lang="ts" setup>
  const sizes = ["sm", "md", "lg"] as const;
</script>
```
::


# Badge Group

## Source code

Click :source-code-link{component="BadgeGroup.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add badge-group
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add badge-group
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add badge-group
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add badge-group
```
::

## Usage

::prose-show-case
:docs-badge-group-default

#code
```vue [DocsBadgeGroupDefault.vue]
<template>
  <div class="flex justify-center">
    <UiBadgeGroup addon-text="New feature" theme="light" align="leading" size="md">
      We've just released a new feature
    </UiBadgeGroup>
  </div>
</template>
```
::

## Colors

The `color` prop controls the palette of the badge addon and icon. Applies to the `light` theme only — the `modern` theme uses system-aware tokens.

### All colors

::prose-show-case
:docs-badge-group-all-colors

#code
```vue [DocsBadgeGroupAllColors.vue]
<template>
  <div class="flex flex-wrap gap-3">
    <UiBadgeGroup
      v-for="c in colors"
      :key="c"
      :color="c"
      :addon-text="`${c?.[0]?.toUpperCase()}${c.slice(1)} Color`"
      theme="light"
      align="leading"
      size="md"
    >
      Check out the {{ c }} color!
    </UiBadgeGroup>
  </div>
</template>

<script lang="ts" setup>
  const colors = [
    "primary",
    "gray",
    "red",
    "orange",
    "amber",
    "yellow",
    "lime",
    "green",
    "emerald",
    "teal",
    "cyan",
    "sky",
    "blue",
    "indigo",
    "violet",
    "purple",
    "fuchsia",
    "pink",
    "rose",
  ] as const;
</script>
```
::

### Semantic aliases

::prose-show-case
:docs-badge-group-colors

#code
```vue [DocsBadgeGroupColors.vue]
<template>
  <div class="flex flex-col items-start gap-4">
    <UiBadgeGroup
      v-for="c in colors"
      :key="c.color"
      :addon-text="c.addonText"
      :color="c.color"
      theme="light"
      align="leading"
      size="md"
    >
      {{ c.text }}
    </UiBadgeGroup>
  </div>
</template>

<script lang="ts" setup>
  const colors = [
    { color: "primary", addonText: "New feature", text: "We've just released a new feature" },
    { color: "gray", addonText: "New feature", text: "We've just released a new feature" },
    { color: "blue", addonText: "New feature", text: "We've just released a new feature" },
    { color: "error", addonText: "Error", text: "There was a problem with that action" },
    {
      color: "warning",
      addonText: "Warning",
      text: "Just to let you know this might be a problem",
    },
    { color: "success", addonText: "Success", text: "You've updated your profile and details" },
  ] as const;
</script>
```
::

## Sizes

Two sizes are available: `md` and `lg`.

::prose-show-case
:docs-badge-group-sizes

#code
```vue [DocsBadgeGroupSizes.vue]
<template>
  <div class="flex flex-col items-start gap-4">
    <UiBadgeGroup
      v-for="s in sizes"
      :key="s"
      :size="s"
      addon-text="New feature"
      theme="light"
      align="leading"
    >
      We've just released a new feature
    </UiBadgeGroup>
  </div>
</template>

<script lang="ts" setup>
  const sizes = ["md", "lg"] as const;
</script>
```
::

## Alignment

### Leading

The addon pill appears before the main text with the icon at the trailing end.

::prose-show-case
:docs-badge-group-colors

#code
```vue [DocsBadgeGroupColors.vue]
<template>
  <div class="flex flex-col items-start gap-4">
    <UiBadgeGroup
      v-for="c in colors"
      :key="c.color"
      :addon-text="c.addonText"
      :color="c.color"
      theme="light"
      align="leading"
      size="md"
    >
      {{ c.text }}
    </UiBadgeGroup>
  </div>
</template>

<script lang="ts" setup>
  const colors = [
    { color: "primary", addonText: "New feature", text: "We've just released a new feature" },
    { color: "gray", addonText: "New feature", text: "We've just released a new feature" },
    { color: "blue", addonText: "New feature", text: "We've just released a new feature" },
    { color: "error", addonText: "Error", text: "There was a problem with that action" },
    {
      color: "warning",
      addonText: "Warning",
      text: "Just to let you know this might be a problem",
    },
    { color: "success", addonText: "Success", text: "You've updated your profile and details" },
  ] as const;
</script>
```
::

### Trailing

The main text comes first, followed by the addon pill with the icon inside.

::prose-show-case
:docs-badge-group-trailing

#code
```vue [DocsBadgeGroupTrailing.vue]
<template>
  <div class="flex flex-col items-start gap-4">
    <UiBadgeGroup
      v-for="c in colors"
      :key="c.color"
      :addon-text="c.addonText"
      :color="c.color"
      theme="light"
      align="trailing"
      size="md"
    >
      {{ c.text }}
    </UiBadgeGroup>
  </div>
</template>

<script lang="ts" setup>
  const colors = [
    { color: "gray", addonText: "New feature", text: "We've just released a new feature" },
    { color: "blue", addonText: "New feature", text: "We've just released a new feature" },
    { color: "error", addonText: "Error", text: "There was a problem with that action" },
    {
      color: "warning",
      addonText: "Warning",
      text: "Just to let you know this might be a problem",
    },
    { color: "success", addonText: "Success", text: "You've updated your profile and details" },
  ] as const;
</script>
```
::

## Theme

### Modern — leading

The modern theme uses system-aware background and border tokens with a color dot indicator inside the addon.

::prose-show-case
:docs-badge-group-modern-leading

#code
```vue [DocsBadgeGroupModernLeading.vue]
<template>
  <div class="flex flex-col items-start gap-4">
    <UiBadgeGroup
      v-for="c in colors"
      :key="c.color"
      :addon-text="c.addonText"
      :color="c.color"
      theme="modern"
      align="leading"
      size="md"
    >
      {{ c.text }}
    </UiBadgeGroup>
  </div>
</template>

<script lang="ts" setup>
  const colors = [
    { color: "primary", addonText: "New feature", text: "We've just released a new feature" },
    { color: "gray", addonText: "New feature", text: "We've just released a new feature" },
    { color: "blue", addonText: "New feature", text: "We've just released a new feature" },
    { color: "error", addonText: "Error", text: "There was a problem with that action" },
    {
      color: "warning",
      addonText: "Warning",
      text: "Just to let you know this might be a problem",
    },
    { color: "success", addonText: "Success", text: "You've updated your profile and details" },
  ] as const;
</script>
```
::

### Modern — trailing

::prose-show-case
:docs-badge-group-modern-trailing

#code
```vue [DocsBadgeGroupModernTrailing.vue]
<template>
  <div class="flex flex-col items-start gap-4">
    <UiBadgeGroup
      v-for="c in colors"
      :key="c.color"
      :addon-text="c.addonText"
      :color="c.color"
      theme="modern"
      align="trailing"
      size="md"
      pulse
    >
      {{ c.text }}
    </UiBadgeGroup>
  </div>
</template>

<script lang="ts" setup>
  const colors = [
    { color: "primary", addonText: "New feature", text: "We've just released a new feature" },
    { color: "gray", addonText: "New feature", text: "We've just released a new feature" },
    { color: "blue", addonText: "New feature", text: "We've just released a new feature" },
    { color: "error", addonText: "Error", text: "There was a problem with that action" },
    {
      color: "warning",
      addonText: "Warning",
      text: "Just to let you know this might be a problem",
    },
    { color: "success", addonText: "Success", text: "You've updated your profile and details" },
  ] as const;
</script>
```
::

## No icon

Set `:icon="false"` to hide the trailing icon entirely.

::prose-show-case
:docs-badge-group-no-icon

#code
```vue [DocsBadgeGroupNoIcon.vue]
<template>
  <div class="flex flex-col items-start gap-4">
    <UiBadgeGroup addon-text="New feature" theme="light" align="leading" :icon="false">
      We've just released a new feature
    </UiBadgeGroup>
    <UiBadgeGroup addon-text="New feature" theme="modern" align="leading" :icon="false">
      We've just released a new feature
    </UiBadgeGroup>
  </div>
</template>
```
::


# BG Pattern - Circle

## Source code

Click :source-code-link{component="BgPattern/Circle.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add bg-pattern-circle
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add bg-pattern-circle
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add bg-pattern-circle
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add bg-pattern-circle
```
::

## Usage

### Basic

Place the component inside a relatively positioned container. It renders an inline SVG sized to the chosen `size` prop.

::prose-show-case
:docs-bg-pattern-circle-basic

#code
```vue [DocsBgPatternCircleBasic.vue]
<template>
  <div
    class="relative mx-auto flex h-80 w-full items-center justify-center overflow-hidden rounded-lg border"
  >
    <span
      class="from-foreground to-foreground/30 pointer-events-none relative z-10 bg-linear-to-b bg-clip-text text-center text-5xl leading-none font-bold tracking-tight whitespace-pre-wrap text-transparent"
    >
      Background Pattern
    </span>
    <UiBgPatternCircle class="absolute inset-0 mx-auto" />
  </div>
</template>
```
::

### Sizes

Three built-in sizes — `sm` (336x336), `md` (480x480), and `lg` (768x768, default).

::prose-show-case
:docs-bg-pattern-circle-sizes

#code
```vue [DocsBgPatternCircleSizes.vue]
<template>
  <div class="flex flex-wrap items-center justify-center gap-6">
    <div
      v-for="size in sizes"
      :key="size"
      class="bg-background relative flex items-center justify-center overflow-hidden rounded-lg border"
      :class="{
        'size-[180px]': size === 'sm',
        'size-[240px]': size === 'md',
        'size-[300px]': size === 'lg',
      }"
    >
      <span
        class="text-muted-foreground pointer-events-none relative z-10 text-sm font-semibold tracking-widest uppercase"
      >
        {{ size }}
      </span>
      <UiBgPatternCircle :size="size" class="absolute inset-0 m-auto" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  const sizes = ["sm", "md", "lg"] as const;
</script>
```
::

### Custom Color

The component inherits `currentColor` for its strokes. Override the color by passing a text color utility via `class`.

::prose-show-case
:docs-bg-pattern-circle-colored

#code
```vue [DocsBgPatternCircleColored.vue]
<template>
  <div class="relative flex h-100 items-center justify-center overflow-hidden">
    <span
      class="pointer-events-none relative z-10 bg-linear-to-b from-violet-500 to-indigo-500 bg-clip-text text-center text-5xl leading-none font-bold tracking-tight whitespace-pre-wrap text-transparent"
    >
      Custom Color
    </span>
    <UiBgPatternCircle class="absolute -top-10 -left-10 text-violet-500/30" />
  </div>
</template>
```
::

## Props

| Prop    | Type                      | Default | Description                                                                                   |
| ------- | ------------------------- | ------- | --------------------------------------------------------------------------------------------- |
| `size`  | `"sm" | "md" | "lg"`      | `"lg"`  | Controls the overall dimensions of the SVG pattern.                                           |
| `class` | `HTMLAttributes["class"]` | —       | Extra classes forwarded to the `<svg>` element. Use text color utilities to tint the circles. |


# BG Pattern - Grid

## Source code

Click :source-code-link{component="BgPattern/Grid.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add bg-pattern-grid
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add bg-pattern-grid
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add bg-pattern-grid
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add bg-pattern-grid
```
::

## Usage

### Basic

Place the component inside a relatively positioned container. It renders an inline SVG sized to the chosen `size` prop.

::prose-show-case
:docs-bg-pattern-grid-basic

#code
```vue [DocsBgPatternGridBasic.vue]
<template>
  <div
    class="relative mx-auto flex h-80 w-full items-center justify-center overflow-hidden rounded-lg border"
  >
    <span
      class="from-foreground to-foreground/30 pointer-events-none relative z-10 bg-linear-to-b bg-clip-text text-center text-5xl leading-none font-bold tracking-tight whitespace-pre-wrap text-transparent"
    >
      Background Pattern
    </span>
    <UiBgPatternGrid class="absolute inset-0" />
  </div>
</template>
```
::

### Sizes

Three built-in sizes — `sm` (336x336), `md` (480x480), and `lg` (768x768, default).

::prose-show-case
:docs-bg-pattern-grid-sizes

#code
```vue [DocsBgPatternGridSizes.vue]
<template>
  <div class="flex flex-wrap items-center justify-center gap-6">
    <div
      v-for="size in sizes"
      :key="size"
      class="bg-background relative flex items-center justify-center overflow-hidden rounded-lg border"
      :class="{
        'size-[180px]': size === 'sm',
        'size-[240px]': size === 'md',
        'size-[300px]': size === 'lg',
      }"
    >
      <span
        class="text-muted-foreground pointer-events-none relative z-10 text-sm font-semibold tracking-widest uppercase"
      >
        {{ size }}
      </span>
      <UiBgPatternGrid :size="size" class="absolute inset-0 m-auto" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  const sizes = ["sm", "md", "lg"] as const;
</script>
```
::

### Custom Color

The component inherits `currentColor` for its strokes. Override the color by passing a text color utility via `class`.

::prose-show-case
:docs-bg-pattern-grid-colored

#code
```vue [DocsBgPatternGridColored.vue]
<template>
  <div class="relative flex h-100 items-center justify-center overflow-hidden">
    <span
      class="pointer-events-none relative z-10 bg-linear-to-b from-sky-500 to-blue-500 bg-clip-text text-center text-5xl leading-none font-bold tracking-tight whitespace-pre-wrap text-transparent"
    >
      Custom Color
    </span>
    <UiBgPatternGrid class="absolute -top-10 -left-10 text-sky-500/30" />
  </div>
</template>
```
::

## Props

| Prop    | Type                      | Default | Description                                                                                      |
| ------- | ------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
| `size`  | `"sm" | "md" | "lg"`      | `"lg"`  | Controls the overall dimensions of the SVG pattern.                                              |
| `class` | `HTMLAttributes["class"]` | —       | Extra classes forwarded to the `<svg>` element. Use text color utilities to tint the grid lines. |


# BG Pattern - Square

## Source code

Click :source-code-link{component="BgPattern/Square.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add bg-pattern-square
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add bg-pattern-square
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add bg-pattern-square
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add bg-pattern-square
```
::

## Usage

### Basic

Place the component inside a relatively positioned container. It renders an inline SVG sized to the chosen `size` prop.

::prose-show-case
:docs-bg-pattern-square-basic

#code
```vue [DocsBgPatternSquareBasic.vue]
<template>
  <div
    class="relative mx-auto flex h-80 w-full items-center justify-center overflow-hidden rounded-lg border"
  >
    <span
      class="from-foreground to-foreground/30 pointer-events-none relative z-10 bg-linear-to-b bg-clip-text text-center text-5xl leading-none font-bold tracking-tight whitespace-pre-wrap text-transparent"
    >
      Background Pattern
    </span>
    <UiBgPatternSquare class="absolute inset-0" />
  </div>
</template>
```
::

### Sizes

Three built-in sizes — `sm` (336x336), `md` (480x480), and `lg` (910x910, default).

::prose-show-case
:docs-bg-pattern-square-sizes

#code
```vue [DocsBgPatternSquareSizes.vue]
<template>
  <div class="flex flex-wrap items-center justify-center gap-6">
    <div
      v-for="size in sizes"
      :key="size"
      class="bg-background relative flex items-center justify-center overflow-hidden rounded-lg border"
      :class="{
        'size-[180px]': size === 'sm',
        'size-[240px]': size === 'md',
        'size-[300px]': size === 'lg',
      }"
    >
      <span
        class="text-muted-foreground pointer-events-none relative z-10 text-sm font-semibold tracking-widest uppercase"
      >
        {{ size }}
      </span>
      <UiBgPatternSquare :size="size" class="absolute inset-0 m-auto" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  const sizes = ["sm", "md", "lg"] as const;
</script>
```
::

### Custom Color

The component inherits `currentColor` for its strokes. Override the color by passing a text color utility via `class`.

::prose-show-case
:docs-bg-pattern-square-colored

#code
```vue [DocsBgPatternSquareColored.vue]
<template>
  <div class="relative flex h-100 items-center justify-center overflow-hidden">
    <span
      class="pointer-events-none relative z-10 bg-linear-to-b from-emerald-500 to-teal-500 bg-clip-text text-center text-5xl leading-none font-bold tracking-tight whitespace-pre-wrap text-transparent"
    >
      Custom Color
    </span>
    <UiBgPatternSquare class="absolute -top-10 -left-10 text-emerald-500/30" />
  </div>
</template>
```
::

## Props

| Prop    | Type                      | Default | Description                                                                                   |
| ------- | ------------------------- | ------- | --------------------------------------------------------------------------------------------- |
| `size`  | `"sm" | "md" | "lg"`      | `"lg"`  | Controls the overall dimensions of the SVG pattern.                                           |
| `class` | `HTMLAttributes["class"]` | —       | Extra classes forwarded to the `<svg>` element. Use text color utilities to tint the squares. |


# Breadcrumbs

## Source code

Click :source-code-link{component="Breadcrumbs.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add breadcrumbs
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add breadcrumbs
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add breadcrumbs
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add breadcrumbs
```
::

## Usage

### Basic

::prose-show-case
:docs-breadcrumbs

#code
```vue [DocsBreadcrumbs.vue]
<template>
  <div>
    <UiBreadcrumbs class="justify-center" :items="crumbs" />
  </div>
</template>

<script lang="ts" setup>
  import type { BreadcrumbItem } from "~/components/Ui/Breadcrumbs.vue";

  const crumbs: BreadcrumbItem[] = [
    {
      label: "Home",
      click: () => {
        console.log("clicked");
      },
    },
    { label: "Sales", link: "#" },
    {
      label: "Dashboard",
      link: "/examples/dashboard",
      icon: "heroicons:squares-plus",
      disabled: true,
    },
  ];
</script>
```
::

## Origin UI Examples

These are some examples that I found today over here [Origin UI](https://originui.com/breadcrumbs-paginations){rel="&#x22;nofollow&#x22;"}. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

### Dots Dropdown

::prose-show-case
:docs-breadcrumbs-dot-dropdown

#code
```vue [DocsBreadcrumbsDotDropdown.vue]
<template>
  <UiBreadcrumbs :items="items" class="justify-center">
    <template #dots>
      <UiDropdownMenu>
        <UiDropdownMenuTrigger
          class="text-muted-foreground hover:text-foreground flex items-center justify-center"
        >
          <Icon name="lucide:ellipsis" class="size-4" />
          <span class="sr-only">Toggle menu</span>
        </UiDropdownMenuTrigger>
        <UiDropdownMenuContent align="start">
          <UiDropdownMenuItem v-for="l in links" :key="l.label" as-child>
            <NuxtLink :to="l.to"><Icon :name="l.icon" class="size-4" /> {{ l.label }}</NuxtLink>
          </UiDropdownMenuItem>
        </UiDropdownMenuContent>
      </UiDropdownMenu>
    </template>
  </UiBreadcrumbs>
</template>

<script lang="ts" setup>
  import type { BreadcrumbItem } from "~/components/Ui/Breadcrumbs.vue";

  const items: BreadcrumbItem[] = [
    { label: "Home", link: "/" },
    { slot: "dots" },
    { label: "Components", link: "/components/accordion" },
    { label: "Breadcrumb" },
  ];

  const links = [
    { label: "Documentation", to: "#", icon: "lucide:book-open-text" },
    { label: "Themes", to: "#", icon: "lucide:paint-bucket" },
    { label: "GitHub", to: "#", icon: "lucide:github" },
  ];
</script>
```
::

### Icon Dropdown

::prose-show-case
:docs-breadcrumbs-icon-dropdown

#code
```vue [DocsBreadcrumbsIconDropdown.vue]
<template>
  <UiBreadcrumbs :items="items" class="justify-center">
    <template #folder>
      <UiDropdownMenu v-model:open="open">
        <UiDropdownMenuTrigger
          class="text-muted-foreground hover:text-foreground flex items-center justify-center"
        >
          <Icon :name="open ? 'lucide:folder-open-dot' : 'lucide:folder'" class="size-4" />
          <span class="sr-only">Toggle folder</span>
        </UiDropdownMenuTrigger>
        <UiDropdownMenuContent align="start">
          <UiDropdownMenuItem v-for="l in links" :key="l.label" as-child>
            <NuxtLink :to="l.to"><Icon :name="l.icon" class="size-4" /> {{ l.label }}</NuxtLink>
          </UiDropdownMenuItem>
        </UiDropdownMenuContent>
      </UiDropdownMenu>
    </template>
  </UiBreadcrumbs>
</template>

<script lang="ts" setup>
  import type { BreadcrumbItem } from "~/components/Ui/Breadcrumbs.vue";

  const open = ref(false);
  const items: BreadcrumbItem[] = [
    { label: "Home", link: "/" },
    { slot: "folder" },
    { label: "Breadcrumb" },
  ];

  const links = [
    { label: "Documentation", to: "#", icon: "lucide:book-open-text" },
    { label: "Themes", to: "#", icon: "lucide:paint-bucket" },
    { label: "GitHub", to: "#", icon: "lucide:github" },
  ];
</script>
```
::

### Icons

::prose-show-case
:docs-breadcrumbs-icons

#code
```vue [DocsBreadcrumbsIcons.vue]
<template>
  <UiBreadcrumbs :items="items" class="justify-center" />
</template>

<script lang="ts" setup>
  import type { BreadcrumbItem } from "~/components/Ui/Breadcrumbs.vue";

  const items: BreadcrumbItem[] = [
    { label: "Home", link: "/", icon: "lucide:home" },
    { label: "Components", link: "/", icon: "lucide:component" },
    { label: "Breadcrumb" },
  ];
</script>
```
::

### Separator

::prose-show-case
:docs-breadcrumbs-separator

#code
```vue [DocsBreadcrumbsSeparator.vue]
<template>
  <div class="flex flex-col items-center gap-10">
    <UiBreadcrumbs separator="lucide:slash" :items="items" class="justify-center" />
    <UiBreadcrumbs separator="lucide:dot" :items="items" class="justify-center" />
  </div>
</template>

<script lang="ts" setup>
  import type { BreadcrumbItem } from "~/components/Ui/Breadcrumbs.vue";

  const items: BreadcrumbItem[] = [
    { icon: "lucide:home" },
    { label: "Components", link: "/" },
    { label: "Breadcrumb" },
  ];
</script>
```
::

### Bordered

::prose-show-case
:docs-breadcrumbs-bordered

#code
```vue [DocsBreadcrumbsBordered.vue]
<template>
  <UiBreadcrumbs
    :items="items"
    class="border-border bg-background mx-auto w-fit rounded-lg border px-3 py-2 shadow-xs shadow-black/5"
  />
</template>

<script lang="ts" setup>
  import type { BreadcrumbItem } from "~/components/Ui/Breadcrumbs.vue";

  const items: BreadcrumbItem[] = [
    { icon: "lucide:home" },
    { label: "Components", link: "/" },
    { label: "Breadcrumb" },
  ];
</script>
```
::

### Select

::prose-show-case
:docs-breadcrumbs-select

#code
```vue [DocsBreadcrumbsSelect.vue]
<template>
  <UiBreadcrumbs :items="items" class="justify-center">
    <template #select>
      <UiSelect default-value="s1">
        <UiSelectTrigger class="h-9 w-36" />
        <UiSelectContent>
          <UiSelectItem value="s1">Orion</UiSelectItem>
          <UiSelectItem value="s2">Sigma</UiSelectItem>
          <UiSelectItem value="s3">Dorado</UiSelectItem>
        </UiSelectContent>
      </UiSelect>
    </template>
  </UiBreadcrumbs>
</template>

<script lang="ts" setup>
  import type { BreadcrumbItem } from "~/components/Ui/Breadcrumbs.vue";

  const items: BreadcrumbItem[] = [{ label: "Databases" }, { slot: "select" }];
</script>
```
::


# Bubble

## Source code

Click :source-code-link{component="Bubble"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add bubble
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add bubble
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add bubble
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add bubble
```
::

## Usage

The `Bubble` component displays framed conversational content. Use it for chat text, short structured output, quoted replies, suggestions, and reactions.

For full-featured chat interfaces, place avatars, names, timestamps, metadata, and message-level actions in the surrounding container. `Bubble` is intentionally scoped to the bubble surface.

::prose-show-case
:docs-bubble-demo

#code
```vue [DocsBubbleDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-8 py-12">
    <UiBubble align="end">
      <UiBubbleContent>Hey there! what&apos;s up?</UiBubbleContent>
    </UiBubble>
    <UiBubbleGroup>
      <UiBubble variant="muted">
        <UiBubbleContent>Hey! Want to see chat bubbles?</UiBubbleContent>
      </UiBubble>
      <UiBubble variant="muted">
        <UiBubbleContent>
          I can group messages, switch sides, and keep the whole thread easy to scan.
        </UiBubbleContent>
        <UiBubbleReactions role="img" aria-label="Reaction: thumbs up">
          <span>👍</span>
        </UiBubbleReactions>
      </UiBubble>
    </UiBubbleGroup>
    <UiBubble align="end">
      <UiBubbleContent>Sure. Hit me with your best demo.</UiBubbleContent>
    </UiBubble>
    <UiBubble variant="muted">
      <UiBubbleContent>
        Yes. You are reading a demo that is demoing itself. Very meta. Very on-brand.
      </UiBubbleContent>
      <UiBubbleReactions role="img" aria-label="Reactions: thumbs up, fire, eyes, and 2 more">
        <span>👍</span>
        <span>🔥</span>
        <span>👀</span>
        <span>+2</span>
      </UiBubbleReactions>
    </UiBubble>
  </div>
</template>

<script lang="ts" setup></script>
```
::

## Anatomy

```vue [Bubble Anatomy.vue] lines
<template>
  <UiBubbleGroup>
    <UiBubble>
      <UiBubbleContent />
      <UiBubbleReactions />
    </UiBubble>
    <UiBubble>
      <UiBubbleContent />
    </UiBubble>
  </UiBubbleGroup>
</template>
```

Use `UiBubbleGroup` to group consecutive bubbles from the same sender. Set `align` on each `UiBubble`, not on the group.

## Features

- Seven visual variants, from a strong primary bubble to unframed ghost content
- Start and end alignment for sender and receiver bubbles
- Reactions that anchor to the bubble edge with configurable side and alignment
- Bubbles size to their content, up to 80% of the container width
- Polymorphic content via `as` or `as-child` for link and button bubbles
- Every part renders through `Primitive`, so `as` / `as-child` and Vue `class` overrides work on any part

## Examples

### Variants

Use `variant` to change the visual treatment of the bubble.

::prose-show-case
:docs-bubble-variants-demo

#code
```vue [DocsBubbleVariantsDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-12 py-12">
    <UiBubble>
      <UiBubbleContent>This is the default primary bubble.</UiBubbleContent>
    </UiBubble>
    <UiBubble variant="secondary" align="end">
      <UiBubbleContent>This is the secondary variant.</UiBubbleContent>
    </UiBubble>
    <UiBubble variant="muted">
      <UiBubbleContent>
        This one is muted. It uses a lower emphasis color for the chat bubble.
      </UiBubbleContent>
      <UiBubbleReactions role="img" aria-label="Reaction: thumbs up">
        <span>👍</span>
      </UiBubbleReactions>
    </UiBubble>
    <UiBubble variant="tinted" align="end">
      <UiBubbleContent>
        This one is tinted. The tint is a softer color derived from the primary color.
      </UiBubbleContent>
    </UiBubble>
    <UiBubble variant="outline">
      <UiBubbleContent>We can also use an outlined variant.</UiBubbleContent>
    </UiBubble>
    <UiBubble variant="destructive" align="end">
      <UiBubbleContent>Or a destructive variant with a reaction.</UiBubbleContent>
      <UiBubbleReactions role="img" aria-label="Reaction: fire">
        <span>🔥</span>
      </UiBubbleReactions>
    </UiBubble>
    <UiBubble variant="ghost">
      <UiBubbleContent>
        Ghost bubbles work for assistant text, <b>markdown</b>, and other content that should not be
        framed. This is perfect for assistant messages that should not have a frame and can take the
        full width of the container. You can also render <code>code</code> in it. Ghost bubbles are
        full width and can take the full width of the container.
      </UiBubbleContent>
    </UiBubble>
  </div>
</template>

<script lang="ts" setup></script>
```
::

A bubble sizes to its content, up to 80% of the container width. The `ghost` variant removes the max-width so assistant text and rich content can span the full row.

| Variant       | Description                                            |
| ------------- | ------------------------------------------------------ |
| `default`     | A strong primary bubble, usually for the current user. |
| `secondary`   | The standard neutral bubble for conversation content.  |
| `muted`       | A lower-emphasis bubble for quiet supporting content.  |
| `tinted`      | A subtle primary-tinted bubble.                        |
| `outline`     | A bordered bubble for secondary or rich content.       |
| `ghost`       | Unframed content for assistant text or rich content.   |
| `destructive` | A destructive bubble for error or failed actions.      |

### Alignment

Use `align` on `UiBubble` to align the bubble to the start or end of the conversation.

::prose-show-case
:docs-bubble-alignment-demo

#code
```vue [DocsBubbleAlignmentDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-8 py-12">
    <UiBubble variant="muted">
      <UiBubbleContent>
        This bubble is aligned to the start. This is the default alignment.
      </UiBubbleContent>
    </UiBubble>
    <UiBubble align="end">
      <UiBubbleContent>
        This bubble is aligned to the end. Use this for user messages.
      </UiBubbleContent>
    </UiBubble>
  </div>
</template>

<script lang="ts" setup></script>
```
::

| align   | Description                                        |
| ------- | -------------------------------------------------- |
| `start` | Align the bubble to the start of the conversation. |
| `end`   | Align the bubble to the end of the conversation.   |

### Bubble Group

Use `UiBubbleGroup` to group consecutive bubbles from the same sender. Note the `align` prop should be set on the `UiBubble` component itself, not the `UiBubbleGroup` component.

::prose-show-case
:docs-bubble-group-demo

#code
```vue [DocsBubbleGroupDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-8 py-12">
    <UiBubble variant="muted">
      <UiBubbleContent>Can you tell me what&apos;s the issue?</UiBubbleContent>
    </UiBubble>
    <UiBubbleGroup>
      <UiBubble align="end">
        <UiBubbleContent>You tell me!</UiBubbleContent>
      </UiBubble>
      <UiBubble align="end">
        <UiBubbleContent>It worked yesterday. You broke it!</UiBubbleContent>
      </UiBubble>
      <UiBubble align="end">
        <UiBubbleContent>Find the bug and fix it.</UiBubbleContent>
        <UiBubbleReactions aria-label="Reactions: eyes" align="start">
          <span>👀</span>
        </UiBubbleReactions>
      </UiBubble>
    </UiBubbleGroup>
    <UiBubble variant="muted">
      <UiBubbleContent>
        Want me to diff yesterday&apos;s you against today&apos;s you? It&apos;s a bit embarrassing.
      </UiBubbleContent>
    </UiBubble>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Links and Buttons

Use `as-child` to merge `UiBubbleContent` styling and attributes onto a link or button passed through its default slot.

::prose-show-case
:docs-bubble-links-and-buttons-demo

#code
```vue [DocsBubbleLinksAndButtonsDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-8 py-12">
    <UiBubble variant="muted">
      <UiBubbleContent>How can I help you today?</UiBubbleContent>
    </UiBubble>
    <UiBubbleGroup>
      <UiBubble variant="tinted" align="end">
        <UiBubbleContent as-child>
          <button type="button" @click="() => useSonner('You clicked forgot password')">
            I forgot my password
          </button>
        </UiBubbleContent>
      </UiBubble>
      <UiBubble variant="tinted" align="end">
        <UiBubbleContent as-child>
          <button type="button" @click="() => useSonner('You clicked help with subscription')">
            I need help with my subscription
          </button>
        </UiBubbleContent>
      </UiBubble>
      <UiBubble variant="tinted" align="end">
        <UiBubbleContent as-child>
          <button
            type="button"
            @click="() => useSonner('You clicked something else. Talk to a human.')"
          >
            Something else. Talk to a human.
          </button>
        </UiBubbleContent>
      </UiBubble>
    </UiBubbleGroup>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Reactions

Use `UiBubbleReactions` for bubble reactions. You can use it to display reactions or quick action buttons. Use `side` and `align` to position the row — `side="top"` anchors it to the upper edge. Reactions overlap the bubble edge, so leave vertical space between rows — the examples below use a larger `gap` for this reason.

::prose-show-case
:docs-bubble-reactions-demo

#code
```vue [DocsBubbleReactionsDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-12 py-12">
    <UiBubble variant="muted" align="end">
      <UiBubbleContent> I don&apos;t need tests, I know my code works. </UiBubbleContent>
      <UiBubbleReactions align="start" role="img" aria-label="Reactions: thumbs up, surprised">
        <span>👍</span>
        <span>😮</span>
      </UiBubbleReactions>
    </UiBubble>
    <UiBubble variant="muted">
      <UiBubbleContent>
        Bold. Fine I&apos;ll add some tests. I&apos;ll let you know when they&apos;re done.
      </UiBubbleContent>
      <UiBubbleReactions role="img" aria-label="Reactions: eyes, rocket, and 2 more">
        <span>👀</span>
        <span>🚀</span>
        <span>+2</span>
      </UiBubbleReactions>
    </UiBubble>
    <UiBubble variant="default" align="end">
      <UiBubbleContent>
        Tests passed on the first try. All 142 of them. Looking good!
      </UiBubbleContent>
      <UiBubbleReactions
        side="top"
        align="start"
        role="img"
        aria-label="Reactions: party popper, clapping hands"
      >
        <span>🎉</span>
        <span>👏</span>
      </UiBubbleReactions>
    </UiBubble>
    <UiBubble variant="destructive">
      <UiBubbleContent>Are you sure I can run this command?</UiBubbleContent>
      <UiBubbleReactions>
        <UiButton
          variant="ghost"
          size="sm"
          @click="() => useSonner.success('You clicked yes, running command...')"
        >
          Yes, run it
        </UiButton>
      </UiBubbleReactions>
    </UiBubble>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Show More / Collapsible

Long bubble content can be composed with [`Collapsible`](https://uithing.com/components/collapsible) to allow for a show more or show less interaction. Use the `UiCollapsibleTrigger` component to trigger the collapsible content.

::prose-show-case
:docs-bubble-collapsible-demo

#code
```vue [DocsBubbleCollapsibleDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-8 py-12">
    <UiBubble variant="muted">
      <UiBubbleContent>How can I help you today?</UiBubbleContent>
    </UiBubble>

    <UiBubble variant="muted" align="end">
      <UiBubbleContent class="whitespace-pre-line">
        <UiCollapsible v-model:open="open">
          <div>{{ open || !isLong ? text : preview }}</div>
          <template v-if="isLong">
            <UiCollapsibleTrigger as-child>
              <UiButton variant="link" class="group/collapsible text-muted-foreground gap-1 p-0">
                {{ open ? "Show less" : "Show more" }}
                <Icon
                  name="lucide:chevron-down"
                  class="size-4 group-data-[state=open]/collapsible:rotate-180"
                />
              </UiButton>
            </UiCollapsibleTrigger>
          </template>
        </UiCollapsible>
      </UiBubbleContent>
    </UiBubble>
  </div>
</template>

<script lang="ts" setup>
  const text = `The accessibility review found two focus states that were visually too subtle in dark mode.

I checked the dialog, menu, and drawer paths because each one renders focusable controls inside a layered surface.

The dialog and drawer are fine. The menu needs the hover and focus tokens split so keyboard focus stays visible when the pointer is not involved.

I also recommend keeping the change in the style file instead of the primitive so the other themes can choose their own focus treatment later.`;

  const previewLength = 180;
  const open = ref(false);
  const preview = computed(() => `${text.slice(0, previewLength)}...`);
  const isLong = computed(() => text.length > previewLength);
</script>
```
::

### Tooltip

Wrap a bubble reaction in a [`Tooltip`](https://uithing.com/components/tooltip) to reveal metadata on hover, such as when a message was read.

::prose-show-case
:docs-bubble-tooltip-demo

#code
```vue [DocsBubbleTooltipDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-4 py-12">
    <UiBubble variant="secondary">
      <UiBubbleContent>Did you remove the stale route?</UiBubbleContent>
    </UiBubble>
    <UiBubble align="end">
      <UiBubbleContent>Yes, removed it from the registry.</UiBubbleContent>
      <UiBubbleReactions>
        <UiTooltip>
          <UiTooltipTrigger as-child>
            <UiButton variant="ghost" size="icon-sm" class="rounded-full">
              <Icon name="lucide:check" />
            </UiButton>
          </UiTooltipTrigger>
          <UiTooltipContent>Read on Jan 5, 2026 at 4:32 PM</UiTooltipContent>
        </UiTooltip>
      </UiBubbleReactions>
    </UiBubble>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Popover

Pair a bubble reaction with a [`Popover`](https://uithing.com/components/popover) to surface more information on demand, such as the full error message for a failed action.

::prose-show-case
:docs-bubble-popover-demo

#code
```vue [DocsBubblePopoverDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-4 py-12">
    <UiBubble align="end">
      <UiBubbleContent>Run the build script.</UiBubbleContent>
    </UiBubble>
    <UiBubble variant="destructive">
      <UiBubbleContent>Failed to run the command.</UiBubbleContent>
      <UiBubbleReactions>
        <UiPopover>
          <UiPopoverTrigger as-child>
            <UiButton
              variant="ghost"
              size="icon-sm"
              aria-label="Show error details"
              class="aria-expanded:text-destructive rounded-full"
            >
              <Icon name="lucide:info" />
            </UiButton>
          </UiPopoverTrigger>
          <UiPopoverContent>
            <div class="flex flex-col gap-1 text-sm">
              <div class="text-sm font-medium">Command failed with exit code 1</div>
              <div class="text-muted-foreground text-sm">
                ENOENT: no such file or directory, open pnpm-lock.yaml
              </div>
            </div>
          </UiPopoverContent>
        </UiPopover>
      </UiBubbleReactions>
    </UiBubble>
  </div>
</template>

<script lang="ts" setup></script>
```
::

## Accessibility

`UiBubble` renders the presentational message surface. Keep conversation-level semantics on the surrounding container and follow the guidelines below.

### Labeling Reactions

Reactions render as a row of emoji. A screen reader reads each glyph with no context, and counters like `+8` are announced as "plus eight". Group the row as a single image with a descriptive `aria-label` so it announces once. `role="img"` also hides the individual emoji from assistive tech, so no `aria-hidden` is needed.

```vue
<template>
  <UiBubbleReactions role="img" aria-label="Reactions: thumbs up, fire, and 8 more">
    <span>👍</span>
    <span>🔥</span>
    <span>+8</span>
  </UiBubbleReactions>
</template>
```

When reactions are interactive, render buttons instead and give icon-only buttons an `aria-label`.

```vue
<template>
  <UiBubbleReactions>
    <UiButton aria-label="Thumbs up" variant="secondary" size="icon-xs">
      <Icon name="lucide:thumbs-up" />
    </UiButton>
  </UiBubbleReactions>
</template>
```

### Interactive Bubbles

When a bubble is clickable, pass a real `<button>` or `<a>` through `UiBubbleContent` with `as-child` so it is focusable and exposes the correct role. `UiBubbleContent` ships a visible focus ring for interactive elements, and the accessible name comes from the bubble text. No extra label is needed.

```vue
<template>
  <UiBubble variant="muted" align="end">
    <UiBubbleContent as-child>
      <button type="button" @click="onReply">I forgot my password</button>
    </UiBubbleContent>
  </UiBubble>
</template>
```

### Meaning Beyond Color

Bubble variants signal role and tone with color. Pair them with text, alignment, or icons so meaning is not conveyed by color alone. For a `destructive` bubble, keep the error context in the message text rather than relying on the color treatment.

## API Reference

All Bubble parts render through `Primitive`. Use `as` to choose another element, or `as-child` to merge the component's attributes and styles onto the single element or component in its default slot.

### Bubble

The root bubble wrapper.

| Prop       | Type                                                                                 | Default     | Description                                                  |
| ---------- | ------------------------------------------------------------------------------------ | ----------- | ------------------------------------------------------------ |
| `variant`  | `"default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive"` | `"default"` | The bubble visual treatment.                                 |
| `align`    | `"start" | "end"`                                                                    | `"start"`   | The inline alignment of the bubble.                          |
| `as`       | `PrimitiveProps["as"]`                                                               | `"div"`     | Element or component to render.                              |
| `as-child` | `boolean`                                                                            | `false`     | Render the default slot as the root and merge props onto it. |
| `class`    | `HTMLAttributes["class"]`                                                            | -           | Additional classes to apply to the root element.             |

### BubbleContent

The bubble content wrapper.

| Prop       | Type                      | Default | Description                                                  |
| ---------- | ------------------------- | ------- | ------------------------------------------------------------ |
| `as`       | `PrimitiveProps["as"]`    | `"div"` | Element or component to render.                              |
| `as-child` | `boolean`                 | `false` | Render the default slot as the root and merge props onto it. |
| `class`    | `HTMLAttributes["class"]` | -       | Additional classes to apply to the content element.          |

### BubbleReactions

Displays overlapped reactions for a bubble.

| Prop       | Type                      | Default    | Description                                                  |
| ---------- | ------------------------- | ---------- | ------------------------------------------------------------ |
| `side`     | `"top" | "bottom"`        | `"bottom"` | The side of the bubble to anchor the reactions.              |
| `align`    | `"start" | "end"`         | `"end"`    | The inline alignment of the reactions.                       |
| `as`       | `PrimitiveProps["as"]`    | `"div"`    | Element or component to render.                              |
| `as-child` | `boolean`                 | `false`    | Render the default slot as the root and merge props onto it. |
| `class`    | `HTMLAttributes["class"]` | -          | Additional classes to apply to the reaction row.             |

### BubbleGroup

Groups consecutive bubbles from the same sender.

| Prop       | Type                      | Default | Description                                                  |
| ---------- | ------------------------- | ------- | ------------------------------------------------------------ |
| `as`       | `PrimitiveProps["as"]`    | `"div"` | Element or component to render.                              |
| `as-child` | `boolean`                 | `false` | Render the default slot as the root and merge props onto it. |
| `class`    | `HTMLAttributes["class"]` | -       | Additional classes to apply to the group root.               |


# Button

## Source code

Click :source-code-link{component="Button.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add button
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add button
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add button
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add button
```
::

## Plain Buttons

Here we have a few examples of the plain buttons.

### Default Button

::prose-show-case
:docs-button-default

#code
```vue [DocsButtonDefault.vue]
<template>
  <div class="text-center">
    <UiButton>Default</UiButton>
  </div>
</template>
```
::

### Secondary Button

::prose-show-case
:docs-button-secondary

#code
```vue [DocsButtonSecondary.vue]
<template>
  <div class="text-center">
    <UiButton variant="secondary">Secondary</UiButton>
  </div>
</template>
```
::

### With Icon

::prose-show-case
:docs-button-with-icon

#code
```vue [DocsButtonWithIcon.vue]
<template>
  <div class="text-center">
    <UiButton><Icon class="size-4" name="lucide:mail" /> Login with Email</UiButton>
  </div>
</template>
```
::

### Loading

::prose-show-case
:docs-button-loading

#code
```vue [DocsButtonLoading.vue]
<template>
  <div class="text-center">
    <UiButton loading>Please wait...</UiButton>
  </div>
</template>
```
::

### Outline

::prose-show-case
:docs-button-outline

#code
```vue [DocsButtonOutline.vue]
<template>
  <div class="text-center">
    <UiButton variant="outline">Outline</UiButton>
  </div>
</template>
```
::

### Destructive

::prose-show-case
:docs-button-destructive

#code
```vue [DocsButtonDestructive.vue]
<template>
  <div class="text-center">
    <UiButton variant="destructive">Destructive</UiButton>
  </div>
</template>
```
::

### Ghost

::prose-show-case
:docs-button-ghost

#code
```vue [DocsButtonGhost.vue]
<template>
  <div class="text-center">
    <UiButton variant="ghost"><Icon name="lucide:ghost" class="size-4" />Ghost</UiButton>
  </div>
</template>
```
::

### Link

::prose-show-case
:docs-button-link

#code
```vue [DocsButtonLink.vue]
<template>
  <div class="text-center">
    <UiButton variant="link">Visit Page</UiButton>
  </div>
</template>
```
::

### Icon

::prose-show-case
:docs-button-icon-only

#code
```vue [DocsButtonIconOnly.vue]
<template>
  <div class="text-center">
    <UiButton size="icon" variant="outline">
      <Icon class="size-4" name="lucide:activity" />
    </UiButton>
  </div>
</template>
```
::

## Skeuomorphic

Add the `skeuomorphic` prop to any solid-background variant to apply an inset shadow that gives the button a tactile, raised appearance.

### Skeuomorphic Button

::prose-show-case
:docs-button-skeuomorphic

#code
```vue [DocsButtonSkeuomorphic.vue]
<template>
  <div class="flex flex-wrap items-center justify-center gap-3">
    <UiButton skeuomorphic>Default</UiButton>
    <UiButton skeuomorphic variant="secondary">Secondary</UiButton>
    <UiButton skeuomorphic variant="destructive">Destructive</UiButton>
    <UiButton skeuomorphic variant="gradient">Gradient</UiButton>
  </div>
</template>
```
::

## Gradient

A `gradient` variant that derives a lighter stop from the active primary token using `color-mix`.

### Gradient Button

::prose-show-case
:docs-button-gradient

#code
```vue [DocsButtonGradient.vue]
<template>
  <div class="flex flex-wrap items-center justify-center gap-3">
    <UiButton variant="gradient">Gradient</UiButton>
    <UiButton variant="gradient" size="sm">Small</UiButton>
    <UiButton variant="gradient" size="lg">Large</UiButton>
    <UiButton variant="gradient" size="icon">
      <Icon name="lucide:sparkles" class="size-4" />
    </UiButton>
  </div>
</template>
```
::

## Sizes

Here are the different sizes that are available for the buttons.

### Regular Button Sizes

::prose-show-case
:docs-button-sizes

#code
```vue [DocsButtonSizes.vue]
<template>
  <div class="flex items-center justify-center gap-2">
    <UiButton v-for="s in sizes" :key="s" :size="s" variant="outline">Button</UiButton>
  </div>
</template>

<script lang="ts" setup>
  const sizes = ["xs", "sm", "default", "lg"] as const;
</script>
```
::

### Icon Button Sizes

::prose-show-case
:docs-button-icon-sizes

#code
```vue [DocsButtonIconSizes.vue]
<template>
  <div class="flex items-center justify-center gap-3">
    <UiButton v-for="s in sizes" :key="s" :size="s" variant="outline">
      <Icon name="lucide:activity" class="size-4" />
    </UiButton>
  </div>
</template>

<script lang="ts" setup>
  const sizes = ["icon-xs", "icon-sm", "icon"] as const;
</script>
```
::

## Enhanced Buttons

These are some buttons that I found today over here [Enhanced Buttons](https://enhanced-button.vercel.app/){rel="&#x22;nofollow&#x22;" target="\_blank"}. I think they are cool.

### Expand Icon - Right

::prose-show-case
:docs-button-expand-icon-right

#code
```vue [DocsButtonExpandIconRight.vue]
<template>
  <div class="text-center">
    <UiButton effect="expandIcon" icon-placement="right" icon="lucide:arrow-right"
      >Right Icon</UiButton
    >
  </div>
</template>
```
::

### Expand Icon - Left

::prose-show-case
:docs-button-expand-icon-left

#code
```vue [DocsButtonExpandIconLeft.vue]
<template>
  <div class="text-center">
    <UiButton effect="expandIcon" icon-placement="left" icon="lucide:arrow-left"
      >Left Icon</UiButton
    >
  </div>
</template>
```
::

### Gooey - Left

::prose-show-case
:docs-button-gooey-left

#code
```vue [DocsButtonGooeyLeft.vue]
<template>
  <div class="text-center">
    <UiButton effect="gooeyLeft">Gooey Left</UiButton>
  </div>
</template>
```
::

### Gooey - Right

::prose-show-case
:docs-button-gooey-right

#code
```vue [DocsButtonGooeyRight.vue]
<template>
  <div class="text-center">
    <UiButton effect="gooeyRight">Gooey Right</UiButton>
  </div>
</template>
```
::

### Shine

::prose-show-case
:docs-button-shine

#code
```vue [DocsButtonShine.vue]
<template>
  <div class="text-center">
    <UiButton effect="shine">Shining ✨</UiButton>
  </div>
</template>
```
::

### Shine on Hover

::prose-show-case
:docs-button-shine-hover

#code
```vue [DocsButtonShineHover.vue]
<template>
  <div class="text-center">
    <UiButton effect="shineHover">Shine on Hover</UiButton>
  </div>
</template>
```
::

### Gradient Slideshow

::prose-show-case
:docs-button-gradient-flow

#code
```vue [DocsButtonGradientFlow.vue]
<template>
  <div class="text-center">
    <UiButton effect="gradientSlideShow">Gradient Slideshow</UiButton>
  </div>
</template>
```
::

### Ring Hover

::prose-show-case
:docs-button-ring-hover

#code
```vue [DocsButtonRingHover.vue]
<template>
  <div class="text-center">
    <UiButton effect="ringHover">Ring Hover</UiButton>
  </div>
</template>
```
::

### Link Hover 1

::prose-show-case
:docs-button-link-hover1

#code
```vue [DocsButtonLinkHover1.vue]
<template>
  <div class="text-center">
    <UiButton variant="link" effect="underline">Link Underline</UiButton>
  </div>
</template>
```
::

### Link Hover 2

::prose-show-case
:docs-button-link-hover2

#code
```vue [DocsButtonLinkHover2.vue]
<template>
  <div class="text-center">
    <UiButton variant="link" effect="hoverUnderline">Link Hover Underline</UiButton>
  </div>
</template>
```
::

## Origin UI Examples

These are some examples that I found today over here [Origin UI](https://originui.com/buttons){rel="&#x22;nofollow&#x22;" target="\_blank"}. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

### Animated Close Button

::prose-show-case
:docs-button-animated-menu

#code
```vue [DocsButtonAnimatedMenu.vue]
<template>
  <div class="text-center">
    <UiButton
      class="group"
      variant="outline"
      size="icon"
      :aria-expanded="open"
      :aria-label="open ? 'Close menu' : 'Open menu'"
      @click="open = !open"
    >
      <svg
        class="pointer-events-none"
        :width="16"
        :height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M4 12L20 12"
          class="origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315"
        />
        <path
          d="M4 12H20"
          class="origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45"
        />
        <path
          d="M4 12H20"
          class="origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135"
        />
      </svg>
    </UiButton>
  </div>
</template>

<script lang="ts" setup>
  const open = ref(false);
</script>
```
::

### Animated Rotate Plus

::prose-show-case
:docs-button-rotate-plus

#code
```vue [DocsButtonRotatePlus.vue]
<template>
  <div class="text-center">
    <UiButton
      class="group rounded-full"
      variant="outline"
      size="icon"
      :aria-expanded="open"
      :aria-label="open ? 'Close menu' : 'Open menu'"
      @click="open = !open"
    >
      <Icon
        name="lucide:plus"
        class="size-4 transition-transform duration-500 [transition-timing-function:cubic-bezier(0.68,-0.6,0.32,1.6)] group-aria-expanded:rotate-[135deg]"
      />
    </UiButton>
  </div>
</template>

<script lang="ts" setup>
  const open = ref(false);
</script>
```
::

### Group Outline Counter

::prose-show-case
:docs-button-group-outline-counter

#code
```vue [DocsButtonGroupOutlineCounter.vue]
<template>
  <div class="text-center">
    <div class="inline-flex -space-x-px rounded-lg shadow-xs shadow-black/5 rtl:space-x-reverse">
      <UiButton
        class="rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10"
        variant="outline"
        size="icon"
        aria-label="Upvote"
        @click="increment"
      >
        <Icon name="lucide:chevron-up" class="size-4" :aria-hidden="true" />
      </UiButton>
      <span class="border-input flex items-center border px-3 text-sm font-medium">{{
        counter
      }}</span>
      <UiButton
        class="rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10"
        variant="outline"
        size="icon"
        aria-label="Downvote"
        @click="decrement"
      >
        <Icon name="lucide:chevron-down" class="size-4" :aria-hidden="true" />
      </UiButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const counter = ref(256);
  const increment = () => counter.value++;
  const decrement = () => counter.value--;
</script>
```
::

### Volume Control

::prose-show-case
:docs-button-volume

#code
```vue [DocsButtonVolume.vue]
<template>
  <div class="text-center">
    <div class="inline-flex items-center" role="group" aria-labelledby="volume-control">
      <span id="volume-control" class="sr-only"> Volume Control </span>
      <UiButton
        class="rounded-full"
        variant="outline"
        size="icon"
        aria-label="Decrease volume"
        :disabled="volume === 0"
        @click="decreaseVolume"
      >
        <Icon name="lucide:minus" size="16" aria-hidden="true" />
      </UiButton>
      <div class="flex items-center px-3 text-sm font-medium tabular-nums" aria-live="polite">
        <Icon :name="VolumeIcon" size="16" aria-hidden="true" />
        <span class="ms-2" :aria-label="`Current volume is ${volume}`">
          {{ volume }}
        </span>
      </div>
      <UiButton
        class="rounded-full"
        variant="outline"
        size="icon"
        aria-label="Increase volume"
        :disabled="volume === 6"
        @click="increaseVolume"
      >
        <Icon name="lucide:plus" size="16" aria-hidden="true" />
      </UiButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const volume = ref(3);
  const decreaseVolume = () => {
    if (volume.value === 0) return;
    volume.value--;
  };
  const increaseVolume = () => {
    if (volume.value === 6) return;
    volume.value++;
  };

  const VolumeIcon = computed(() =>
    volume.value === 0
      ? "lucide:volume-x"
      : volume.value < 3
        ? "lucide:volume"
        : volume.value < 5
          ? "lucide:volume-1"
          : "lucide:volume-2"
  );
</script>
```
::

### Animated Copy

::prose-show-case
:docs-button-animated-copy

#code
```vue [DocsButtonAnimatedCopy.vue]
<template>
  <div class="text-center">
    <UiTooltip>
      <UiTooltipTrigger as-child>
        <UiButton
          variant="outline"
          size="icon"
          class="disabled:opacity-100"
          :aria-label="copied ? 'Copied' : 'Copy to clipboard'"
          :disabled="copied"
          @click="copy('string to copy')"
        >
          <TransitionScale mode="out-in">
            <Icon v-if="!copied" name="lucide:copy" size="16" aria-hidden="true" />
            <Icon
              v-else
              name="lucide:check"
              size="16"
              aria-hidden="true"
              class="text-emerald-500"
            />
          </TransitionScale>
        </UiButton>
      </UiTooltipTrigger>
      <UiTooltipContent align="center" class="px-2 py-1 text-xs"> Click to copy </UiTooltipContent>
    </UiTooltip>
  </div>
</template>

<script lang="ts" setup>
  const { copied, copy } = useClipboard();
</script>
```
::

### Upload Button w/ Icon

::prose-show-case
:docs-button-upload

#code
```vue [DocsButtonUpload.vue]
<template>
  <div class="mx-auto text-center">
    <div class="inline-flex items-center gap-2 align-top">
      <div
        class="border-input relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg border"
        :aria-label="previewUrl ? 'Preview of uploaded image' : 'Default user avatar'"
      >
        <Icon
          v-if="!previewUrl"
          aria-hidden="true"
          class="size-4 opacity-60"
          name="lucide:circle-user"
        />

        <img
          v-if="previewUrl"
          :src="previewUrl"
          alt="Preview of uploaded image"
          class="size-full object-cover"
        />
      </div>
      <div class="relative inline-block">
        <UiButton aria-haspopup="dialog" @click="open()">
          {{ fileName ? "Change image" : "Upload image" }}
        </UiButton>
      </div>
    </div>

    <TransitionExpand>
      <div v-if="fileName" class="mt-2">
        <div class="inline-flex gap-2 text-xs">
          <p class="text-muted-foreground truncate" aria-live="polite">
            {{ fileName }}
          </p>
          <button
            class="font-medium text-red-500 hover:underline"
            :aria-label="`Remove ${fileName}`"
            @click="handleRemove"
          >
            Remove
          </button>
        </div>
      </div>
    </TransitionExpand>

    <div class="sr-only" aria-live="polite" role="status">
      {{ previewUrl ? "Image uploaded and preview available" : "No image uploaded" }}
    </div>
  </div>
</template>

<script lang="ts" setup>
  const { open, onChange } = useFileDialog({ accept: "image/*", multiple: false, reset: true });
  const previewUrl = ref<string | null>(null);
  const fileName = ref<string | null>(null);
  onChange(async (files) => {
    if (!files) return;
    const file = files[0];
    if (!file) return;
    fileName.value = file.name;
    const { execute } = useBase64(file);
    previewUrl.value = await execute();
  });

  const handleRemove = () => {
    previewUrl.value = null;
    fileName.value = null;
  };
</script>
```
::

### Arrows

::prose-show-case
:docs-button-arrows

#code
```vue [DocsButtonArrows.vue]
<template>
  <div class="text-center">
    <div class="inline-grid w-fit grid-cols-3 gap-1">
      <UiButton class="col-start-2" variant="outline" size="icon" aria-label="Pan camera up">
        <Icon name="lucide:chevron-up" class="size-4" aria-hidden="true" />
      </UiButton>
      <UiButton class="col-start-1" variant="outline" size="icon" aria-label="Pan camera left">
        <Icon name="lucide:chevron-left" class="size-4" aria-hidden="true" />
      </UiButton>
      <div class="flex items-center justify-center" aria-hidden="true">
        <Icon name="lucide:circle" class="size-5 opacity-60" />
      </div>
      <UiButton variant="outline" size="icon" aria-label="Pan camera right">
        <Icon name="lucide:chevron-right" class="size-4" aria-hidden="true" />
      </UiButton>
      <UiButton class="col-start-2" variant="outline" size="icon" aria-label="Pan camera down">
        <Icon name="lucide:chevron-down" class="size-4" aria-hidden="true" />
      </UiButton>
    </div>
  </div>
</template>
```
::


# Button Group

## Source code

Click :source-code-link{component="ButtonGroup"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add button-group
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add button-group
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add button-group
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add button-group
```
::

## Usage

### Basic

::prose-show-case
:docs-button-group

#code
```vue [DocsButtonGroup.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButtonGroup>
      <UiButtonGroup class="hidden sm:flex">
        <UiButton variant="outline" size="icon" aria-label="Go Back">
          <Icon name="lucide:arrow-left" />
        </UiButton>
      </UiButtonGroup>
      <UiButtonGroup>
        <UiButton variant="outline">Archive</UiButton>
        <UiButton variant="outline">Report</UiButton>
      </UiButtonGroup>
      <UiButtonGroup>
        <UiButton variant="outline">Snooze</UiButton>
        <UiDropdownMenu>
          <UiDropdownMenuTrigger as-child>
            <UiButton variant="outline" size="icon" aria-label="More Options">
              <Icon name="lucide:ellipsis" />
            </UiButton>
          </UiDropdownMenuTrigger>
          <UiDropdownMenuContent align="end" class="w-52">
            <UiDropdownMenuGroup>
              <UiDropdownMenuItem icon="lucide:mail-check" title="Mark as Read" />
              <UiDropdownMenuItem icon="lucide:archive" title="Archive" />
            </UiDropdownMenuGroup>
            <UiDropdownMenuSeparator />
            <UiDropdownMenuGroup>
              <UiDropdownMenuItem icon="lucide:clock" title="Snooze" />
              <UiDropdownMenuItem icon="lucide:calendar-plus" title="Add to Calendar" />
              <UiDropdownMenuItem icon="lucide:list-plus" title="Add to List" />
              <UiDropdownMenuSub>
                <UiDropdownMenuSubTrigger icon="lucide:tag" title="Label As..." />
                <UiDropdownMenuSubContent>
                  <UiDropdownMenuRadioGroup v-model="label">
                    <UiDropdownMenuRadioItem value="personal"> Personal </UiDropdownMenuRadioItem>
                    <UiDropdownMenuRadioItem value="work"> Work </UiDropdownMenuRadioItem>
                    <UiDropdownMenuRadioItem value="other"> Other </UiDropdownMenuRadioItem>
                  </UiDropdownMenuRadioGroup>
                </UiDropdownMenuSubContent>
              </UiDropdownMenuSub>
            </UiDropdownMenuGroup>
            <UiDropdownMenuSeparator />
            <UiDropdownMenuGroup>
              <UiDropdownMenuItem variant="destructive" icon="lucide:trash-2" title="Delete" />
            </UiDropdownMenuGroup>
          </UiDropdownMenuContent>
        </UiDropdownMenu>
      </UiButtonGroup>
    </UiButtonGroup>
  </div>
</template>

<script lang="ts" setup>
  const label = ref("personal");
</script>
```
::

### Orientation

::prose-show-case
:docs-button-group-orientation

#code
```vue [DocsButtonGroupOrientation.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButtonGroup orientation="vertical" aria-label="Media controls" class="h-fit">
      <UiButton variant="outline" size="icon">
        <Icon name="lucide:plus" />
      </UiButton>
      <UiButton variant="outline" size="icon">
        <Icon name="lucide:minus" />
      </UiButton>
    </UiButtonGroup>
  </div>
</template>
```
::

### Size

::prose-show-case
:docs-button-group-size

#code
```vue [DocsButtonGroupSize.vue]
<template>
  <div class="flex items-center justify-center">
    <div class="flex flex-col items-start gap-8">
      <UiButtonGroup>
        <UiButton variant="outline" size="sm"> Small </UiButton>
        <UiButton variant="outline" size="sm"> Button </UiButton>
        <UiButton variant="outline" size="sm"> Group </UiButton>
        <UiButton variant="outline" size="icon-sm">
          <Icon name="lucide:plus" />
        </UiButton>
      </UiButtonGroup>
      <UiButtonGroup>
        <UiButton variant="outline">Default</UiButton>
        <UiButton variant="outline">Button</UiButton>
        <UiButton variant="outline">Group</UiButton>
        <UiButton variant="outline" size="icon">
          <Icon name="lucide:plus" />
        </UiButton>
      </UiButtonGroup>
      <UiButtonGroup>
        <UiButton variant="outline" size="lg"> Large </UiButton>
        <UiButton variant="outline" size="lg"> Button </UiButton>
        <UiButton variant="outline" size="lg"> Group </UiButton>
        <UiButton variant="outline" size="icon" class="size-10">
          <Icon name="lucide:plus" />
        </UiButton>
      </UiButtonGroup>
    </div>
  </div>
</template>
```
::

### Nested

::prose-show-case
:docs-button-group-nested

#code
```vue [DocsButtonGroupNested.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButtonGroup>
      <UiButtonGroup>
        <UiButton v-for="item in 5" :key="item" variant="outline" size="sm"> {{ item }} </UiButton>
      </UiButtonGroup>
      <UiButtonGroup>
        <UiButton variant="outline" size="icon-sm" aria-label="Previous">
          <Icon name="lucide:arrow-left" />
        </UiButton>
        <UiButton variant="outline" size="icon-sm" aria-label="Next">
          <Icon name="lucide:arrow-right" />
        </UiButton>
      </UiButtonGroup>
    </UiButtonGroup>
  </div>
</template>
```
::

### Separator

The `ButtonGroupSeparator` component visually divides buttons within a group.

Buttons with variant `outline` do not need a separator since they have a border. For other variants, a separator is recommended to improve the visual hierarchy.

::prose-show-case
:docs-button-group-separator

#code
```vue [DocsButtonGroupSeparator.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButtonGroup>
      <UiButton variant="secondary" size="sm"> Copy </UiButton>
      <UiButtonGroupSeparator />
      <UiButton variant="secondary" size="sm"> Paste </UiButton>
    </UiButtonGroup>
  </div>
</template>
```
::

### Split

::prose-show-case
:docs-button-group-split

#code
```vue [DocsButtonGroupSplit.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButtonGroup>
      <UiButton variant="secondary">Button</UiButton>
      <UiButtonGroupSeparator />
      <UiButton size="icon" variant="secondary">
        <Icon name="lucide:plus" />
      </UiButton>
    </UiButtonGroup>
  </div>
</template>
```
::

### Input

::prose-show-case
:docs-button-group-input

#code
```vue [DocsButtonGroupInput.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButtonGroup>
      <UiInput placeholder="Search..." />
      <UiButton variant="outline" aria-label="Search">
        <Icon name="lucide:search" />
      </UiButton>
    </UiButtonGroup>
  </div>
</template>
```
::

### Input Group

::prose-show-case
:docs-button-group-input-group

#code
```vue [DocsButtonGroupInputGroup.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButtonGroup class="[--radius:9999rem]">
      <UiButtonGroup>
        <UiButton variant="outline" size="icon">
          <Icon name="lucide:plus" />
        </UiButton>
      </UiButtonGroup>
      <UiButtonGroup>
        <UiInputGroup>
          <UiInputGroupInput
            :placeholder="voiceEnabled ? 'Record and send audio...' : 'Send a message...'"
            :disabled="voiceEnabled"
          />
          <UiInputGroupAddon align="inline-end">
            <UiTooltip>
              <UiTooltipTrigger as-child>
                <UiInputGroupButton
                  class="data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100"
                  size="icon-xs"
                  :data-active="voiceEnabled"
                  :aria-pressed="voiceEnabled"
                  @click="voiceEnabled = !voiceEnabled"
                >
                  <Icon name="lucide:audio-lines" />
                </UiInputGroupButton>
              </UiTooltipTrigger>
              <UiTooltipContent>Voice Mode</UiTooltipContent>
            </UiTooltip>
          </UiInputGroupAddon>
        </UiInputGroup>
      </UiButtonGroup>
    </UiButtonGroup>
  </div>
</template>

<script lang="ts" setup>
  const voiceEnabled = ref(false);
</script>
```
::

### Dropdown

::prose-show-case
:docs-button-group-dropdown

#code
```vue [DocsButtonGroupDropdown.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButtonGroup>
      <UiButton variant="outline">Follow</UiButton>
      <UiDropdownMenu>
        <UiDropdownMenuTrigger as-child>
          <UiButton variant="outline" class="!pl-2">
            <Icon name="lucide:chevron-down" />
          </UiButton>
        </UiDropdownMenuTrigger>
        <UiDropdownMenuContent align="end" class="[--radius:1rem]">
          <UiDropdownMenuGroup>
            <UiDropdownMenuItem
              v-for="(item, i) in items"
              :key="i"
              :icon="item.icon"
              :title="item.label"
            />
          </UiDropdownMenuGroup>
          <UiDropdownMenuSeparator />
          <UiDropdownMenuGroup>
            <UiDropdownMenuItem variant="destructive">
              <Icon name="lucide:trash" />
              Delete Conversation
            </UiDropdownMenuItem>
          </UiDropdownMenuGroup>
        </UiDropdownMenuContent>
      </UiDropdownMenu>
    </UiButtonGroup>
  </div>
</template>

<script lang="ts" setup>
  const items = [
    { label: "Mute Conversation", icon: "lucide:volume-off" },
    { label: "Mark as Read", icon: "lucide:check" },
    { label: "Report Conversation", icon: "lucide:triangle-alert" },
    { label: "Block User", icon: "lucide:user-round-x" },
    { label: "Share Conversation", icon: "lucide:share" },
    { label: "Copy Conversation", icon: "lucide:copy" },
  ];
</script>
```
::

### Select

::prose-show-case
:docs-button-group-select

#code
```vue [DocsButtonGroupSelect.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButtonGroup>
      <UiButtonGroup>
        <UiSelect v-model="currency">
          <UiSelectTrigger class="w-fit font-mono">{{ currency }}</UiSelectTrigger>
          <UiSelectContent class="min-w-24">
            <UiSelectItem v-for="item in CURRENCIES" :key="item.value" :value="item.value">
              {{ item.value }}
              <span class="text-muted-foreground">{{ item.label }}</span>
            </UiSelectItem>
          </UiSelectContent>
        </UiSelect>
        <UiInput placeholder="10" pattern="^\d+(\.\d+)?$" />
      </UiButtonGroup>
      <UiButtonGroup>
        <UiButton aria-label="Send" size="icon" variant="outline">
          <Icon name="lucide:arrow-right" />
        </UiButton>
      </UiButtonGroup>
    </UiButtonGroup>
  </div>
</template>

<script lang="ts" setup>
  const currency = ref("$");
  const CURRENCIES = [
    { value: "$", label: "US Dollar" },
    { value: "€", label: "Euro" },
    { value: "£", label: "British Pound" },
  ];
</script>
```
::

### Popover

::prose-show-case
:docs-button-group-popover

#code
```vue [DocsButtonGroupPopover.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButtonGroup>
      <UiButton variant="outline"> <Icon name="lucide:bot" /> Copilot </UiButton>
      <UiPopover>
        <UiPopoverTrigger as-child>
          <UiButton variant="outline" size="icon" aria-label="Open UiPopover">
            <Icon name="lucide:chevron-down" />
          </UiButton>
        </UiPopoverTrigger>
        <UiPopoverContent align="end" class="rounded-xl p-0 text-sm">
          <div class="px-4 py-3">
            <div class="text-sm font-medium">Agent Tasks</div>
          </div>
          <UiSeparator />
          <div class="p-4 text-sm *:[p:not(:last-child)]:mb-2">
            <UiTextarea
              placeholder="Describe your task in natural language."
              class="mb-4 resize-none"
            />
            <p class="font-medium">Start a new task with Copilot</p>
            <p class="text-muted-foreground">
              Describe your task in natural language. Copilot will work in the background and open a
              pull request for your review.
            </p>
          </div>
        </UiPopoverContent>
      </UiPopover>
    </UiButtonGroup>
  </div>
</template>
```
::


# Calendar

## Source code

Click :source-code-link{component="Calendar.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add calendar
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add calendar
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add calendar
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add calendar
```
::

You can optionally configure the vcalendar module in your `nuxt.config.js` file:

```ts
vcalendar: {
  calendarOptions: {
    masks: {
      weekdays: "WW",
    },
  },
},
```

## Usage

### Attributes

Attributes are visual decorators that can be applied to specific calendar dates. Learn more about them [here](https://vcalendar.io/calendar/attributes.html).

::prose-show-case
:docs-calendar-attributes

#code
```vue [DocsCalendarAttributes.vue]
<template>
  <div class="flex flex-wrap justify-center gap-5">
    <UiCalendar :attributes="attributes" />
  </div>
</template>

<script lang="ts" setup>
  import dayjs from "dayjs";
  import type { CSSProperties } from "vue";

  import type { AttributeConfig } from "~/components/Ui/Calendar.vue";

  const attributes = ref<AttributeConfig[]>([
    {
      highlight: true,
      popover: {
        label: "Out of town business trip",
      },
      dates: [
        {
          start: dayjs().startOf("month").toString(),
          span: 3,
        },
      ],
    },
    {
      popover: {
        label: "Take the dog to the vet",
      },
      dot: "red",
      dates: dayjs().startOf("month").add(5, "days").toString(),
    },
    {
      bar: "green",
      popover: {
        label: "Dinner with friends",
      },
      dates: dayjs().startOf("month").add(8, "days").toString(),
    },
    {
      dot: "purple",
      popover: {
        label: "Take the car to the mechanic",
      },
      dates: dayjs().startOf("month").add(14, "days").toString(),
    },
    {
      highlight: true,
      popover: {
        label: "Family vacation in Ibiza",
      },
      dates: {
        start: dayjs().startOf("month").add(16, "days").toString(),
        end: dayjs().startOf("month").add(24, "days").toString(),
      },
    },
    {
      dot: true,
      popover: {
        label: "Take Noah to the football game",
      },
      dates: dayjs().startOf("month").add(22, "days").toString(),
    },
    {
      highlight: true,
      popover: {
        label: "Visit the in-laws",
      },
      dates: dayjs().endOf("month").toString(),
    },
    {
      popover: { label: "Therapy Session", hideIndicator: true },
      bar: {
        style: {
          backgroundImage: "linear-gradient(to right, #f0f, #0ff)",
          borderRadius: "10px",
        } as CSSProperties,
      },
      dates: [
        {
          // get last sunday in month's date
          start: dayjs().endOf("month").day(0).toString(),
          repeat: {
            every: "month",
            ordinalWeekdays: [-1, 1],
          },
        },
      ],
    },
  ]);
</script>
```
::

### Right Title - Left Nav

::prose-show-case
:docs-calendar-right-title

#code
```vue [DocsCalendarRightTitle.vue]
<template>
  <div class="flex flex-wrap justify-center gap-5">
    <UiCalendar title-position="right" />
  </div>
</template>
```
::

### Header Slot

::prose-show-case
:docs-calendar-header-slot

#code
```vue [DocsCalendarHeaderSlot.vue]
<template>
  <div class="flex flex-wrap justify-center gap-5">
    <UiCalendar show-weeknumbers>
      <template #header-title="{ title }">
        <div class="flex items-center gap-2">
          <p>{{ title }}</p>
          <Icon class="text-muted-foreground size-4" name="lucide:chevron-down" />
        </div>
      </template>
    </UiCalendar>
  </div>
</template>
```
::

### Date Range

::prose-show-case
:docs-calendar-range

#code
```vue [DocsCalendarRange.vue]
<template>
  <div class="flex flex-wrap justify-center gap-5">
    <UiCalendar :attributes />
  </div>
</template>

<script lang="ts" setup>
  import dayjs from "dayjs";

  import type { AttributeConfig } from "~/components/Ui/Calendar.vue";

  const attributes = ref<AttributeConfig[]>([
    {
      highlight: true,
      dates: [[dayjs().toDate(), dayjs().add(1.5, "w").toDate()]],
    },
  ]);
</script>
```
::

### Disabled Dates

::prose-show-case
:docs-calendar-disabled-date

#code
```vue [DocsCalendarDisabledDate.vue]
<template>
  <div class="flex flex-wrap justify-center gap-5">
    <UiCalendar :disabled-dates />
  </div>
</template>

<script lang="ts" setup>
  import dayjs from "dayjs";

  const disabledDates = ref([
    // disable today
    dayjs().toDate(),
    // disable the next 8 days
    dayjs().add(8, "day").toDate(),
    // disable the 22nd of the month
    dayjs().date(22).toDate(),
  ]);
</script>
```
::

### Footer Slot

::prose-show-case
:docs-calendar-footer-slot

#code
```vue [DocsCalendarFooterSlot.vue]
<template>
  <div class="flex flex-wrap justify-center gap-5">
    <UiCalendar ref="cal">
      <template #footer>
        <div class="grid grid-cols-2 gap-3 p-4 pt-0">
          <UiButton size="sm" variant="outline" @click="moveToRandomMonth">Random Month</UiButton>
          <UiButton size="sm" effect="ringHover" @click="moveToThisMonth">This Month</UiButton>
        </div>
      </template>
    </UiCalendar>
  </div>
</template>

<script lang="ts" setup>
  import dayjs from "dayjs";

  const cal = useTemplateRef("cal");
  const moveToRandomMonth = () => {
    const randomMonth = dayjs().add(Math.floor(Math.random() * 12), "month");
    cal.value?.calendarRef?.move(randomMonth.toDate());
  };
  const moveToThisMonth = () => {
    cal.value?.calendarRef?.move(new Date());
  };
</script>
```
::

### Week View

::prose-show-case
:docs-calendar-week-view

#code
```vue [DocsCalendarWeekView.vue]
<template>
  <div class="flex flex-wrap justify-center gap-5">
    <UiCalendar view="weekly" />
  </div>
</template>
```
::


# Card

## Source code

Click :source-code-link{component="Card"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add card
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add card
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add card
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add card
```
::

## Usage

::prose-show-case
:docs-card

#code
```vue [DocsCard.vue]
<template>
  <div class="flex items-center justify-center">
    <form>
      <UiCard class="w-[380px] max-w-sm">
        <UiCardHeader>
          <UiCardTitle>Create account</UiCardTitle>
          <UiCardAction>
            <UiButton variant="ghost" size="sm" as-child class="-mr-2">
              <NuxtLink to="#">Log in</NuxtLink>
            </UiButton>
          </UiCardAction>
          <UiCardDescription>Enter your details below to create your account.</UiCardDescription>
        </UiCardHeader>
        <UiCardContent>
          <div class="grid w-full items-center gap-4">
            <UiVeeInput name="name" label="Name" required />
            <UiVeeInput
              name="email"
              label="Email"
              type="email"
              placeholder="you@example.com"
              required
            />
            <UiVeeInput name="password" label="Password" type="password" required />
            <div class="flex items-start gap-2 pt-1 text-sm">
              <UiVeeCheckbox class="gap-2" label="I agree to the terms and privacy policy." />
            </div>
          </div>
        </UiCardContent>

        <UiCardFooter class="flex-col gap-4">
          <UiButton class="w-full" effect="ringHover" type="submit">Create account</UiButton>
          <UiDivider><span class="text-muted-foreground text-sm">or</span></UiDivider>
          <UiButton variant="outline" class="w-full">
            <Icon name="logos:google-icon" />
            <span>Continue with Google</span>
          </UiButton>
        </UiCardFooter>
      </UiCard>
    </form>
  </div>
</template>
```
::

## Example

::prose-show-case
:docs-card-example

#code
```vue [DocsCardExample.vue]
<template>
  <div class="flex items-center justify-center">
    <UiCard
      class="w-[380px] max-w-sm"
      title="Notifications"
      description="You have 3 unread messages."
    >
      <template #content>
        <UiCardContent>
          <div class="flex items-center gap-3 rounded-lg border p-3">
            <Icon name="lucide:bell" class="-mt-3 size-5 shrink-0" />
            <UiLabel for="push" class="flex flex-col items-start text-sm">
              <p class="text-sm font-semibold">Push Notifications</p>
              <p class="text-muted-foreground">Send notifications to device.</p>
            </UiLabel>
            <div class="ml-auto">
              <UiSwitch id="push" v-model="push" />
            </div>
          </div>

          <ul class="mt-7 flex flex-col gap-6 pl-2">
            <li v-for="(item, i) in items" :key="i" class="flex items-start gap-4">
              <span class="bg-primary mt-1 h-2.5 w-2.5 shrink-0 rounded-full" />
              <div class="flex flex-col gap-px text-sm">
                <p class="leading-none font-medium">{{ item.text }}</p>
                <span class="text-muted-foreground">{{ item.time }}</span>
              </div>
            </li>
          </ul>
        </UiCardContent>
      </template>

      <template #footer>
        <UiCardFooter>
          <UiButton
            class="w-full"
            @click="useSonner.success('Updated', { description: 'All items were marked as read.' })"
          >
            <Icon name="lucide:check" /> Mark all as read
          </UiButton>
        </UiCardFooter>
      </template>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  const push = ref(false);

  const items = [
    { text: "Your call has been confirmed.", time: "2m ago" },
    { text: "You have a new message.", time: "1h ago" },
    { text: "Your order has been shipped.", time: "2h ago" },
  ];
</script>
```
::


# Carousel

## Source code

Click :source-code-link{component="Carousel"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## About

The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/){rel="&#x22;nofollow&#x22;" target="\_blank"} library.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add carousel
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add carousel
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add carousel
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add carousel
```
::

## Usage

```vue [DocsCarouselUsage.vue]
<template>
  <UiCarousel>
    <UiCarouselContent>
      <UiCarouselItem>...</UiCarouselItem>
      <UiCarouselItem>...</UiCarouselItem>
      <UiCarouselItem>...</UiCarouselItem>
    </UiCarouselContent>
    <UiCarouselPrevious />
    <UiCarouselNext />
  </UiCarousel>
</template>
```

## Examples

### Sizes

To set the size of the items, you can use the `basis` utility class on the `<UiCarouselItem />`.

::prose-show-case
:docs-carousel-sizes

#code
```vue [DocsCarouselSizes.vue]
<template>
  <div class="flex items-center justify-center">
    <UiCarousel class="relative w-full max-w-sm" :opts="{ align: 'start' }">
      <UiCarouselContent>
        <UiCarouselItem
          v-for="(_, index) in 5"
          :key="index"
          grab-cursor
          class="md:basis-1/2 lg:basis-1/3"
        >
          <div class="p-1">
            <UiCard>
              <UiCardContent class="flex aspect-square items-center justify-center p-6">
                <span class="text-3xl font-semibold">{{ index + 1 }}</span>
              </UiCardContent>
            </UiCard>
          </div>
        </UiCarouselItem>
      </UiCarouselContent>
      <UiCarouselPrevious />
      <UiCarouselNext />
    </UiCarousel>
  </div>
</template>
```
::

Other Size Example

```vue [DocsCarouselSizesExample.vue]
<template>
  <!-- 33% of the carousel width. -->
  <UiCarousel>
    <UiCarouselContent>
      <UiCarouselItem class="basis-1/3">...</UiCarouselItem>
      <UiCarouselItem class="basis-1/3">...</UiCarouselItem>
      <UiCarouselItem class="basis-1/3">...</UiCarouselItem>
    </UiCarouselContent>
  </UiCarousel>
</template>
```

Responsive

```vue [DocsCarouselSizesResponsive.vue]
<template>
  <!-- 50% on small screens and 33% on larger screens. -->
  <UiCarousel>
    <UiCarouselContent>
      <UiCarouselItem class="md:basis-1/2 lg:basis-1/3">...</UiCarouselItem>
      <UiCarouselItem class="md:basis-1/2 lg:basis-1/3">...</UiCarouselItem>
      <UiCarouselItem class="md:basis-1/2 lg:basis-1/3">...</UiCarouselItem>
    </UiCarouselContent>
  </UiCarousel>
</template>
```

### Spacing

To set the spacing between the items, we use a `pl-[VALUE]` utility on the `<UiCarouselItem />` and a negative `-ml-[VALUE]` on the `<UiCarouselContent />`.

::prose-callout{title="Why not use gap?" variant="warning"}
I tried to use the `gap` property or a `grid` layout on the `CarouselContent` but it required a lot of math and mental effort to get the
spacing right. I found `pl-[VALUE]` and `-ml-[VALUE]` utilities much easier to
use.
:br:br
You can always adjust this in your own project if you need to.
::

::prose-show-case
:docs-carousel-spacing

#code
```vue [DocsCarouselSpacing.vue]
<template>
  <div class="flex items-center justify-center">
    <UiCarousel class="relative w-full max-w-sm" :opts="{ align: 'start' }">
      <UiCarouselContent class="-ml-1">
        <UiCarouselItem
          v-for="(_, index) in 5"
          :key="index"
          grab-cursor
          class="pl-1 md:basis-1/2 lg:basis-1/3"
        >
          <div class="p-1">
            <UiCard>
              <UiCardContent class="flex aspect-square items-center justify-center p-6">
                <span class="text-2xl font-semibold">{{ index + 1 }}</span>
              </UiCardContent>
            </UiCard>
          </div>
        </UiCarouselItem>
      </UiCarouselContent>
      <UiCarouselPrevious />
      <UiCarouselNext />
    </UiCarousel>
  </div>
</template>
```
::

Other Spacing Example

```vue [DocsCarouselSpacingExample.vue]
<template>
  <UiCarousel>
    <UiCarouselContent class="-ml-4">
      <UiCarouselItem class="pl-4"> ... </UiCarouselItem>
      <UiCarouselItem class="pl-4"> ... </UiCarouselItem>
      <UiCarouselItem class="pl-4"> ... </UiCarouselItem>
    </UiCarouselContent>
  </UiCarousel>
</template>
```

Responsive

```vue [DocsCarouselSpacingResponsive.vue]
<template>
  <UiCarousel>
    <UiCarouselContent class="-ml-2 md:-ml-4">
      <UiCarouselItem class="pl-2 md:pl-4"> ... </UiCarouselItem>
      <UiCarouselItem class="pl-2 md:pl-4"> ... </UiCarouselItem>
      <UiCarouselItem class="pl-2 md:pl-4"> ... </UiCarouselItem>
    </UiCarouselContent>
  </UiCarousel>
</template>
```

### Orientation

Use the `orientation` prop to set the orientation of the carousel.

::prose-show-case
:docs-carousel-orientation

#code
```vue [DocsCarouselOrientation.vue]
<template>
  <div class="flex items-center justify-center">
    <UiCarousel
      orientation="vertical"
      class="max-w-xsw-full relative w-full max-w-xs"
      :opts="{ align: 'start' }"
    >
      <UiCarouselContent class="-mt-1 h-[200px]">
        <UiCarouselItem v-for="(_, index) in 5" :key="index" grab-cursor class="p-1 md:basis-1/2">
          <div class="p-1">
            <UiCard>
              <UiCardContent class="flex items-center justify-center p-6">
                <span class="text-3xl font-semibold">{{ index + 1 }}</span>
              </UiCardContent>
            </UiCard>
          </div>
        </UiCarouselItem>
      </UiCarouselContent>
      <UiCarouselPrevious />
      <UiCarouselNext />
    </UiCarousel>
  </div>
</template>
```
::

### Thumbnail

::prose-show-case
:docs-carousel-thumbnail

#code
```vue [DocsCarouselThumbnail.vue]
<template>
  <div class="flex justify-center">
    <ClientOnly>
      <div class="w-full sm:w-auto">
        <UiCarousel class="relative w-full max-w-xs" @init-api="(val) => (emblaMainApi = val)">
          <UiCarouselContent>
            <UiCarouselItem v-for="(_, index) in 10" :key="index" grab-cursor>
              <div class="p-1">
                <UiCard class="h-52">
                  <UiCardContent class="flex size-full items-center justify-center p-6">
                    <span class="text-4xl font-semibold">{{ index + 1 }}</span>
                  </UiCardContent>
                </UiCard>
              </div>
            </UiCarouselItem>
          </UiCarouselContent>
          <UiCarouselPrevious />
          <UiCarouselNext />
        </UiCarousel>

        <UiCarousel class="relative w-full max-w-xs" @init-api="(val) => (emblaThumbnailApi = val)">
          <UiCarouselContent class="ml-0 flex gap-1">
            <UiCarouselItem
              v-for="(_, index) in 10"
              :key="index"
              class="basis-1/4 cursor-pointer pl-0"
              @click="onThumbClick(index)"
            >
              <div class="p-1" :class="index === selectedIndex ? '' : 'opacity-50'">
                <UiCard class="h-32">
                  <UiCardContent class="flex size-full items-center justify-center p-6">
                    <span class="text-4xl font-semibold">{{ index + 1 }}</span>
                  </UiCardContent>
                </UiCard>
              </div>
            </UiCarouselItem>
          </UiCarouselContent>
        </UiCarousel>
      </div>
    </ClientOnly>
  </div>
</template>

<script lang="ts" setup>
  import type { CarouselApi } from "~/composables/useCarousel";

  const emblaMainApi = ref<CarouselApi>();
  const emblaThumbnailApi = ref<CarouselApi>();
  const selectedIndex = ref(0);

  function onSelect() {
    if (!emblaMainApi.value || !emblaThumbnailApi.value) return;
    selectedIndex.value = emblaMainApi.value.selectedScrollSnap();
    emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap());
  }

  function onThumbClick(index: number) {
    if (!emblaMainApi.value || !emblaThumbnailApi.value) return;
    emblaMainApi.value.scrollTo(index);
  }

  watchOnce(emblaMainApi, (emblaMainApi) => {
    if (!emblaMainApi) return;

    onSelect();
    emblaMainApi.on("select", onSelect);
    emblaMainApi.on("reInit", onSelect);
  });
</script>
```
::

## Options

You can pass options to the carousel using the `opts` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/){rel="&#x22;nofollow&#x22;" target="\_blank"} for more information.

```vue
<template>
  <UiCarousel :opts="{ align: 'start', loop: true }">
    <UiCarouselContent>
      <UiCarouselItem>...</UiCarouselItem>
      <UiCarouselItem>...</UiCarouselItem>
      <UiCarouselItem>...</UiCarouselItem>
    </UiCarouselContent>
  </UiCarousel>
</template>
```

## API

### Method 1

Use the `@init-api` emit method on `<UiCarousel />` component to set the instance of the API.

::prose-show-case
:docs-carousel-method1

#code
```vue [DocsCarouselMethod1.vue]
<template>
  <div class="flex flex-col items-center gap-5">
    <UiCarousel class="relative w-full max-w-xs" @init-api="setApi">
      <UiCarouselContent>
        <UiCarouselItem v-for="(_, index) in 5" :key="index" grab-cursor>
          <div class="p-1">
            <UiCard>
              <UiCardContent class="flex aspect-square items-center justify-center p-6">
                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
              </UiCardContent>
            </UiCard>
          </div>
        </UiCarouselItem>
      </UiCarouselContent>
      <UiCarouselPrevious />
      <UiCarouselNext />
    </UiCarousel>

    <div class="text-muted-foreground py-2 text-center text-sm">
      Slide {{ current }} of {{ totalCount }}
    </div>
  </div>
</template>

<script lang="ts" setup>
  import type { CarouselApi } from "~/composables/useCarousel";

  const api = ref<CarouselApi>();
  const totalCount = ref(0);
  const current = ref(0);

  function setApi(val: CarouselApi) {
    api.value = val;
  }

  watchOnce(api, (api) => {
    if (!api) return;

    totalCount.value = api.scrollSnapList().length;
    current.value = api.selectedScrollSnap() + 1;

    api.on("select", () => {
      current.value = api.selectedScrollSnap() + 1;
    });
  });
</script>
```
::

### Method 2

You can access it through setting a template ref on the `<UiCarousel />` component.

```vue
<template>
  <UiCarousel ref="carouselContainerRef"> ... </UiCarousel>
</template>

<script setup lang="ts">
  import { UiCarousel } from "#components";

  const carouselContainerRef = ref<InstanceType<typeof UiCarousel> | null>(null);

  function accessApi() {
    carouselContainerRef.value?.carouselApi.on("select", () => {});
  }
</script>
```

## Events

You can listen to events using the API. To get the API instance use the `@init-api` emit method on the `<UiCarousel />` component

```vue
<template>
  <UiCarousel @init-api="setApi"> ... </UiCarousel>
</template>

<script setup lang="ts">
  import type { CarouselApi } from "~/utils/useCarousel";

  const api = ref<CarouselApi>();
  function setApi(val: CarouselApi) {
    api.value = val;
  }
  const stop = watch(api, (api) => {
    if (!api) return;
    // Watch only once or use watchOnce() in @vueuse/core
    nextTick(() => stop());
    api.on("select", () => {
      // Do something on select.
    });
  });
</script>
```

See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/){rel="&#x22;nofollow&#x22;" target="\_blank"} for more information on using events.

## Slot Props

You can get the reactive slot props like `carouselRef, canScrollNext..Prev, scrollNext..Prev` using the `v-slot` directive in the `<UiCarousel v-slot="slotProps" />` component to extend the functionality.

```vue
<template>
  <UiCarousel v-slot="{ canScrollNext, canScrollPrev }">
    ...
    <UiCarouselPrevious v-if="canScrollPrev" />
    <UiCarouselNext v-if="canScrollNext" />
  </UiCarousel>
</template>
```

## Plugins

You can use the `plugins` prop to add plugins to the carousel.

```bash
npm i embla-carousel-autoplay
```

```vue
<template>
  <UiCarousel class="w-full max-w-xs" :plugins="[Autoplay({ delay: 2000 })]"> ... </UiCarousel>
</template>

<script setup lang="ts">
  import Autoplay from "embla-carousel-autoplay";
</script>
```

::prose-show-case
:docs-carousel-plugin

#code
```vue [DocsCarouselPlugin.vue]
<template>
  <div class="flex flex-col items-center gap-5">
    <UiCarousel
      class="relative w-full max-w-xs"
      :plugins="[plugin]"
      @mouseenter="plugin.stop"
      @mouseleave="[plugin.reset(), plugin.play(), console.log('Running')]"
    >
      <UiCarouselContent>
        <UiCarouselItem v-for="(_, index) in 5" :key="index" grab-cursor>
          <div class="p-1">
            <UiCard>
              <UiCardContent class="flex aspect-square items-center justify-center p-6">
                <span class="text-4xl font-semibold">{{ index + 1 }}</span>
              </UiCardContent>
            </UiCard>
          </div>
        </UiCarouselItem>
      </UiCarouselContent>
      <UiCarouselPrevious />
      <UiCarouselNext />
    </UiCarousel>
  </div>
</template>

<script lang="ts" setup>
  import Autoplay from "embla-carousel-autoplay";

  const plugin = Autoplay({
    delay: 2000,
    stopOnMouseEnter: true,
    stopOnInteraction: false,
  });
</script>
```
::

See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/){rel="&#x22;nofollow&#x22;" target="\_blank"} for more information on using plugins.


# Checkbox

## Source code

Click :source-code-link{component="Checkbox"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add checkbox
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add checkbox
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add checkbox
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add checkbox
```
::

## Usage

### Basic

::prose-show-case
:docs-checkbox

#code
```vue [DocsCheckbox.vue]
<template>
  <div class="flex flex-col items-center justify-center">
    <div class="flex items-center gap-2">
      <UiCheckbox id="checkbox-terms" v-model="terms" />
      <UiLabel for="checkbox-terms">
        <span class="mt-0.5 ml-2"
          >I agree to the <a href="#" class="text-primary underline">terms and conditions</a></span
        >
      </UiLabel>
    </div>

    <div class="items-top mt-5 flex space-x-2">
      <UiCheckbox id="terms1" v-model="terms1" />
      <div class="mt-0.5 grid gap-1.5 leading-none">
        <UiLabel for="terms1"> Accept terms and conditions </UiLabel>
        <p class="text-muted-foreground text-sm">
          You agree to our Terms of Service and Privacy Policy.
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const terms = ref(false);
  const terms1 = ref(false);
</script>
```
::

### Default

::prose-show-case
:docs-checkbox-default-values

#code
```vue [DocsCheckboxDefaultValues.vue]
<template>
  <div class="flex flex-col items-center justify-center">
    <div class="items-top mt-5 flex space-x-2">
      <UiCheckbox id="default-value" default-value="indeterminate" />
      <div class="mt-0.5 grid gap-1.5 leading-none">
        <UiLabel for="default-value"> Waiting...</UiLabel>
        <p class="text-muted-foreground text-sm">
          This checkbox will be in the indeterminate state by default.
        </p>
      </div>
    </div>
  </div>
</template>
```
::

### Shadcn

::prose-show-case
:docs-checkbox-shadcn

#code
```vue [DocsCheckboxShadcn.vue]
<template>
  <div class="flex flex-col items-center justify-center">
    <div class="flex flex-col gap-6">
      <div class="flex items-center gap-3">
        <UiCheckbox id="terms" />
        <UiLabel for="terms">Accept terms and conditions</UiLabel>
      </div>
      <div class="flex items-start gap-3">
        <UiCheckbox id="terms-2" default-value />
        <div class="grid gap-2">
          <UiLabel for="terms-2">Accept terms and conditions</UiLabel>
          <p class="text-muted-foreground text-sm">
            By clicking this checkbox, you agree to the terms and conditions.
          </p>
        </div>
      </div>
      <div class="flex items-start gap-3">
        <UiCheckbox id="toggle" disabled />
        <UiLabel for="toggle">Enable notifications</UiLabel>
      </div>
      <UiLabel
        class="hover:bg-accent/50 flex items-start justify-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950"
      >
        <UiCheckbox
          id="toggle-2"
          default-value="indeterminate"
          class="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
        />
        <div class="grid gap-1.5 font-normal">
          <p class="text-sm leading-none font-medium">Enable notifications</p>
          <p class="text-muted-foreground text-sm">
            You can enable or disable notifications at any time.
          </p>
        </div>
      </UiLabel>
    </div>
  </div>
</template>

<script lang="ts" setup></script>
```
::

## Origin UI

### Simple

::prose-show-case
:docs-checkbox-origin-simple

#code
```vue [DocsCheckboxOriginSimple.vue]
<template>
  <div class="flex flex-col items-center justify-center">
    <div class="flex items-center gap-2">
      <UiCheckbox :id="id" />
      <UiLabel :for="id">Simple checkbox</UiLabel>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const id = useId();
</script>
```
::

### Indeterminate

::prose-show-case
:docs-checkbox-origin-indeterminate

#code
```vue [DocsCheckboxOriginIndeterminate.vue]
<template>
  <div class="flex flex-col items-center justify-center">
    <div class="flex items-center gap-2">
      <UiCheckbox :id="id" default-value="indeterminate" />
      <UiLabel :for="id">Indeterminate checkbox</UiLabel>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const id = useId();
</script>
```
::

### Colored

::prose-show-case
:docs-checkbox-origin-colored

#code
```vue [DocsCheckboxOriginColored.vue]
<template>
  <div
    class="flex items-center justify-center [--primary:var(--color-indigo-500)] [--ring:var(--color-indigo-300)] dark:[--ring:var(--color-indigo-900)]"
  >
    <div class="flex items-center gap-2">
      <UiCheckbox :id="id" default-value />
      <UiLabel :for="id">Colored checkbox</UiLabel>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const id = useId();
</script>
```
::

### Disabled

::prose-show-case
:docs-checkbox-origin-disabled

#code
```vue [DocsCheckboxOriginDisabled.vue]
<template>
  <div class="flex items-center justify-center">
    <div class="flex items-center gap-2">
      <UiCheckbox :id="id" disabled />
      <UiLabel :for="id">Disabled checkbox</UiLabel>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const id = useId();
</script>
```
::

### Line Through

::prose-show-case
:docs-checkbox-origin-line-through

#code
```vue [DocsCheckboxOriginLineThrough.vue]
<template>
  <div class="flex items-center justify-center">
    <div class="flex items-center gap-2">
      <UiCheckbox :id="id" default-value />
      <UiLabel :for="id" class="peer-data-[state=checked]:line-through">Simple todo item</UiLabel>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const id = useId();
</script>
```
::

### Fancy Todo

::prose-show-case
:docs-checkbox-origin-fancy-todo

#code
```vue [DocsCheckboxOriginFancyTodo.vue]
<template>
  <div class="flex items-center justify-center">
    <div class="flex items-center gap-2 [--primary:var(--color-emerald-500)]">
      <UiCheckbox :id class="rounded-full" default-value />
      <UiLabel
        :for="id"
        class="peer-data-[state=checked]:text-muted-foreground after:bg-muted-foreground relative after:absolute after:top-1/2 after:left-0 after:h-px after:w-full after:origin-bottom after:-translate-y-1/2 after:scale-x-0 after:transition-transform after:duration-500 after:ease-in-out peer-data-[state=checked]:after:origin-bottom peer-data-[state=checked]:after:scale-x-100"
      >
        Fancy todo item
      </UiLabel>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const id = useId();
</script>
```
::

### Frameworks (Group Checkbox)

::prose-show-case
:docs-checkbox-origin-group-frameworks

#code
```vue [DocsCheckboxOriginGroupFrameworks.vue]
<template>
  <div class="flex items-center justify-center">
    <UiCheckboxGroup v-model="selectedFrameworks" class="flex items-center gap-6">
      <div v-for="item in frameworks" :key="item.value" class="flex items-center gap-2">
        <UiCheckbox :id="item.value" :value="item.value" />
        <UiLabel :for="item.value">
          {{ item.name }}
        </UiLabel>
      </div>
    </UiCheckboxGroup>
  </div>
</template>

<script lang="ts" setup>
  const id = useId();

  const frameworks = [
    {
      name: "Vue",
      value: `${id}-vue`,
    },
    {
      name: "Nuxt",
      value: `${id}-nuxt`,
    },
    {
      name: "React",
      value: `${id}-react`,
    },
  ];
  const selectedFrameworks = ref([`${id}-vue`, `${id}-nuxt`]);
</script>
```
::

### Frameworks (Group Checkbox - Vertical)

::prose-show-case
:docs-checkbox-origin-group-vertical

#code
```vue [DocsCheckboxOriginGroupVertical.vue]
<template>
  <div class="flex items-center justify-center">
    <UiCheckboxGroup v-model="selectedFrameworks" orientation="vertical" class="grid gap-3">
      <div v-for="item in frameworks" :key="item.value" class="flex items-center gap-2">
        <UiCheckbox :id="item.value" :value="item.value" />
        <UiLabel :for="item.value">
          {{ item.name }}
        </UiLabel>
      </div>
    </UiCheckboxGroup>
  </div>
</template>

<script lang="ts" setup>
  const id = useId();

  const frameworks = [
    {
      name: "Vue",
      value: `${id}-vue`,
    },
    {
      name: "Nuxt",
      value: `${id}-nuxt`,
    },
    {
      name: "React",
      value: `${id}-react`,
    },
  ];
  const selectedFrameworks = ref([`${id}-vue`, `${id}-nuxt`]);
</script>
```
::

### Checkbox with Description

::prose-show-case
:docs-checkbox-origin-description

#code
```vue [DocsCheckboxOriginDescription.vue]
<template>
  <div class="mx-auto flex max-w-[350px] flex-col items-center justify-center gap-10">
    <div class="flex items-start gap-2">
      <UiCheckbox :id="id" :aria-describedby="`${id}-description`" />
      <div class="grid grow gap-2">
        <UiLabel :for="id" hint="(Sublabel)" class="justify-start"> Label </UiLabel>
        <p :id="`${id}-description`" class="text-muted-foreground text-xs">
          You can use this checkbox with a label and a description.
        </p>
      </div>
    </div>

    <div class="flex items-start gap-2">
      <UiCheckbox :id="id2" :aria-describedby="`${id2}-description`" class="order-1" />
      <div class="grid grow gap-2">
        <UiLabel :for="id2" hint="(Sublabel)" class="justify-start"> Label </UiLabel>
        <p :id="`${id2}-description`" class="text-muted-foreground text-xs">
          You can use this checkbox with a label and a description.
        </p>
      </div>
    </div>

    <div
      class="border-input has-data-[state=checked]:border-primary/50 relative flex w-full items-start gap-2 rounded-md border p-4 shadow-xs outline-none"
    >
      <UiCheckbox
        :id="id3"
        :aria-describedby="`${id3}-description`"
        class="order-1 after:absolute after:inset-0"
      />
      <div class="grid grow gap-2">
        <UiLabel :for="id3" hint="(Sublabel)" class="justify-start"> Label </UiLabel>
        <p :id="`${id3}-description`" class="text-muted-foreground text-xs">
          A short description goes here
        </p>
      </div>
    </div>

    <div
      class="border-input has-data-[state=checked]:border-primary/50 relative flex w-full items-start gap-2 rounded-md border p-4 shadow-xs outline-none"
    >
      <UiCheckbox
        :id="id4"
        class="order-1 after:absolute after:inset-0"
        :aria-describedby="`${id4}-description`"
      />
      <div class="flex grow items-start gap-3">
        <Icon name="logos:mastercard" class="size-6" />
        <div class="grid gap-2">
          <UiLabel :for="id4" hint="(Sublabel)" class="justify-start"> Label </UiLabel>
          <p :id="`${id4}-description`" class="text-muted-foreground text-xs">
            A short description goes here.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const id = useId();
  const id2 = useId();
  const id3 = useId();
  const id4 = useId();
</script>
```
::

### Selections

::prose-show-case
:docs-checkbox-origin-options

#code
```vue [DocsCheckboxOriginOptions.vue]
<!-- eslint-disable vue/html-self-closing -->
<template>
  <div class="mx-auto flex w-full max-w-[350px] flex-col justify-center gap-10">
    <UiCheckboxGroup class="grid w-full grid-cols-2 gap-3">
      <div
        v-for="item in options"
        :key="`${id}-${item.value}`"
        class="border-input has-data-[state=checked]:border-primary/50 relative flex cursor-pointer flex-col gap-4 rounded-md border p-4 shadow-xs outline-none"
      >
        <div class="flex justify-between gap-2">
          <UiCheckbox
            :id="`${id}-${item.value}`"
            :value="item.value"
            class="order-1 after:absolute after:inset-0"
          />
          <Icon :name="item.icon" class="size-4 opacity-60" aria-hidden="true" />
        </div>
        <UiLabel :for="`${id}-${item.value}`">{{ item.label }}</UiLabel>
      </div>
    </UiCheckboxGroup>

    <fieldset class="space-y-4">
      <legend class="text-foreground text-sm leading-none font-medium">Days of the week</legend>
      <UiCheckboxGroup v-model="selectedDays" class="flex gap-1.5">
        <label
          v-for="item in items"
          :key="`${id}-${item.value}`"
          class="border-input has-focus-visible:border-ring has-focus-visible:ring-ring/50 has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary has-data-[state=checked]:text-primary-foreground relative flex size-9 cursor-pointer flex-col items-center justify-center gap-3 rounded-full border text-center shadow-xs transition-[color,box-shadow] outline-none has-focus-visible:ring-[3px] has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50"
        >
          <UiCheckbox
            :id="`${id}-${item.value}`"
            :value="item.value"
            class="sr-only after:absolute after:inset-0"
            :disabled="item.disabled"
          />
          <span aria-hidden="true" class="text-sm font-medium"> {{ item.label[0] }} </span>
          <span class="sr-only">{{ item.label }}</span>
        </label>
      </UiCheckboxGroup>
    </fieldset>

    <div class="space-y-4">
      <legend class="text-foreground text-sm leading-none font-medium">
        Dark mode toggle checkbox
      </legend>
      <div class="flex flex-col justify-center">
        <input
          :id="darkModeId"
          type="checkbox"
          :name="darkModeId"
          class="peer sr-only"
          :checked="colorMode.value == 'dark'"
          @change="colorMode.preference = colorMode.value == 'dark' ? 'light' : 'dark'"
        />
        <label
          class="group border-input bg-background text-foreground peer-focus-visible:border-ring peer-focus-visible:ring-ring/50 hover:bg-accent hover:text-accent-foreground relative inline-flex size-9 cursor-pointer items-center justify-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none peer-focus-visible:ring-[3px]"
          :for="darkModeId"
          :aria-label="`Switch to ${colorMode.value === 'dark' ? 'light' : 'dark'} mode`"
        >
          <Icon
            name="lucide:moon"
            class="size-4 shrink-0 scale-100 opacity-100 transition-all dark:scale-0 dark:opacity-0"
            aria-hidden="true"
          />
          <Icon
            name="lucide:sun-medium"
            class="absolute size-4 shrink-0 scale-0 opacity-0 transition-all dark:scale-100 dark:opacity-100"
            aria-hidden="true"
          />
        </label>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const id = useId();
  const darkModeId = useId();

  const colorMode = useColorMode();

  const options = [
    { label: "Palette", icon: "lucide:swatch-book", value: useId() },
    { label: "Brush", icon: "lucide:brush", value: useId() },
    { label: "Eraser", icon: "lucide:eraser", value: useId() },
    { label: "Cut", icon: "lucide:scissors", value: useId() },
  ];

  const items = [
    { value: "1", label: "Monday" },
    { value: "2", label: "Tuesday" },
    { value: "3", label: "Wednesday" },
    { value: "4", label: "Thursday" },
    { value: "5", label: "Friday" },
    { value: "6", label: "Saturday" },
    { value: "7", label: "Sunday", disabled: true },
  ];

  const selectedDays = ref(["1", "2", "4", "5"]);
</script>
```
::


# Chip

## Source code

Click :source-code-link{component="Chip.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add chip
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add chip
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add chip
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add chip
```
::

## Usage

### Basic

::prose-show-case
:docs-chip

#code
```vue [DocsChip.vue]
<template>
  <div class="flex w-full justify-center">
    <UiChip>
      <UiButton size="icon-sm" variant="outline">
        <Icon name="lucide:inbox" class="size-5" />
      </UiButton>
    </UiChip>
  </div>
</template>
```
::

### Size

Pass a size to the `size` prop to change the size of the chip.

::prose-show-case
:docs-chip-size

#code
```vue [DocsChipSize.vue]
<template>
  <div class="flex w-full flex-wrap justify-center gap-4">
    <UiChip v-for="s in sizes" :key="s" :size="s">
      <UiButton size="icon-sm" variant="outline">
        <Icon name="lucide:inbox" class="size-5" />
      </UiButton>
    </UiChip>
  </div>
</template>

<script lang="ts" setup>
  const sizes = ["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"] as const;
</script>
```
::

### Color

You can change the color of the chip by passing any tailwind color `bg` class to the `color` prop.

::prose-show-case
:docs-chip-color

#code
```vue [DocsChipColor.vue]
<template>
  <div class="flex w-full justify-center">
    <UiChip color="bg-destructive">
      <UiButton size="icon-sm" variant="outline">
        <Icon name="lucide:inbox" class="size-5" />
      </UiButton>
    </UiChip>
  </div>
</template>
```
::

### Text

You can display a text inside the chip by passing a `string` to the `text` prop.

::prose-show-case
:docs-chip-text

#code
```vue [DocsChipText.vue]
<template>
  <div class="flex w-full justify-center gap-4">
    <UiInput v-model="text" type="number" class="w-20" />
    <UiChip class="bg-sky-500 text-white" size="2xl" :text="text?.toString()">
      <UiButton size="icon" variant="outline">
        <Icon name="lucide:inbox" class="size-5" />
      </UiButton>
    </UiChip>
  </div>
</template>

<script lang="ts" setup>
  const text = ref(3);
</script>
```
::

### Inset

The `inset` prop can be used to move the indicator closer to the element.

::prose-show-case
:docs-chip-inset

#code
```vue [DocsChipInset.vue]
<template>
  <div class="flex w-full flex-wrap justify-center gap-4">
    <UiChip size="xl" :inset="false">
      <UiButton size="icon" variant="outline">
        <Icon name="lucide:inbox" class="size-5" />
      </UiButton>
    </UiChip>
    <UiChip size="xl" inset>
      <UiButton size="icon" variant="outline">
        <Icon name="lucide:inbox" class="size-5" />
      </UiButton>
    </UiChip>
  </div>
</template>
```
::


# Circular Progress

## Source code

Click :source-code-link{component="CircularProgress.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add circular-progress
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add circular-progress
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add circular-progress
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add circular-progress
```
::

## Usage

### Basic

A simple progress indicator. The `progress` prop accepts a value between `0` and `1`.

::prose-show-case
:docs-circular-progress-basic

#code
```vue [DocsCircularProgressBasic.vue]
<template>
  <div class="flex items-center justify-center">
    <UiCircularProgress :progress="progress" show-value size="lg" />
  </div>
</template>

<script lang="ts" setup>
  const progress = ref(0.3);

  useIntervalFn(() => {
    progress.value = parseFloat(Math.random().toFixed(2));
  }, 2000);
</script>
```
::

### Sizes

Five size presets are available: `xs`, `sm`, `default`, `lg`, and `xl`. Each preset sets a sensible radius and stroke width. You can override either with the `radius` and `stroke-width` props.

::prose-show-case
:docs-circular-progress-sizes

#code
```vue [DocsCircularProgressSizes.vue]
<template>
  <div class="flex flex-wrap items-end justify-center gap-6">
    <div v-for="s in sizes" :key="s" class="flex flex-col items-center gap-2">
      <UiCircularProgress :size="s" :progress="0.65" />
      <span class="text-muted-foreground text-xs">{{ s }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import type { CircularProgressVariants } from "@/components/Ui/CircularProgress.vue";

  const sizes: NonNullable<CircularProgressVariants["size"]>[] = [
    "xs",
    "sm",
    "default",
    "lg",
    "xl",
  ];
</script>
```
::

### Colors

The `color` prop accepts `default`, `secondary`, `success`, `warning`, or `destructive`. All colors map to semantic design tokens so they automatically adapt to the active theme.

::prose-show-case
:docs-circular-progress-colors

#code
```vue [DocsCircularProgressColors.vue]
<template>
  <div class="flex flex-wrap items-center justify-center gap-6">
    <div v-for="c in colors" :key="c" class="flex flex-col items-center gap-2">
      <UiCircularProgress :color="c" :progress="0.65" size="lg" show-value />
      <span class="text-muted-foreground text-xs capitalize">{{ c }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import type { CircularProgressVariants } from "@/components/Ui/CircularProgress.vue";

  const colors: NonNullable<CircularProgressVariants["color"]>[] = [
    "default",
    "secondary",
    "success",
    "warning",
    "destructive",
  ];
</script>
```
::

### Step-based progress

Pass `current-step` and `total-steps` to drive progress from a wizard or multi-step flow. The value is automatically clamped to `[0, 1]`.

::prose-show-case
:docs-circular-progress-steps

#code
```vue [DocsCircularProgressSteps.vue]
<template>
  <div class="flex flex-col items-center gap-5">
    <UiCircularProgress
      :current-step="currentStep"
      :total-steps="totalSteps"
      size="xl"
      show-value
    />
    <p class="text-muted-foreground text-sm">Step {{ currentStep }} of {{ totalSteps }}</p>
    <div class="flex items-center gap-2">
      <UiButton size="sm" variant="outline" :disabled="currentStep <= 1" @click="currentStep--">
        Previous
      </UiButton>
      <UiButton
        size="sm"
        variant="outline"
        :disabled="currentStep >= totalSteps"
        @click="currentStep++"
      >
        Next
      </UiButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const currentStep = ref(2);
  const totalSteps = ref(5);
</script>
```
::

### Indeterminate

Set `indeterminate` when the progress is unknown. The SVG spins and the component switches to `role="status"` with an `aria-label` of `"Loading"`.

::prose-show-case
:docs-circular-progress-indeterminate

#code
```vue [DocsCircularProgressIndeterminate.vue]
<template>
  <div class="flex flex-wrap items-end justify-center gap-6">
    <div v-for="s in sizes" :key="s" class="flex flex-col items-center gap-2">
      <UiCircularProgress :size="s" indeterminate />
      <span class="text-muted-foreground text-xs">{{ s }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import type { CircularProgressVariants } from "@/components/Ui/CircularProgress.vue";

  const sizes: NonNullable<CircularProgressVariants["size"]>[] = [
    "xs",
    "sm",
    "default",
    "lg",
    "xl",
  ];
</script>
```
::

### Custom label

The default slot renders centered inside the circle. Use it for icons, text, or any custom content. The `show-value` prop is a convenience shorthand that renders the percentage when no slot is provided.

::prose-show-case
:docs-circular-progress-custom-label

#code
```vue [DocsCircularProgressCustomLabel.vue]
<template>
  <div class="flex flex-wrap items-center justify-center gap-8">
    <UiCircularProgress :progress="0.8" size="xl">
      <Icon name="lucide:check" class="text-primary size-5" />
    </UiCircularProgress>
    <UiCircularProgress :progress="0.45" size="xl" color="warning">
      <Icon name="lucide:zap" class="size-5 text-yellow-500 dark:text-yellow-400" />
    </UiCircularProgress>
    <UiCircularProgress :progress="0.2" size="xl" color="destructive">
      <Icon name="lucide:x" class="text-destructive size-5" />
    </UiCircularProgress>
    <UiCircularProgress :progress="1" size="xl" color="success">
      <Icon name="lucide:badge-check" class="size-5 text-green-500 dark:text-green-400" />
    </UiCircularProgress>
  </div>
</template>
```
::


# Collapsible

## Source code

Click :source-code-link{component="Collapsible"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add collapsible
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add collapsible
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add collapsible
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add collapsible
```
::

## Usage

::prose-show-case
:docs-collapsible

#code
```vue [DocsCollapsible.vue]
<template>
  <div class="flex items-center justify-center">
    <UiCollapsible v-slot="{ open }" class="w-[350px] space-y-2">
      <div class="flex items-center justify-between space-x-4 px-2">
        <div class="flex items-center gap-3">
          <UiAvatar src="https://behonbaker.com/icon.png" class="ring-muted/50 ring" />
          <h4 class="text-sm font-semibold">BayBreezy starred 3 repositories</h4>
        </div>
        <UiCollapsibleTrigger as-child>
          <UiButton variant="ghost" size="icon-sm">
            <Icon
              name="lucide:chevron-down"
              class="size-4 transform duration-300"
              :class="[open && 'rotate-180']"
            />
            <span class="sr-only">View starred repositories</span>
          </UiButton>
        </UiCollapsibleTrigger>
      </div>
      <div class="rounded-md border px-4 py-3 font-mono text-sm font-semibold">nuxt/nuxt</div>
      <UiCollapsibleContent class="space-y-2">
        <div class="rounded-md border px-4 py-3 font-mono text-sm font-semibold">
          BayBreezy/ui-thing
        </div>
        <div class="rounded-md border px-4 py-3 font-mono text-sm font-semibold">unjs/c12</div>
      </UiCollapsibleContent>
    </UiCollapsible>
  </div>
</template>
```
::


# Color Picker

## Source code

Click :source-code-link{component="ColorPicker"} to see the source code for this component on GitHub.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add color-picker
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add color-picker
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add color-picker
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add color-picker
```
::

## Usage

### Basic

::prose-show-case
:docs-color-picker-basic

#code
```vue [DocsColorPickerBasic.vue]
<template>
  <div class="flex flex-col gap-4">
    <UiColorPicker v-model="color" />
    <div class="text-muted-foreground text-sm">
      Selected color: <span class="font-mono font-semibold">{{ color }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const color = ref("#FF5833");
</script>
```
::

### With Alpha Channel

Enable alpha/opacity control by setting `show-alpha` to `true`.

::prose-show-case
:docs-color-picker-alpha

#code
```vue [DocsColorPickerAlpha.vue]
<template>
  <div class="flex flex-col gap-4">
    <UiColorPicker v-model="color" show-alpha />
    <div class="text-muted-foreground text-sm">
      Selected color: <span class="font-mono font-semibold">{{ color }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const color = ref("#FF583380");
</script>
```
::

### Multiple Formats

The color picker supports HEX, RGB, HSL, and HSV formats. Users can toggle between formats using the dropdown selector.

::prose-show-case
:docs-color-picker-formats

#code
```vue [DocsColorPickerFormats.vue]
<template>
  <div class="flex flex-col gap-4">
    <UiColorPicker v-model="color" :format="format" @update:format="format = $event" />
    <div class="text-muted-foreground flex flex-wrap gap-2 text-sm">
      <div>
        HEX: <span class="font-mono font-semibold">{{ hexColor }}</span>
      </div>
      <div>
        RGB: <span class="font-mono font-semibold">{{ rgbColor }}</span>
      </div>
      <div>
        HSL: <span class="font-mono font-semibold">{{ hslColor }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { colord } from "colord";

  const color = ref("#3B82F6");
  const format = ref<ColorFormat>("hex");

  const hexColor = computed(() => colord(color.value).toHex());
  const rgbColor = computed(() => colord(color.value).toRgbString());
  const hslColor = computed(() => colord(color.value).toHslString());
</script>
```
::

### With Preset Swatches

Add preset color swatches for quick selection.

::prose-show-case
:docs-color-picker-presets

#code
```vue [DocsColorPickerPresets.vue]
<template>
  <div class="flex flex-col gap-4">
    <UiColorPicker v-model="color" :show-presets="true" :presets="presetColors" />
    <div class="text-muted-foreground text-sm">
      Selected color: <span class="font-mono font-semibold">{{ color }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const color = ref("#3B82F6");

  const presetColors = [
    "#EF4444",
    "#F97316",
    "#F59E0B",
    "#EAB308",
    "#84CC16",
    "#22C55E",
    "#10B981",
    "#14B8A6",
    "#06B6D4",
    "#0EA5E9",
    "#3B82F6",
    "#6366F1",
    "#8B5CF6",
    "#A855F7",
    "#D946EF",
    "#EC4899",
  ];
</script>
```
::

### Full Featured Showcase

See all features in action: alpha channel, format toggle, input field, and preset swatches.

::prose-show-case
:docs-color-picker-showcase

#code
```vue [DocsColorPickerShowcase.vue]
<template>
  <div class="flex flex-col gap-6">
    <!-- Color Picker with all features -->
    <div class="space-y-2">
      <h3 class="text-sm font-semibold">Full Featured Color Picker</h3>
      <div class="border-border bg-card rounded-lg border p-4">
        <UiColorPicker
          v-model="selectedColor"
          :format="format"
          show-alpha
          show-format-toggle
          show-input
          show-presets
          :presets="presetColors"
          class="w-fit"
          @update:format="format = $event"
        />
      </div>
    </div>

    <!-- Display selected color details -->
    <div class="grid gap-4 sm:grid-cols-2">
      <!-- Color Information -->
      <UiCard>
        <UiCardContent class="space-y-3">
          <UiCardTitle class="text-sm font-semibold">Color Information</UiCardTitle>
          <div class="space-y-2 font-mono text-xs">
            <div class="flex justify-between">
              <span class="text-muted-foreground">Current Format:</span>
              <span class="font-semibold uppercase">{{ format }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-muted-foreground">Value:</span>
              <span class="font-semibold">{{ selectedColor }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-muted-foreground">HEX:</span>
              <span class="font-semibold">{{ hexValue }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-muted-foreground">RGB:</span>
              <span class="font-semibold">{{ rgbValue }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-muted-foreground">HSL:</span>
              <span class="font-semibold">{{ hslValue }}</span>
            </div>
          </div>
        </UiCardContent>
      </UiCard>

      <!-- Large Color Preview -->
      <UiCard>
        <UiCardContent class="space-y-3">
          <UiCardTitle class="text-sm font-semibold">Preview</UiCardTitle>
          <div
            class="border-border h-28 rounded-lg border-2 shadow-md"
            :style="{
              backgroundColor: selectedColor,
              backgroundImage: hasAlpha
                ? `linear-gradient(${selectedColor}, ${selectedColor}), 
                 repeating-linear-gradient(45deg, #e5e7eb 0, #e5e7eb 2px, transparent 0, transparent 50%), 
                 repeating-linear-gradient(-45deg, #e5e7eb 0, #e5e7eb 2px, transparent 0, transparent 50%)`
                : 'none',
              backgroundSize: hasAlpha ? '100%, 8px 8px, 8px 8px' : 'auto',
              backgroundPosition: hasAlpha ? '0 0, 0 0, 4px 4px' : '0 0',
            }"
          ></div>
        </UiCardContent>
      </UiCard>
    </div>

    <!-- Preset Swatches Display -->
    <UiCard>
      <UiCardContent class="space-y-3">
        <UiCardTitle class="text-sm font-semibold">Available Presets</UiCardTitle>
        <div class="flex flex-wrap gap-2">
          <button
            v-for="(preset, index) in presetColors"
            :key="index"
            type="button"
            class="focus-visible:ring-ring focus-visible:ring-offset-background relative h-10 w-10 rounded-lg border-2 transition-all hover:scale-110 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
            :style="{ backgroundColor: preset }"
            :title="preset"
            @click="selectedColor = preset"
          >
            <span
              v-if="selectedColor === preset"
              class="absolute inset-0 flex items-center justify-center"
            >
              <Icon name="lucide:check" class="h-5 w-5 text-white drop-shadow" />
            </span>
          </button>
        </div>
      </UiCardContent>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { colord } from "colord";

  const selectedColor = ref("#3B82F6");
  const format = ref<ColorFormat>("hex");

  const presetColors = [
    "#EF4444",
    "#F97316",
    "#F59E0B",
    "#EAB308",
    "#84CC16",
    "#22C55E",
    "#10B981",
    "#14B8A6",
    "#06B6D4",
    "#0EA5E9",
    "#3B82F6",
    "#6366F1",
    "#8B5CF6",
    "#A855F7",
    "#D946EF",
    "#EC4899",
  ];

  // Computed properties for color format conversions
  const hexValue = computed(() => colord(selectedColor.value).toHex());
  const rgbValue = computed(() => colord(selectedColor.value).toRgbString());
  const hslValue = computed(() => colord(selectedColor.value).toHslString());
  const hasAlpha = computed(() => {
    const color = colord(selectedColor.value);
    return color.alpha() < 1;
  });
</script>
```
::

### In a Popover

Combine with a Popover for a compact color picker trigger.

::prose-show-case
:docs-color-picker-popover

#code
```vue [DocsColorPickerPopover.vue]
<template>
  <div class="flex items-center justify-center">
    <UiPopover>
      <UiPopoverTrigger as-child>
        <UiButton variant="outline" class="w-fit justify-start gap-2 px-2">
          <div class="border-input size-4 rounded border" :style="{ backgroundColor: color }"></div>
          <span class="font-mono text-xs">{{ color }}</span>
        </UiButton>
      </UiPopoverTrigger>
      <UiPopoverContent class="w-auto p-3" align="start">
        <UiColorPicker
          v-model="color"
          :show-alpha="true"
          :show-presets="true"
          :presets="presetColors"
        />
      </UiPopoverContent>
    </UiPopover>
  </div>
</template>

<script lang="ts" setup>
  const color = ref("#3B82F6");

  const presetColors = [
    "#EF4444",
    "#F97316",
    "#F59E0B",
    "#22C55E",
    "#06B6D4",
    "#3B82F6",
    "#8B5CF6",
    "#EC4899",
  ];
</script>
```
::

## API

### Props

| Prop               | Type                            | Default     | Description                                                                             |
| ------------------ | ------------------------------- | ----------- | --------------------------------------------------------------------------------------- |
| `modelValue`       | `string`                        | `"#ff5733"` | The current color value. Accepts any valid color string supported by `colord`.          |
| `format`           | `"hex" | "rgb" | "hsl" | "hsv"` | `"hex"`     | Output format used for `update:modelValue` and the input field display.                 |
| `showAlpha`        | `boolean`                       | `false`     | Enables alpha/opacity editing and forces HEX output to `#rrggbbaa` when `format="hex"`. |
| `showFormatToggle` | `boolean`                       | `true`      | Shows the format dropdown (`HEX/RGB/HSL/HSV`).                                          |
| `showInput`        | `boolean`                       | `true`      | Shows the text input that displays/accepts the current color string.                    |
| `showPresets`      | `boolean`                       | `false`     | Shows preset swatches.                                                                  |
| `presets`          | `string[]`                      | `[]`        | List of preset colors.                                                                  |
| `class`            | `HTMLAttributes["class"]`       | `undefined` | Additional classes for the root wrapper.                                                |

### Events

| Event               | Payload                                   | Description                                                                                                                                                                              |
| ------------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `update:modelValue` | `(value: string)`                         | Fired whenever the internal color changes. The emitted string matches the selected `format`. If `showAlpha` is enabled and `format="hex"`, the output is always `#rrggbbaa` (lowercase). |
| `update:format`     | `(format: "hex" | "rgb" | "hsl" | "hsv")` | Fired when the format selection changes. Supports `v-model:format`.                                                                                                                      |

### Slots

| Slot       | Description                                             |
| ---------- | ------------------------------------------------------- |
| `top`      | Content rendered above the main UI.                     |
| `sv`       | Replace the default SV (saturation/value) component.    |
| `hue`      | Replace the default hue slider component.               |
| `alpha`    | Replace the default alpha slider component.             |
| `controls` | Replace preview + format + input area.                  |
| `presets`  | Replace preset swatches area.                           |
| `default`  | Rendered at the bottom inside the root (after presets). |

## Dependencies

This component uses the [colord](https://www.npmjs.com/package/colord){rel="&#x22;nofollow&#x22;" target="\_blank"} library for color parsing and conversion between different formats.


# Combobox

## Installation

The Combobox is built using a composition of the `<Popover />` and the `<Command />` components.

See installation instructions for the [Popover](https://uithing.com/components/popover) and the [Command](https://uithing.com/components/command) components.

## Usage

```vue
<template>
  <div class="flex justify-center">
    <UiPopover v-model:open="open">
      <UiPopoverTrigger as-child>
        <UiButton
          variant="outline"
          role="combobox"
          :aria-expanded="open"
          class="w-[250px] justify-between"
        >
          {{ value ? selectedFramework : "Select framework..." }}

          <Icon name="lucide:chevrons-up-down" class="ml-auto size-4 shrink-0 opacity-50" />
        </UiButton>
      </UiPopoverTrigger>
      <UiPopoverContent class="w-[250px] p-0">
        <UiCommand v-model="value">
          <UiCommandInput placeholder="Search framework..." />
          <UiCommandList>
            <UiCommandEmpty>No framework found.</UiCommandEmpty>
            <UiCommandGroup>
              <UiCommandItem
                v-for="framework in frameworks"
                :key="framework.value"
                :value="framework"
                @select="open = false"
              >
                <Icon
                  name="lucide:check"
                  :class="[
                    'mr-2 size-4',
                    value?.value === framework.value ? 'opacity-100' : 'opacity-0',
                  ]"
                />
                {{ framework.label }}
              </UiCommandItem>
            </UiCommandGroup>
          </UiCommandList>
        </UiCommand>
      </UiPopoverContent>
    </UiPopover>
  </div>
</template>

<script setup lang="ts">
  const frameworks = [
    { value: "next.js", label: "Next.js" },
    { value: "sveltekit", label: "SvelteKit" },
    { value: "nuxt.js", label: "Nuxt.js" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" },
  ];

  const open = ref(false);
  const value = ref();

  const selectedFramework = computed(
    () => frameworks.find((framework) => framework.value === value?.value?.value)?.label
  );
</script>
```

### Combobox

::prose-show-case
:docs-combobox

#code
```vue [DocsCombobox.vue]
<template>
  <div class="flex justify-center">
    <UiPopover v-model:open="open">
      <UiPopoverTrigger as-child>
        <UiButton
          variant="outline"
          role="combobox"
          :aria-expanded="open"
          class="w-[200px] justify-between"
        >
          {{ value ? selectedFramework : "Select framework..." }}

          <Icon name="lucide:chevrons-up-down" class="ml-auto size-4 shrink-0 opacity-50" />
        </UiButton>
      </UiPopoverTrigger>
      <UiPopoverContent class="w-(--reka-popover-trigger-width) p-0">
        <UiCommand v-model="value" by="label">
          <UiCommandInput placeholder="Search framework..." />
          <UiCommandList>
            <UiCommandEmpty>No framework found.</UiCommandEmpty>
            <UiCommandGroup>
              <UiCommandItem
                v-for="framework in frameworks"
                :key="framework.value"
                :value="framework"
                @select="open = false"
              >
                {{ framework.label }}
                <Icon
                  name="lucide:check"
                  :class="[
                    'ml-auto size-4',
                    value?.value === framework.value ? 'opacity-100' : 'opacity-0',
                  ]"
                />
              </UiCommandItem>
            </UiCommandGroup>
          </UiCommandList>
        </UiCommand>
      </UiPopoverContent>
    </UiPopover>
  </div>
</template>

<script setup lang="ts">
  const frameworks = [
    { value: "next.js", label: "Next.js" },
    { value: "sveltekit", label: "SvelteKit" },
    { value: "nuxt.js", label: "Nuxt.js" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" },
  ];

  const open = ref(false);
  const value = ref();

  const selectedFramework = computed(
    () => frameworks.find((framework) => framework.value === value?.value?.value)?.label
  );
</script>
```
::

### Origin UI

::prose-show-case
:docs-combobox-origin

#code
```vue [DocsComboboxOrigin.vue]
<template>
  <div class="mx-auto grid max-w-xs grid-cols-1 gap-8">
    <div class="grid gap-2">
      <UiLabel>Combobox with search</UiLabel>
      <UiPopover v-model:open="open">
        <UiPopoverTrigger as-child>
          <UiButton variant="outline" role="combobox" class="w-full justify-between">
            <span :class="['truncate', selectedFramework ? '' : 'text-muted-foreground']">{{
              selectedFramework || "Select a framework"
            }}</span>
            <Icon name="lucide:chevron-down" class="text-muted-foreground/50 size-4 shrink-0" />
          </UiButton>
        </UiPopoverTrigger>
        <UiPopoverContent class="border-input w-(--reka-popover-trigger-width) p-0">
          <UiCommand v-model="value" by="label">
            <UiCommandInput placeholder="Search framework..." />
            <UiCommandList>
              <UiCommandEmpty>No framework found.</UiCommandEmpty>
              <UiCommandGroup>
                <UiCommandItem
                  v-for="framework in frameworks"
                  :key="framework.value"
                  :value="framework.value"
                  @select="open = false"
                >
                  {{ framework.label }}
                  <Icon
                    v-if="value === framework.value"
                    name="lucide:check"
                    :size="16"
                    class="ml-auto"
                  />
                </UiCommandItem>
              </UiCommandGroup>
            </UiCommandList>
          </UiCommand>
        </UiPopoverContent>
      </UiPopover>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const frameworks = [
    { value: "next.js", label: "Next.js" },
    { value: "sveltekit", label: "SvelteKit" },
    { value: "nuxt.js", label: "Nuxt.js" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" },
    { value: "angular", label: "Angular" },
    { value: "vue", label: "Vue.js" },
    { value: "react", label: "React" },
    { value: "ember", label: "Ember.js" },
    { value: "gatsby", label: "Gatsby" },
    { value: "eleventy", label: "Eleventy" },
    { value: "solid", label: "SolidJS" },
    { value: "preact", label: "Preact" },
    { value: "qwik", label: "Qwik" },
    { value: "alpine", label: "Alpine.js" },
    { value: "lit", label: "Lit" },
  ];

  const open = ref(false);
  const value = ref("nuxt.js");
  const selectedFramework = computed(
    () => frameworks.find((framework) => framework.value === value?.value)?.label
  );
</script>
```
::


# Command

## Source code

Click :source-code-link{component="Command"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add command
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add command
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add command
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add command
```
::

## Usage

### Basic

::prose-show-case
:docs-command

#code
```vue [DocsCommand.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiCommand class="w-full max-w-sm rounded-lg border shadow-md" highlight-on-hover>
      <UiCommandInput placeholder="Type a command or search..." />
      <UiCommandList>
        <UiCommandEmpty>No results found.</UiCommandEmpty>
        <template v-for="(item, label, i) in items" :key="i">
          <UiCommandGroup :heading="label">
            <UiCommandItem
              v-for="(child, k) in item"
              :key="k"
              :text="child.label"
              :icon="child.icon"
              :value="child.label"
              :disabled="child.disabled"
              :shortcut="child.shortcut"
              @select="
                child.perform?.();
                $event.preventDefault();
              "
            />
          </UiCommandGroup>
          <UiCommandSeparator class="last:hidden" />
        </template>
      </UiCommandList>
    </UiCommand>
  </div>
</template>

<script lang="ts" setup>
  type CommandItem = {
    label: string;
    icon: string;
    perform: () => string | number;
    disabled?: boolean;
    shortcut?: string;
  };

  const items: Record<string, CommandItem[]> = {
    Suggestions: [
      {
        label: "Calendar",
        icon: "lucide:calendar",
        perform: () => useSonner("Now performing the action: Calendar"),
      },
      {
        label: "Search Emoji",
        icon: "lucide:smile",
        perform: () => useSonner("Now performing the action: Smile"),
      },
      {
        label: "Calculator",
        icon: "lucide:calculator",
        disabled: true,
        perform: () => useSonner("Now performing the action: Calculator"),
      },
    ],
    Settings: [
      {
        label: "Profile",
        icon: "lucide:user",
        perform: () => useSonner("Now performing the action: User profile"),
        shortcut: "⌘P",
      },
      {
        label: "Billing",
        icon: "lucide:credit-card",
        perform: () => useSonner("Now performing the action: Billing"),
        shortcut: "⌘B",
      },
      {
        label: "Settings",
        icon: "lucide:settings",
        perform: () => useSonner("Now performing the action: Settings"),
        shortcut: "⌘S",
      },
    ],
  };
</script>
```
::

### Dialog

::prose-show-case
:docs-command-shortcut

#code
```vue [DocsCommandShortcut.vue]
<template>
  <div class="flex flex-col items-center justify-center">
    <p class="text-muted-foreground text-sm">
      Press
      <UiKbd variant="outline"> ⌘J </UiKbd>
    </p>
    <UiCommandDialog v-model:open="open">
      <UiCommandInput placeholder="Type a command or search..." />
      <UiCommandList>
        <UiCommandEmpty>No results found.</UiCommandEmpty>
        <UiCommandGroup heading="Navigation">
          <UiCommandItem value="home" text="Home" icon="lucide:home" />
          <UiCommandItem value="inbox" text="Inbox" icon="lucide:inbox" />
          <UiCommandItem value="documents" text="Documents" icon="lucide:file-text" />
          <UiCommandItem value="folders" text="Folders" icon="lucide:folder" />
        </UiCommandGroup>
        <UiCommandSeparator />
        <UiCommandGroup heading="Actions">
          <UiCommandItem value="new-file" text="New File" icon="lucide:plus" shortcut="⌘N" />
          <UiCommandItem
            value="new-window"
            text="New Window"
            icon="lucide:app-window"
            shortcut="⌘⇧N"
          />
          <UiCommandItem
            value="new-folder"
            text="New Folder"
            icon="lucide:folder-plus"
            shortcut="⌘,"
          />
          <UiCommandItem value="copy" text="Copy" icon="lucide:copy" shortcut="⌘C" />
          <UiCommandItem value="cut" text="Cut" icon="lucide:scissors" shortcut="⌘X" />
          <UiCommandItem value="paste" text="Paste" icon="lucide:clipboard" shortcut="⌘V" />
          <UiCommandItem value="delete" text="Delete" icon="lucide:trash" shortcut="⌘⌫" />
        </UiCommandGroup>
        <UiCommandSeparator />
        <UiCommandGroup heading="Suggestions">
          <UiCommandItem value="calendar" text="Calendar" icon="lucide:calendar-days" />
          <UiCommandItem value="search-emoji" text="Emoji" icon="lucide:smile-plus" />
          <UiCommandItem value="calculator" disabled text="Calculator" icon="lucide:calculator" />
        </UiCommandGroup>
        <UiCommandSeparator />
        <UiCommandGroup heading="Settings">
          <UiCommandItem value="profile"> Profile </UiCommandItem>
          <UiCommandItem value="billing"> Billing </UiCommandItem>
          <UiCommandItem value="settings"> Settings </UiCommandItem>
        </UiCommandGroup>
      </UiCommandList>
      <UiCommandFooter />
    </UiCommandDialog>
  </div>
</template>

<script setup lang="ts">
  import { useMagicKeys } from "@vueuse/core";

  const open = ref(false);

  const { Meta_J, Ctrl_J } = useMagicKeys({
    passive: false,
    onEventFired(e) {
      if (e.key === "j" && (e.metaKey || e.ctrlKey)) e.preventDefault();
    },
  });

  watch([Meta_J, Ctrl_J], (v) => {
    if (v[0] || v[1]) open.value = !open.value;
  });
</script>
```
::

### Popover

::prose-show-case
:docs-command-popover

#code
```vue [DocsCommandPopover.vue]
<template>
  <div class="flex items-center justify-center space-x-4">
    <p class="text-muted-foreground text-sm">Status</p>
    <UiPopover v-model:open="open">
      <UiPopoverTrigger as-child>
        <UiButton variant="outline" size="sm" class="w-[150px] justify-start">
          <template v-if="selectedStatus">
            {{ selectedStatus?.label }}
          </template>
          <template v-else> + Set status </template>
        </UiButton>
      </UiPopoverTrigger>
      <UiPopoverContent class="max-w-[200px] p-0" side="right" align="start">
        <UiCommand>
          <UiCommandInput placeholder="Change status..." />
          <UiCommandList>
            <UiCommandEmpty>No results found.</UiCommandEmpty>
            <UiCommandGroup>
              <UiCommandItem
                v-for="status in statuses"
                :key="status.value"
                :value="status.value"
                @select="
                  () => {
                    selectedStatus = status;
                    open = false;
                  }
                "
              >
                {{ status.label }}
              </UiCommandItem>
            </UiCommandGroup>
          </UiCommandList>
        </UiCommand>
      </UiPopoverContent>
    </UiPopover>
  </div>
</template>

<script setup lang="ts">
  interface Status {
    value: string;
    label: string;
  }

  const statuses: Status[] = [
    {
      value: "backlog",
      label: "Backlog",
    },
    {
      value: "todo",
      label: "Todo",
    },
    {
      value: "in progress",
      label: "In Progress",
    },
    {
      value: "done",
      label: "Done",
    },
    {
      value: "canceled",
      label: "Canceled",
    },
  ];

  const open = ref(false);
  const selectedStatus = ref<Status>();
</script>
```
::

### Dropdown Menu

::prose-show-case
:docs-command-dropdown

#code
```vue [DocsCommandDropdown.vue]
<template>
  <div class="flex items-center justify-center">
    <div
      class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center"
    >
      <p class="text-sm leading-none font-medium">
        <span class="bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs">
          {{ labelRef }}
        </span>
        <span class="text-muted-foreground">Create a new project</span>
      </p>
      <UiDropdownMenu v-model:open="open">
        <UiDropdownMenuTrigger as-child>
          <UiButton variant="ghost" size="icon-sm">
            <Icon name="lucide:more-horizontal" />
          </UiButton>
        </UiDropdownMenuTrigger>
        <UiDropdownMenuContent align="end" class="w-[200px]">
          <UiDropdownMenuLabel>Actions</UiDropdownMenuLabel>
          <UiDropdownMenuGroup>
            <UiDropdownMenuItem> Assign to... </UiDropdownMenuItem>
            <UiDropdownMenuItem> Set due date... </UiDropdownMenuItem>
            <UiDropdownMenuSeparator />
            <UiDropdownMenuSub>
              <UiDropdownMenuSubTrigger> Apply label </UiDropdownMenuSubTrigger>
              <UiDropdownMenuSubContent class="p-0">
                <UiCommand v-model="labelRef">
                  <UiCommandInput placeholder="Filter label..." auto-focus />
                  <UiCommandList>
                    <UiCommandEmpty>No label found.</UiCommandEmpty>
                    <UiCommandGroup>
                      <UiCommandItem
                        v-for="label in labels"
                        :key="label"
                        :value="label"
                        @select="
                          (ev) => {
                            labelRef = ev.detail.value as string;
                            open = false;
                          }
                        "
                      >
                        {{ label }}
                      </UiCommandItem>
                    </UiCommandGroup>
                  </UiCommandList>
                </UiCommand>
              </UiDropdownMenuSubContent>
            </UiDropdownMenuSub>
            <UiDropdownMenuSeparator />
            <UiDropdownMenuItem class="text-red-600">
              Delete
              <UiDropdownMenuShortcut>⌘⌫</UiDropdownMenuShortcut>
            </UiDropdownMenuItem>
          </UiDropdownMenuGroup>
        </UiDropdownMenuContent>
      </UiDropdownMenu>
    </div>
  </div>
</template>

<script setup lang="ts">
  const labels = [
    "feature",
    "bug",
    "enhancement",
    "documentation",
    "design",
    "question",
    "maintenance",
  ];

  const labelRef = ref("feature");
  const open = ref(false);
</script>
```
::

### Responsive

You can create a responsive combobox by using the `<Popover />` on desktop and the `<Drawer />` components on mobile.

::prose-show-case
:docs-command-responsive

#code
```vue [DocsCommandResponsive.vue]
<template>
  <div class="flex items-center justify-center">
    <UseTemplate>
      <UiCommand v-model="selectedStatus" class="rounded-none! md:rounded-lg!">
        <UiCommandInput placeholder="Filter status..." />
        <UiCommandList>
          <UiCommandEmpty>No results found.</UiCommandEmpty>
          <UiCommandGroup>
            <UiCommandItem
              v-for="status of statuses"
              :key="status.value"
              :value="status"
              @select="onStatusSelect"
            >
              {{ status.label }}
            </UiCommandItem>
          </UiCommandGroup>
        </UiCommandList>
      </UiCommand>
    </UseTemplate>

    <UiPopover v-if="isDesktop" v-model:open="isOpen">
      <UiPopoverTrigger as-child>
        <UiButton variant="outline" class="w-[150px] justify-start">
          {{ selectedStatus ? selectedStatus.label : "+ Set status" }}
        </UiButton>
      </UiPopoverTrigger>
      <UiPopoverContent class="w-[200px] p-0" align="start">
        <StatusList />
      </UiPopoverContent>
    </UiPopover>

    <UiDrawer v-else v-model:open="isOpen">
      <UiDrawerTrigger as-child>
        <UiButton variant="outline" class="w-[150px] justify-start">
          {{ selectedStatus ? selectedStatus.label : "+ Set status" }}
        </UiButton>
      </UiDrawerTrigger>
      <UiDrawerContent>
        <UiDrawerTitle class="sr-only">Set Status</UiDrawerTitle>
        <UiDrawerDescription class="sr-only"> Select a status for the task. </UiDrawerDescription>
        <div class="mt-4 border-t">
          <StatusList />
        </div>
      </UiDrawerContent>
    </UiDrawer>
  </div>
</template>

<script lang="ts" setup>
  import { createReusableTemplate, useMediaQuery } from "@vueuse/core";
  import { ref } from "vue";

  interface Status {
    value: string;
    label: string;
  }

  const statuses: Status[] = [
    {
      value: "backlog",
      label: "Backlog",
    },
    {
      value: "todo",
      label: "Todo",
    },
    {
      value: "in progress",
      label: "In Progress",
    },
    {
      value: "done",
      label: "Done",
    },
    {
      value: "canceled",
      label: "Canceled",
    },
  ];

  const [UseTemplate, StatusList] = createReusableTemplate();
  const isDesktop = useMediaQuery("(min-width: 768px)");

  const isOpen = ref(false);
  const selectedStatus = ref<Status | null>(null);

  const onStatusSelect = () => (isOpen.value = false);
</script>
```
::


# Container

## Source code

Click :source-code-link{component="Container.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add container
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add container
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add container
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add container
```
::

## Usage

### Basic

::prose-show-case
:docs-container

#code
```vue [DocsContainer.vue]
<template>
  <div>
    <UiContainer>
      <div class="bg-muted h-[200px] w-full rounded-lg shadow" />
    </UiContainer>
  </div>
</template>
```
::


# Context Menu

## Source code

Click :source-code-link{component="ContextMenu"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add context-menu
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add context-menu
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add context-menu
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add context-menu
```
::

## Usage

### Basic

::prose-show-case
:docs-context-menu-basic

#code
```vue [DocsContextMenuBasic.vue]
<template>
  <UiContextMenu>
    <UiContextMenuTrigger
      as="div"
      class="mx-auto flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
    >
      Right click to see basic context menu
    </UiContextMenuTrigger>
    <UiContextMenuContent loop class="w-56">
      <UiContextMenuItem title="Back" inset shortcut="⌘[" />
      <UiContextMenuItem title="Forward" disabled inset shortcut="⌘]" />
      <UiContextMenuItem title="Reload" inset shortcut="⌘R" />
      <UiContextMenuSub>
        <UiContextMenuSubTrigger title="More Tools" inset />
        <UiContextMenuSubContent class="w-52">
          <UiContextMenuItem title="New window..." />
          <UiContextMenuItem title="Create shortcut..." />
          <UiContextMenuItem title="Save page as..." shortcut="⌘S" />
          <UiContextMenuItem title="Clear data" shortcut="⌘⇧⌫" />
          <UiContextMenuSeparator />
          <UiContextMenuItem title="Developer tools" shortcut="⌥⌘I" />
          <UiContextMenuSeparator />
          <UiContextMenuItem title="Delete all" variant="destructive" />
        </UiContextMenuSubContent>
      </UiContextMenuSub>
      <UiContextMenuSeparator />
      <UiContextMenuCheckboxItem
        v-model="showBookmark"
        title="Show Bookmarks"
        inset
        shortcut="⌘⇧B"
        @select="(e) => e.preventDefault()"
      />
      <UiContextMenuCheckboxItem
        v-model="showFullUrls"
        title="Show full URLs"
        inset
        shortcut="⌘⇧U"
        @select="(e) => e.preventDefault()"
      />
      <UiContextMenuSeparator />
      <UiContextMenuLabel inset label="Choose a person" />
      <UiContextMenuSeparator />
      <UiContextMenuRadioGroup v-model="person">
        <UiContextMenuRadioItem
          title="Paul Rafael"
          inset
          value="1"
          @select="(e) => e.preventDefault()"
        />
        <UiContextMenuRadioItem
          title="Sarah Lindsey"
          inset
          value="2"
          @select="(e) => e.preventDefault()"
        />
      </UiContextMenuRadioGroup>
    </UiContextMenuContent>
  </UiContextMenu>
</template>

<script lang="ts" setup>
  const showBookmark = ref(true);
  const showFullUrls = ref(false);
  const person = ref("1");
</script>
```
::

### Checkbox Items

::prose-show-case
:docs-context-menu-check-items

#code
```vue [DocsContextMenuCheckItems.vue]
<template>
  <UiContextMenu>
    <UiContextMenuTrigger as-child>
      <div
        class="mx-auto flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
      >
        Right click for check items menu
      </div>
    </UiContextMenuTrigger>
    <UiContextMenuContent class="w-52">
      <UiContextMenuLabel class="my-1" label="Choose your hero(s)" />
      <UiContextMenuSeparator />
      <UiContextMenuGroup>
        <UiContextMenuCheckboxItem
          v-for="hero in heroList"
          :key="hero.id"
          inset
          class="mb-1"
          :model-value="selectedHeroes.includes(hero.id)"
          @select="(e) => e.preventDefault()"
          @click="
            selectedHeroes.includes(hero.id)
              ? selectedHeroes.splice(selectedHeroes.indexOf(hero.id), 1)
              : selectedHeroes.push(hero.id)
          "
        >
          <div class="flex items-center gap-4">
            <UiAvatar :src="hero.image" class="h-6 w-6" :alt="hero.name" />
            <span>{{ hero.name }}</span>
          </div>
        </UiContextMenuCheckboxItem>
      </UiContextMenuGroup>
    </UiContextMenuContent>
  </UiContextMenu>
</template>

<script lang="ts" setup>
  const heroList = [
    {
      name: "Batman",
      id: "1",
      image:
        "https://static.dc.com/dc/files/default_images/Char_Profile_Batman_20190116_5c3fc4b40faec2.47318964.jpg",
    },
    {
      name: "Superman",
      id: "2",
      image: "https://s26162.pcdn.co/wp-content/uploads/2023/02/superman-1240x692.jpeg",
    },
    {
      name: "Hulk",
      id: "3",
      image:
        "https://a1cf74336522e87f135f-2f21ace9a6cf0052456644b80fa06d4f.ssl.cf2.rackcdn.com/images/characters/large/800/The-Hulk.The-Incredible-Hulk.webp",
    },
  ];
  const selectedHeroes = ref<string[]>([]);
</script>
```
::

### Radio Items

::prose-show-case
:docs-context-menu-radio-items

#code
```vue [DocsContextMenuRadioItems.vue]
<template>
  <UiContextMenu>
    <UiContextMenuTrigger as-child>
      <div
        class="mx-auto flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
      >
        Right click for radio items context menu
      </div>
    </UiContextMenuTrigger>

    <UiContextMenuContent class="w-48">
      <UiContextMenuLabel label="Tooltip placement" />
      <UiContextMenuSeparator />
      <UiContextMenuRadioGroup v-model="placement">
        <UiContextMenuRadioItem
          v-for="item in placements"
          :key="item"
          :value="item"
          :title="item"
          :text-value="item"
          @select="(e) => e.preventDefault()"
        />
      </UiContextMenuRadioGroup>
    </UiContextMenuContent>
  </UiContextMenu>
</template>

<script lang="ts" setup>
  const placement = ref("top-start");
  const placements = [
    "top-start",
    "top",
    "top-end",
    "right-start",
    "right",
    "right-end",
    "bottom-start",
    "bottom",
    "bottom-end",
    "left-start",
    "left",
    "left-end",
  ];
</script>
```
::


# Credit Card

## Credits

This component was designed by [Untitled UI](https://www.untitledui.com/react/components/credit-cards){rel="&#x22;nofollow&#x22;" target="\_blank"}. I just made it compatible with UI Thing.

## Source code

Click :source-code-link{component="CreditCard.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add credit-card
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add credit-card
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add credit-card
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add credit-card
```
::

## Usage

Import `getCardType` alongside the component when you need to detect the card network from a number entered by the user.

```ts
import { getCardType } from "~/components/Ui/CreditCard.vue";

const network = getCardType("4111 1111 1111 1111"); // "visa"
```

## Variants

### Normal

::prose-show-case
:docs-credit-card-default

#code
```vue [DocsCreditCardDefault.vue]
<template>
  <div class="flex flex-wrap justify-center gap-6 p-4">
    <UiCreditCard variant="brand-dark" />
    <UiCreditCard variant="gray-dark" />
    <UiCreditCard variant="gray-light" />
    <UiCreditCard variant="brand-light" />
    <UiCreditCard variant="transparent" />
    <UiCreditCard variant="transparent-gradient" />
  </div>
</template>
```
::

### Horizontal Strip

The bottom half of the card becomes a dark strip — common in designs that separate the number area from the brand area.

::prose-show-case
:docs-credit-card-strip

#code
```vue [DocsCreditCardStrip.vue]
<template>
  <div class="flex flex-wrap justify-center gap-6 p-4">
    <UiCreditCard variant="gray-strip" />
    <UiCreditCard variant="gradient-strip" />
    <UiCreditCard variant="salmon-strip" />
    <UiCreditCard variant="transparent-strip" />
  </div>
</template>
```
::

### Vertical Strip

A dark panel occupies the left portion of the card, leaving a coloured accent stripe on the right.

::prose-show-case
:docs-credit-card-vertical-strip

#code
```vue [DocsCreditCardVerticalStrip.vue]
<template>
  <div class="flex flex-wrap justify-center gap-6 p-4">
    <UiCreditCard variant="gray-strip-vertical" />
    <UiCreditCard variant="gradient-strip-vertical" />
    <UiCreditCard variant="salmon-strip-vertical" />
  </div>
</template>
```
::

### Scaled

Pass a `width` prop to scale the card proportionally from its native 316 × 190 px dimensions.

::prose-show-case
:docs-credit-card-scaled

#code
```vue [DocsCreditCardScaled.vue]
<template>
  <div class="flex flex-wrap items-end justify-center gap-6 p-4">
    <UiCreditCard variant="brand-dark" :width="200" />
    <UiCreditCard variant="brand-dark" :width="260" />
    <UiCreditCard variant="brand-dark" />
  </div>
</template>
```
::

## Props

| Prop              | Type                      | Default                 | Description                                                                                                                             |
| ----------------- | ------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `variant`         | `CreditCardVariant`       | `"brand-dark"`          | Visual style of the card.                                                                                                               |
| `company`         | `string`                  | `"UI Thing."`           | Brand or company name shown at the top-left.                                                                                            |
| `cardNumber`      | `string`                  | `"1234 1234 1234 1234"` | Formatted card number.                                                                                                                  |
| `cardHolder`      | `string`                  | `"JOHN DOE"`            | Cardholder name shown in the footer.                                                                                                    |
| `cardExpiration`  | `string`                  | `"06/36"`               | Expiration date shown in the footer.                                                                                                    |
| `width`           | `number`                  | —                       | Target render width in px. The card scales proportionally when provided.                                                                |
| `networkIcon`     | `string`                  | —                       | Icon name for the network logo (e.g. `"logos:visa"`). Falls back to Mastercard based on variant. Overridden by the `network-icon` slot. |
| `contactlessIcon` | `string`                  | —                       | Icon name for the contactless symbol. Defaults to `"mdi:contactless-payment"`. Overridden by the `contactless-icon` slot.               |
| `class`           | `HTMLAttributes["class"]` | —                       | Extra classes applied to the outer wrapper element.                                                                                     |

## Slots

| Slot               | Description                                                                                       |
| ------------------ | ------------------------------------------------------------------------------------------------- |
| `company`          | Replaces the company name in the top-left corner.                                                 |
| `contactless-icon` | Replaces the contactless symbol in the top-right corner. Takes precedence over `contactlessIcon`. |
| `card-holder`      | Replaces the cardholder name in the footer.                                                       |
| `card-expiration`  | Replaces the expiration date in the footer.                                                       |
| `card-number`      | Replaces the card number in the footer.                                                           |
| `network-icon`     | Replaces the network logo in the bottom-right corner. Takes precedence over `networkIcon`.        |

## Variants reference

| Variant                   | Style                                       |
| ------------------------- | ------------------------------------------- |
| `brand-dark`              | Solid primary gradient                      |
| `brand-light`             | Light primary tint                          |
| `gray-dark`               | Dark gray gradient                          |
| `gray-light`              | Light gray                                  |
| `transparent`             | Frosted-glass (blur + white overlay)        |
| `transparent-gradient`    | Frosted-glass with coloured diffuse glows   |
| `gray-strip`              | Light gray top, dark strip bottom           |
| `gradient-strip`          | Blue→pink gradient top, dark strip bottom   |
| `salmon-strip`            | Salmon top, dark strip bottom               |
| `transparent-strip`       | Frosted top, dark strip bottom              |
| `gray-strip-vertical`     | Dark panel left, glass right                |
| `gradient-strip-vertical` | Dark panel left, pink→purple gradient right |
| `salmon-strip-vertical`   | Dark panel left, salmon right               |


# Currency Input

## Source code

Click :source-code-link{component="CurrencyInput.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add currency-input
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add currency-input
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add currency-input
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add currency-input
```
::

Adding this component will also install the `vue-currency-input` package.

## Usage

### Default Configuration

The default configuration for the currency input component is as follows:

```json
{
  "currency": "USD",
  "locale": "en-US",
  "hideCurrencySymbolOnFocus": false,
  "hideGroupingSeparatorOnFocus": false
}
```

### Basic

::prose-show-case
:docs-currency-input-basic

#code
```vue [DocsCurrencyInputBasic.vue]
<template>
  <div class="mx-auto grid w-full max-w-xs items-center">
    <UiCurrencyInput placeholder="How much?" :model-value="25367" />
  </div>
</template>
```
::

### Options

You can change the configuration by passing the `options` prop.

::prose-show-case
:docs-currency-input-options

#code
```vue [DocsCurrencyInputOptions.vue]
<template>
  <div class="mx-auto flex w-full max-w-xs items-center justify-center">
    <UiCurrencyInput
      :options="{
        currency: 'JMD',
        autoDecimalDigits: true,
        precision: { min: 0, max: 4 },
      }"
      placeholder="What is the total?"
      :model-value="8518"
    />
  </div>
</template>
```
::

### Form

::prose-show-case
:docs-currency-input-form

#code
```vue [DocsCurrencyInputForm.vue]
<template>
  <div class="mx-auto flex w-full max-w-xs items-center justify-center">
    <form class="w-full space-y-4" @submit="onSubmit">
      <Field v-slot="{ componentField }" name="total">
        <UiFormItem label="Grand total" description="This is what you came for, right?">
          <UiCurrencyInput v-bind="componentField" />
        </UiFormItem>
      </Field>
      <UiButton class="w-full" type="submit">Pay It</UiButton>
    </form>
  </div>
</template>

<script lang="ts" setup>
  import { number, object } from "yup";

  const schema = object({
    total: number()
      .label("Grand total")
      .required()
      .transform((v) => (v ? Number(v) : undefined))
      .min(1000),
  });

  const { handleSubmit } = useForm({
    validationSchema: toTypedSchema(schema),
  });

  const onSubmit = handleSubmit((values) => {
    useSonner("Thank you for paying", {
      description: `You have paid ${new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
      }).format(values.total)}`,
      closeButton: false,
      action: {
        label: "Undo",
        onClick: () => useSonner.dismiss(),
      },
    });
  });
</script>
```
::


# DataTable

## Source code

Click :source-code-link{component="Datatable.client.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add datatable
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add datatable
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add datatable
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add datatable
```
::

::prose-callout{title="Update Tailwind Reference" variant="info"}
Be sure to update your Tailwind CSS reference path (usually located at `~/assets/css/tailwind.css`) once this component is installed.
:br:br

By default, the `Datatable` component has `@reference "~/assets/css/tailwind.css";` at the top of its scoped styles to ensure that Tailwind classes are available within the component.
::

## Usage

### Dom

Take note of how the [`dom`](https://datatables.net/reference/option/dom){rel="&#x22;nofollow&#x22;"} option is configured in the code. We use it to structure the layout of the table.

::prose-show-case
:docs-datatable-basic

#code
```vue [DocsDatatableBasic.vue]
<template>
  <div>
    <UiDatatable :data="users" :options="options" @ready="tableRef = $event" />
  </div>
</template>

<script lang="ts" setup>
  import type { Config } from "datatables.net";
  import type DataTableRef from "datatables.net";

  const options: Config = {
    dom: "Q<'flex flex-col lg:flex-row w-full lg:items-start lg:justify-between gap-5 mb-5 lg:pr-1'Bf><'border rounded-lg't><'flex flex-col lg:flex-row gap-5 lg:items-center lg:justify-between pt-3 p-5'li><''p>",
    select: true,
    autoWidth: true,
    responsive: true,

    buttons: [
      "copy",
      "csv",
      "excel",
      "pdf",
      "print",
      {
        text: "Select all",
        action: function (e, dt, _, __) {
          dt.rows().select();
        },
      },
    ],
    columns: [
      {
        data: "id.value",
        title: "ID",
        render(_, __, row, ___) {
          return row.id?.value ? row.id?.value : "N/A";
        },
      },
      { data: "name.first", title: "First Name" },
      { data: "name.last", title: "Last Name" },
      { data: "email", title: "Email" },
      { data: "phone", title: "Phone" },
      {
        data: "dob.date",
        title: "DOB",
        render(_, __, row, ___) {
          const formattedDob = useDateFormat(row.dob.date, "MMM DD, YYYY [at] h:mm A");
          return formattedDob.value;
        },
      },
      { data: "location.city", title: "City" },
      { data: "location.country", title: "Country" },
    ],
  };

  const { data: users } = await useAsyncData(
    "randomUsers",
    () => $fetch<any>("https://randomuser.me/api/?results=100"),
    {
      transform: (v: any) => v.results,
      default: () => [],
    }
  );

  const tableRef = shallowRef<InstanceType<typeof DataTableRef<any[]>> | undefined>();
</script>
```
::

### Custom component

With the new version of DataTables.net, you can now use custom Vue components in your table.

::prose-show-case
:docs-datatable-component

#code
```vue [DocsDatatableComponent.vue]
<template>
  <div>
    <UiDatatable :options="options" :columns="columns" :data="users">
      <template #actions="{ cellData }: { cellData: Staff }">
        <UiButton
          class="h-7 text-xs"
          size="sm"
          @click.stop="
            useSonner('Editing...', {
              description: `You are editing the user ${cellData?.name}.`,
            })
          "
          >Edit</UiButton
        >
      </template>
    </UiDatatable>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { Config, ConfigColumns } from "datatables.net";

  const { data: users } = await useAsyncData(
    async () =>
      Array.from({ length: 1000 }, () => {
        return {
          name: faker.person.fullName(),
          position: faker.person.jobTitle(),
          office: faker.location.city(),
          age: faker.number.int(100),
          start_date: useDateFormat(faker.date.past().toISOString(), "MMMM DD, YYYY").value,
          salary: faker.finance.amount({ symbol: "$" }),
        };
      }),
    { default: () => [] }
  );

  type Staff = (typeof users.value)[0];

  const columns: ConfigColumns[] = [
    { data: "name", title: "Name" },
    { data: "position", title: "Position" },
    { data: "office", title: "Office" },
    { data: "age", title: "Age" },
    { data: "start_date", title: "Start date" },
    { data: "salary", title: "Salary" },
    {
      data: null,
      title: "",
      className: "no-export",
      searchable: false,
      orderable: false,
      name: "actions",
      render: "#actions",
      responsivePriority: 1,
    },
  ];

  const options: Config = {
    buttons: [
      {
        extend: "colvis",
        text: "Columns",
        columns: ":not(.no-export)",
      },
      "copy",
      "excel",
      "pdf",
      "print",
      "csv",
    ],
    dom: "Q<'flex flex-col lg:flex-row w-full lg:items-start lg:justify-between gap-5 mb-5'Bf><'border rounded-lg't><'flex flex-col lg:flex-row gap-5 lg:items-center lg:justify-between pt-3 p-5'li><''p>",
    responsive: true,
    autoWidth: true,
    select: true,
  };
</script>
```
::

### Layout

The new version of DataTables.net also allows you to use custom layouts for your table.

You can read more about it [here](https://datatables.net/reference/option/layout){rel="&#x22;nofollow&#x22;"}

For this, you will actually need to add some custom classes for things to look how you want.

::prose-show-case
:docs-datatable-layout

#code
```vue [DocsDatatableLayout.vue]
<template>
  <div>
    <UiDatatable :options="options" :columns="columns" :data="users">
      <template #actions="{ cellData }: { cellData: Staff }">
        <UiButton
          class="h-7 text-xs"
          size="sm"
          @click.stop="
            useSonner('Editing...', {
              description: `You are editing the user ${cellData?.name}.`,
            })
          "
          >Edit</UiButton
        >
      </template>
    </UiDatatable>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { Config, ConfigColumns } from "datatables.net";

  interface Staff {
    name: string;
    position: string;
    office: string;
    age: number;
    start_date: string;
    salary: string;
  }

  const { data: users } = await useAsyncData<Staff[]>(
    () => {
      return new Promise((resolve) => {
        // create 1000 fake users
        const users = Array.from({ length: 1000 }, () => {
          return {
            name: faker.person.fullName(),
            position: faker.person.jobTitle(),
            office: faker.location.city(),
            age: faker.number.int(100),
            start_date: useDateFormat(faker.date.past().toISOString(), "MMMM DD, YYYY").value,
            salary: faker.finance.amount({ symbol: "$" }),
          };
        });
        resolve(users);
      });
    },
    { default: () => [] }
  );

  const columns: ConfigColumns[] = [
    { data: "name", title: "Name" },
    { data: "position", title: "Position" },
    { data: "office", title: "Office" },
    { data: "age", title: "Age" },
    { data: "start_date", title: "Start date" },
    { data: "salary", title: "Salary" },
    {
      data: null,
      title: "",
      className: "no-export",
      searchable: false,
      orderable: false,
      name: "actions",
      render: "#actions",
      responsivePriority: 1,
    },
  ];

  const options: Config = {
    buttons: [
      {
        extend: "colvis",
        text: "Columns",
        columns: ":not(.no-export)",
      },
      "copy",
      "excel",
      "pdf",
      "print",
      "csv",
    ],

    responsive: true,
    autoWidth: true,
    select: true,
    layout: {
      top1: "searchBuilder",
      top1Start: {
        features: {
          buttons: true,
        },
        className: tw`pb-5`,
      },
      topStart: null,
      topEnd: null,
      bottomStart: null,
      bottomEnd: {
        features: [
          {
            paging: true,
          },
        ],
        className: tw`pt-5`,
      },
    },
  };
</script>
```
::

### Simple

::prose-show-case
:docs-datatable-simple

#code
```vue [DocsDatatableSimple.vue]
<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { Config } from "datatables.net";

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 5 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      }));
    },
    { default: () => [] }
  );

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };

  const options: Config = {
    dom: `<'${tw`overflow-auto`}'t>`,
    ordering: false,
    columns: [
      { title: "ID", data: "id", visible: false },
      { title: "Name", data: "name" },
      { title: "Email", data: "email" },
      { title: "Location", data: "location" },
      { title: "Status", data: "status" },
      {
        title: "Balance",
        data: "balance",
        className: `text-right`,
        render: (data: number) => formatCurrency(data),
      },
    ],
  };
</script>

<template>
  <UiDatatable :data="data" :options />
  <div class="flex items-center justify-between border-t px-6 py-6 text-sm">
    <p>Total</p>
    <p>
      {{ formatCurrency(data.reduce((acc, item) => acc + item.balance, 0)) }}
    </p>
  </div>
</template>
```
::

### Image

::prose-show-case
:docs-datatable-images

#code
```vue [DocsDatatableImages.vue]
<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 5 }, (item, index) => {
        return {
          id: index + 1,
          name: faker.person.fullName(),
          username: faker.internet.username().toLowerCase(),
          image: faker.image.avatar().toLowerCase(),
          email: faker.internet.email()?.toLowerCase(),
          location: faker.location.city(),
          status: faker.helpers.arrayElement(["Active", "Inactive"]),
          balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
        };
      });
    },
    { default: () => [] }
  );

  type Item = (typeof data.value)[0];

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };
  const options = ref({});
  onMounted(() => {
    options.value = {
      dom: `<'${tw`overflow-auto`}'t>`,
      ordering: false,
      columns: [
        { title: "ID", data: "id", visible: false },
        {
          title: "Name",
          data: null,
          render: {
            _: "name",
            display: "#name",
          },
          searchable: false,
        },
        { title: "Email", data: "email" },
        { title: "Location", data: "location" },
        { title: "Status", data: "status" },
        {
          title: "Balance",
          data: "balance",
          className: `text-right`,
          render: (data: number) => formatCurrency(data),
        },
      ],
    };
  });
</script>

<template>
  <UiDatatable :data="data" :options>
    <template #name="{ cellData }: { cellData: Item }">
      <div class="flex items-center gap-3">
        <UiAvatar :src="cellData.image" :alt="cellData.name" />
        <div>
          <div class="font-medium">{{ cellData.name }}</div>
          <span class="text-muted-foreground text-xs">@{{ cellData.username }}</span>
        </div>
      </div>
    </template>
  </UiDatatable>
</template>
```
::

### No Horizontal

::prose-show-case
:docs-datatable-no-horizontal

#code
```vue [DocsDatatableNoHorizontal.vue]
<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { Config } from "datatables.net";

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 5 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      }));
    },
    { default: () => [] }
  );

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };

  const options: Config = {
    dom: `<'${tw`overflow-auto`}'t>`,
    ordering: false,
    columns: [
      { title: "ID", data: "id", visible: false },
      { title: "Name", data: "name" },
      { title: "Email", data: "email" },
      { title: "Location", data: "location" },
      { title: "Status", data: "status" },
      {
        title: "Balance",
        data: "balance",
        className: `text-right`,
        render: (data: number) => formatCurrency(data),
      },
    ],
  };
</script>

<template>
  <UiDatatable class="nowrap hover" :data="data" :options />
  <div class="flex items-center justify-between border-t px-6 py-6 text-sm">
    <p>Total</p>
    <p>
      {{ formatCurrency(data.reduce((acc, item) => acc + item.balance, 0)) }}
    </p>
  </div>
</template>

<style scoped>
  :deep(table.dataTable td) {
    border-bottom-width: 0px;
    border-top-width: 0px;
  }
</style>
```
::

### Striped

::prose-show-case
:docs-datatable-striped

#code
```vue [DocsDatatableStriped.vue]
<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { Config } from "datatables.net";

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 5 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      }));
    },
    { default: () => [] }
  );

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };

  const options: Config = {
    dom: `<'${tw`overflow-auto`}'t>`,
    ordering: false,
    columns: [
      { title: "ID", data: "id", visible: false },
      { title: "Name", data: "name" },
      { title: "Email", data: "email" },
      { title: "Location", data: "location" },
      { title: "Status", data: "status" },
      {
        title: "Balance",
        data: "balance",
        className: `text-right`,
        render: (data: number) => formatCurrency(data),
      },
    ],
  };
</script>

<template>
  <UiDatatable class="nowrap hover" :data="data" :options />
  <div class="flex items-center justify-between border-t px-6 py-6 text-sm">
    <p>Total</p>
    <p>
      {{ formatCurrency(data.reduce((acc, item) => acc + item.balance, 0)) }}
    </p>
  </div>
</template>

<style scoped>
  :deep(table.dataTable td) {
    border-bottom-width: 0px;
    border-top-width: 0px;
  }
  :deep(table.dataTable tbody tr) {
    border-style: none;

    &:nth-child(odd) {
      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
    }

    &:hover {
      background-color: transparent;
    }

    &:nth-child(odd):hover {
      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
    }
  }
  :deep(table.dataTable tbody) {
    td:first-child {
      border-top-left-radius: var(--radius-lg);
      border-bottom-left-radius: var(--radius-lg);
    }

    td:last-child {
      border-top-right-radius: var(--radius-lg);
      border-bottom-right-radius: var(--radius-lg);
    }

    tr {
      border-radius: var(--radius-lg);
    }
  }
</style>
```
::

### Vertical Lines

::prose-show-case
:docs-datatable-vertical-lines

#code
```vue [DocsDatatableVerticalLines.vue]
<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { Config } from "datatables.net";

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 5 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      }));
    },
    { default: () => [] }
  );

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };

  const options: Config = {
    dom: `<'${tw`overflow-auto`}'t>`,
    ordering: false,
    columns: [
      { title: "ID", data: "id", visible: false },
      { title: "Name", data: "name" },
      { title: "Email", data: "email" },
      { title: "Location", data: "location" },
      { title: "Status", data: "status" },
      {
        title: "Balance",
        data: "balance",
        className: `text-right`,
        render: (data: number) => formatCurrency(data),
      },
    ],
  };
</script>

<template>
  <UiDatatable class="nowrap hover cell-border" :data="data" :options />
  <div class="flex items-center justify-between border-t px-6 py-6 text-sm">
    <p>Total</p>
    <p>
      {{ formatCurrency(data.reduce((acc, item) => acc + item.balance, 0)) }}
    </p>
  </div>
</template>

<style scoped>
  :deep(.dataTable.cell-border tr th) {
    border-right-style: solid;
    border-right-width: 1px;

    &:first-child {
      border-left-style: solid;
      border-left-width: 1px;
    }
  }
</style>
```
::

### Dense

::prose-show-case
:docs-datatable-dense

#code
```vue [DocsDatatableDense.vue]
<script lang="ts" setup>
  import type { Config } from "datatables.net";

  const programmingLanguages = [
    {
      id: "1",
      name: "JavaScript",
      releaseYear: "1995",
      developer: "Brendan Eich",
      typing: "Dynamic",
      paradigm: "Multi-paradigm",
      extension: ".js",
      latestVersion: "ES2021",
      popularity: "High",
    },
    {
      id: "2",
      name: "Python",
      releaseYear: "1991",
      developer: "Guido van Rossum",
      typing: "Dynamic",
      paradigm: "Multi-paradigm",
      extension: ".py",
      latestVersion: "3.10",
      popularity: "High",
    },
    {
      id: "3",
      name: "Java",
      releaseYear: "1995",
      developer: "James Gosling",
      typing: "Static",
      paradigm: "Object-oriented",
      extension: ".java",
      latestVersion: "17",
      popularity: "High",
    },
    {
      id: "4",
      name: "C++",
      releaseYear: "1985",
      developer: "Bjarne Stroustrup",
      typing: "Static",
      paradigm: "Multi-paradigm",
      extension: ".cpp",
      latestVersion: "C++20",
      popularity: "High",
    },
    {
      id: "5",
      name: "Ruby",
      releaseYear: "1995",
      developer: "Yukihiro Matsumoto",
      typing: "Dynamic",
      paradigm: "Multi-paradigm",
      extension: ".rb",
      latestVersion: "3.0",
      popularity: "Low",
    },
  ];

  const options: Config = {
    dom: `<'${tw`overflow-auto`}'t>`,
    ordering: false,
    columns: [
      { title: "ID", data: "id", visible: false },
      { title: "Name", data: "name", className: `font-semibold` },
      { title: "Release Year", data: "releaseYear" },
      { title: "Developer", data: "developer" },
      { title: "Typing", data: "typing" },
      { title: "Paradigm", data: "paradigm" },
      { title: "Extension", data: "extension" },
      { title: "Latest Version", data: "latestVersion" },
      { title: "Popularity", data: "popularity" },
    ],
  };
</script>

<template>
  <div class="border-border bg-background overflow-hidden rounded-lg border">
    <UiDatatable class="nowrap compact hover" :data="programmingLanguages" :options />
  </div>
</template>

<style scoped>
  :deep(.dataTable thead tr) {
    background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
  }
</style>
```
::

### Row Selection

::prose-show-case
:docs-datatable-row-selection

#code
```vue [DocsDatatableRowSelection.vue]
<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(
    async () =>
      Array.from({ length: 5 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      })),
    { default: () => [] }
  );

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };

  const options = ref();
  onMounted(async () => {
    const DataTable = await import("datatables.net").then((mod) => mod.default || mod);
    options.value = {
      dom: `<'${tw`overflow-auto`}'t>`,
      ordering: false,
      columns: [
        { data: null, searchable: false, orderable: false, render: DataTable?.render?.select() },
        { title: "ID", data: "id", visible: false },
        { title: "Name", data: "name" },
        { title: "Email", data: "email" },
        { title: "Location", data: "location" },
        { title: "Status", data: "status" },
        {
          title: "Balance",
          data: "balance",
          className: `text-right`,
          render: (data: number) => formatCurrency(data),
        },
      ],
      select: {
        style: "multi",
        selector: "td:first-child",
      },
    };
  });
</script>

<template>
  <UiDatatable v-if="options" :data="data" :options />
  <div class="flex items-center justify-between border-t px-6 py-6 text-sm">
    <p>Total</p>
    <p>
      {{ formatCurrency(data.reduce((acc, item) => acc + item.balance, 0)) }}
    </p>
  </div>
</template>
```
::

### Card

::prose-show-case
:docs-datatable-card

#code
```vue [DocsDatatableCard.vue]
<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(
    async () =>
      Array.from({ length: 5 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      })),
    { default: () => [] }
  );

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };

  const options = ref();
  onMounted(async () => {
    const DataTable = await import("datatables.net").then((mod) => mod.default || mod);

    options.value = {
      dom: `<'${tw`overflow-auto`}'t>`,
      ordering: false,
      columns: [
        { data: null, searchable: false, orderable: false, render: DataTable?.render?.select() },
        { title: "ID", data: "id", visible: false },
        { title: "Name", data: "name" },
        { title: "Email", data: "email" },
        { title: "Location", data: "location" },
        { title: "Status", data: "status" },
        {
          title: "Balance",
          data: "balance",
          className: `text-right`,
          render: (data: number) => formatCurrency(data),
        },
      ],
      select: {
        style: "multi",
        selector: "td:first-child",
      },
    };
  });
</script>

<template>
  <div class="border-border bg-background overflow-hidden rounded-lg border">
    <UiDatatable v-if="options" :data="data" :options />
    <div class="flex items-center justify-between border-t px-6 py-6 text-sm">
      <p>Total</p>
      <p>
        {{ formatCurrency(data.reduce((acc, item) => acc + item.balance, 0)) }}
      </p>
    </div>
  </div>
</template>
```
::

### Scroll with Sticky Header

::prose-show-case
:docs-datatable-scroll-y

#code
```vue [DocsDatatableScrollY.vue]
<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(
    async () =>
      Array.from({ length: 30 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      })),
    { default: () => [] }
  );

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };

  const options = ref();
  onMounted(async () => {
    const DataTable = await import("datatables.net").then((mod) => mod.default || mod);

    options.value = {
      dom: `<'${tw`overflow-auto`}'t>`,
      ordering: false,
      paging: false,
      columns: [
        { data: null, searchable: false, orderable: false, render: DataTable?.render?.select() },
        { title: "ID", data: "id", visible: false },
        { title: "Name", data: "name" },
        { title: "Email", data: "email" },
        { title: "Location", data: "location" },
        { title: "Status", data: "status" },
        {
          title: "Balance",
          data: "balance",
          className: `text-right`,
          render: (data: number) => formatCurrency(data),
        },
      ],
      select: {
        style: "multi",
        selector: "td:first-child",
      },
      scrollY: "300px",
    };
  });
</script>

<template>
  <div class="border-border bg-background overflow-hidden rounded-lg border">
    <UiDatatable v-if="options" :data="data" :options />
    <div class="flex items-center justify-between border-t px-6 py-6 text-sm">
      <p>Total</p>
      <p>
        {{ formatCurrency(data.reduce((acc, item) => acc + item.balance, 0)) }}
      </p>
    </div>
  </div>
</template>

<style scoped>
  :deep(.dt-scroll-body table thead tr) {
    &:first-child {
      display: none;
    }
  }
</style>
```
::

### Badge & Icons

::prose-show-case
:docs-datatable-badge

#code
```vue [DocsDatatableBadge.vue]
<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 30 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: {
          city: faker.location.city(),
          country: faker.location.country(),
          flag: faker.helpers.arrayElement(["🇺🇸", "🇨🇦", "🇬🇧", "🇦🇺", "🇳🇿"]),
        },
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      }));
    },
    { default: () => [] }
  );

  type Item = (typeof data.value)[number];

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };

  const options = ref();
  onMounted(async () => {
    const DataTable = await import("datatables.net").then((mod) => mod.default || mod);

    options.value = {
      dom: `<'${tw`overflow-auto`}'t>`,
      ordering: false,
      paging: false,
      columns: [
        { data: null, searchable: false, orderable: false, render: DataTable?.render?.select() },
        { title: "ID", data: "id", visible: false },
        { title: "Name", data: "name" },
        { title: "Email", data: "email" },
        {
          title: "Location",
          data: null,
          render: {
            _: "location.city",
            display: "#location",
          },
        },
        {
          title: "Status",
          data: null,
          render: {
            _: "status",
            display: "#status",
          },
        },
        {
          title: "Balance",
          data: "balance",
          className: `text-right`,
          render: (data: number) => formatCurrency(data),
        },
      ],
      select: {
        style: "multi",
        selector: "td:first-child",
      },
      scrollY: "300px",
    };
  });
</script>

<template>
  <div class="border-border bg-background overflow-hidden rounded-lg border">
    <UiDatatable v-if="options" :data="data" :options>
      <template #status="{ cellData }">
        <UiBadge :variant="cellData.status == 'Inactive' ? 'outline' : 'default'">{{
          cellData.status
        }}</UiBadge>
      </template>
      <template #location="{ cellData }: { cellData: Item }">
        <span
          >{{ cellData.location.flag }} {{ cellData.location.city }},
          {{ cellData.location.country }}</span
        >
      </template>
    </UiDatatable>
    <div class="flex items-center justify-between border-t px-6 py-6 text-sm">
      <p>Total</p>
      <p>
        {{ formatCurrency(data.reduce((acc, item) => acc + item.balance, 0)) }}
      </p>
    </div>
  </div>
</template>

<style scoped>
  :deep(.dt-scroll-body table thead tr) {
    &:first-child {
      display: none;
    }
  }
</style>
```
::

### Search & Sort

::prose-show-case
:docs-datatable-search-sort

#code
```vue [DocsDatatableSearchSort.vue]
<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { Config } from "datatables.net";

  const { data } = await useAsyncData(
    async () =>
      Array.from({ length: 8 }, (item, index) => ({
        id: index + 1,
        keyword: faker.lorem.sentence({ min: 3, max: 5 }),
        intents: faker.helpers.arrayElements(
          ["Informational", "Navigational", "Commercial", "Transactional"],
          { min: 1, max: 2 }
        ),
        volume: faker.number.int({ max: 2000, min: 100 }),
        cpc: faker.number.float({ min: 0.1, max: 10, fractionDigits: 2 }),
        traffic: faker.number.int({ max: 100, min: 10 }),
        link: faker.internet.url({ protocol: "https" }),
      })),
    { default: () => [] }
  );

  type Item = (typeof data.value)[number];
  const search = ref("");

  const filteredData = computed(() => {
    if (!search.value) return data.value;
    return data.value.filter((item) =>
      item.keyword.toLowerCase().includes(search.value.toLowerCase())
    );
  });

  const styles = {
    Informational: "bg-indigo-400/20 text-indigo-500",
    Navigational: "bg-emerald-400/20 text-emerald-500",
    Commercial: "bg-amber-400/20 text-amber-500",
    Transactional: "bg-rose-400/20 text-rose-500",
  } as const;

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };
  const options = ref();
  onMounted(async () => {
    const DataTable = await import("datatables.net").then((mod) => mod.default || mod);

    options.value = {
      dom: `<'overflow-hidden rounded-lg border border-border bg-background'<'${tw`overflow-auto`}'t>>`,
      paging: false,
      columns: [
        { data: null, searchable: false, orderable: false, render: DataTable?.render?.select() },
        { title: "ID", data: "id", visible: false },
        { title: "Keyword", data: "keyword", className: "font-semibold" },
        {
          title: "Intents",
          searchable: false,
          orderable: false,
          data: null,
          render: {
            _: "intents",
            display: "#intents",
          },
        },
        { data: "volume", title: "Volume" },
        {
          data: "cpc",
          title: "CPC",
          render(d) {
            return formatCurrency(d);
          },
        },
        { data: "traffic", title: "Traffic" },
        {
          title: "Link",
          orderable: false,
          data: null,
          render: {
            _: "link",
            display: "#link",
          },
        },
      ],
      select: {
        style: "multi",
        selector: "td:first-child",
      },
      order: [[1, "asc"]],
      language: {
        search: "",
        searchPlaceholder: "Search by keyword",
      },
    } as Config;
  });
</script>

<template>
  <div>
    <div class="mb-6 flex items-center">
      <div class="w-full md:max-w-sm">
        <!-- You can use the built in search as well -->
        <UiVeeInput
          v-model="search"
          label="Keyword"
          placeholder="Search by keyword"
          icon="lucide:search"
        />
      </div>
    </div>

    <UiDatatable v-if="options" :data="filteredData" :options>
      <template #intents="{ cellData }: { cellData: Item }">
        <div class="flex gap-2">
          <span
            v-for="intent in cellData.intents"
            :key="intent"
            :class="[
              styles[intent],
              'flex size-5 items-center justify-center rounded text-xs font-medium',
            ]"
          >
            {{ intent[0] }}
          </span>
        </div>
      </template>
      <template #link="{ cellData }: { cellData: Item }">
        <a :href="cellData.link" target="_blank" class="hover:underline">
          {{ cellData.link }}
        </a>
      </template>
    </UiDatatable>
  </div>
</template>
```
::

### Fixed Columns

::prose-show-case
:docs-datatable-fixed-column

#code
```vue [DocsDatatableFixedColumn.vue]
<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { Config } from "datatables.net";

  const { data } = await useAsyncData(
    async () =>
      Array.from({ length: 8 }, (item, index) => {
        const firstName = faker.person.firstName();
        const lastName = faker.person.lastName();
        const email = faker.internet.email({ firstName, lastName }).toLowerCase();
        return {
          id: index + 1,
          firstName,
          lastName,
          email,
          location: `${faker.location.city()} ${faker.location.country()}`,
          status: faker.helpers.arrayElement(["Active", "Inactive"]),
          balance: faker.number.float({ min: 100, max: 1000, fractionDigits: 2 }),
          department: faker.person.jobTitle(),
          joinDate: faker.date.past({ years: 2 }),
          lastActive: faker.date.recent({ days: 30 }),
        };
      }),
    { default: () => [] }
  );

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };

  const options = ref();
  onMounted(async () => {
    const DataTable = await import("datatables.net").then((mod) => mod.default || mod);

    options.value = {
      dom: `<'overflow-hidden rounded-lg border border-border bg-background'<'${tw`overflow-auto`}'t>>`,
      paging: false,
      ordering: false,
      columns: [
        { data: null, searchable: false, orderable: false, render: DataTable?.render?.select() },
        { title: "ID", data: "id", visible: false },
        { title: "First name", data: "firstName" },
        { title: "Last name", data: "lastName" },
        { title: "Email", data: "email" },
        { title: "Location", data: "location" },
        { title: "Status", data: "status" },
        {
          title: "Balance",
          data: "balance",
          render: (d) => formatCurrency(d),
        },
        { title: "Department", data: "department" },
        {
          title: "Join date",
          data: "joinDate",
          render: (d) => useDateFormat(d, "YYYY-MM-DD").value,
        },
        {
          title: "Last active",
          data: "lastActive",
          render: (d) => useDateFormat(d, "YYYY-MM-DD").value,
        },
      ],
      select: {
        style: "multi",
        selector: "td:first-child",
      },
      order: [[2, "asc"]],
      fixedColumns: {
        left: 2,
      },
      scrollCollapse: true,
      scrollX: true,
      scrollY: "300px",
    } as Config;
  });
</script>

<template>
  <div>
    <UiDatatable v-if="options" :data="data" :options />
  </div>
</template>

<style scoped>
  :deep(.dt-scroll-body table thead tr) {
    &:first-child {
      display: none;
    }
  }
  :deep(.dtfc-fixed-start, .dtfc-fixed-left) {
    z-index: 10;
    background: var(--background) !important;
  }
</style>
```
::

### Column ReOrder

This requires the `fixedColumns` plugin to be installed.

```bash
npm install --save datatables.net-colreorder-dt
```

Then add the following to your `datatables` plugin file

```ts
import "datatables.net-colreorder-dt";
import "datatables.net-colreorder-dt/css/colReorder.dataTables.css";
```

::prose-show-case
:docs-datatable-column-re-order

#code
```vue [DocsDatatableColumnReOrder.vue]
<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type DT from "datatables.net";

  const tableRef = shallowRef<InstanceType<typeof DT<any[]>> | undefined>();

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 8 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      }));
    },
    { default: () => [] }
  );

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };
  const options = ref({});
  onMounted(() => {
    options.value = {
      dom: `<'${tw`overflow-auto`}'t>`,
      ordering: false,
      paging: false,
      colReorder: true,
      columns: [
        { title: "ID", data: "id", visible: false },
        { title: "Name", data: "name" },
        { title: "Email", data: "email" },
        { title: "Location", data: "location" },
        { title: "Status", data: "status" },
        {
          title: "Balance",
          data: "balance",
          className: `text-right`,
          render: (data: number) => formatCurrency(data),
        },
      ],
    };
  });
</script>

<template>
  <div>
    <div>
      <h3 class="text-lg font-semibold">Column Reorder</h3>
      <p class="text-muted-foreground mb-2 text-sm">
        You can reorder the columns by dragging and dropping the column header.
      </p>
      <div class="mb-4 flex gap-2">
        <UiButton variant="outline" size="sm" @click="tableRef?.colReorder?.enable()">
          <Icon name="lucide:lock-open" class="size-4 shrink-0" />
          Enable</UiButton
        >
        <UiButton variant="outline" size="sm" @click="tableRef?.colReorder?.disable()">
          <Icon name="lucide:lock" class="size-4 shrink-0" />
          Disable</UiButton
        >
      </div>
    </div>

    <UiDatatable :data="data" :options @ready="tableRef = $event" />
    <div class="flex items-center justify-between border-t px-6 py-6 text-sm">
      <p>Total</p>
      <p>
        {{ formatCurrency(data.reduce((acc, item) => acc + item.balance, 0)) }}
      </p>
    </div>
  </div>
</template>

<style scoped>
  :deep(.dataTable) {
    .dtcr-moving-first {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
      border-color: var(--color-primary);
    }
    .dtcr-moving-last {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
      border-color: var(--color-primary);
    }
    thead > tr {
      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
    }
  }
</style>
```
::

### Pagination

::prose-show-case
:docs-datatable-pagination

#code
```vue [DocsDatatablePagination.vue]
<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  type Item = {
    id: number;
    name: string;
    email: string;
    location: {
      city: string;
      country: string;
      flag: string;
    };
    status: string;
    balance: number;
  };
  const tableRef = shallowRef();
  const userDialog = ref(false);
  const submit = () => {
    userDialog.value = false;
  };
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };
  const sharedExport = {
    columns: ":not(.no-export)",
    trim: true,
    stripHtml: true,
    format: {
      body: (data: any) => {
        const htmlString = data.outerHTML;
        const parser = new DOMParser();
        const doc = parser.parseFromString(htmlString, "text/html");
        return htmlString ? doc?.body?.textContent : data;
      },
    },
  };

  const options = ref();
  onMounted(async () => {
    const DataTable = await import("datatables.net").then((mod) => mod.default || mod);

    options.value = {
      dom: `<'relative'r<'flex flex-col gap-4 md:flex-row md:items-center justify-between mb-5'fB><'overflow-auto border rounded-md't><'mt-4 px-2 flex flex-col md:flex-row md:items-center md:justify-between gap-4'<l><'flex flex-col gap-4 md:flex-row md:items-center md:gap-8'<i><p>>>>`,
      pagingType: "full",
      language: {
        info: "<p class='inline-flex gap-1'><span class='font-medium text-foreground'>_START_-_END_</span> of <span class='font-medium text-foreground'>_TOTAL_</span></p>",
        lengthMenu: "<span class='font-medium text-foreground'>Rows per page</span> _MENU_",
        search: "",
        searchPlaceholder: "Search...",
      },
      lengthMenu: [7, 25, 50, 75, 100],
      select: {
        style: "multi",
        selector: "td:first-child",
      },
      order: [[2, "asc"]],
      buttons: [
        {
          extend: "colvis",
          text: "View",
          columns: ":not(.no-column)",
        },
        {
          extend: "print",
          text: "Print",
          title: `Users - ${useDateFormat(new Date(), "MMM DD, YYYY").value}`,
          exportOptions: sharedExport,
        },
        {
          text: "Add User",
          action: () => {
            userDialog.value = true;
          },
        },
      ],
      columns: [
        {
          data: null,
          searchable: false,
          className: "no-column no-print",
          orderable: false,
          render: DataTable?.render?.select(),
        },
        { title: "ID", data: "id", visible: false },
        { title: "Name", data: "name" },
        { title: "Email", data: "email" },
        {
          title: "Location",
          searchable: false,
          orderable: false,
          data: null,
          render: {
            _: "location.city",
            display: "#location",
          },
        },
        {
          title: "Status",
          data: null,
          render: {
            _: "status",
            display: "#status",
          },
        },
        {
          title: "Balance",
          data: "balance",
          className: `text-right`,
          render: (data: number) => formatCurrency(data),
        },
      ],
      serverSide: true,
      processing: true,
      async ajax(data: any, callback: any) {
        // sleep for 1 second to simulate network latency
        await new Promise((resolve) => setTimeout(resolve, 1000));
        // fetch data from API
        const res = Array.from({ length: 100 }, (item, index) => ({
          id: index + 1,
          name: faker.person.fullName(),
          email: faker.internet.email().toLowerCase(),
          location: {
            city: faker.location.city(),
            country: faker.location.country(),
            flag: faker.helpers.arrayElement(["🇺🇸", "🇨🇦", "🇬🇧", "🇦🇺", "🇳🇿"]),
          },
          status: faker.helpers.arrayElement(["Active", "Inactive"]),
          balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
        }));
        callback({
          // always pass back draw from data
          draw: Number(data.draw),
          // the data to be displayed (paginated from sever)
          data: res.slice(data.start, data.start + data.length),
          // the total number of records in the dataset, not just the number returned
          recordsTotal: res.length,
          // the total number of records after filtering (if any filtering)
          recordsFiltered: res.length,
        });
      },
    };
  });
</script>

<template>
  <UiDatatable v-if="options" :options @ready="tableRef = $event">
    <template #status="{ cellData }">
      <UiBadge :variant="cellData.status == 'Inactive' ? 'outline' : 'default'">{{
        cellData.status
      }}</UiBadge>
    </template>
    <template #location="{ cellData }: { cellData: Item }">
      <span
        >{{ cellData.location.flag }} {{ cellData.location.city }},
        {{ cellData.location.country }}</span
      >
    </template>
  </UiDatatable>
  <UiDialog v-model:open="userDialog">
    <UiDialogContent class="max-w-md">
      <UiDialogHeader>
        <UiDialogTitle>Create User</UiDialogTitle>
        <UiDialogDescription description="Populate the form below to create a new user." />
      </UiDialogHeader>
      <form @submit.prevent="submit">
        <fieldset class="grid grid-cols-1 gap-5">
          <UiVeeInput label="Name" icon="lucide:user" />
          <UiVeeInput label="Email" icon="lucide:mail" />
          <UiVeeTextarea label="About" />
          <UiDialogFooter>
            <UiDialogClose as-child>
              <UiButton variant="outline" text="Cancel" />
            </UiDialogClose>
            <UiButton type="submit" text="Create" />
          </UiDialogFooter>
        </fieldset>
      </form>
    </UiDialogContent>
  </UiDialog>
</template>

<style scoped>
  :deep(button.dt-paging-button) {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
  }
</style>
```
::


# Date Field

## Source code

Click :source-code-link{component="DateField.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add date-field
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add date-field
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add date-field
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add date-field
```
::

## Usage

::prose-show-case
:docs-date-field

#code
```vue [DocsDateField.vue]
<template>
  <div class="flex w-full flex-col justify-center">
    <UiLabel v-if="value" for="text-date" class="text-muted-foreground mb-2 text-sm">
      The entered date is {{ formattedValue }}
    </UiLabel>
    <UiDateField id="text-date" v-model="value" />
  </div>
</template>

<script lang="ts" setup>
  import { getLocalTimeZone, parseDate } from "@internationalized/date";
  import { format } from "date-fns";

  const value = ref(parseDate(new Date().toISOString().substring(0, 10)));

  const formattedValue = computed(() =>
    format(value.value.toDate(getLocalTimeZone()), "eeee, MMMM d, yyyy")
  );
</script>
```
::


# Datepicker

## Source code

Click :source-code-link{component="Datepicker.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add datepicker
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add datepicker
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add datepicker
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add datepicker
```
::

You can optionally configure the vcalendar module in your `nuxt.config.js` file:

```ts
vcalendar: {
  calendarOptions: {
    masks: {
      weekdays: "WW",
    },
  },
},
```

## Usage

### Datetime Mode

::prose-show-case
:docs-datepicker-mode

#code
```vue [DocsDatepickerMode.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiDatepicker
      v-model="today"
      is-required
      :select-attribute="{ dot: true }"
      mode="dateTime"
      title-position="right"
    />
  </div>
</template>

<script lang="ts" setup>
  import dayjs from "dayjs";

  const today = ref(dayjs().add(3, "days").toDate());
</script>
```
::

### Custom Title

::prose-show-case
:docs-datepicker-title

#code
```vue [DocsDatepickerTitle.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiDatepicker :model-value="new Date()" show-weeknumbers="left-outside">
      <template #header-title="{ title }">
        <div class="flex items-center gap-2">
          <p>{{ title }}</p>
          <Icon class="text-muted-foreground size-4" name="lucide:chevron-down" />
        </div>
      </template>
    </UiDatepicker>
  </div>
</template>
```
::

### Button Slot

::prose-show-case
:docs-datepicker-button

#code
```vue [DocsDatepickerButton.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiDatepicker v-model="date">
      <template #default="{ togglePopover }">
        <UiButton
          variant="outline"
          :class="[!date && 'text-muted-foreground', 'w-[260px] justify-start text-left']"
          @click="togglePopover"
        >
          <Icon name="lucide:calendar" class="size-4" />
          {{ date ? dayjs(date).format("MMMM DD, YYYY") : "Select a date" }}
        </UiButton>
      </template>
    </UiDatepicker>
  </div>
</template>

<script lang="ts" setup>
  import dayjs from "dayjs";

  const date = ref();
</script>
```
::

### Input Slot

::prose-show-case
:docs-datepicker-input

#code
```vue [DocsDatepickerInput.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiDatepicker v-model="date">
      <template #default="{ inputValue, inputEvents }">
        <UiInput placeholder="DD/MM/YYYY" :value="inputValue" v-on="inputEvents" />
      </template>
    </UiDatepicker>
  </div>
</template>

<script lang="ts" setup>
  const date = ref();
</script>
```
::

### Responsive Layout

One a mobile screen, the `Datepicker` will expand to full width and display only one column. On larger screens, it will display two columns.

::prose-show-case
:docs-datepicker-responsive

#code
```vue [DocsDatepickerResponsive.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiDatepicker
      v-model.range="dates"
      :columns="isMobileScreen ? 1 : 2"
      :rows="isMobileScreen ? 2 : 1"
      :expanded="isMobileScreen"
    />
  </div>
</template>

<script lang="ts" setup>
  import dayjs from "dayjs";

  const isMobileScreen = useMediaQuery("(max-width: 640px)", { ssrWidth: 640 });
  const dates = ref({
    start: dayjs().toDate(),
    end: dayjs().add(2, "w").toDate(),
  });
</script>
```
::

### Time Rules

Limit the time selection by setting [Time Rules](https://vcalendar.io/datepicker/time-rules.html){rel="&#x22;nofollow&#x22;"} on the `Datepicker`.

Here the user can set an appointment between 9 AM and 5 PM, with a 30-minute interval. Weekends are disabled.

::prose-show-case
:docs-datepicker-time-rules

#code
```vue [DocsDatepickerTimeRules.vue]
<template>
  <div class="flex w-full flex-col items-center justify-center gap-5">
    <p class="text-muted-foreground text-sm">Select your appointment date & time</p>
    <p class="text-sm font-semibold">
      Selected:
      <span class="text-emerald-500">{{
        dayjs(appointmentDate).format("MMM DD, YYYY [at] h:mmA")
      }}</span>
    </p>
    <UiDatepicker
      v-model="appointmentDate"
      mode="dateTime"
      is24hr
      is-required
      :rules="{ hours: { min: 9, max: 17 }, minutes: { interval: 15 } }"
      :min-date="new Date()"
      :disabled-dates="[
        {
          repeat: {
            weekdays: [1, 7],
          },
        },
      ]"
    />
  </div>
</template>

<script lang="ts" setup>
  import dayjs from "dayjs";

  const appointmentDate = ref(new Date());
</script>
```
::

### Presets

::prose-show-case
:docs-datepicker-presets

#code
```vue [DocsDatepickerPresets.vue]
<template>
  <div class="flex w-full flex-col items-center justify-center gap-5">
    <UiCard>
      <UiCardContent class="flex gap-x-3 max-sm:flex-col">
        <div class="relative py-4 max-sm:order-1 max-sm:border-t sm:w-32">
          <div class="h-full sm:border-e">
            <div class="flex flex-col gap-1 px-2">
              <UiButton
                size="sm"
                variant="ghost"
                class="w-full justify-start"
                @click="date = new Date()"
                >Today</UiButton
              >
              <UiButton
                size="sm"
                variant="ghost"
                class="w-full justify-start"
                @click="date = dayjs().subtract(1, 'day').toDate()"
                >Yesterday</UiButton
              >
              <UiButton
                size="sm"
                variant="ghost"
                class="w-full justify-start"
                @click="date = dayjs().add(1, 'week').toDate()"
                >Next Week</UiButton
              >
              <UiButton
                size="sm"
                variant="ghost"
                class="w-full justify-start"
                @click="date = dayjs().subtract(1, 'week').toDate()"
                >Last Week</UiButton
              >
              <UiButton
                size="sm"
                variant="ghost"
                class="w-full justify-start"
                @click="date = dayjs().subtract(1, 'month').toDate()"
                >Last Month</UiButton
              >
              <UiButton
                size="sm"
                variant="ghost"
                class="w-full justify-start"
                @click="date = dayjs().add(1, 'month').toDate()"
                >Next Month</UiButton
              >
              <UiButton
                size="sm"
                variant="ghost"
                class="w-full justify-start"
                @click="date = dayjs().add(1, 'y').toDate()"
                >Next Year</UiButton
              >
            </div>
          </div>
        </div>
        <UiDatepicker ref="datepicker" v-model="date" borderless transparent />
      </UiCardContent>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import dayjs from "dayjs";

  const date = ref(new Date());
  const datepicker = useTemplateRef("datepicker");

  watch(date, (newDate) => {
    datepicker.value?.datepickerRef?.move(newDate);
  });
</script>
```
::

### Custom Day Content

::prose-show-case
:docs-datepicker-custom-day-content

#code
```vue [DocsDatepickerCustomDayContent.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiDatepicker v-model="today" is-required :min-date="new Date()">
      <template #day-content="{ day, dayEvents, dayProps }">
        <div :class="[day.classes]" v-bind="dayProps" v-on="dayEvents">
          <div class="flex flex-col items-center justify-center gap-0.5 text-xs">
            <span class="font-medium">{{ day.label }} </span>
            <span
              class="text-[10px]"
              :class="[!faker.datatype.boolean(0.2) ? 'opacity-70' : 'text-green-500']"
              >{{ faker.commerce.price({ min: 80, max: 250, symbol: "$", dec: 0 }) }}</span
            >
          </div>
        </div>
      </template>
    </UiDatepicker>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import dayjs from "dayjs";

  const today = ref(dayjs().add(3, "days").toDate());
</script>

<style scoped>
  :deep(.vc-day) {
    width: 50px;
    height: 50px;
    .vc-day-content,
    .vc-highlight,
    .vc-highlights {
      width: 100%;
      height: 100%;
    }
  }
</style>
```
::


# Description List

## Source code

Click :source-code-link{component="Description"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add description-list
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add description-list
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add description-list
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add description-list
```
::

## Usage

### Basic

::prose-show-case
:docs-description-list-basic

#code
```vue [DocsDescriptionListBasic.vue]
<template>
  <UiDescriptionList>
    <template v-for="item in items" :key="item.term">
      <UiDescriptionListTerm>{{ item.term }}</UiDescriptionListTerm>
      <UiDescriptionListDetails>{{ item.details }}</UiDescriptionListDetails>
    </template>
  </UiDescriptionList>
</template>

<script lang="ts" setup>
  const items = [
    { term: "Invoice Number", details: "INV-12345" },
    { term: "Invoice Date", details: "September 21, 2024" },
    { term: "Due Date", details: "October 21, 2024" },
    { term: "Customer Name", details: "John Doe" },
    { term: "Total Amount", details: "$1,250.00" },
    { term: "Status", details: "Pending" },
  ];
</script>
```
::

### With Card

::prose-show-case
:docs-description-list-card

#code
```vue [DocsDescriptionListCard.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle title="Product Details" />
      <UiCardDescription
        description="The product details card is a great way to display information about a product."
      />
    </UiCardHeader>
    <UiCardContent>
      <UiDescriptionList>
        <template v-for="item in items" :key="item.term">
          <UiDescriptionListTerm>{{ item.term }}</UiDescriptionListTerm>
          <UiDescriptionListDetails>{{ item.details }}</UiDescriptionListDetails>
        </template>
      </UiDescriptionList>
    </UiCardContent>
  </UiCard>
</template>

<script lang="ts" setup>
  const items = [
    { term: "Product Name", details: "Wireless Headphones" },
    { term: "Battery Life", details: "20 hours" },
    { term: "Weight", details: "250 grams" },
    { term: "Color", details: "Black" },
    { term: "Warranty", details: "2 years" },
  ];
</script>
```
::


# Dialog

## Source code

Click :source-code-link{component="Dialog"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add dialog
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add dialog
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add dialog
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add dialog
```
::

## Usage

### Profile Dialog

::prose-show-case
:docs-dialog

#code
```vue [DocsDialog.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiDialog v-model:open="dialog">
      <UiDialogTrigger as-child>
        <UiButton variant="outline">Edit Profile</UiButton>
      </UiDialogTrigger>

      <UiDialogContent
        class="sm:max-w-[425px]"
        title="Edit profile"
        description="Make changes to your profile here. Click save when you're done."
      >
        <template #content>
          <div class="grid gap-4 py-4">
            <div class="grid grid-cols-4 items-center gap-4">
              <UiLabel for="name" class="text-right"> Name </UiLabel>
              <UiInput id="name" model-value="Pedro Duarte" class="col-span-3" />
            </div>
            <div class="grid grid-cols-4 items-center gap-4">
              <UiLabel for="username" class="text-right"> Username </UiLabel>
              <UiInput id="username" model-value="@peduarte" class="col-span-3" />
            </div>
          </div>
        </template>
        <template #footer>
          <UiDialogFooter>
            <UiButton
              variant="outline"
              type="button"
              class="mt-2 sm:mt-0"
              @click="closeDialog(false)"
              >Cancel</UiButton
            >
            <UiButton type="submit" @click="closeDialog(true)">Save</UiButton>
          </UiDialogFooter>
        </template>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>

<script lang="ts" setup>
  const dialog = ref(false);

  const closeDialog = (save: boolean) => {
    useSonner(save ? "Profile updated" : "Changes discarded", {
      description: `Your changes has been ${save ? "saved" : "discarded"}.`,
      duration: 7000,
    });
    dialog.value = false;
  };
</script>
```
::

### Translucent Surface

The `translucent` prop is additive, so you can opt into the glass treatment on dialog-like surfaces without changing their structure, focus management, or motion.

::prose-show-case
:docs-dialog-translucent

#code
```vue [DocsDialogTranslucent.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiDialog v-model:open="open">
      <UiDialogTrigger as-child>
        <UiButton variant="outline">Open translucent dialog</UiButton>
      </UiDialogTrigger>

      <UiDialogContent
        translucent
        class="sm:max-w-[440px]"
        title="Share workspace"
        description="Invite collaborators without losing the page context underneath."
      >
        <template #content>
          <div class="grid gap-4 py-4">
            <div class="grid gap-2">
              <UiLabel for="email">Email</UiLabel>
              <UiInput id="email" placeholder="team@uithing.dev" />
            </div>
            <div class="grid gap-2">
              <UiLabel for="role">Role</UiLabel>
              <UiSelect>
                <UiSelectTrigger id="role">
                  <UiSelectValue placeholder="Choose a role" />
                </UiSelectTrigger>
                <UiSelectContent translucent>
                  <UiSelectArrow translucent />
                  <UiSelectItem value="viewer">Viewer</UiSelectItem>
                  <UiSelectItem value="editor">Editor</UiSelectItem>
                  <UiSelectItem value="admin">Admin</UiSelectItem>
                </UiSelectContent>
              </UiSelect>
            </div>
          </div>
        </template>
        <template #footer>
          <UiDialogFooter>
            <UiButton variant="outline" @click="open = false">Cancel</UiButton>
            <UiButton @click="open = false">Send invite</UiButton>
          </UiDialogFooter>
        </template>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>

<script lang="ts" setup>
  const open = ref(false);
</script>
```
::

### Custom Close Button

::prose-show-case
:docs-dialog-custom-close

#code
```vue [DocsDialogCustomClose.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiDialog>
      <UiDialogTrigger as-child>
        <UiButton variant="outline">Share</UiButton>
      </UiDialogTrigger>

      <UiDialogContent
        class="sm:max-w-md"
        title="Share link"
        description="Anyone who has this link will be able to view this."
        @interact-outside="
          (event) => {
            const target = event.target as HTMLElement;
            if (target?.closest('[data-sonner-toaster]')) return event.preventDefault();
          }
        "
      >
        <template #content>
          <div class="flex items-center space-x-2">
            <div class="grid flex-1 gap-2">
              <UiLabel for="link" class="sr-only"> Link </UiLabel>
              <UiInput
                id="link"
                model-value="https://ui-thing.behonbaker.com/getting-started"
                readonly
              />
            </div>
            <UiButton
              :disabled="!isSupported"
              type="submit"
              size="icon"
              class="px-3"
              @click="
                copy('https://ui-thing.behonbaker.com/getting-started');
                useSonner('Copied', {
                  description: 'The link has been copied to your clipboard.',
                });
              "
            >
              <span class="sr-only">Copy</span>
              <Icon name="lucide:copy" class="size-4" />
            </UiButton>
          </div>
        </template>
        <template #footer>
          <UiDialogFooter class="sm:justify-start">
            <UiDialogClose as-child>
              <UiButton variant="secondary">Close</UiButton>
            </UiDialogClose>
          </UiDialogFooter>
        </template>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>

<script lang="ts" setup>
  const { isSupported, copy } = useClipboard({ legacy: true });
</script>
```
::

## Origin UI Dialogs

Here are some of the dialog examples from the [Origin UI](https://originui.com){rel="&#x22;nofollow&#x22;" target="\_blank"} documentation.

Hats off to the Origin UI team ❤️.

I just made them work with my setup.

### Scrollable (native scrollbar)

::prose-show-case
:docs-dialog-scroll-native

#code
```vue [DocsDialogScrollNative.vue]
<template>
  <div class="flex justify-center">
    <UiDialog>
      <UiDialogTrigger as-child>
        <UiButton variant="outline" text="Scrollable (native scrollbar)" />
      </UiDialogTrigger>
      <UiDialogContent
        class="flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:hidden"
      >
        <div class="overflow-y-auto">
          <UiDialogHeader class="contents space-y-0 text-left">
            <UiDialogTitle class="px-6 pt-6">Frequently Asked Questions (FAQ)</UiDialogTitle>
            <UiDialogDescription>
              <div class="p-6">
                <div class="[&_strong]:text-foreground space-y-4 [&_strong]:font-semibold">
                  <div class="space-y-1">
                    <p>
                      <strong>Account Management</strong>
                    </p>
                    <p>
                      Navigate to the registration page, provide required information, and verify
                      your email address. You can sign up using your email or through social media
                      platforms.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Password Reset Process</strong>
                    </p>
                    <p>
                      Users can reset their password through the account settings page. Click
                      &quot;Forgot Password&quot; and follow the email verification steps to regain
                      account access quickly and securely.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Service Pricing Tiers</strong>
                    </p>
                    <p>
                      We offer three primary subscription levels designed to meet diverse user
                      needs: Basic (free with limited features), Professional (monthly fee with
                      comprehensive access), and Enterprise (custom pricing with full platform
                      capabilities).
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Technical Support Channels</strong>
                    </p>
                    <p>
                      Customer support is accessible through multiple communication methods
                      including email support, live chat during business hours, an integrated
                      support ticket system, and phone support specifically for enterprise-level
                      customers.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Data Protection Strategies</strong>
                    </p>
                    <p>
                      Our platform implements rigorous security measures including 256-bit SSL
                      encryption, regular comprehensive security audits, strict data access
                      controls, and compliance with international privacy protection standards.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Platform Compatibility</strong>
                    </p>
                    <p>
                      The service supports multiple device and operating system environments,
                      including web browsers like Chrome and Firefox, mobile applications for iOS
                      and Android, and desktop applications compatible with Windows and macOS.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Subscription Management</strong>
                    </p>
                    <p>
                      Subscriptions can be cancelled at any time through account settings, with
                      pro-rated refunds available within 30 days of payment. Both monthly and annual
                      billing options are provided, with special discounts offered for annual
                      commitments.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Payment Method Options</strong>
                    </p>
                    <p>
                      We accept a wide range of payment methods including major credit cards such as
                      Visa, MasterCard, and American Express, digital payment platforms like PayPal,
                      and direct bank transfers. Regional payment options may also be available
                      depending on user location.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Customer Support</strong>
                    </p>
                    <p>
                      Our dedicated customer support team is available 24/7, providing quick and
                      efficient assistance to address any inquiries or issues you may have.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Privacy Policy</strong>
                    </p>
                    <p>
                      Our privacy policy outlines how we collect, use, and protect your personal
                      data, ensuring your privacy is protected at all times.
                    </p>
                  </div>
                </div>
              </div>
            </UiDialogDescription>
          </UiDialogHeader>
          <UiDialogFooter class="px-6 pb-6 sm:justify-start">
            <UiDialogClose as-child>
              <UiButton type="button" variant="outline" text="Cancel" />
            </UiDialogClose>
            <UiDialogClose as-child>
              <UiButton type="button" text="Okay" />
            </UiDialogClose>
          </UiDialogFooter>
        </div>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>
```
::

### Scrollable (custom scrollbar)

::prose-show-case
:docs-dialog-scroll-custom

#code
```vue [DocsDialogScrollCustom.vue]
<template>
  <div class="flex justify-center">
    <UiDialog>
      <UiDialogTrigger as-child>
        <UiButton variant="outline" text="Scrollable (custom scrollbar)" />
      </UiDialogTrigger>
      <UiDialogContent
        class="flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:hidden"
      >
        <UiScrollArea class="flex max-h-full flex-col">
          <UiDialogHeader class="contents space-y-0 text-left">
            <UiDialogTitle class="px-6 pt-6">Frequently Asked Questions (FAQ)</UiDialogTitle>
            <UiDialogDescription>
              <div class="p-6">
                <div class="[&_strong]:text-foreground space-y-4 [&_strong]:font-semibold">
                  <div class="space-y-1">
                    <p>
                      <strong>Account Management</strong>
                    </p>
                    <p>
                      Navigate to the registration page, provide required information, and verify
                      your email address. You can sign up using your email or through social media
                      platforms.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Password Reset Process</strong>
                    </p>
                    <p>
                      Users can reset their password through the account settings page. Click
                      &quot;Forgot Password&quot; and follow the email verification steps to regain
                      account access quickly and securely.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Service Pricing Tiers</strong>
                    </p>
                    <p>
                      We offer three primary subscription levels designed to meet diverse user
                      needs: Basic (free with limited features), Professional (monthly fee with
                      comprehensive access), and Enterprise (custom pricing with full platform
                      capabilities).
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Technical Support Channels</strong>
                    </p>
                    <p>
                      Customer support is accessible through multiple communication methods
                      including email support, live chat during business hours, an integrated
                      support ticket system, and phone support specifically for enterprise-level
                      customers.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Data Protection Strategies</strong>
                    </p>
                    <p>
                      Our platform implements rigorous security measures including 256-bit SSL
                      encryption, regular comprehensive security audits, strict data access
                      controls, and compliance with international privacy protection standards.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Platform Compatibility</strong>
                    </p>
                    <p>
                      The service supports multiple device and operating system environments,
                      including web browsers like Chrome and Firefox, mobile applications for iOS
                      and Android, and desktop applications compatible with Windows and macOS.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Subscription Management</strong>
                    </p>
                    <p>
                      Subscriptions can be cancelled at any time through account settings, with
                      pro-rated refunds available within 30 days of payment. Both monthly and annual
                      billing options are provided, with special discounts offered for annual
                      commitments.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Payment Method Options</strong>
                    </p>
                    <p>
                      We accept a wide range of payment methods including major credit cards such as
                      Visa, MasterCard, and American Express, digital payment platforms like PayPal,
                      and direct bank transfers. Regional payment options may also be available
                      depending on user location.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Customer Support</strong>
                    </p>
                    <p>
                      Our dedicated customer support team is available 24/7, providing quick and
                      efficient assistance to address any inquiries or issues you may have.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Privacy Policy</strong>
                    </p>
                    <p>
                      Our privacy policy outlines how we collect, use, and protect your personal
                      data, ensuring your privacy is protected at all times.
                    </p>
                  </div>
                </div>
              </div>
            </UiDialogDescription>
          </UiDialogHeader>
          <UiDialogFooter class="px-6 pb-6 sm:justify-start">
            <UiDialogClose as-child>
              <UiButton type="button" variant="outline"> Cancel </UiButton>
            </UiDialogClose>
            <UiDialogClose as-child>
              <UiButton type="button">Okay</UiButton>
            </UiDialogClose>
          </UiDialogFooter>
        </UiScrollArea>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>
```
::

### Scrollable (sticky header)

::prose-show-case
:docs-dialog-scroll-sticky-header

#code
```vue [DocsDialogScrollStickyHeader.vue]
<template>
  <div class="flex justify-center">
    <UiDialog>
      <UiDialogTrigger as-child>
        <UiButton variant="outline" text="Scrollable (sticky header)" />
      </UiDialogTrigger>
      <UiDialogContent
        class="flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:top-3.5"
      >
        <UiDialogHeader class="contents space-y-0 text-left">
          <UiDialogTitle
            class="border-border border-b px-6 py-4 text-base"
            title="Frequently Asked Questions (FAQ)"
          />
          <div class="overflow-y-auto">
            <UiDialogDescription>
              <div class="px-6 py-4">
                <div class="[&_strong]:text-foreground space-y-4 [&_strong]:font-semibold">
                  <div class="space-y-1">
                    <p>
                      <strong>Account Management</strong>
                    </p>
                    <p>
                      Navigate to the registration page, provide required information, and verify
                      your email address. You can sign up using your email or through social media
                      platforms.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Password Reset Process</strong>
                    </p>
                    <p>
                      Users can reset their password through the account settings page. Click
                      &quot;Forgot Password&quot; and follow the email verification steps to regain
                      account access quickly and securely.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Service Pricing Tiers</strong>
                    </p>
                    <p>
                      We offer three primary subscription levels designed to meet diverse user
                      needs: Basic (free with limited features), Professional (monthly fee with
                      comprehensive access), and Enterprise (custom pricing with full platform
                      capabilities).
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Technical Support Channels</strong>
                    </p>
                    <p>
                      Customer support is accessible through multiple communication methods
                      including email support, live chat during business hours, an integrated
                      support ticket system, and phone support specifically for enterprise-level
                      customers.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Data Protection Strategies</strong>
                    </p>
                    <p>
                      Our platform implements rigorous security measures including 256-bit SSL
                      encryption, regular comprehensive security audits, strict data access
                      controls, and compliance with international privacy protection standards.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Platform Compatibility</strong>
                    </p>
                    <p>
                      The service supports multiple device and operating system environments,
                      including web browsers like Chrome and Firefox, mobile applications for iOS
                      and Android, and desktop applications compatible with Windows and macOS.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Subscription Management</strong>
                    </p>
                    <p>
                      Subscriptions can be cancelled at any time through account settings, with
                      pro-rated refunds available within 30 days of payment. Both monthly and annual
                      billing options are provided, with special discounts offered for annual
                      commitments.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Payment Method Options</strong>
                    </p>
                    <p>
                      We accept a wide range of payment methods including major credit cards such as
                      Visa, MasterCard, and American Express, digital payment platforms like PayPal,
                      and direct bank transfers. Regional payment options may also be available
                      depending on user location.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Customer Support</strong>
                    </p>
                    <p>
                      Our dedicated customer support team is available 24/7, providing quick and
                      efficient assistance to address any inquiries or issues you may have.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Privacy Policy</strong>
                    </p>
                    <p>
                      Our privacy policy outlines how we collect, use, and protect your personal
                      data, ensuring your privacy is protected at all times.
                    </p>
                  </div>
                </div>
              </div>
            </UiDialogDescription>
            <UiDialogFooter class="px-6 pb-6 sm:justify-start">
              <UiDialogClose as-child>
                <UiButton type="button" text="Okay" />
              </UiDialogClose>
            </UiDialogFooter>
          </div>
        </UiDialogHeader>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>
```
::

### Scrollable (sticky footer)

::prose-show-case
:docs-dialog-scroll-sticky-footer

#code
```vue [DocsDialogScrollStickyFooter.vue]
<template>
  <div class="flex justify-center">
    <UiDialog>
      <UiDialogTrigger as-child>
        <UiButton variant="outline" text="Scrollable (sticky footer)" />
      </UiDialogTrigger>
      <UiDialogContent
        class="flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:hidden"
      >
        <div class="overflow-y-auto">
          <UiDialogHeader class="contents space-y-0 text-left">
            <UiDialogTitle class="px-6 pt-6 text-base">
              Frequently Asked Questions (FAQ)
            </UiDialogTitle>
            <UiDialogDescription>
              <div class="p-6">
                <div class="[&_strong]:text-foreground space-y-4 [&_strong]:font-semibold">
                  <div class="space-y-1">
                    <p>
                      <strong>Account Management</strong>
                    </p>
                    <p>
                      Navigate to the registration page, provide required information, and verify
                      your email address. You can sign up using your email or through social media
                      platforms.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Password Reset Process</strong>
                    </p>
                    <p>
                      Users can reset their password through the account settings page. Click
                      &quot;Forgot Password&quot; and follow the email verification steps to regain
                      account access quickly and securely.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Service Pricing Tiers</strong>
                    </p>
                    <p>
                      We offer three primary subscription levels designed to meet diverse user
                      needs: Basic (free with limited features), Professional (monthly fee with
                      comprehensive access), and Enterprise (custom pricing with full platform
                      capabilities).
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Technical Support Channels</strong>
                    </p>
                    <p>
                      Customer support is accessible through multiple communication methods
                      including email support, live chat during business hours, an integrated
                      support ticket system, and phone support specifically for enterprise-level
                      customers.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Data Protection Strategies</strong>
                    </p>
                    <p>
                      Our platform implements rigorous security measures including 256-bit SSL
                      encryption, regular comprehensive security audits, strict data access
                      controls, and compliance with international privacy protection standards.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Platform Compatibility</strong>
                    </p>
                    <p>
                      The service supports multiple device and operating system environments,
                      including web browsers like Chrome and Firefox, mobile applications for iOS
                      and Android, and desktop applications compatible with Windows and macOS.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Subscription Management</strong>
                    </p>
                    <p>
                      Subscriptions can be cancelled at any time through account settings, with
                      pro-rated refunds available within 30 days of payment. Both monthly and annual
                      billing options are provided, with special discounts offered for annual
                      commitments.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Payment Method Options</strong>
                    </p>
                    <p>
                      We accept a wide range of payment methods including major credit cards such as
                      Visa, MasterCard, and American Express, digital payment platforms like PayPal,
                      and direct bank transfers. Regional payment options may also be available
                      depending on user location.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Customer Support</strong>
                    </p>
                    <p>
                      Our dedicated customer support team is available 24/7, providing quick and
                      efficient assistance to address any inquiries or issues you may have.
                    </p>
                  </div>
                  <div class="space-y-1">
                    <p>
                      <strong>Privacy Policy</strong>
                    </p>
                    <p>
                      Our privacy policy outlines how we collect, use, and protect your personal
                      data, ensuring your privacy is protected at all times.
                    </p>
                  </div>
                </div>
              </div>
            </UiDialogDescription>
          </UiDialogHeader>
        </div>
        <UiDialogFooter class="border-border border-t px-6 py-4">
          <UiDialogClose as-child>
            <UiButton type="button" variant="outline" text="Cancel" />
          </UiDialogClose>
          <UiDialogClose as-child>
            <UiButton type="button" text="Okay" />
          </UiDialogClose>
        </UiDialogFooter>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>
```
::

### Terms & Condition

::prose-show-case
:docs-dialog-terms-condition

#code
```vue [DocsDialogTermsCondition.vue]
<template>
  <div class="flex justify-center">
    <UiDialog>
      <UiDialogTrigger as-child>
        <UiButton variant="outline" text="Terms & Conditions" />
      </UiDialogTrigger>
      <UiDialogContent
        class="flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:top-3.5"
      >
        <UiDialogHeader class="contents space-y-0 text-left">
          <UiDialogTitle
            class="border-border border-b px-6 py-4 text-base"
            title="Terms & Conditions"
          />
          <div ref="contentRef" class="overflow-y-auto">
            <UiDialogDescription>
              <div class="px-6 py-4">
                <div class="[&_strong]:text-foreground space-y-4 [&_strong]:font-semibold">
                  <div class="space-y-4">
                    <div class="space-y-1">
                      <p>
                        <strong>Acceptance of Terms</strong>
                      </p>
                      <p>
                        By accessing and using this website, users agree to comply with and be bound
                        by these Terms of Service. Users who do not agree with these terms should
                        discontinue use of the website immediately.
                      </p>
                    </div>

                    <div class="space-y-1">
                      <p>
                        <strong>User Account Responsibilities</strong>
                      </p>
                      <p>
                        Users are responsible for maintaining the confidentiality of their account
                        credentials. Any activities occurring under a user&lsquo;s account are the
                        sole responsibility of the account holder. Users must notify the website
                        administrators immediately of any unauthorized account access.
                      </p>
                    </div>

                    <div class="space-y-1">
                      <p>
                        <strong>Content Usage and Restrictions</strong>
                      </p>
                      <p>
                        The website and its original content are protected by intellectual property
                        laws. Users may not reproduce, distribute, modify, create derivative works,
                        or commercially exploit any content without explicit written permission from
                        the website owners.
                      </p>
                    </div>

                    <div class="space-y-1">
                      <p>
                        <strong>Limitation of Liability</strong>
                      </p>
                      <p>
                        The website provides content &ldquo;as is&ldquo; without any warranties. The
                        website owners shall not be liable for direct, indirect, incidental,
                        consequential, or punitive damages arising from user interactions with the
                        platform.
                      </p>
                    </div>

                    <div class="space-y-1">
                      <p>
                        <strong>User Conduct Guidelines</strong>
                      </p>
                      <ul class="list-disc pl-6">
                        <li>Not upload harmful or malicious content</li>
                        <li>Respect the rights of other users</li>
                        <li>Avoid activities that could disrupt website functionality</li>
                        <li>Comply with applicable local and international laws</li>
                      </ul>
                    </div>

                    <div class="space-y-1">
                      <p>
                        <strong>Modifications to Terms</strong>
                      </p>
                      <p>
                        The website reserves the right to modify these terms at any time. Continued
                        use of the website after changes constitutes acceptance of the new terms.
                      </p>
                    </div>

                    <div class="space-y-1">
                      <p>
                        <strong>Termination Clause</strong>
                      </p>
                      <p>
                        The website may terminate or suspend user access without prior notice for
                        violations of these terms or for any other reason deemed appropriate by the
                        administration.
                      </p>
                    </div>

                    <div class="space-y-1">
                      <p>
                        <strong>Governing Law</strong>
                      </p>
                      <p>
                        These terms are governed by the laws of the jurisdiction where the website
                        is primarily operated, without regard to conflict of law principles.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </UiDialogDescription>
          </div>
        </UiDialogHeader>
        <UiDialogFooter class="border-border border-t px-6 py-4 sm:items-center">
          <TransitionSlide appear>
            <span
              v-if="!arrivedState.bottom"
              class="text-muted-foreground grow text-xs max-sm:text-center"
            >
              Read all terms before accepting.
            </span>
          </TransitionSlide>
          <UiDialogClose as-child>
            <UiButton type="button" variant="outline"> Cancel </UiButton>
          </UiDialogClose>
          <UiDialogClose as-child>
            <UiButton type="button" :disabled="!arrivedState.bottom"> I agree </UiButton>
          </UiDialogClose>
        </UiDialogFooter>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>

<script lang="ts" setup>
  import { useScroll } from "@vueuse/core";

  const contentRef = useTemplateRef("contentRef");
  const { arrivedState } = useScroll(contentRef);
</script>
```
::

### Newsletter

::prose-show-case
:docs-dialog-newsletter

#code
```vue [DocsDialogNewsletter.vue]
<template>
  <div class="flex justify-center">
    <UiDialog>
      <UiDialogTrigger as-child>
        <UiButton variant="outline">Newsletter</UiButton>
      </UiDialogTrigger>
      <UiDialogContent class="sm:max-w-[400px]">
        <div class="mb-2 flex flex-col items-center gap-2">
          <div
            class="border-border flex size-11 shrink-0 items-center justify-center rounded-full border"
            aria-hidden="true"
          >
            <svg
              class="stroke-foreground"
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 32 32"
              aria-hidden="true"
            >
              <circle cx="16" cy="16" r="12" class="fill-background" strokeWidth="8" />
            </svg>
          </div>
          <UiDialogHeader>
            <UiDialogTitle class="sm:text-center">Never miss an update</UiDialogTitle>
            <UiDialogDescription class="sm:text-center">
              Subscribe to receive news and special offers.
            </UiDialogDescription>
          </UiDialogHeader>
        </div>

        <form class="space-y-5">
          <div class="space-y-2">
            <UiVeeInput
              icon="lucide:mail"
              placeholder="hi@yourcompany.com"
              type="email"
              aria-label="Email"
            />
          </div>
          <UiButton type="button" class="w-full"> Subscribe </UiButton>
        </form>

        <p class="text-muted-foreground text-center text-xs">
          By subscribing you agree to our
          <a class="underline hover:no-underline" href="#"> Privacy Policy </a>
          .
        </p>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>
```
::

### Feedback

::prose-show-case
:docs-dialog-feedback

#code
```vue [DocsDialogFeedback.vue]
<template>
  <div class="flex justify-center">
    <UiDialog>
      <UiDialogTrigger as-child>
        <UiButton variant="outline">Feedback</UiButton>
      </UiDialogTrigger>
      <UiDialogContent class="max-w-[430px]">
        <UiDialogHeader>
          <UiDialogTitle>Send us feedback</UiDialogTitle>
          <UiDialogDescription>
            Watch <a class="text-foreground hover:underline" href="#">tutorials</a>, read Origin
            UI's <a class="text-foreground hover:underline" href="#">documentation</a>, or join our
            <a class="text-foreground hover:underline" href="#"> Discord </a> for community help.
          </UiDialogDescription>
        </UiDialogHeader>
        <form class="space-y-5">
          <UiTextarea
            id="feedback"
            placeholder="How can we improve Origin UI?"
            aria-label="Send feedback"
          />
          <div class="flex flex-col sm:flex-row sm:justify-end">
            <UiButton type="button">Send feedback</UiButton>
          </div>
        </form>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>
```
::

### Rating

::prose-show-case
:docs-dialog-rating

#code
```vue [DocsDialogRating.vue]
<template>
  <div class="flex justify-center">
    <UiDialog>
      <UiDialogTrigger as-child>
        <UiButton variant="outline">Rating</UiButton>
      </UiDialogTrigger>
      <UiDialogContent
        class="flex flex-col gap-0 p-0 sm:max-w-[400px] [&>button:last-child]:top-3.5"
      >
        <UiDialogHeader class="contents space-y-0 text-left">
          <UiDialogTitle class="border-border border-b px-6 py-4 text-base">
            Help us improve
          </UiDialogTitle>
          <UiDialogDescription class="sr-only">
            Rate your experience with UI Thing
          </UiDialogDescription>
        </UiDialogHeader>
        <div class="px-6 py-4">
          <form class="space-y-5">
            <div class="space-y-4">
              <div>
                <fieldset class="space-y-4">
                  <legend class="text-foreground text-lg leading-none font-semibold">
                    How hard was it to set up your account?
                  </legend>
                  <UiRadioGroup
                    orientation="horizontal"
                    class="flex gap-0 -space-x-px rounded-lg shadow-xs shadow-black/5"
                  >
                    <label
                      v-for="number in 8"
                      :key="number"
                      :for="`radio-17-r${number}`"
                      class="border-input has-[:focus-visible]:outline-ring/70 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-accent relative flex size-9 flex-1 cursor-pointer flex-col items-center justify-center gap-3 border text-center text-sm outline-offset-2 transition-colors first:rounded-s-lg last:rounded-e-lg has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-50 has-[[data-state=checked]]:z-10"
                    >
                      <RadioGroupItem
                        :id="`radio-17-r${number}`"
                        :value="number.toString()"
                        class="sr-only after:absolute after:inset-0"
                      />
                      {{ number }}
                    </label>
                  </UiRadioGroup>
                </fieldset>
                <div class="text-muted-foreground mt-2 flex justify-between text-xs">
                  <p>Very easy</p>
                  <p>Very difficult</p>
                </div>
              </div>

              <UiVeeTextarea
                id="feedback"
                label="Why did you give this rating?"
                placeholder="How can we improve UI Thing?"
                aria-label="Send feedback"
              />
            </div>
            <UiButton type="button" class="w-full"> Send feedback </UiButton>
          </form>
        </div>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>
```
::

### OTP Code

::prose-show-case
:docs-dialog-otp-code

#code
```vue [DocsDialogOtpCode.vue]
<template>
  <div class="flex justify-center">
    <UiDialog>
      <UiDialogTrigger as-child>
        <UiButton variant="outline">OTP code</UiButton>
      </UiDialogTrigger>
      <UiDialogContent class="max-w-[400px]">
        <div class="mb-2 flex flex-col items-center gap-2">
          <div
            class="border-border flex size-11 shrink-0 items-center justify-center rounded-full border"
            aria-hidden="true"
          >
            <svg
              class="stroke-foreground"
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 32 32"
              aria-hidden="true"
            >
              <circle cx="16" cy="16" r="12" class="fill-background" strokeWidth="8" />
            </svg>
          </div>
          <UiDialogHeader class="mt-4">
            <UiDialogTitle class="sm:text-center">
              {{ hasGuessed ? "Code verified!" : "Enter confirmation code" }}
            </UiDialogTitle>
            <UiDialogDescription class="sm:text-center">
              {{
                hasGuessed
                  ? "Your code has been successfully verified."
                  : `Check your email and enter the code - Try ${CORRECT_CODE}`
              }}
            </UiDialogDescription>
          </UiDialogHeader>
        </div>

        <TransitionFade mode="out-in">
          <div v-if="hasGuessed" class="text-center">
            <UiDialogClose as-child>
              <UiButton type="button" @click="close"> Close </UiButton>
            </UiDialogClose>
          </div>
          <div v-else class="space-y-4">
            <div class="flex justify-center">
              <div>
                <UiVeePinInput v-model="value" otp :input-count="4" @complete="checkCode" />
              </div>
            </div>

            <TransitionSlide>
              <p
                v-if="hasGuessed === false"
                class="text-muted-foreground text-center text-xs"
                role="alert"
                aria-live="polite"
              >
                Invalid code. Please try again.
              </p>
            </TransitionSlide>

            <p class="text-center text-sm">
              <a class="underline hover:no-underline" href="#"> Resend code </a>
            </p>
          </div>
        </TransitionFade>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>

<script lang="ts" setup>
  const CORRECT_CODE = "6548";
  const value = ref([]);
  const hasGuessed = ref<boolean | undefined>(undefined);
  const checkCode = (code: string[]) => {
    const enteredCode = code.join("");
    if (enteredCode === CORRECT_CODE) {
      hasGuessed.value = true;
      value.value = [];
    } else {
      hasGuessed.value = false;
    }
  };
  const close = () => {
    hasGuessed.value = undefined;
    value.value = [];
  };
</script>
```
::

### Sign Up

::prose-show-case
:docs-dialog-sign-up

#code
```vue [DocsDialogSignUp.vue]
<template>
  <div class="flex justify-center">
    <UiDialog v-model:open="open">
      <UiDialogTrigger as-child>
        <UiButton variant="outline">Sign up</UiButton>
      </UiDialogTrigger>
      <UiDialogContent class="max-w-[400px] gap-4">
        <div class="flex flex-col items-center gap-4">
          <UiFancyIcon circle>
            <Icon name="lucide:user" mode="svg" />
          </UiFancyIcon>
          <UiDialogHeader class="mb-6">
            <UiDialogTitle class="sm:text-center">Sign up UI Thing</UiDialogTitle>
            <UiDialogDescription class="sm:text-center">
              We just need a few details to get you started.
            </UiDialogDescription>
          </UiDialogHeader>
        </div>

        <form @submit="submit">
          <fieldset :disabled="isSubmitting" class="grid grid-cols-1 gap-4">
            <UiVeeInput label="Full name" placeholder="John Doe" name="fullName" required />
            <UiVeeInput
              label="Email"
              placeholder="hi@mycompany.com"
              name="email"
              type="email"
              required
            />
            <UiVeeInput
              label="Password"
              placeholder="Enter your password"
              name="password"
              type="password"
              required
            />
            <UiButton type="submit" class="w-full"> Sign up </UiButton>
            <UiDivider label="Or" />
            <UiButton variant="outline" type="button" class="w-full"
              ><Icon name="logos:google-icon" /> Continue with Google</UiButton
            >
          </fieldset>
        </form>
        <p class="text-muted-foreground text-center text-xs">
          By signing up you agree to our <a class="underline hover:no-underline" href="#">Terms</a>.
        </p>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>

<script lang="ts" setup>
  import { object, string } from "yup";

  const { handleSubmit, isSubmitting } = useForm({
    name: "dialog-sign-up",
    validationSchema: toTypedSchema(
      object({
        fullName: string().label("Full Name").min(3).max(50).required(),
        email: string().label("Email").email().required(),
        password: string().label("Password").required().min(8).max(50),
      })
    ),
  });

  const open = defineModel<boolean>({ default: false });

  const submit = handleSubmit(async (values) => {
    try {
      useSonner.success("You have successfully signed up", {
        description: `Welcome ${values.fullName}`,
      });
      open.value = false;
    } catch (error: any) {
      useSonner.error("An error occurred while signing up", {
        description: error.message,
      });
    }
  });
</script>
```
::

### Sign In

::prose-show-case
:docs-dialog-sign-in

#code
```vue [DocsDialogSignIn.vue]
<template>
  <div class="flex justify-center">
    <UiDialog v-model:open="open">
      <UiDialogTrigger as-child>
        <UiButton variant="outline">Sign in</UiButton>
      </UiDialogTrigger>
      <UiDialogContent class="max-w-[400px] gap-4">
        <div class="flex flex-col items-center gap-4">
          <UiFancyIcon circle>
            <Icon name="lucide:user" mode="svg" />
          </UiFancyIcon>
          <UiDialogHeader class="mb-6">
            <UiDialogTitle class="sm:text-center">Welcome back</UiDialogTitle>
            <UiDialogDescription class="sm:text-center"
              >Enter your credentials to login to your account.</UiDialogDescription
            >
          </UiDialogHeader>
        </div>

        <form @submit="submit">
          <fieldset :disabled="isSubmitting" class="grid grid-cols-1 gap-4">
            <UiVeeInput
              label="Email"
              placeholder="hi@mycompany.com"
              name="email"
              type="email"
              required
            />
            <UiVeeInput
              label="Password"
              placeholder="Enter your password"
              name="password"
              type="password"
              required
            />
            <div class="flex items-center justify-between py-2">
              <UiVeeCheckbox name="rememberMe" label="Remember me" />
              <NuxtLink class="text-sm underline underline-offset-2" to="#"
                >Forgot password?</NuxtLink
              >
            </div>
            <UiButton type="submit" class="w-full" text="Sign in" />
            <UiDivider label="Or" />
            <UiButton variant="outline" type="button" class="w-full"
              ><Icon name="logos:google-icon" /> Sign in with Google</UiButton
            >
          </fieldset>
        </form>
        <p class="text-muted-foreground text-center text-xs">
          By logging in, you agree to our
          <a class="underline hover:no-underline" href="#">Terms</a>.
        </p>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>

<script lang="ts" setup>
  import { bool, object, string } from "yup";

  const { handleSubmit, isSubmitting } = useForm({
    name: "dialog-sign-in",
    validationSchema: toTypedSchema(
      object({
        email: string().label("Email").email().required(),
        password: string().label("Password").required().min(8).max(50),
        rememberMe: bool().label("Remember me").optional().default(true),
      })
    ),
  });

  const open = defineModel<boolean>({ default: false });

  const submit = handleSubmit(async () => {
    try {
      useSonner.success("You have successfully signed in", {
        description: `Welcome back!`,
      });
      open.value = false;
    } catch (error: any) {
      useSonner.error("An error occurred while signing in", {
        description: error.message,
      });
    }
  });
</script>
```
::

### Invite Members

::prose-show-case
:docs-dialog-invite-members

#code
```vue [DocsDialogInviteMembers.vue]
<template>
  <div class="flex justify-center">
    <UiDialog v-model:open="open">
      <UiDialogTrigger as-child>
        <UiButton variant="outline" text="Invite members" />
      </UiDialogTrigger>
      <UiDialogContent class="max-w-[400px] gap-4">
        <div class="flex flex-col gap-4">
          <UiFancyIcon circle>
            <Icon name="lucide:user-round-plus" mode="svg" />
          </UiFancyIcon>
          <UiDialogHeader class="*:text-left">
            <UiDialogTitle>Invite team members</UiDialogTitle>
            <UiDialogDescription>Invite teammates to earn free components.</UiDialogDescription>
          </UiDialogHeader>
        </div>

        <form @submit="submit">
          <UiLabel>Invite via email</UiLabel>

          <fieldset :disabled="isSubmitting" class="mt-2 grid grid-cols-1 gap-4">
            <UiScrollArea type="auto" class="max-h-[300px] pr-3">
              <TransitionSlide
                :offset="[0, 16]"
                :move-duration="300"
                group
                class="grid grid-cols-1 p-1"
              >
                <template v-for="(field, idx) in fields" :key="field.key">
                  <div class="flex items-center gap-2 pb-4">
                    <UiVeeInput
                      v-model="field.value as string"
                      placeholder="hi@mycompany.com"
                      type="email"
                      required
                    />
                    <UiButton
                      v-if="fields.length > 1"
                      class="shrink-0"
                      size="icon"
                      variant="ghost"
                      @click="remove(idx)"
                    >
                      <span class="sr-only">Delete this record</span>
                      <Icon class="text-muted-foreground" name="lucide:trash-2" size="16" />
                    </UiButton>
                  </div>
                </template>
              </TransitionSlide>
            </UiScrollArea>
            <div>
              <button
                type="button"
                class="text-sm underline underline-offset-2 hover:no-underline"
                @click="prepend('')"
              >
                <span>+ Add another</span>
              </button>
            </div>
            <UiButton type="submit" class="w-full" text="Send invites" />
          </fieldset>
        </form>
        <UiDivider class="mt-2" />
        <UiVeeInput
          label="Invite via magic link"
          readonly
          model-value="https://ui-thing.com/refer/87689"
        >
          <template #trailingIcon>
            <UiTooltip>
              <UiTooltipTrigger as-child>
                <button
                  type="button"
                  class="absolute inset-y-0 right-3 flex items-center justify-center disabled:opacity-100"
                  :aria-label="copied ? 'Copied' : 'Copy to clipboard'"
                  :disabled="copied"
                  @click="copy('https://ui-thing.com/refer/87689')"
                >
                  <TransitionScale mode="out-in">
                    <Icon
                      v-if="!copied"
                      class="text-muted-foreground/60"
                      name="lucide:copy"
                      size="16"
                      aria-hidden="true"
                    />
                    <Icon
                      v-else
                      name="lucide:check"
                      size="16"
                      aria-hidden="true"
                      class="text-emerald-500"
                    />
                  </TransitionScale>
                </button>
              </UiTooltipTrigger>
              <UiTooltipContent align="center" class="px-2 py-1 text-xs">
                Click to copy
              </UiTooltipContent>
            </UiTooltip>
          </template>
        </UiVeeInput>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>

<script lang="ts" setup>
  import { array, object, string } from "yup";

  const { copied, copy } = useClipboard();
  const { handleSubmit, isSubmitting } = useForm({
    name: "dialog-invite-members",
    initialValues: {
      members: ["", "mur@ha.pw"],
    },
    validationSchema: toTypedSchema(
      object({
        members: array().of(string().email().label("Email").required()).label("Members").min(1),
      })
    ),
  });

  const { remove, fields, prepend } = useFieldArray("members");
  const open = defineModel<boolean>({ default: false });
  const submit = handleSubmit(async (v) => {
    try {
      useSonner.success("Invitations Sent", {
        description: `${v.members?.length} invitations were successfully sent`,
      });
      open.value = false;
    } catch (error: any) {
      useSonner.error("An error occurred while sending invitations", {
        description: error.message,
      });
    }
  });
</script>
```
::

### Card Details

This implementation requires the use of [Maska](https://beholdr.github.io/maska/v3/#/install){rel="&#x22;nofollow&#x22;"}

::prose-show-case
:docs-dialog-card-details

#code
```vue [DocsDialogCardDetails.vue]
<template>
  <div class="flex justify-center">
    <UiDialog v-model:open="open">
      <UiDialogTrigger as-child>
        <UiButton variant="outline">Card details</UiButton>
      </UiDialogTrigger>
      <UiDialogContent class="max-w-[400px]">
        <div class="flex flex-col gap-3">
          <UiFancyIcon circle>
            <Icon name="lucide:wallet" class="size-5 opacity-80" />
          </UiFancyIcon>
          <UiDialogHeader>
            <UiDialogTitle class="text-left">Update your card</UiDialogTitle>
            <UiDialogDescription class="text-left">
              Your new card will replace your current card.
            </UiDialogDescription>
          </UiDialogHeader>
        </div>
        <form class="mt-4 space-y-6" @submit="submit">
          <fieldset :disabled="isSubmitting" class="space-y-6 md:space-y-4">
            <UiVeeInput name="nameOnCard" label="Name on card" required />
            <UiVeeInput
              v-maska="'#### #### #### ####'"
              name="cardNumber"
              trailing-icon="lucide:credit-card"
              label="Card number"
              required
            />
            <div class="flex gap-4">
              <div class="flex-1 space-y-2">
                <UiVeeInput
                  v-maska="'##/##'"
                  name="expiryDate"
                  placeholder="MM/YY"
                  label="Expiry date"
                  required
                />
              </div>
              <div class="flex-1 space-y-2">
                <UiVeeInput v-maska="'###'" name="cvc" label="CVC" required />
              </div>
            </div>
          </fieldset>
          <UiVeeCheckbox
            name="saveCard"
            class="text-muted-foreground"
            label="Save card for future payments"
          />
          <UiButton type="submit" class="w-full"> Update card </UiButton>
        </form>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>

<script lang="ts" setup>
  import dayjs from "dayjs";
  import { bool, object, string } from "yup";

  const { handleSubmit, isSubmitting, setValues } = useForm({
    name: "dialog-card-details",
    validationSchema: toTypedSchema(
      object({
        nameOnCard: string()
          .label("Name on card")
          .required()
          .min(2)
          .max(50)
          .default("Elijah Baker"),
        cardNumber: string()
          .label("Card number")
          .required()
          .default("4242 4242 4242 4242")
          .matches(/^\d{4} \d{4} \d{4} \d{4}$/, "Must be 16 digits"),
        expiryDate: string().label("Expiry date").required().default(dayjs().format("MM/YY")),
        cvc: string()
          .label("CVC")
          .required()
          .default("123")
          .matches(/^\d{3}$/, "Invalid CVC"),
        saveCard: bool().default(true),
      })
    ),
  });
  const open = defineModel<boolean>({ default: false });
  watch(open, (v) => {
    if (v) {
      setValues({
        nameOnCard: "Elijah Baker",
        cardNumber: "4242 4242 4242 4242",
        expiryDate: dayjs().format("MM/YY"),
        cvc: "123",
        saveCard: true,
      }); // reset to default values on open
    }
  });
  const submit = handleSubmit(async (values) => {
    try {
      useSonner.success("Card updated successfully", {
        description: `Your card ending with ${values.cardNumber.slice(-4)} has been updated successfully.`,
      });
      open.value = false;
    } catch (error: any) {
      useSonner.error("Unable to update card", {
        description: error.message,
      });
    }
  });
</script>
```
::

### Checkout

This implementation requires the use of [Maska](https://beholdr.github.io/maska/v3/#/install){rel="&#x22;nofollow&#x22;"}

::prose-show-case
:docs-dialog-checkout

#code
```vue [DocsDialogCheckout.vue]
<template>
  <div class="flex justify-center">
    <UiDialog>
      <UiDialogTrigger as-child>
        <UiButton variant="outline">Checkout</UiButton>
      </UiDialogTrigger>
      <UiDialogContent class="max-w-[400px]">
        <div class="mb-2 flex flex-col gap-2">
          <UiFancyIcon circle class="mb-2">
            <Icon name="lucide:store" class="size-5 opacity-80" />
          </UiFancyIcon>
          <UiDialogHeader>
            <UiDialogTitle class="text-left">Confirm and pay</UiDialogTitle>
            <UiDialogDescription class="text-left">
              Pay securely and cancel any time.
            </UiDialogDescription>
          </UiDialogHeader>
        </div>

        <form class="space-y-5">
          <div class="space-y-6 md:space-y-4">
            <UiRadioGroup orientation="horizontal" class="grid-cols-2" default-value="yearly">
              <label
                v-for="plan in plans"
                :key="plan.id"
                :for="`radio-${plan.id}`"
                class="border-input has-focus-visible:outline-ring/50 has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent/70 relative flex cursor-pointer flex-col gap-1 rounded-lg border p-4 shadow-xs shadow-black/5 transition-colors has-focus-visible:outline-3"
              >
                <UiRadioGroupItem
                  :id="`radio-${plan.id}`"
                  :value="plan.id"
                  class="sr-only after:absolute after:inset-0"
                />
                <div class="inline-flex items-start justify-between gap-2">
                  <p class="text-foreground font-medium md:text-sm">{{ plan.name }}</p>
                  <UiBadge v-if="plan.popular">Popular</UiBadge>
                </div>
                <p class="text-muted-foreground text-sm">{{ plan.price }}</p>
              </label>
            </UiRadioGroup>

            <UiVeeInput name="nameOnCard" label="Name on card" required />
            <div class="space-y-2">
              <legend class="text-foreground text-sm font-medium">Card Details</legend>
              <div class="rounded-lg shadow-xs shadow-black/5">
                <div class="relative focus-within:z-10">
                  <UiVeeInput
                    v-maska="'#### #### #### ####'"
                    placeholder="Card number"
                    aria-label="Card number"
                    trailing-icon="lucide:credit-card"
                    name="cardNumber"
                    class="peer rounded-b-none pe-9 shadow-none [direction:inherit]"
                  />
                </div>
                <div class="-mt-px flex">
                  <div class="min-w-0 focus-within:z-10">
                    <UiVeeInput
                      v-maska="'##/##'"
                      placeholder="MM/YY"
                      aria-label="Expiry date"
                      name="expiryDate"
                      class="rounded-e-none rounded-t-none shadow-none [direction:inherit]"
                    />
                  </div>
                  <div class="-ms-px min-w-0 focus-within:z-10">
                    <UiVeeInput
                      v-maska="'###'"
                      placeholder="CVC"
                      aria-label="CVC"
                      name="cvc"
                      class="rounded-s-none rounded-t-none shadow-none [direction:inherit]"
                    />
                  </div>
                </div>
              </div>
            </div>

            <button
              v-if="!showCouponInput"
              type="button"
              class="text-sm underline underline-offset-2 hover:no-underline"
              @click="showCouponInput = true"
            >
              + Add coupon
            </button>

            <div v-else>
              <UiVeeInput name="coupon" label="Coupon code" placeholder="Enter your code" />
            </div>
          </div>
          <UiButton type="button" class="w-full"> Subscribe </UiButton>
        </form>

        <p class="text-muted-foreground text-center text-xs">
          Payments are non-refundable. Cancel anytime.
        </p>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>

<script lang="ts" setup>
  const showCouponInput = ref(false);
  const plans = [
    { id: "monthly", name: "Monthly", price: "$32/month", popular: false },
    { id: "yearly", name: "Yearly", price: "$320/month", popular: true },
  ];
</script>
```
::

### Change Plan

::prose-show-case
:docs-dialog-change-plan

#code
```vue [DocsDialogChangePlan.vue]
<template>
  <div class="flex justify-center">
    <UiDialog v-model:open="open">
      <UiDialogTrigger as-child>
        <UiButton variant="outline" text="Change plan" />
      </UiDialogTrigger>

      <UiDialogContent class="max-w-[400px]">
        <div class="mb-2 flex flex-col gap-2">
          <UiFancyIcon circle class="mb-2">
            <Icon name="lucide:refresh-ccw" class="size-5 opacity-80" />
          </UiFancyIcon>
          <UiDialogHeader>
            <UiDialogTitle class="text-left">Change your plan</UiDialogTitle>
            <UiDialogDescription class="text-left">
              Pick one of the following plans.
            </UiDialogDescription>
          </UiDialogHeader>
        </div>

        <form class="space-y-5">
          <UiRadioGroup class="gap-2" default-value="plan-02">
            <div
              v-for="(plan, index) in plans"
              :key="index"
              class="border-input has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-accent relative flex w-full items-center gap-4 rounded-lg border p-4 shadow-xs shadow-black/5 md:gap-2"
            >
              <UiRadioGroupItem
                :id="plan.value"
                :value="plan.value"
                :aria-labelledby="`${plan.value}-description`"
                class="order-1 after:absolute after:inset-0"
              />
              <div class="grid grow gap-1">
                <UiLabel class="text-base md:text-base" :for="plan.value">{{ plan.name }}</UiLabel>
                <p :id="`${plan.value}-description`" class="text-muted-foreground md:text-sm">
                  {{ plan.price }}
                </p>
              </div>
            </div>
          </UiRadioGroup>

          <div class="space-y-3">
            <p>
              <strong class="font-medium md:text-sm">Features include:</strong>
            </p>
            <ul class="text-muted-foreground flex flex-col gap-3 md:text-sm">
              <li v-for="f in features" :key="f" class="flex gap-2">
                <Icon
                  name="lucide:circle-check"
                  class="text-primary mt-0.5 size-6 shrink-0 md:size-4"
                  aria-hidden="true"
                />
                {{ f }}
              </li>
            </ul>
          </div>

          <div class="grid gap-2">
            <UiButton type="button" class="w-full"> Change plan </UiButton>
            <UiDialogClose as-child>
              <UiButton type="button" variant="ghost" class="w-full"> Cancel </UiButton>
            </UiDialogClose>
          </div>
        </form>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>

<script lang="ts" setup>
  const plans = [
    { name: "Essential", price: "$4 per member/month", value: "plan-01" },
    { name: "Standard", price: "$19 per member/month", value: "plan-02" },
    { name: "Enterprise", price: "$32 per member/month", value: "plan-03" },
  ];

  const features = [
    "Create unlimited projects.",
    "Remove watermarks.",
    "Add unlimited users and free viewers.",
    "Upload unlimited files.",
    "7-day money back guarantee.",
    "Advanced permissions.",
  ];

  const open = defineModel<boolean>({ default: false });
</script>
```
::

### Edit Profile

::prose-show-case
:docs-dialog-edit-profile

#code
```vue [DocsDialogEditProfile.vue]
<!-- eslint-disable vue/html-self-closing -->
<template>
  <div class="flex justify-center">
    <UiDialog v-model:open="open">
      <UiDialogTrigger as-child>
        <UiButton variant="outline">Edit profile</UiButton>
      </UiDialogTrigger>
      <UiDialogContent
        class="flex flex-col gap-0 overflow-y-visible p-0 sm:max-w-lg [&>button:last-child]:top-3.5"
      >
        <UiDialogHeader class="contents space-y-0 text-left">
          <UiDialogTitle class="border-border border-b px-6 py-4 text-base">
            Edit profile
          </UiDialogTitle>
        </UiDialogHeader>
        <UiDialogDescription class="sr-only">
          Make changes to your profile here. You can change your photo and set a username.
        </UiDialogDescription>
        <div class="overflow-y-auto">
          <!-- Profile BG -->
          <div class="h-32">
            <div
              class="bg-muted relative flex h-full w-full items-center justify-center overflow-hidden"
            >
              <img
                v-if="currentImage"
                class="h-full w-full object-cover"
                :src="currentImage"
                alt="Profile banner"
                width="512"
                height="96"
              />
              <div class="absolute inset-0 flex items-center justify-center gap-2">
                <button
                  type="button"
                  class="focus-visible:outline-ring/70 z-50 flex size-10 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white outline-offset-2 transition-colors hover:bg-black/80 focus-visible:outline"
                  :aria-label="currentImage ? 'Change image' : 'Upload image'"
                  @click="handleBannerClick()"
                >
                  <Icon name="lucide:image-plus" class="size-4" aria-hidden="true" />
                </button>
                <button
                  v-if="currentImage"
                  type="button"
                  class="focus-visible:outline-ring/70 z-50 flex size-10 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white outline-offset-2 transition-colors hover:bg-black/80 focus-visible:outline-2"
                  aria-label="Remove image"
                  @click="currentImage = defaultBanner"
                >
                  <Icon name="lucide:x" class="size-4" aria-hidden="true" />
                </button>
              </div>
            </div>
          </div>
          <!-- Avatar -->
          <div class="-mt-10 px-6">
            <div
              class="border-background bg-muted relative flex size-20 items-center justify-center overflow-hidden rounded-full border-4 shadow-xs shadow-black/10"
            >
              <img
                v-if="currentAvatarImage"
                :src="currentAvatarImage"
                class="h-full w-full object-cover"
                width="80"
                height="80"
                alt="Profile image"
              />

              <button
                type="button"
                class="focus-visible:outline-ring/70 absolute flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white outline-offset-2 transition-colors hover:bg-black/80 focus-visible:outline-2"
                aria-label="Change profile picture"
                @click="handleAvatarClick()"
              >
                <Icon name="lucide:image-plus" class="size-4" aria-hidden="true" />
              </button>
            </div>
          </div>
          <div class="px-6 pt-4 pb-6">
            <form @submit="submit">
              <fieldset class="space-y-4" :disabled="isSubmitting">
                <div class="flex flex-col gap-4 sm:flex-row">
                  <UiVeeInput label="First name" placeholder="James" required name="firstName" />
                  <UiVeeInput label="Last name" placeholder="Bond" required name="lastName" />
                </div>
                <UiVeeInput label="Username" placeholder="agent-007" required name="username">
                  <template #trailingIcon>
                    <div class="absolute inset-y-0 right-3 flex items-center justify-center">
                      <Icon name="lucide:check" class="text-emerald-500" />
                    </div>
                  </template>
                </UiVeeInput>
                <UiVeeInput
                  label="Website"
                  class="peer pl-20"
                  placeholder="your-website.com"
                  type="text"
                  name="website"
                >
                  <template #icon>
                    <span
                      class="text-muted-foreground pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center border-r px-3 text-base peer-disabled:opacity-50 sm:text-sm"
                    >
                      https://
                    </span>
                  </template>
                </UiVeeInput>
                <div class="space-y-2">
                  <UiVeeTextarea
                    v-model="bio"
                    label="Biography"
                    placeholder="Write a few sentences about yourself"
                    name="bio"
                    :hint="`${characterCount} characters left of ${maxBioLength}`"
                  />
                </div>
              </fieldset>
            </form>
          </div>
        </div>
        <UiDialogFooter class="border-border border-t px-6 py-4">
          <UiDialogClose as-child>
            <UiButton type="button" variant="outline"> Cancel </UiButton>
          </UiDialogClose>
          <UiButton @click="submit()">Save changes</UiButton>
        </UiDialogFooter>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>

<script lang="ts" setup>
  import { object, string } from "yup";

  const defaultBanner =
    "https://images.unsplash.com/photo-1474779751981-5d6bb8cb0a35?q=80&w=2969&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
  const defaultAvatar =
    "https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=2980&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";

  const bio = ref("The name is Bond, James Bond.");
  const maxBioLength = 200;
  const characterCount = computed(() => maxBioLength - bio.value?.length || 0);
  const open = defineModel<boolean>({ default: false });

  // Image state
  const currentImage = ref<string | null>(defaultBanner);
  const currentAvatarImage = ref<string | null>(defaultAvatar);

  // File dialog
  const { open: handleBannerClick, onChange: onBannerChange } = useFileDialog({
    accept: "image/*",
    multiple: false,
    reset: true,
  });
  const { open: handleAvatarClick, onChange: onAvatarChange } = useFileDialog({
    accept: "image/*",
    multiple: false,
    reset: true,
  });

  // Handle file change for Banner
  onBannerChange(async (files) => {
    if (!files || files.length === 0) {
      currentImage.value = defaultBanner;
      return;
    }
    const file = files[0];
    const { execute } = useBase64(file);
    currentImage.value = await execute();
  });
  // Handle file change for Avatar
  onAvatarChange(async (files) => {
    if (!files || files.length === 0) {
      currentAvatarImage.value = defaultAvatar;
      return;
    }
    const file = files[0];
    const { execute } = useBase64(file);
    currentAvatarImage.value = await execute();
  });

  // Form state
  const { handleSubmit, isSubmitting, setValues } = useForm({
    name: "dialog-edit-profile",
    validationSchema: toTypedSchema(
      object({
        firstName: string().label("First name").required().min(2).max(50).default("James").trim(),
        lastName: string().label("Last name").required().min(2).max(50).default("Bond").trim(),
        username: string()
          .label("Username")
          .required()
          .max(30)
          .default("agent-007")
          .trim()
          .lowercase(),
        website: string().label("Website").required().default("www.007.com").url(),
        bio: string()
          .label("Biography")
          .required()
          .max(200)
          .default("The name is Bond, James Bond.")
          .trim(),
      })
    ),
  });

  watch(open, (v) => {
    if (v) {
      setValues({
        firstName: "James",
        lastName: "Bond",
        username: "agent-007",
        website: "www.007.com",
        bio: "The name is Bond, James Bond.",
      }); // reset to default values on open
    }
  });

  // Submit form
  const submit = handleSubmit(async (values) => {
    try {
      useSonner.success("Profile updated successfully.", {
        description: `Your profile has been updated successfully, ${values.firstName}!`,
      });
      open.value = false;
    } catch (error: any) {
      useSonner.error("An error occurred. Please try again.", {
        description: error.message,
      });
    }
  });
</script>
```
::

### Onboarding

::prose-show-case
:docs-dialog-onboarding

#code
```vue [DocsDialogOnboarding.vue]
<!-- eslint-disable vue/html-self-closing -->
<template>
  <div class="flex justify-center">
    <UiDialog v-model:open="open">
      <UiDialogTrigger as-child>
        <UiButton variant="outline">Onboarding</UiButton>
      </UiDialogTrigger>
      <UiDialogContent
        class="max-w-[450px] gap-0 overflow-x-clip p-0 [&>button:last-child]:text-white"
      >
        <div class="p-2">
          <TransitionFade>
            <img
              v-if="showImage"
              class="h-[282px] w-full rounded-lg object-cover"
              :src="currentImage"
              width="382"
              height="216"
              alt="dialog"
            />
          </TransitionFade>
        </div>
        <div class="space-y-6 overflow-x-hidden px-6 pt-3 pb-6">
          <TransitionFade mode="out-in">
            <UiDialogHeader v-if="showImage">
              <UiDialogTitle>{{ stepContent[step - 1].title }}</UiDialogTitle>
              <UiDialogDescription>{{ stepContent[step - 1].description }}</UiDialogDescription>
            </UiDialogHeader>
          </TransitionFade>
          <div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
            <div class="flex justify-center space-x-1.5 max-sm:order-1">
              <div
                v-for="(_, index) in Array(totalSteps)"
                :key="index"
                :class="[
                  'bg-primary h-1.5 w-1.5 rounded-full',
                  index + 1 === step ? 'bg-primary' : 'opacity-20',
                ]"
              />
            </div>
            <UiDialogFooter>
              <UiDialogClose as-child>
                <UiButton type="button" variant="ghost"> Skip </UiButton>
              </UiDialogClose>
              <UiButton v-if="step > 1" variant="outline" type="button" @click="goPrev">
                <Icon
                  name="lucide:arrow-left"
                  class="-ms-1 me-2 size-4 opacity-60 transition-transform group-hover:-translate-x-0.5"
                  aria-hidden="true"
                />
                Prev
              </UiButton>
              <UiButton v-if="step < totalSteps" class="group" type="button" @click="goNext">
                Next
                <Icon
                  name="lucide:arrow-right"
                  class="ms-2 -me-1 size-4 opacity-60 transition-transform group-hover:translate-x-0.5"
                  aria-hidden="true"
                />
              </UiButton>

              <UiDialogClose v-else as-child>
                <UiButton type="button">Okay</UiButton>
              </UiDialogClose>
            </UiDialogFooter>
          </div>
        </div>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>

<script lang="ts" setup>
  const stepContent = [
    {
      img: "https://ui-thing.behonbaker.com/cover.png",
      title: "Welcome to UI Thing",
      description:
        "Discover a powerful collection of components designed to enhance your development workflow.",
    },
    {
      img: "https://images.unsplash.com/4/madebyvadim.jpg?q=80&w=2969&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      title: "Customizable Components",
      description:
        "Each component is fully customizable and built with modern web standards in mind.",
    },
    {
      img: "https://images.unsplash.com/photo-1517976547714-720226b864c1?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      title: "Ready to Start?",
      description: "Begin building amazing interfaces with our comprehensive component library.",
    },
    {
      img: "https://images.unsplash.com/photo-1579208570378-8c970854bc23?q=80&w=3022&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      title: "Get Support",
      description:
        "Access our extensive documentation and community resources to make the most of UI Thing.",
    },
  ];
  const step = ref(1);
  const totalSteps = ref(stepContent.length);
  const open = defineModel<boolean>({ default: false });
  const showImage = ref(true);
  const currentImage = computed(() => stepContent[step.value - 1].img);

  watch(step, () => {
    showImage.value = false;
    setTimeout(() => {
      showImage.value = true;
    }, 100);
  });
  const goNext = () => {
    if (step.value < totalSteps.value) {
      step.value += 1;
    }
  };
  const goPrev = () => {
    if (step.value > 1) {
      step.value -= 1;
    }
  };

  watch(open, (value) => {
    if (value) {
      step.value = 1;
    }
  });
</script>
```
::

### Command Pallette Search

::prose-show-case
:docs-dialog-search

#code
```vue [DocsDialogSearch.vue]
<template>
  <div class="mx-auto flex max-w-sm justify-center">
    <UiButton class="w-full" variant="outline" @click="dialog = !dialog">
      <Icon
        name="lucide:search"
        class="text-muted-foreground/80 size-4 shrink-0"
        aria-hidden="true"
      />
      <span class="text-muted-foreground/70 font-normal">Search</span>

      <UiKbd class="ml-auto"> ⌘+Shift+K </UiKbd>
    </UiButton>
    <UiCommandDialog v-model:open="dialog">
      <UiDialogTitle class="sr-only">Search commands</UiDialogTitle>
      <UiDialogDescription class="sr-only">
        Use the arrow keys to navigate and press Enter to select a command.
      </UiDialogDescription>
      <UiCommandInput placeholder="Type a UiCommand or search..." />
      <UiCommandList>
        <UiCommandEmpty>No results found.</UiCommandEmpty>
        <template v-for="(group, i) in groups" :key="i">
          <UiCommandGroup class="p-2" :heading="group.heading">
            <UiCommandItem v-for="(child, j) in group.items" :key="j" :value="child.value">
              <Icon :name="child.icon" class="size-4 opacity-60" aria-hidden="true" />
              <span>{{ child.text }}</span>
              <UiCommandShortcut v-if="child.shortcut" class="justify-center">{{
                child.shortcut
              }}</UiCommandShortcut>
            </UiCommandItem>
          </UiCommandGroup>
          <UiCommandSeparator v-if="i < groups.length - 1" />
        </template>
      </UiCommandList>
    </UiCommandDialog>
  </div>
</template>

<script lang="ts" setup>
  const dialog = ref(false);

  useEventListener("keydown", (e) => {
    if (e.key === "k" && (e.metaKey || e.ctrlKey) && e.shiftKey) {
      e.preventDefault();
      dialog.value = !dialog.value;
    }
  });

  const groups = [
    {
      heading: "Quick start",
      items: [
        { icon: "lucide:folder-plus", text: "New folder", shortcut: "⌘N", value: "new-folder" },
        {
          icon: "lucide:file-input",
          text: "Import document",
          shortcut: "⌘I",
          value: "import-document",
        },
        {
          icon: "lucide:circle-fading-plus",
          text: "Add block",
          shortcut: "⌘B",
          value: "add-block",
        },
      ],
    },
    {
      heading: "Navigation",
      items: [
        {
          icon: "lucide:arrow-up-right",
          text: "Go to dashboard",
          value: "go-to-dashboard",
          shortcut: "",
        },
        { icon: "lucide:arrow-up-right", text: "Go to apps", value: "go-to-apps", shortcut: "" },
        {
          icon: "lucide:arrow-up-right",
          text: "Go to connections",
          value: "go-to-connections",
          shortcut: "",
        },
      ],
    },
  ];
</script>
```
::


# Divider

## Source code

Click :source-code-link{component="Divider.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add divider
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add divider
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add divider
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add divider
```
::

## Usage

### Basic

::prose-show-case
:docs-divider

#code
```vue [DocsDivider.vue]
<template>
  <div class="flex w-full items-center">
    <UiDivider />
  </div>
</template>
```
::

### Label

::prose-show-case
:docs-divider-label

#code
```vue [DocsDividerLabel.vue]
<template>
  <div class="flex w-full items-center">
    <UiDivider label="OR" />
  </div>
</template>
```
::

### Icon

::prose-show-case
:docs-divider-icon

#code
```vue [DocsDividerIcon.vue]
<template>
  <div class="flex w-full items-center">
    <UiDivider icon="lucide:activity" />
  </div>
</template>
```
::

### Avatar

::prose-show-case
:docs-divider-avatar

#code
```vue [DocsDividerAvatar.vue]
<template>
  <div class="flex w-full items-center">
    <UiDivider avatar="https://behonbaker.com/icon.png" />
  </div>
</template>
```
::

### Vertical

::prose-show-case
:docs-divider-vertical

#code
```vue [DocsDividerVertical.vue]
<template>
  <div class="flex h-[200px] w-full items-center">
    <UiDivider orientation="vertical" avatar="https://behonbaker.com/icon.png" />
  </div>
</template>
```
::


# Draggable

## Source code

Click :source-code-link{component="Draggable.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add draggable
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add draggable
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add draggable
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add draggable
```
::

## Usage

### Simple

::prose-show-case
:docs-draggable-simple

#code
```vue [DocsDraggableSimple.vue]
<template>
  <div class="mx-auto flex max-w-lg flex-col gap-5">
    <div class="grid grid-cols-3 gap-2 md:flex md:items-center">
      <ui-button :disabled="names.length >= 6" size="sm" @click="addName">Add</ui-button>

      <ui-button variant="ghost" size="sm" @click="toggledState = !toggledState">
        {{ toggledState ? "Disable" : "Enable" }}
      </ui-button>
    </div>

    <ui-draggable
      :disabled="!toggledState"
      :list="names"
      item-key="id"
      class="grid grid-cols-1 gap-2"
    >
      <template #item="{ element }">
        <div
          :class="[
            'bg-background flex cursor-grab items-center justify-between gap-3 rounded-md border p-3 shadow-xs',
            toggledState ? '' : 'cursor-not-allowed opacity-50',
          ]"
        >
          <span class="text-sm font-medium">{{ element.name }}</span>
          <ui-button
            v-tippy="'Remove item'"
            :disabled="!toggledState"
            size="icon-sm"
            variant="ghost"
            @click="removeItem(element.id)"
          >
            <icon name="lucide:trash-2" class="text-destructive size-4" />
            <span class="sr-only">Remove item</span>
          </ui-button>
        </div>
      </template>
    </ui-draggable>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const toggledState = ref(true);

  const { data } = await useAsyncData(async () =>
    Array.from({ length: 3 }, () => ({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
    }))
  );
  const names = ref(data.value || []);
  const addName = () => {
    if (!names.value) names.value = [];
    if (names.value.length >= 6) return;
    names.value?.push({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
    });
  };
  const removeItem = (id: string) => {
    names.value = names.value?.filter((n) => n.id !== id);
  };
</script>
```
::

### Two Lists

::prose-show-case
:docs-draggable-two-lists

#code
```vue [DocsDraggableTwoLists.vue]
<template>
  <div class="mx-auto flex max-w-lg items-start gap-6">
    <ui-draggable
      group="two-lists"
      :list="names1"
      item-key="id"
      class="grid w-full grid-cols-1 gap-2"
      :class="[
        'min-h-5',
        names1.length === 0 ? 'border-muted rounded-md border-2 border-dashed p-4' : '',
      ]"
    >
      <template #item="{ element }">
        <div class="bg-background cursor-grab rounded-md border p-3 shadow-xs">
          <span class="text-sm font-medium">{{ element.name }}</span>
        </div>
      </template>
    </ui-draggable>
    <ui-draggable
      group="two-lists"
      :list="names2"
      item-key="id"
      class="grid w-full grid-cols-1 gap-2"
      :class="[
        'min-h-5',
        names2.length === 0 ? 'border-muted rounded-md border-2 border-dashed p-4' : '',
      ]"
    >
      <template #item="{ element }">
        <div class="bg-background cursor-grab rounded-md border p-3 shadow-xs">
          <span class="text-sm font-medium">{{ element.name }}</span>
        </div>
      </template>
    </ui-draggable>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(async () => {
    const list1 = Array.from({ length: 3 }, () => ({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
    }));
    const list2 = Array.from({ length: 3 }, () => ({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
    }));
    return { list1, list2 };
  });
  const names1 = ref(data.value?.list1 || []);
  const names2 = ref(data.value?.list2 || []);
</script>
```
::

### Clone

::prose-show-case
:docs-draggable-clone

#code
```vue [DocsDraggableClone.vue]
<template>
  <div class="mx-auto flex max-w-lg items-start gap-6">
    <ui-draggable
      :group="{
        name: groupeName,
        pull: 'clone',
        put: false,
      }"
      :list="names1"
      item-key="id"
      class="grid w-full grid-cols-1 gap-2"
      :class="[
        'min-h-5',
        names1.length === 0 ? 'border-muted rounded-md border-2 border-dashed p-4' : '',
      ]"
    >
      <template #item="{ element }">
        <div class="bg-background cursor-grab rounded-md border p-3 shadow-xs">
          <span class="text-sm font-medium">{{ element.name }}</span>
        </div>
      </template>
    </ui-draggable>
    <ui-draggable
      :group="groupeName"
      :list="names2"
      item-key="id"
      class="grid w-full grid-cols-1 gap-2"
      :class="[
        'min-h-5',
        names2.length === 0 ? 'border-muted rounded-md border-2 border-dashed p-4' : '',
      ]"
    >
      <template #item="{ element }">
        <div class="bg-background cursor-grab rounded-md border p-3 shadow-xs">
          <span class="text-sm font-medium">{{ element.name }}</span>
        </div>
      </template>
    </ui-draggable>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const groupeName = "clone-list";

  const { data } = await useAsyncData(async () => {
    const list1 = Array.from({ length: 3 }, () => ({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
    }));
    const list2 = Array.from({ length: 3 }, () => ({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
    }));
    return { list1, list2 };
  });
  const names1 = ref(data.value?.list1 || []);
  const names2 = ref(data.value?.list2 || []);
</script>
```
::

### Custom Clone

::prose-show-case
:docs-draggable-custom-clone

#code
```vue [DocsDraggableCustomClone.vue]
<template>
  <div class="mx-auto flex max-w-lg items-start gap-6">
    <ui-draggable
      :group="{
        name: groupeName,
        pull: 'clone',
        put: false,
      }"
      :clone="(o) => ({ name: `${o.name} (copy)`, id: faker.string.uuid() })"
      :list="names1"
      item-key="id"
      class="grid w-full grid-cols-1 gap-2"
      :class="[
        'min-h-5',
        names1.length === 0 ? 'border-muted rounded-md border-2 border-dashed p-4' : '',
      ]"
    >
      <template #item="{ element }">
        <div class="bg-background cursor-grab rounded-md border p-3 shadow-xs">
          <span class="text-sm font-medium">{{ element.name }}</span>
        </div>
      </template>
    </ui-draggable>
    <ui-draggable
      :group="groupeName"
      :list="names2"
      item-key="id"
      class="grid w-full grid-cols-1 gap-2"
      :class="[
        'min-h-5',
        names2.length === 0 ? 'border-muted rounded-md border-2 border-dashed p-4' : '',
      ]"
    >
      <template #item="{ element }">
        <div class="bg-background cursor-grab rounded-md border p-3 shadow-xs">
          <span class="text-sm font-medium">{{ element.name }}</span>
        </div>
      </template>
    </ui-draggable>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const groupeName = "custom-clone-list";

  const { data } = await useAsyncData(async () => {
    const list1 = Array.from({ length: 3 }, () => ({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
    }));
    const list2 = Array.from({ length: 3 }, () => ({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
    }));
    return { list1, list2 };
  });
  const names1 = ref(data.value?.list1 || []);
  const names2 = ref(data.value?.list2 || []);
</script>
```
::

### Clone on `Meta` key

Press the `Meta` key (Command on Mac, Windows key on Windows) while dragging to clone an item.

::prose-show-case
:docs-draggable-clone-on-meta

#code
```vue [DocsDraggableCloneOnMeta.vue]
<template>
  <div class="mx-auto flex max-w-lg flex-col gap-6">
    <div class="text-sm font-medium">
      <p v-if="meta" class="text-emerald-500">Items will be cloned</p>
      <p v-else class="text-muted-foreground">Items will be moved</p>
    </div>
    <div class="flex items-start gap-6">
      <ui-draggable
        :group="{
          name: groupeName,
          pull: customCloneFn(),
        }"
        :list="names1"
        item-key="id"
        class="grid w-full grid-cols-1 gap-2"
        :class="[
          'min-h-5',
          names1.length === 0 ? 'border-muted rounded-md border-2 border-dashed p-4' : '',
        ]"
      >
        <template #item="{ element }">
          <div class="bg-background cursor-grab rounded-md border p-3 shadow-xs">
            <span class="text-sm font-medium">{{ element.name }}</span>
          </div>
        </template>
      </ui-draggable>
      <ui-draggable
        :group="groupeName"
        :list="names2"
        item-key="id"
        class="grid w-full grid-cols-1 gap-2"
        :class="[
          'min-h-5',
          names2.length === 0 ? 'border-muted rounded-md border-2 border-dashed p-4' : '',
        ]"
      >
        <template #item="{ element }">
          <div class="bg-background cursor-grab rounded-md border p-3 shadow-xs">
            <span class="text-sm font-medium">{{ element.name }}</span>
          </div>
        </template>
      </ui-draggable>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const groupeName = "clone-on-control-lists";

  const { data } = await useAsyncData(async () => {
    const list1 = Array.from({ length: 3 }, () => ({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
    }));
    const list2 = Array.from({ length: 3 }, () => ({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
    }));
    return { list1, list2 };
  });
  const names1 = ref(data.value?.list1 || []);
  const names2 = ref(data.value?.list2 || []);

  const { meta } = useMagicKeys();
  const customCloneFn = () => {
    return meta?.value ? "clone" : true;
  };
</script>
```
::

### Handle

::prose-show-case
:docs-draggable-handle

#code
```vue [DocsDraggableHandle.vue]
<template>
  <div class="mx-auto flex max-w-lg flex-col gap-5">
    <div class="grid grid-cols-3 gap-2 md:flex md:items-center">
      <ui-button :disabled="names.length >= 6" size="sm" @click="addName">Add</ui-button>

      <ui-button variant="ghost" size="sm" @click="toggledState = !toggledState">
        {{ toggledState ? "Disable" : "Enable" }}
      </ui-button>
    </div>

    <ui-draggable
      :disabled="!toggledState"
      :list="names"
      handle=".handle"
      item-key="id"
      class="grid grid-cols-1 gap-2"
    >
      <template #item="{ element }">
        <div
          :class="[
            'bg-background flex items-center justify-between gap-3 rounded-md border p-3 shadow-xs',
            toggledState ? '' : 'cursor-not-allowed opacity-50',
          ]"
        >
          <div class="flex items-center gap-3">
            <ui-fancy-icon
              icon="lucide:grip-vertical"
              size="sm"
              class="handle rounded-md border-none"
              :class="toggledState ? 'cursor-move' : 'cursor-not-allowed'"
              aria-hidden="true"
              aria-label="Drag handle"
            />
            <span class="text-sm font-medium">{{ element.name }}</span>
          </div>
          <ui-button
            v-tippy="'Remove item'"
            :disabled="!toggledState"
            size="icon-sm"
            variant="ghost"
            @click="removeItem(element.id)"
          >
            <icon name="lucide:trash-2" class="text-destructive size-4" />
            <span class="sr-only">Remove item</span>
          </ui-button>
        </div>
      </template>
    </ui-draggable>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const toggledState = ref(true);

  const { data } = await useAsyncData(async () =>
    Array.from({ length: 3 }, () => ({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
    }))
  );
  const names = ref(data.value || []);
  const addName = () => {
    if (!names.value) names.value = [];
    if (names.value.length >= 6) return;
    names.value?.push({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
    });
  };
  const removeItem = (id: string) => {
    names.value = names.value?.filter((n) => n.id !== id);
  };
</script>
```
::

### Table

::prose-show-case
:docs-draggable-table

#code
```vue [DocsDraggableTable.vue]
<template>
  <div class="border-border/50 rounded-md border">
    <ui-table>
      <ui-table-header>
        <ui-table-row>
          <ui-table-head class="bg-background/50 sticky left-0 w-10 backdrop-blur-md">
            <span class="sr-only">Drag handle</span>
          </ui-table-head>
          <ui-table-head>Name</ui-table-head>
          <ui-table-head>Country</ui-table-head>
          <ui-table-head>Phone</ui-table-head>
          <ui-table-head>Email</ui-table-head>
          <ui-table-head>
            <span class="sr-only">Table actions</span>
          </ui-table-head>
        </ui-table-row>
      </ui-table-header>
      <ui-draggable handle=".handle" tag="tbody" :list="people" item-key="id">
        <template #item="{ element }">
          <ui-table-row>
            <ui-table-cell class="bg-background/50 sticky left-0 w-10 backdrop-blur-md">
              <ui-fancy-icon
                size="sm"
                class="handle size-7 cursor-grab rounded-md border-none"
                icon="lucide:grip-vertical"
                aria-hidden="true"
                aria-label="Drag handle"
              />
            </ui-table-cell>
            <ui-table-cell>{{ element.name }}</ui-table-cell>
            <ui-table-cell>{{ element.country }}</ui-table-cell>
            <ui-table-cell>{{ element.phone }}</ui-table-cell>
            <ui-table-cell>{{ element.email }}</ui-table-cell>
          </ui-table-row>
        </template>
      </ui-draggable>
    </ui-table>
    <p class="text-muted-foreground py-4 text-center text-sm">Drag and drop to reorder rows</p>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(async () =>
    Array.from({ length: 5 }, () => ({
      id: useId(),
      name: faker.person.fullName(),
      country: faker.location.country(),
      phone: faker.phone.number({ style: "national" }),
      email: faker.internet.email().toLowerCase(),
    }))
  );

  const people = ref(data.value || []);
</script>
```
::

### Slots

::prose-show-case
:docs-draggable-slots

#code
```vue [DocsDraggableSlots.vue]
<template>
  <div class="mx-auto flex max-w-lg flex-col gap-5">
    <ui-draggable :list="names" item-key="id" class="grid grid-cols-1 gap-2">
      <template #header>
        <div class="py-4">
          <p class="text-muted-foreground mb-3 text-sm">Drag and drop to reorder items</p>
          <ui-gradient-divider />
        </div>
      </template>
      <template #footer>
        <div class="py-4">
          <ui-gradient-divider />
          <p class="text-muted-foreground mt-3 text-sm">Drag and drop to reorder items</p>
        </div>
      </template>
      <template #item="{ element }">
        <div
          :class="[
            'bg-background flex cursor-grab items-center justify-between gap-3 rounded-md border p-3 shadow-xs',
          ]"
        >
          <span class="text-sm font-medium">{{ element.name }}</span>
        </div>
      </template>
    </ui-draggable>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(async () =>
    Array.from({ length: 5 }, () => ({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
    }))
  );
  const names = ref(data.value || []);
</script>
```
::

### Nested

::prose-show-case
:docs-draggable-nested

#code
```vue [DocsDraggableNested.vue]
<template>
  <div>
    <DefineNestedDraggable v-slot="{ items }">
      <ui-draggable
        class="min-h-12 border border-dashed p-4 pb-0"
        :list="items"
        item-key="id"
        tag="ul"
        :group="{ name: 'nested' }"
      >
        <template #item="{ element }">
          <li>
            {{ element.name }}
            <nested-draggable :items="element.children || []" />
          </li>
        </template>
      </ui-draggable>
    </DefineNestedDraggable>
    <nested-draggable :items="familyTree" />
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  type Items = {
    id: string;
    name: string;
    children?: Items[];
  };
  const [DefineNestedDraggable, NestedDraggable] = createReusableTemplate<{ items: Items[] }>();

  const familyTree = useState(() => [
    {
      id: useId(),
      name: faker.person.fullName(),
      children: [
        { id: useId(), name: faker.person.fullName(), children: [] },
        {
          id: useId(),
          name: faker.person.fullName(),
          children: [
            { id: useId(), name: faker.person.fullName(), children: [] },
            { id: useId(), name: faker.person.fullName(), children: [] },
          ],
        },
      ],
    },
    { id: useId(), name: faker.person.fullName(), children: [] },
    {
      id: useId(),
      name: faker.person.fullName(),
      children: [{ id: useId(), name: faker.person.fullName(), children: [] }],
    },
  ]);
</script>
```
::


# Drawer

## Source code

Click :source-code-link{component="Drawer"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add drawer
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add drawer
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add drawer
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add drawer
```
::

## Usage

### Basic Form

We can bring the different components together to make a simple drawer.

::prose-show-case
:docs-drawer-basic

#code
```vue [DocsDrawerBasic.vue]
<template>
  <div class="text-center">
    <UiDrawer v-model:open="isOpen">
      <UiDrawerTrigger as-child>
        <UiButton variant="outline">Open Drawer</UiButton>
      </UiDrawerTrigger>
      <UiDrawerContent>
        <div class="mx-auto w-full max-w-sm rounded-t-lg p-4 pb-10">
          <UiDrawerTitle class="mb-1.5">Drawer Title</UiDrawerTitle>
          <UiDrawerDescription>
            This is a basic drawer with a title and description.
          </UiDrawerDescription>

          <div class="relative">
            <form class="mt-7" @submit="submit">
              <fieldset :disabled="isSubmitting" class="grid gap-6">
                <UiVeeInput
                  name="email"
                  label="Email"
                  type="email"
                  model-value="baybreezy@example.com"
                />
                <UiVeeInput name="username" label="Username" model-value="baybreezy" />
                <UiDrawerClose as-child>
                  <UiButton type="submit">Update</UiButton>
                </UiDrawerClose>
              </fieldset>
            </form>
          </div>

          <UiDrawerClose class="absolute top-3 right-4 h-7 w-7" as-child>
            <UiButton variant="ghost" size="icon-sm" class="opacity-50 hover:opacity-100">
              <Icon name="lucide:x" />
            </UiButton>
          </UiDrawerClose>
        </div>
      </UiDrawerContent>
    </UiDrawer>
  </div>
</template>

<script lang="ts" setup>
  import { object, string } from "yup";

  const isOpen = defineModel<boolean>();

  const { handleSubmit, isSubmitting } = useForm({
    validationSchema: toTypedSchema(
      object({
        email: string().label("Email").email().required().trim(),
        username: string().label("Username").min(3).required().trim().lowercase(),
      })
    ),
  });
  const submit = handleSubmit((_) => {
    useSonner.success("Updated", {
      description: "Your account has been updated",
    });
  });
</script>
```
::

### With Image

We can add an image inside as well.

::prose-show-case
:docs-drawer-image

#code
```vue [DocsDrawerImage.vue]
<template>
  <div class="text-center">
    <UiDrawer v-model:open="isOpen">
      <UiDrawerTrigger as-child>
        <UiButton variant="outline">View image</UiButton>
      </UiDrawerTrigger>
      <UiDrawerContent>
        <div class="mx-auto w-full max-w-screen-md rounded-t-lg p-4 pb-10">
          <UiDrawerTitle class="mb-1.5">Image</UiDrawerTitle>
          <UiDrawerDescription>
            Right click on the image to see the context menu.
          </UiDrawerDescription>

          <div class="relative min-h-[400px]">
            <UiAspectRatio :ratio="16 / 9" class="mt-6">
              <UiContextMenu>
                <UiContextMenuTrigger as-child>
                  <img
                    src="https://cdn.pixabay.com/photo/2023/05/02/21/08/river-7966163_1280.png"
                    alt="Snow Lake"
                    class="h-full w-full rounded-md object-cover"
                  />
                </UiContextMenuTrigger>
                <UiContextMenuContent class="w-[150px]">
                  <UiContextMenuGroup>
                    <UiContextMenuItem @select="showMessage('Now sharing...')"
                      >Share</UiContextMenuItem
                    >
                    <UiContextMenuItem @select="showMessage('Moving image...')"
                      >Move</UiContextMenuItem
                    >
                    <UiContextMenuItem
                      @select="showMessage('Please hold as we rename the image...')"
                      >Rename</UiContextMenuItem
                    >
                  </UiContextMenuGroup>
                  <UiContextMenuSeparator />
                  <UiContextMenuGroup>
                    <UiContextMenuItem @select="showMessage('Deleting the image...')"
                      >Delete</UiContextMenuItem
                    >
                  </UiContextMenuGroup>
                </UiContextMenuContent>
              </UiContextMenu>
            </UiAspectRatio>
          </div>

          <UiDrawerClose class="absolute top-3 right-4 h-7 w-7" as-child>
            <UiButton variant="ghost" size="icon-sm" class="opacity-50 hover:opacity-100">
              <Icon name="lucide:x" />
            </UiButton>
          </UiDrawerClose>
        </div>
      </UiDrawerContent>
    </UiDrawer>
  </div>
</template>

<script lang="ts" setup>
  const showMessage = (message: string) => {
    useSonner(message);
  };
  const isOpen = defineModel<boolean>();
</script>
```
::

### Responsive Dialog

You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` component on desktop and a `Drawer` on mobile.

::prose-show-case
:docs-drawer-responsive-dialog

#code
```vue [DocsDrawerResponsiveDialog.vue]
<template>
  <div class="flex justify-center">
    <DefinedForm>
      <form class="">
        <fieldset class="grid items-start gap-4">
          <UiVeeInput name="email" label="Email" type="email" model-value="baybreezy@example.com" />
          <UiVeeInput name="username" label="Username" model-value="baybreezy" />
          <UiButton type="submit"> Save changes </UiButton>
        </fieldset>
      </form>
    </DefinedForm>

    <UiDialog v-if="isDesktop" v-model:open="isOpen">
      <UiDialogTrigger as-child>
        <UiButton variant="outline" text="Edit Profile" />
      </UiDialogTrigger>
      <UiDialogContent class="sm:max-w-[400px]">
        <UiDialogHeader>
          <UiDialogTitle>Edit profile</UiDialogTitle>
          <UiDialogDescription>
            Make changes to your profile here. Click save when you're done.
          </UiDialogDescription>
        </UiDialogHeader>
        <ReusableForm />
      </UiDialogContent>
    </UiDialog>

    <UiDrawer v-else v-model:open="isOpen">
      <UiDrawerTrigger as-child>
        <UiButton variant="outline" text="Edit Profile" />
      </UiDrawerTrigger>
      <UiDrawerContent class="mx-2">
        <UiDrawerHeader class="text-left">
          <UiDrawerTitle>Edit profile</UiDrawerTitle>
          <UiDrawerDescription>
            Make changes to your profile here. Click save when you're done.
          </UiDrawerDescription>
        </UiDrawerHeader>
        <div class="px-4">
          <ReusableForm />
        </div>
        <UiDrawerFooter class="pt-2">
          <UiDrawerClose as-child>
            <UiButton variant="outline"> Cancel </UiButton>
          </UiDrawerClose>
        </UiDrawerFooter>
      </UiDrawerContent>
    </UiDrawer>
  </div>
</template>

<script lang="ts" setup>
  // Reuse `form` section
  const [DefinedForm, ReusableForm] = createReusableTemplate();
  const isDesktop = useMediaQuery("(min-width: 768px)");

  const isOpen = ref(false);
</script>
```
::


# Dropdown Menu

## Source code

Click :source-code-link{component="DropdownMenu"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add dropdown-menu
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add dropdown-menu
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add dropdown-menu
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add dropdown-menu
```
::

## Usage

### Menu Items w/ Submenu

::prose-show-case
:docs-dropdown-menu-basic

#code
```vue [DocsDropdownMenuBasic.vue]
<template>
  <div class="flex items-center justify-center">
    <UiDropdownMenu>
      <UiDropdownMenuTrigger as-child>
        <UiButton variant="outline">Open menu</UiButton>
      </UiDropdownMenuTrigger>
      <UiDropdownMenuContent class="w-56">
        <template v-for="(item, i) in menuitems" :key="i">
          <UiDropdownMenuLabel v-if="item.label" :label="item.label" />
          <UiDropdownMenuSeparator v-else-if="item.divider" />
          <UiDropdownMenuItem
            v-else-if="item.title && !item.items"
            :title="item.title"
            :icon="item.icon"
            :shortcut="item.shortcut"
            :disabled="item.disabled"
          />
          <UiDropdownMenuSub v-else-if="item.title && item.items">
            <UiDropdownMenuSubTrigger
              :title="item.title"
              :icon="item.icon"
              :text-value="item.title"
            />
            <UiDropdownMenuSubContent>
              <template v-for="(child, k) in item.items" :key="`child-${k}`">
                <UiDropdownMenuSeparator v-if="child.divider" />
                <UiDropdownMenuItem
                  v-else
                  :title="child.title"
                  :icon="child.icon"
                  :shortcut="child.shortcut"
                />
              </template>
            </UiDropdownMenuSubContent>
          </UiDropdownMenuSub>
        </template>
      </UiDropdownMenuContent>
    </UiDropdownMenu>
  </div>
</template>

<script lang="ts" setup>
  const menuitems = [
    { label: "My Account" },
    { divider: true },
    { title: "Profile", icon: "ph:user", shortcut: "⇧⌘P" },
    { title: "Billing", icon: "ph:credit-card", shortcut: "⌘B" },
    { title: "Settings", icon: "ph:gear", shortcut: "⌘S" },
    { title: "Keyboard shortcuts", icon: "ph:keyboard", shortcut: "⌘K" },
    { divider: true },
    { title: "Team", icon: "ph:users", shortcut: "⇧⌘T" },
    {
      title: "Invite Users",
      icon: "ph:user-plus",
      items: [
        { title: "Email", icon: "ph:envelope", shortcut: "⇧⌘E" },
        { title: "Facebook", icon: "logos:facebook", shortcut: "⇧⌘F" },
        { title: "Twitter", icon: "logos:twitter", shortcut: "⇧⌘T" },
        { divider: true },
        { title: "More", icon: "ph:plus-circle" },
      ],
    },
    { title: "Settings", icon: "ph:gear", shortcut: "⌘S" },
    { title: "Keyboard shortcuts", icon: "ph:keyboard", shortcut: "⌘K" },
    { divider: true },
    { title: "Github", icon: "ph:github-logo" },
    { title: "Support", icon: "ph:lifebuoy" },
    { title: "API", icon: "ph:cloud", disabled: true },
    { divider: true },
    { title: "Sign out", icon: "ph:sign-out" },
  ];
</script>
```
::

### Translucent Surface

Use the `translucent` prop on the content surface when you want a softer glassmorphic menu treatment without changing the menu behavior.

::prose-show-case
:docs-dropdown-menu-translucent

#code
```vue [DocsDropdownMenuTranslucent.vue]
<template>
  <div class="flex items-center justify-center">
    <UiDropdownMenu>
      <UiDropdownMenuTrigger as-child>
        <UiButton variant="outline">Translucent menu</UiButton>
      </UiDropdownMenuTrigger>
      <UiDropdownMenuContent translucent class="w-56">
        <UiDropdownMenuArrow translucent />
        <UiDropdownMenuLabel label="Workspace" />
        <UiDropdownMenuSeparator />
        <UiDropdownMenuItem title="Profile" icon="ph:user" shortcut="⇧⌘P" />
        <UiDropdownMenuItem title="Theme" icon="ph:palette" shortcut="⌘T" />
        <UiDropdownMenuSub>
          <UiDropdownMenuSubTrigger title="Share" icon="ph:share-network" text-value="Share" />
          <UiDropdownMenuSubContent translucent>
            <UiDropdownMenuItem title="Copy link" icon="ph:link" shortcut="⌘C" />
            <UiDropdownMenuItem title="Invite team" icon="ph:users-three" shortcut="⇧⌘I" />
          </UiDropdownMenuSubContent>
        </UiDropdownMenuSub>
        <UiDropdownMenuSeparator />
        <UiDropdownMenuItem title="Sign out" icon="ph:sign-out" />
      </UiDropdownMenuContent>
    </UiDropdownMenu>
  </div>
</template>
```
::

### Checkbox Menu Items

::prose-show-case
:docs-dropdown-menu-check-items

#code
```vue [DocsDropdownMenuCheckItems.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiDropdownMenu>
      <UiDropdownMenuTrigger as-child>
        <UiButton variant="outline">Checbox items</UiButton>
      </UiDropdownMenuTrigger>
      <UiDropdownMenuContent class="w-48">
        <UiDropdownMenuLabel label="Choose heros" />
        <UiDropdownMenuSeparator />
        <template v-for="h in heroList" :key="h.id">
          <UiDropdownMenuCheckboxItem
            :model-value="selectedHeros.includes(h.id)"
            class="mb-1"
            @select="(e) => e.preventDefault()"
            @update:model-value="
              selectedHeros.includes(h.id)
                ? selectedHeros.splice(selectedHeros.indexOf(h.id), 1)
                : selectedHeros.push(h.id)
            "
          >
            <div class="flex items-center gap-4">
              <UiAvatar :src="h.image" class="h-6 w-6" :alt="h.name" />
              <span>{{ h.name }}</span>
            </div>
          </UiDropdownMenuCheckboxItem>
        </template>
      </UiDropdownMenuContent>
    </UiDropdownMenu>
  </div>
</template>

<script lang="ts" setup>
  const heroList = [
    {
      name: "Batman",
      id: "1",
      image:
        "https://static.dc.com/dc/files/default_images/Char_Profile_Batman_20190116_5c3fc4b40faec2.47318964.jpg",
    },
    {
      name: "Superman",
      id: "2",
      image: "https://s26162.pcdn.co/wp-content/uploads/2023/02/superman-1240x692.jpeg",
    },
    {
      name: "Hulk",
      id: "3",
      image:
        "https://a1cf74336522e87f135f-2f21ace9a6cf0052456644b80fa06d4f.ssl.cf2.rackcdn.com/images/characters/large/800/The-Hulk.The-Incredible-Hulk.webp",
    },
  ];
  const selectedHeros = ref<string[]>([]);
</script>
```
::

### Radio Menu Items

::prose-show-case
:docs-dropdown-menu-radio-items

#code
```vue [DocsDropdownMenuRadioItems.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiDropdownMenu>
      <UiDropdownMenuTrigger as-child>
        <UiButton variant="outline">Radio options</UiButton>
      </UiDropdownMenuTrigger>

      <UiDropdownMenuContent class="w-48">
        <UiDropdownMenuLabel label="Tooltip placement" />
        <UiDropdownMenuSeparator />
        <UiDropdownMenuRadioGroup v-model="placement">
          <UiDropdownMenuRadioItem
            v-for="item in placements"
            :key="item"
            :value="item"
            :title="item"
            :text-value="item"
            @select="(e) => e.preventDefault()"
          />
        </UiDropdownMenuRadioGroup>
      </UiDropdownMenuContent>
    </UiDropdownMenu>
  </div>
</template>

<script lang="ts" setup>
  const placement = ref("top-start");
  const placements = [
    "top-start",
    "top",
    "top-end",
    "right-start",
    "right",
    "right-end",
    "bottom-start",
    "bottom",
    "bottom-end",
    "left-start",
    "left",
    "left-end",
  ];
</script>
```
::

### Origin UI Examples

::prose-show-case
:docs-dropdown-menu-origin-u-i

#code
```vue [DocsDropdownMenuOriginUI.vue]
<template>
  <div class="@container">
    <div class="flex flex-col divide-y">
      <!-- Row -->
      <div class="flex h-32 w-full items-stretch">
        <!-- Left column -->
        <div class="flex flex-1 items-center justify-center border-r">
          <UiDropdownMenu>
            <UiDropdownMenuTrigger as-child>
              <UiButton
                size="icon"
                variant="ghost"
                class="rounded-full shadow-none"
                aria-label="Open edit menu"
              >
                <Icon name="lucide:ellipsis" class="size-4" aria-hidden="true" />
              </UiButton>
            </UiDropdownMenuTrigger>
            <UiDropdownMenuContent>
              <UiDropdownMenuItem v-for="item in 4" :key="item" :title="`Option ${item}`" />
            </UiDropdownMenuContent>
          </UiDropdownMenu>
        </div>
        <!-- Right column -->
        <div class="flex flex-1 items-center justify-center">
          <UiDropdownMenu>
            <UiDropdownMenuTrigger as-child>
              <UiButton variant="outline">
                Same width of trigger
                <Icon
                  name="lucide:chevron-down"
                  class="-me-1 size-4 opacity-60"
                  aria-hidden="true"
                />
              </UiButton>
            </UiDropdownMenuTrigger>
            <UiDropdownMenuContent class="min-w-(--reka-dropdown-menu-trigger-width)">
              <UiDropdownMenuItem v-for="item in 4" :key="item" :title="`Option ${item}`" />
            </UiDropdownMenuContent>
          </UiDropdownMenu>
        </div>
      </div>
      <!-- Row -->
      <div class="flex h-32 w-full items-stretch">
        <!-- Left column -->
        <div class="flex flex-1 items-center justify-center border-r">
          <UiDropdownMenu>
            <UiDropdownMenuTrigger as-child>
              <UiButton variant="outline">
                Menu with icons
                <Icon
                  name="lucide:chevron-down"
                  class="-me-1 size-4 opacity-60"
                  aria-hidden="true"
                />
              </UiButton>
            </UiDropdownMenuTrigger>
            <UiDropdownMenuContent class="min-w-(--reka-dropdown-menu-trigger-width)">
              <UiDropdownMenuItem v-for="item in menuWithIcons" :key="item.title">
                <Icon :name="item.icon" class="size-4 opacity-60" aria-hidden="true" />
                {{ item.title }}
              </UiDropdownMenuItem>
            </UiDropdownMenuContent>
          </UiDropdownMenu>
        </div>
        <!-- Right column -->
        <div class="flex flex-1 items-center justify-center">
          <UiDropdownMenu>
            <UiDropdownMenuTrigger as-child>
              <UiButton variant="outline">
                Grouped items
                <Icon
                  name="lucide:chevron-down"
                  class="-me-1 size-4 opacity-60"
                  aria-hidden="true"
                />
              </UiButton>
            </UiDropdownMenuTrigger>
            <UiDropdownMenuContent class="min-w-(--reka-dropdown-menu-trigger-width)">
              <template v-for="(group, index) in groupedItems" :key="`group-${index}`">
                <UiDropdownMenuGroup v-for="(item, i) in group" :key="i">
                  <UiDropdownMenuItem :variant="item.variant ?? 'default'" :title="item.title">
                    <Icon :name="item.icon" class="size-4 opacity-60" aria-hidden="true" />
                    {{ item.title }}
                  </UiDropdownMenuItem>
                </UiDropdownMenuGroup>
                <UiDropdownMenuSeparator class="last:hidden" />
              </template>
            </UiDropdownMenuContent>
          </UiDropdownMenu>
        </div>
      </div>
      <!-- Row -->
      <div class="flex h-32 w-full items-stretch">
        <!-- Left column -->
        <div class="flex flex-1 items-center justify-center border-r">
          <UiDropdownMenu>
            <UiDropdownMenuTrigger as-child>
              <UiButton variant="outline">
                Labeled grouped items
                <Icon
                  name="lucide:chevron-down"
                  class="-me-1 size-4 opacity-60"
                  aria-hidden="true"
                />
              </UiButton>
            </UiDropdownMenuTrigger>
            <UiDropdownMenuContent class="min-w-(--reka-dropdown-menu-trigger-width)">
              <UiDropdownMenuLabel>Label</UiDropdownMenuLabel>
              <UiDropdownMenuGroup>
                <UiDropdownMenuItem title="Copy" icon="lucide:copy-plus" />
                <UiDropdownMenuItem title="Edit" icon="lucide:bolt" />
              </UiDropdownMenuGroup>
              <UiDropdownMenuSeparator />
              <UiDropdownMenuLabel>Label</UiDropdownMenuLabel>
              <UiDropdownMenuGroup>
                <UiDropdownMenuItem title="Group" icon="lucide:layers-2" />
                <UiDropdownMenuItem title="Clone" icon="lucide:files" />
                <UiDropdownMenuItem variant="destructive" title="Delete" icon="lucide:trash" />
              </UiDropdownMenuGroup>
            </UiDropdownMenuContent>
          </UiDropdownMenu>
        </div>
        <!-- Right column -->
        <div class="flex flex-1 items-center justify-center">
          <UiDropdownMenu>
            <UiDropdownMenuTrigger as-child>
              <UiButton
                size="icon"
                variant="ghost"
                class="rounded-full shadow-none"
                aria-label="Open edit menu"
              >
                <Icon name="lucide:plus" class="size-4" aria-hidden="true" />
              </UiButton>
            </UiDropdownMenuTrigger>
            <UiDropdownMenuContent class="pb-2">
              <UiDropdownMenuLabel>Add block</UiDropdownMenuLabel>
              <UiDropdownMenuItem v-for="(block, i) in blocks" :key="i">
                <div
                  class="bg-accent text-accent-foreground flex size-8 items-center justify-center rounded-md border"
                  aria-hidden="true"
                >
                  <Icon :name="block.icon" size="16" />
                </div>
                <div>
                  <div class="text-sm font-medium">{{ block.title }}</div>
                  <div class="text-muted-foreground text-xs">{{ block.description }}</div>
                </div>
              </UiDropdownMenuItem>
            </UiDropdownMenuContent>
          </UiDropdownMenu>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const menuWithIcons = [
    { title: "Copy", icon: "lucide:copy-plus" },
    { title: "Edit", icon: "lucide:bolt" },
    { title: "Group", icon: "lucide:layers-2" },
    { title: "Clone", icon: "lucide:files" },
  ];
  const groupedItems = [
    [
      { title: "Copy", icon: "lucide:copy-plus" },
      { title: "Edit", icon: "lucide:bolt" },
    ],
    [
      { title: "Group", icon: "lucide:layers-2" },
      { title: "Clone", icon: "lucide:files" },
      { title: "Delete", icon: "lucide:trash", variant: "destructive" },
    ],
  ];

  const blocks = [
    { title: "Text", icon: "lucide:type", description: "Start writing with plain text" },
    { title: "Quote", icon: "lucide:text-quote", description: "Capture a quote" },
    { title: "Divider", icon: "lucide:minus", description: "Visually divide blocks" },
    { title: "Heading 1", icon: "lucide:heading-1", description: "Big section heading" },
    { title: "Heading 2", icon: "lucide:heading-2", description: "Medium section subheading" },
  ];
</script>
```
::


# Dropfile

## Source code

Click :source-code-link{component="Dropfile.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add dropfile
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add dropfile
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add dropfile
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add dropfile
```
::

## Usage

### Placeholder

::prose-show-case
:docs-dropfile

#code
```vue [DocsDropfile.vue]
<template>
  <div class="mx-auto max-w-100">
    <UiDropfile @dropped="files = $event" />
    <div v-if="files && files.length" class="mt-5">
      <div
        v-for="(file, i) in files"
        :key="file.name"
        class="group relative mb-2 flex h-12 items-center justify-between rounded-md border px-3 py-3"
      >
        <div class="relative flex grow items-center gap-3">
          <Icon name="lucide:file" class="mr-3 h-5 w-5 opacity-60" />
          <p class="w-[80%] truncate text-sm">{{ file.name }}</p>
          <p
            class="text-muted-foreground/60 absolute right-3 ml-auto text-xs whitespace-nowrap opacity-100 transition group-hover:opacity-0"
          >
            {{ formatFileSize(file.size) }}
          </p>
        </div>

        <div
          class="absolute right-3 scale-50 opacity-0 transition-all duration-200 group-hover:scale-100 group-hover:opacity-100"
        >
          <UiButton size="icon-sm" variant="outline" @click="removeFile(i)">
            <Icon name="heroicons:x-mark" class="h-3.5 w-3.5" />
          </UiButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  const files = ref<File[]>([]);

  function formatFileSize(fileSize: number) {
    const units = ["B", "KB", "MB", "GB", "TB"];
    let size = fileSize;
    let unitIndex = 0;

    while (size >= 1024 && unitIndex < units.length - 1) {
      size /= 1024;
      unitIndex++;
    }

    return `${size.toFixed(2)} ${units[unitIndex]}`;
  }

  const removeFile = (index: number) => {
    files.value.splice(index, 1);
  };
</script>
```
::


# Editable

## Source code

Click :source-code-link{component="Editable"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add editable
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add editable
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add editable
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add editable
```
::

## Usage

The `Editable` component is one that will be used differently in different parts of your app.

Since we already have styled buttons and inputs, it kinda makes no sense to force a specific style on the `Editable` component when we can just use the `asChild` prop to pass in the children we want to use.

::prose-show-case
:docs-editable

#code
```vue [DocsEditable.vue]
<template>
  <div>
    <div class="w-full">
      <h1 class="text-lg font-semibold">Application</h1>
      <p class="text-muted-foreground mt-px text-sm">
        Below is the information submitted. Click on the values to edit them.
      </p>

      <dl class="mt-7">
        <template v-for="d in details" :key="d.key">
          <div
            class="grid grid-cols-1 gap-y-2 border-b px-2 py-6 text-sm first:border-t md:grid-cols-2 md:px-0"
          >
            <dt class="font-medium">{{ d.key }}</dt>

            <UiEditable v-slot="{ isEditing }" v-model="d.value">
              <UiEditableArea>
                <UiEditablePreview as="dd" class="text-muted-foreground h-8 cursor-pointer">
                  <span class="flex size-full items-center">
                    {{ d.value }}
                  </span>
                </UiEditablePreview>
                <div class="flex items-center gap-2">
                  <div class="shrink-0 grow">
                    <UiEditableInput as-child>
                      <UiInput class="h-8 px-2" />
                    </UiEditableInput>
                  </div>
                  <div v-if="isEditing" class="flex items-center gap-1">
                    <UiEditableSubmit as-child>
                      <UiButton class="size-8" size="icon-sm">
                        <Icon name="lucide:check" class="size-4" />
                      </UiButton>
                    </UiEditableSubmit>
                    <UiEditableCancel as-child>
                      <UiButton variant="outline" class="size-8" size="icon-sm">
                        <Icon name="lucide:x" class="size-4" />
                      </UiButton>
                    </UiEditableCancel>
                  </div>
                </div>
              </UiEditableArea>
            </UiEditable>
          </div>
        </template>
      </dl>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const details = ref([
    { key: "Full name", value: "John Doe" },
    { key: "Email", value: "janedoe@testmail.com" },
    { key: "Phone", value: "123-456-7890" },
    { key: "Address", value: "1234 Elm St" },
    { key: "City", value: "Springfield" },
    { key: "State", value: "IL" },
    { key: "Zip", value: "62701" },
  ]);
</script>
```
::


# Empty

## Source code

Click :source-code-link{component="Empty"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add empty
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add empty
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add empty
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add empty
```
::

## Usage

```vue
<template>
  <UiEmpty>
    <UiEmptyHeader>
      <UiEmptyMedia variant="icon">
        <Icon />
      </UiEmptyMedia>
    </UiEmptyHeader>
    <UiEmptyTitle>No data</UiEmptyTitle>
    <UiEmptyDescription>No data found</UiEmptyDescription>
    <UiEmptyContent>
      <Button>Add data</Button>
    </UiEmptyContent>
  </UiEmpty>
</template>
```

## Examples

### Basic

::prose-show-case
:docs-empty

#code
```vue [DocsEmpty.vue]
<template>
  <div class="flex items-center justify-center">
    <UiEmpty>
      <UiEmptyHeader>
        <UiEmptyMedia variant="icon">
          <Icon name="lucide:folder-code" />
        </UiEmptyMedia>
        <UiEmptyTitle>No Projects Yet</UiEmptyTitle>
        <UiEmptyDescription>
          You haven't created any projects yet. Get started by creating your first project.
        </UiEmptyDescription>
      </UiEmptyHeader>
      <UiEmptyContent>
        <div className="flex gap-2">
          <UiButton>Create Project</UiButton>
          <UiButton variant="outline">Import Project</UiButton>
        </div>
      </UiEmptyContent>
      <UiButton variant="link" as-child size="sm">
        <a href="#" class="text-muted-foreground flex items-center gap-2">
          Learn More <Icon name="lucide:arrow-up-right" />
        </a>
      </UiButton>
    </UiEmpty>
  </div>
</template>
```
::

### Outline

::prose-show-case
:docs-empty-outline

#code
```vue [DocsEmptyOutline.vue]
<template>
  <div class="flex items-center justify-center">
    <UiEmpty class="border border-dashed">
      <UiEmptyHeader>
        <UiEmptyMedia variant="icon">
          <Icon name="lucide:cloud" />
        </UiEmptyMedia>
        <UiEmptyTitle>Cloud Storage UiEmpty</UiEmptyTitle>
        <UiEmptyDescription>
          Upload files to your cloud storage to access them anywhere.
        </UiEmptyDescription>
      </UiEmptyHeader>
      <UiEmptyContent>
        <UiButton variant="outline" size="sm"> Upload Files </UiButton>
      </UiEmptyContent>
    </UiEmpty>
  </div>
</template>
```
::

### Background

::prose-show-case
:docs-empty-background

#code
```vue [DocsEmptyBackground.vue]
<template>
  <div class="flex items-center justify-center">
    <UiEmpty class="from-muted/50 to-background h-full bg-gradient-to-b from-30%">
      <UiEmptyHeader>
        <UiEmptyMedia variant="icon">
          <Icon name="lucide:bell" />
        </UiEmptyMedia>
        <UiEmptyTitle>No Notifications</UiEmptyTitle>
        <UiEmptyDescription>
          You're all caught up. New notifications will appear here.
        </UiEmptyDescription>
      </UiEmptyHeader>
      <UiEmptyContent>
        <UiButton variant="outline" size="sm">
          <Icon name="lucide:refresh-ccw" />
          Refresh
        </UiButton>
      </UiEmptyContent>
    </UiEmpty>
  </div>
</template>
```
::

### Avatar

::prose-show-case
:docs-empty-avatar

#code
```vue [DocsEmptyAvatar.vue]
<template>
  <div class="flex items-center justify-center">
    <UiEmpty>
      <UiEmptyHeader>
        <UiEmptyMedia variant="default">
          <UiAvatar class="size-12">
            <UiAvatarImage src="https://github.com/BayBreezy.png" class="grayscale" />
            <UiAvatarFallback>BB</UiAvatarFallback>
          </UiAvatar>
        </UiEmptyMedia>
        <UiEmptyTitle>User Offline</UiEmptyTitle>
        <UiEmptyDescription>
          This user is currently offline. You can leave a message to notify them or try again later.
        </UiEmptyDescription>
      </UiEmptyHeader>
      <UiEmptyContent>
        <UiButton size="sm">Leave Message</UiButton>
      </UiEmptyContent>
    </UiEmpty>
  </div>
</template>
```
::

### Avatar Group

::prose-show-case
:docs-empty-avatar-group

#code
```vue [DocsEmptyAvatarGroup.vue]
<template>
  <div class="flex items-center justify-center">
    <UiEmpty>
      <UiEmptyHeader>
        <UiEmptyMedia>
          <div
            class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale"
          >
            <UiAvatar>
              <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
              <UiAvatarFallback>CN</UiAvatarFallback>
            </UiAvatar>
            <UiAvatar>
              <UiAvatarImage src="https://github.com/baybreezy.png" alt="@baybreezy" />
              <UiAvatarFallback>BB</UiAvatarFallback>
            </UiAvatar>
            <UiAvatar>
              <UiAvatarImage src="https://github.com/mirari.png" alt="@mirari" />
              <UiAvatarFallback>MI</UiAvatarFallback>
            </UiAvatar>
          </div>
        </UiEmptyMedia>
        <UiEmptyTitle>No Team Members</UiEmptyTitle>
        <UiEmptyDescription> Invite your team to collaborate on this project. </UiEmptyDescription>
      </UiEmptyHeader>
      <UiEmptyContent>
        <UiButton size="sm">
          <Icon name="lucide:plus" />
          Invite Members
        </UiButton>
      </UiEmptyContent>
    </UiEmpty>
  </div>
</template>
```
::

### Input Group

::prose-show-case
:docs-empty-input-group

#code
```vue [DocsEmptyInputGroup.vue]
<template>
  <div class="flex items-center justify-center">
    <UiEmpty>
      <UiEmptyHeader>
        <UiEmptyTitle>404 - Not Found</UiEmptyTitle>
        <UiEmptyDescription>
          The page you're looking for doesn't exist. Try searching for what you need below.
        </UiEmptyDescription>
      </UiEmptyHeader>
      <UiEmptyContent>
        <UiInputGroup class="sm:w-3/4">
          <UiInputGroupInput placeholder="Try searching for pages..." />
          <UiInputGroupAddon>
            <Icon name="lucide:search" />
          </UiInputGroupAddon>
          <UiInputGroupAddon align="inline-end">
            <UiKbd>/</UiKbd>
          </UiInputGroupAddon>
        </UiInputGroup>
        <UiEmptyDescription> Need help? <a href="#">Contact support</a> </UiEmptyDescription>
      </UiEmptyContent>
    </UiEmpty>
  </div>
</template>
```
::


# Fancy Icon

## Source code

Click :source-code-link{component="FancyIcon"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add fancy-icon
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add fancy-icon
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add fancy-icon
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add fancy-icon
```
::

## Usage

### Basic

::prose-show-case
:docs-fancy-icon

#code
```vue [DocsFancyIcon.vue]
<template>
  <div class="flex items-center justify-center gap-3">
    <UiFancyIcon theme="light" color="primary" :icon />
    <UiFancyIcon theme="gradient" color="primary" :icon />
    <UiFancyIcon theme="dark" color="primary" :icon />
    <UiFancyIcon theme="modern" color="gray" :icon />
    <UiFancyIcon theme="modern-neue" color="gray" :icon />
    <UiFancyIcon theme="outline" color="primary" :icon />
  </div>
</template>
<script lang="ts" setup>
  const icon = "lucide:circle-check";
</script>
```
::

### Light Theme

::prose-show-case
:docs-fancy-icon-light

#code
```vue [DocsFancyIconLight.vue]
<template>
  <div class="flex flex-col gap-6">
    <template v-for="c in colors" :key="c">
      <div class="flex items-start justify-center gap-3">
        <template v-for="s in sizes" :key="s">
          <UiFancyIcon theme="light" :color="c" :size="s" :icon />
        </template>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
  const icon = "lucide:circle-check";
  const sizes = ["sm", "md", "lg", "xl"] as const;
  const colors = ["gray", "primary", "error", "warning", "success", "info"] as const;
</script>
```
::

### Dark Theme

::prose-show-case
:docs-fancy-icon-dark

#code
```vue [DocsFancyIconDark.vue]
<template>
  <div class="flex flex-col gap-6">
    <template v-for="c in colors" :key="c">
      <div class="flex items-start justify-center gap-3">
        <template v-for="s in sizes" :key="s">
          <UiFancyIcon theme="dark" :color="c" :size="s" :icon />
        </template>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
  const icon = "lucide:circle-check";
  const sizes = ["sm", "md", "lg", "xl"] as const;
  const colors = ["gray", "primary", "error", "warning", "success", "info"] as const;
</script>
```
::

### Outline Theme

::prose-show-case
:docs-fancy-icon-outline

#code
```vue [DocsFancyIconOutline.vue]
<template>
  <div class="flex flex-col gap-6">
    <template v-for="c in colors" :key="c">
      <div class="flex items-start justify-center gap-8">
        <template v-for="s in sizes" :key="s">
          <UiFancyIcon theme="outline" :color="c" :size="s" :icon />
        </template>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
  const icon = "lucide:circle-check";
  const sizes = ["sm", "md", "lg", "xl"] as const;
  const colors = ["gray", "primary", "error", "warning", "success", "info"] as const;
</script>
```
::

### Modern Theme

::prose-show-case
:docs-fancy-icon-modern

#code
```vue [DocsFancyIconModern.vue]
<template>
  <div class="flex items-start justify-center gap-3">
    <template v-for="s in sizes" :key="s">
      <UiFancyIcon theme="modern" :size="s" :icon />
    </template>
  </div>
</template>
<script lang="ts" setup>
  const icon = "lucide:circle-check";
  const sizes = ["sm", "md", "lg", "xl"] as const;
</script>
```
::

### Modern Neue Theme

::prose-show-case
:docs-fancy-icon-modern-neue

#code
```vue [DocsFancyIconModernNeue.vue]
<template>
  <div class="flex items-start justify-center gap-3">
    <template v-for="s in sizes" :key="s">
      <UiFancyIcon theme="modern-neue" :size="s" :icon />
    </template>
  </div>
</template>
<script lang="ts" setup>
  const icon = "lucide:circle-check";
  const sizes = ["sm", "md", "lg", "xl"] as const;
</script>
```
::

### Gradient Theme

::prose-show-case
:docs-fancy-icon-gradient

#code
```vue [DocsFancyIconGradient.vue]
<template>
  <div class="flex flex-col gap-6">
    <template v-for="c in colors" :key="c">
      <div class="flex items-start justify-center gap-3">
        <template v-for="s in sizes" :key="s">
          <UiFancyIcon theme="gradient" :color="c" :size="s" :icon />
        </template>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
  const icon = "lucide:circle-check";
  const sizes = ["sm", "md", "lg", "xl"] as const;
  const colors = ["gray", "primary", "error", "warning", "success", "info"] as const;
</script>
```
::


# Field

## Source code

Click :source-code-link{component="Field"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add field
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add field
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add field
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add field
```
::

## Usage

```vue
<template>
  <UiFieldSet>
    <UiFieldLegend>Profile</UiFieldLegend>
    <UiFieldDescription>This appears on invoices and emails.</UiFieldDescription>
    <UiFieldGroup>
      <UiField>
        <UiFieldLabel for="name">Full name</UiFieldLabel>
        <UiInput id="name" autoComplete="off" placeholder="Tinker Bell" />
        <UiFieldDescription>This appears on invoices and emails.</UiFieldDescription>
      </UiField>
      <UiField>
        <UiFieldLabel for="username">Username</UiFieldLabel>
        <UiInput id="username" autoComplete="off" aria-invalid />
        <UiFieldError>Choose another username.</UiFieldError>
      </UiField>
      <UiField orientation="horizontal">
        <UiSwitch id="newsletter" />
        <UiFieldLabel for="newsletter">Subscribe to the newsletter</UiFieldLabel>
      </UiField>
    </UiFieldGroup>
  </UiFieldSet>
</template>
```

## Anatomy

The `Field` family is designed for composing accessible forms. A typical field is structured as follows:

```vue
<template>
  <UiField>
    <UiFieldLabel for="input-id">Label</UiFieldLabel>
    <!-- Input, Select, Switch, etc. -->
    <UiFieldDescription>Optional helper text.</UiFieldDescription>
    <UiFieldError>Validation message.</UiFieldError>
  </UiField>
</template>
```

- `Field` is the core wrapper for a single field.
- `FieldContent` is a flex column that groups label and description. Not required if you have no description.
- Wrap related fields with `FieldGroup`, and use `FieldSet` with `FieldLegend` for semantic grouping.

## Examples

### Basic

::prose-show-case
:docs-field-basic

#code
```vue [DocsFieldBasic.vue]
<template>
  <div class="mx-auto w-full max-w-md">
    <form>
      <UiFieldGroup>
        <UiFieldSet>
          <UiFieldLegend>Payment Method</UiFieldLegend>
          <UiFieldDescription> All transactions are secure and encrypted </UiFieldDescription>
          <UiFieldGroup>
            <UiField>
              <UiFieldLabel for="checkout-7j9-card-name-43j"> Name on Card </UiFieldLabel>
              <UiInput id="checkout-7j9-card-name-43j" placeholder="Evil Rabbit" required />
            </UiField>
            <UiField>
              <UiFieldLabel for="checkout-7j9-card-number-uw1"> Card Number </UiFieldLabel>
              <UiInput
                id="checkout-7j9-card-number-uw1"
                placeholder="1234 5678 9012 3456"
                required
              />
              <UiFieldDescription> Enter your 16-digit card number </UiFieldDescription>
            </UiField>
            <div class="grid grid-cols-3 gap-4">
              <UiField>
                <UiFieldLabel for="checkout-exp-month-ts6"> Month </UiFieldLabel>
                <UiSelect default-value="">
                  <UiSelectTrigger id="checkout-exp-month-ts6">
                    <UiSelectValue placeholder="MM" />
                  </UiSelectTrigger>
                  <UiSelectContent>
                    <UiSelectItem value="01">01</UiSelectItem>
                    <UiSelectItem value="02">02</UiSelectItem>
                    <UiSelectItem value="03">03</UiSelectItem>
                    <UiSelectItem value="04">04</UiSelectItem>
                    <UiSelectItem value="05">05</UiSelectItem>
                    <UiSelectItem value="06">06</UiSelectItem>
                    <UiSelectItem value="07">07</UiSelectItem>
                    <UiSelectItem value="08">08</UiSelectItem>
                    <UiSelectItem value="09">09</UiSelectItem>
                    <UiSelectItem value="10">10</UiSelectItem>
                    <UiSelectItem value="11">11</UiSelectItem>
                    <UiSelectItem value="12">12</UiSelectItem>
                  </UiSelectContent>
                </UiSelect>
              </UiField>
              <UiField>
                <UiFieldLabel for="checkout-7j9-exp-year-f59"> Year </UiFieldLabel>
                <UiSelect default-value="">
                  <UiSelectTrigger id="checkout-7j9-exp-year-f59">
                    <UiSelectValue placeholder="YYYY" />
                  </UiSelectTrigger>
                  <UiSelectContent>
                    <UiSelectItem value="2024">2024</UiSelectItem>
                    <UiSelectItem value="2025">2025</UiSelectItem>
                    <UiSelectItem value="2026">2026</UiSelectItem>
                    <UiSelectItem value="2027">2027</UiSelectItem>
                    <UiSelectItem value="2028">2028</UiSelectItem>
                    <UiSelectItem value="2029">2029</UiSelectItem>
                  </UiSelectContent>
                </UiSelect>
              </UiField>
              <UiField>
                <UiFieldLabel for="checkout-7j9-cvv">CVV</UiFieldLabel>
                <UiInput id="checkout-7j9-cvv" placeholder="123" required />
              </UiField>
            </div>
          </UiFieldGroup>
        </UiFieldSet>
        <UiFieldSeparator />
        <UiFieldSet>
          <UiFieldLegend>Billing Address</UiFieldLegend>
          <UiFieldDescription>
            The billing address associated with your payment method
          </UiFieldDescription>
          <UiFieldGroup>
            <UiField orientation="horizontal">
              <UiCheckbox id="checkout-7j9-same-as-shipping-wgm" default-checked />
              <UiFieldLabel for="checkout-7j9-same-as-shipping-wgm" class="font-normal">
                Same as shipping address
              </UiFieldLabel>
            </UiField>
          </UiFieldGroup>
        </UiFieldSet>
        <UiFieldSet>
          <UiFieldGroup>
            <UiField>
              <UiFieldLabel for="checkout-7j9-optional-comments"> Comments </UiFieldLabel>
              <UiTextarea
                id="checkout-7j9-optional-comments"
                placeholder="Add any additional comments"
                class="resize-none"
              />
            </UiField>
          </UiFieldGroup>
        </UiFieldSet>
        <UiField orientation="horizontal">
          <UiButton type="submit">Submit</UiButton>
          <UiButton variant="outline" type="button"> Cancel </UiButton>
        </UiField>
      </UiFieldGroup>
    </form>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Input

::prose-show-case
:docs-field-input

#code
```vue [DocsFieldInput.vue]
<template>
  <div class="mx-auto w-full max-w-md">
    <UiFieldSet>
      <UiFieldGroup>
        <UiField>
          <UiFieldLabel :for="usernameId">Username</UiFieldLabel>
          <UiInput :id="usernameId" type="text" placeholder="james_bond" pattern="[a-z0-9_]+" />
          <UiFieldDescription> Choose a unique username for your account. </UiFieldDescription>
        </UiField>
        <UiField>
          <UiFieldLabel :for="passwordId">Password</UiFieldLabel>
          <UiFieldDescription> Must be at least 8 characters long. </UiFieldDescription>
          <UiInput :id="passwordId" type="password" placeholder="••••••••" />
        </UiField>
      </UiFieldGroup>
    </UiFieldSet>
  </div>
</template>

<script lang="ts" setup>
  const passwordId = useId();
  const usernameId = useId();
</script>
```
::

### Textarea

::prose-show-case
:docs-field-textarea

#code
```vue [DocsFieldTextarea.vue]
<template>
  <div class="mx-auto w-full max-w-md">
    <UiFieldSet>
      <UiFieldGroup>
        <UiField>
          <UiFieldLabel :for="feedbackId">Feedback</UiFieldLabel>
          <UiTextarea :id="feedbackId" placeholder="Your feedback helps us improve..." :rows="4" />
          <UiFieldDescription> Share your thoughts about our service. </UiFieldDescription>
        </UiField>
      </UiFieldGroup>
    </UiFieldSet>
  </div>
</template>

<script lang="ts" setup>
  const feedbackId = useId();
</script>
```
::

### Select

::prose-show-case
:docs-field-select

#code
```vue [DocsFieldSelect.vue]
<template>
  <div class="mx-auto w-full max-w-md">
    <UiField>
      <UiFieldLabel :for="id">Department</UiFieldLabel>
      <UiSelect>
        <UiSelectTrigger :id="id" class="w-full">
          <UiSelectValue placeholder="Choose department" />
        </UiSelectTrigger>
        <UiSelectContent>
          <UiSelectItem value="engineering">Engineering</UiSelectItem>
          <UiSelectItem value="design">Design</UiSelectItem>
          <UiSelectItem value="marketing">Marketing</UiSelectItem>
          <UiSelectItem value="sales">Sales</UiSelectItem>
          <UiSelectItem value="support">Customer Support</UiSelectItem>
          <UiSelectItem value="hr">Human Resources</UiSelectItem>
          <UiSelectItem value="finance">Finance</UiSelectItem>
          <UiSelectItem value="operations">Operations</UiSelectItem>
        </UiSelectContent>
      </UiSelect>
      <UiFieldDescription>Select your department or area of work.</UiFieldDescription>
    </UiField>
  </div>
</template>

<script lang="ts" setup>
  const id = useId();
</script>
```
::

### Slider

::prose-show-case
:docs-field-slider

#code
```vue [DocsFieldSlider.vue]
<template>
  <div class="mx-auto w-full max-w-md">
    <UiField>
      <UiFieldTitle>Price Range</UiFieldTitle>
      <UiFieldDescription>
        Set your budget range ($
        <span class="font-medium tabular-nums">{{ value[0] }}</span> -
        <span class="font-medium tabular-nums">{{ value[1] }}</span
        >).
      </UiFieldDescription>
      <UiSlider
        v-model="value"
        :max="1000"
        :min="0"
        :step="10"
        class="mt-2 w-full"
        aria-label="Price Range"
      />
    </UiField>
  </div>
</template>

<script lang="ts" setup>
  const value = ref<[number, number]>([200, 800]);
</script>
```
::

### FieldSet

::prose-show-case
:docs-field-field-set

#code
```vue [DocsFieldFieldSet.vue]
<template>
  <div class="mx-auto w-full max-w-md space-y-6">
    <UiFieldSet>
      <UiFieldLegend>Address Information</UiFieldLegend>
      <UiFieldDescription> We need your address to deliver your order. </UiFieldDescription>
      <UiFieldGroup>
        <UiField>
          <UiFieldLabel :for="streetId">Street Address</UiFieldLabel>
          <UiInput :id="streetId" placeholder="123 Main St" />
        </UiField>
        <div class="grid grid-cols-2 gap-4">
          <UiField>
            <UiFieldLabel :for="cityId">City</UiFieldLabel>
            <UiInput :id="cityId" placeholder="New York" />
          </UiField>
          <UiField>
            <UiFieldLabel :for="zipId">Postal Code</UiFieldLabel>
            <UiInput :id="zipId" placeholder="90502" />
          </UiField>
        </div>
      </UiFieldGroup>
    </UiFieldSet>
  </div>
</template>

<script lang="ts" setup>
  const streetId = useId();
  const cityId = useId();
  const zipId = useId();
</script>
```
::

### Checkbox

::prose-show-case
:docs-field-checkbox

#code
```vue [DocsFieldCheckbox.vue]
<template>
  <div class="mx-auto w-full max-w-md">
    <UiFieldGroup>
      <UiFieldSet>
        <UiFieldLegend variant="label"> Show these items on the desktop </UiFieldLegend>
        <UiFieldDescription> Select the items you want to show on the desktop. </UiFieldDescription>
        <UiFieldGroup class="gap-3">
          <UiField orientation="horizontal">
            <UiCheckbox id="finder-pref-9k2-hard-disks-ljj" default-value />
            <UiFieldLabel for="finder-pref-9k2-hard-disks-ljj" class="font-normal">
              Hard disks
            </UiFieldLabel>
          </UiField>
          <UiField orientation="horizontal">
            <UiCheckbox id="finder-pref-9k2-external-disks-1yg" />
            <UiFieldLabel for="finder-pref-9k2-external-disks-1yg" class="font-normal">
              External disks
            </UiFieldLabel>
          </UiField>
          <UiField orientation="horizontal">
            <UiCheckbox id="finder-pref-9k2-cds-dvds-fzt" />
            <UiFieldLabel for="finder-pref-9k2-cds-dvds-fzt" class="font-normal">
              CDs, DVDs, and iPods
            </UiFieldLabel>
          </UiField>
          <UiField orientation="horizontal">
            <UiCheckbox id="finder-pref-9k2-connected-servers-6l2" />
            <UiFieldLabel for="finder-pref-9k2-connected-servers-6l2" class="font-normal">
              Connected servers
            </UiFieldLabel>
          </UiField>
        </UiFieldGroup>
      </UiFieldSet>
      <UiFieldSeparator />
      <UiField orientation="horizontal">
        <UiCheckbox id="finder-pref-9k2-sync-folders-nep" default-value />
        <UiFieldContent>
          <UiFieldLabel for="finder-pref-9k2-sync-folders-nep">
            Sync Desktop & Documents folders
          </UiFieldLabel>
          <UiFieldDescription>
            Your Desktop & Documents folders are being synced with iCloud Drive. You can access them
            from other devices.
          </UiFieldDescription>
        </UiFieldContent>
      </UiField>
    </UiFieldGroup>
  </div>
</template>
```
::

### Radio

::prose-show-case
:docs-field-radio

#code
```vue [DocsFieldRadio.vue]
<template>
  <div class="mx-auto w-full max-w-md">
    <UiFieldSet>
      <UiFieldLabel>Subscription Plan</UiFieldLabel>
      <UiFieldDescription>
        Yearly and lifetime plans offer significant savings.
      </UiFieldDescription>
      <UiRadioGroup default-value="monthly">
        <UiField orientation="horizontal">
          <UiRadioGroupItem :id="id1" value="monthly" />
          <UiFieldLabel :for="id1" class="font-normal"> Monthly ($9.99/month) </UiFieldLabel>
        </UiField>
        <UiField orientation="horizontal">
          <UiRadioGroupItem :id="id2" value="yearly" />
          <UiFieldLabel :for="id2" class="font-normal"> Yearly ($99.99/year) </UiFieldLabel>
        </UiField>
        <UiField orientation="horizontal">
          <UiRadioGroupItem :id="id3" value="lifetime" />
          <UiFieldLabel :for="id3" class="font-normal"> Lifetime ($299.99) </UiFieldLabel>
        </UiField>
      </UiRadioGroup>
    </UiFieldSet>
  </div>
</template>

<script lang="ts" setup>
  const id1 = useId();
  const id2 = useId();
  const id3 = useId();
</script>
```
::

### Switch

::prose-show-case
:docs-field-switch

#code
```vue [DocsFieldSwitch.vue]
<template>
  <div class="mx-auto w-full max-w-md">
    <UiField orientation="horizontal">
      <UiFieldContent>
        <UiFieldLabel :for="id1">Multi-factor authentication</UiFieldLabel>
        <UiFieldDescription>
          Enable multi-factor authentication. If you do not have a two-factor device, you can use a
          one-time code sent to your email.
        </UiFieldDescription>
      </UiFieldContent>
      <UiSwitch :id="id1" />
    </UiField>
  </div>
</template>

<script lang="ts" setup>
  const id1 = useId();
</script>
```
::

## Notion Prompt

::prose-show-case
:docs-field-notion-prompt

#code
```vue [DocsFieldNotionPrompt.vue]
<template>
  <div>
    <DefineMentionableIcon v-slot="{ item }">
      <span v-if="item.type == 'page'" class="flex size-4 items-center justify-center">{{
        item.image
      }}</span>
      <UiAvatar v-else class="size-4">
        <UiAvatarImage :src="item.image" />
        <UiAvatarFallback>{{ item.title[0] }}</UiAvatarFallback>
      </UiAvatar>
    </DefineMentionableIcon>

    <form class="[--radius:1.2rem]">
      <UiField>
        <UiFieldLabel for="notion-prompt" class="sr-only"> Prompt </UiFieldLabel>
        <UiInputGroup>
          <UiInputGroupTextarea id="notion-prompt" placeholder="Ask, search, or make anything..." />
          <UiInputGroupAddon align="block-start">
            <UiTooltip>
              <UiPopover v-model:open="mentionPopoverOpen">
                <UiPopoverTrigger as-child>
                  <UiTooltipTrigger as-child>
                    <UiInputGroupButton
                      variant="outline"
                      :size="!hasMentions ? 'sm' : 'icon-sm'"
                      class="rounded-full transition-transform"
                    >
                      <Icon name="lucide:at-sign" />
                      <Motion
                        v-if="!hasMentions"
                        :initial="{ opacity: 0, scale: 0 }"
                        :animate="{ opacity: 1, scale: 1 }"
                        >Add context</Motion
                      >
                    </UiInputGroupButton>
                  </UiTooltipTrigger>
                </UiPopoverTrigger>
                <UiTooltipContent>Mention a person, page, or date</UiTooltipContent>

                <UiPopoverContent class="p-0 [--radius:1.2rem]" align="start">
                  <UiCommand>
                    <UiCommandInput placeholder="Search pages..." />
                    <UiCommandList>
                      <UiCommandEmpty>No pages found</UiCommandEmpty>
                      <UiCommandGroup
                        v-for="[type, items] in Object.entries(grouped)"
                        :key="type"
                        :heading="type === 'page' ? 'Pages' : 'Users'"
                      >
                        <UiCommandItem
                          v-for="item in items"
                          :key="item.title"
                          :value="item.title"
                          @select="
                            (ev) => {
                              mentions.push(item.title);
                              mentionPopoverOpen = false;
                            }
                          "
                        >
                          <MentionableIcon :item="item" />
                          {{ item.title }}
                        </UiCommandItem>
                      </UiCommandGroup>
                    </UiCommandList>
                  </UiCommand>
                </UiPopoverContent>
              </UiPopover>
            </UiTooltip>
            <div v-if="hasMentions" class="no-scrollbar -m-1.5 flex gap-1 overflow-y-auto p-1.5">
              <AnimatePresence>
                <template v-for="mention in mentions" :key="mention">
                  <Motion
                    :initial="{ opacity: 0, scale: 0.8 }"
                    :animate="{ opacity: 1, scale: 1 }"
                    :exit="{ opacity: 0, scale: 0.8 }"
                  >
                    <UiInputGroupButton
                      v-if="SAMPLE_DATA.mentionable.find((item) => item.title === mention)"
                      size="sm"
                      variant="secondary"
                      class="rounded-full pl-2!"
                      @click="mentions = mentions.filter((m) => m !== mention)"
                    >
                      <MentionableIcon
                        :item="SAMPLE_DATA.mentionable.find((item) => item.title === mention)!"
                      />
                      {{ mention }}
                      <Icon name="lucide:x" class="size-4" />
                    </UiInputGroupButton>
                  </Motion>
                </template>
              </AnimatePresence>
            </div>
          </UiInputGroupAddon>
          <UiInputGroupAddon align="block-end" class="gap-1">
            <UiTooltip>
              <UiTooltipTrigger as-child>
                <UiInputGroupButton
                  size="icon-sm"
                  class="rounded-full"
                  aria-label="Attach file"
                  @click="openFileDialog()"
                >
                  <Icon name="lucide:paperclip" />
                </UiInputGroupButton>
              </UiTooltipTrigger>
              <UiTooltipContent>Attach file</UiTooltipContent>
            </UiTooltip>
            <UiTooltip>
              <UiDropdownMenu v-model:open="modelPopoverOpen">
                <UiTooltipTrigger as-child>
                  <UiDropdownMenuTrigger as-child>
                    <UiInputGroupButton size="sm" class="rounded-full">
                      {{ selectedModel?.name }}
                    </UiInputGroupButton>
                  </UiDropdownMenuTrigger>
                </UiTooltipTrigger>
                <UiTooltipContent>Select AI model</UiTooltipContent>
                <UiDropdownMenuContent side="top" align="start" class="[--radius:1rem]">
                  <UiDropdownMenuGroup class="w-42">
                    <UiDropdownMenuLabel class="text-muted-foreground text-xs">
                      Select Agent Mode
                    </UiDropdownMenuLabel>
                    <UiDropdownMenuCheckboxItem
                      v-for="model in SAMPLE_DATA.models"
                      :key="model.name"
                      class="pl-2 *:[span:first-child]:right-2 *:[span:first-child]:left-auto"
                      :model-value="selectedModel?.name == model.name"
                      @update:model-value="
                        (v) => {
                          if (v) {
                            selectedModel = model;
                          }
                        }
                      "
                    >
                      {{ model.name }}
                      <UiBadge
                        v-if="model.badge"
                        variant="secondary"
                        class="h-5 rounded-sm bg-blue-100 px-1 text-xs text-blue-800 dark:bg-blue-900 dark:text-blue-100"
                      >
                        {{ model.badge }}
                      </UiBadge>
                    </UiDropdownMenuCheckboxItem>
                  </UiDropdownMenuGroup>
                </UiDropdownMenuContent>
              </UiDropdownMenu>
            </UiTooltip>
            <UiDropdownMenu v-model:open="scopeMenuOpen">
              <UiDropdownMenuTrigger as-child>
                <UiInputGroupButton size="sm" class="rounded-full">
                  <Icon name="lucide:globe" /> All Sources
                </UiInputGroupButton>
              </UiDropdownMenuTrigger>
              <UiDropdownMenuContent side="top" align="end" class="[--radius:1rem]">
                <UiDropdownMenuGroup>
                  <UiDropdownMenuItem as-child @select="(e) => e.preventDefault()">
                    <label for="web-search">
                      <Icon name="lucide:globe" /> Web Search
                      <UiSwitch id="web-search" class="ml-auto" :default-value="true" />
                    </label>
                  </UiDropdownMenuItem>
                </UiDropdownMenuGroup>
                <UiDropdownMenuSeparator />
                <UiDropdownMenuGroup>
                  <UiDropdownMenuItem as-child @select="(e) => e.preventDefault()">
                    <label for="apps">
                      <Icon name="lucide:grid-2x2-plus" /> Apps and Integrations
                      <UiSwitch id="apps" class="ml-auto" :default-value="true" />
                    </label>
                  </UiDropdownMenuItem>
                  <UiDropdownMenuItem>
                    <Icon name="lucide:circle-fading-plus" /> All Sources I can access
                  </UiDropdownMenuItem>
                  <UiDropdownMenuSub>
                    <UiDropdownMenuSubTrigger>
                      <UiAvatar class="size-4">
                        <UiAvatarImage src="https://github.com/baybreezy.png" />
                        <UiAvatarFallback>BB</UiAvatarFallback>
                      </UiAvatar>
                      BayBreezy
                    </UiDropdownMenuSubTrigger>
                    <UiDropdownMenuSubContent class="w-72 p-0 [--radius:1rem]">
                      <UiCommand>
                        <UiCommandInput placeholder="Find or use knowledge in..." auto-focus />
                        <UiCommandList>
                          <UiCommandEmpty>No knowledge found</UiCommandEmpty>
                          <UiCommandGroup>
                            <UiCommandItem
                              v-for="user in SAMPLE_DATA.mentionable.filter(
                                (item) => item.type === 'user'
                              )"
                              :key="user.title"
                              :value="user.title"
                              @select="
                                (e) => {
                                  console.log('Selected user:', user.title);
                                }
                              "
                            >
                              <UiAvatar class="size-4">
                                <UiAvatarImage :src="user.image" />
                                <UiAvatarFallback> {user.title[0]} </UiAvatarFallback>
                              </UiAvatar>
                              {{ user.title }}
                              <span class="text-muted-foreground"> - {{ user.workspace }} </span>
                            </UiCommandItem>
                          </UiCommandGroup>
                        </UiCommandList>
                      </UiCommand>
                    </UiDropdownMenuSubContent>
                  </UiDropdownMenuSub>
                  <UiDropdownMenuItem>
                    <Icon name="lucide:book-open" /> Help Center
                  </UiDropdownMenuItem>
                </UiDropdownMenuGroup>
                <UiDropdownMenuSeparator />
                <UiDropdownMenuGroup>
                  <UiDropdownMenuItem>
                    <Icon name="lucide:plus" /> Connect Apps
                  </UiDropdownMenuItem>
                  <UiDropdownMenuLabel class="text-muted-foreground text-xs">
                    We'll only search in the sources selected here.
                  </UiDropdownMenuLabel>
                </UiDropdownMenuGroup>
              </UiDropdownMenuContent>
            </UiDropdownMenu>
            <UiInputGroupButton
              aria-label="Send"
              class="ml-auto rounded-full"
              variant="default"
              size="icon-sm"
            >
              <Icon name="lucide:send" />
            </UiInputGroupButton>
          </UiInputGroupAddon>
        </UiInputGroup>
      </UiField>
    </form>
  </div>
</template>

<script lang="ts" setup>
  type MentionableItem = {
    type: "page" | "user";
    title: string;
    image: string;
    workspace?: string;
  };

  type ModelItem = {
    name: string;
    badge?: string;
  };

  const SAMPLE_DATA = {
    mentionable: [
      {
        type: "page",
        title: "Meeting Notes",
        image: "📝",
      },
      {
        type: "page",
        title: "Project Dashboard",
        image: "📊",
      },
      {
        type: "page",
        title: "Ideas & Brainstorming",
        image: "💡",
      },
      {
        type: "page",
        title: "Calendar & Events",
        image: "📅",
      },
      {
        type: "page",
        title: "Documentation",
        image: "📚",
      },
      {
        type: "page",
        title: "Goals & Objectives",
        image: "🎯",
      },
      {
        type: "page",
        title: "Budget Planning",
        image: "💰",
      },
      {
        type: "page",
        title: "Team Directory",
        image: "👥",
      },
      {
        type: "page",
        title: "Technical Specs",
        image: "🔧",
      },
      {
        type: "page",
        title: "Analytics Report",
        image: "📈",
      },
      {
        type: "user",
        title: "baybreezy",
        image: "https://github.com/baybreezy.png",
        workspace: "Workspace",
      },
      {
        type: "user",
        title: "mirari",
        image: "https://github.com/mirari.png",
        workspace: "Workspace",
      },
      {
        type: "user",
        title: "arshx86",
        image: "https://github.com/arshx86.png",
        workspace: "Workspace",
      },
    ] as MentionableItem[],
    models: [
      {
        name: "Auto",
      },
      {
        name: "Agent Mode",
        badge: "Beta",
      },
      {
        name: "Plan Mode",
      },
    ] as ModelItem[],
  };

  const [DefineMentionableIcon, MentionableIcon] = createReusableTemplate<{
    item: MentionableItem;
  }>();

  const mentions = ref<string[]>([]);
  const mentionPopoverOpen = ref(false);
  const modelPopoverOpen = ref(false);
  const selectedModel = ref<ModelItem | undefined>(SAMPLE_DATA.models[0]);
  const scopeMenuOpen = ref(false);

  const grouped = computed(() => {
    return SAMPLE_DATA.mentionable.reduce(
      (acc, item) => {
        const isAvailable = !mentions.value.includes(item.title);

        if (isAvailable) {
          if (!acc[item.type]) {
            acc[item.type] = [];
          }
          acc[item.type]!.push(item);
        }
        return acc;
      },
      {} as Record<string, MentionableItem[]>
    );
  });

  const hasMentions = computed(() => mentions.value.length > 0);

  const { open: openFileDialog } = useFileDialog();
</script>
```
::

### How did you hear about us?

::prose-show-case
:docs-field-hear

#code
```vue [DocsFieldHear.vue]
<template>
  <div class="mx-auto w-full max-w-md">
    <UiCard class="py-4 shadow-none">
      <UiCardContent class="px-4">
        <form>
          <UiFieldGroup>
            <UiFieldSet class="gap-4">
              <UiFieldLegend>How did you hear about us?</UiFieldLegend>
              <UiFieldDescription class="line-clamp-1">
                Select the option that best describes how you heard about us.
              </UiFieldDescription>
              <UiFieldGroup class="flex flex-row flex-wrap gap-2 [--radius:9999rem]">
                <UiFieldLabel
                  v-for="option in options"
                  :key="option.value"
                  :for="option.value"
                  class="w-fit!"
                >
                  <UiField
                    orientation="horizontal"
                    class="gap-1.5 overflow-hidden px-3! py-1.5! transition-all duration-100 ease-linear group-has-data-[state=checked]/field-label:px-2!"
                  >
                    <UiCheckbox
                      :id="option.value"
                      :value="option.value"
                      :default-value="option.value === 'social-media'"
                      class="-ml-6 -translate-x-1 rounded-full transition-all duration-100 ease-linear data-[state=checked]:ml-0 data-[state=checked]:translate-x-0"
                    />
                    <UiFieldTitle>{{ option.label }}</UiFieldTitle>
                  </UiField>
                </UiFieldLabel>
              </UiFieldGroup>
            </UiFieldSet>
          </UiFieldGroup>
        </form>
      </UiCardContent>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  const options = [
    { label: "Social Media", value: "social-media" },
    { label: "Search Engine", value: "search-engine" },
    { label: "Referral", value: "referral" },
    { label: "Other", value: "other" },
  ];
</script>
```
::

### Choice Card

Wrap `Field` components inside `FieldLabel` to create selectable field groups. This works with `RadioItem`, `Checkbox` and `Switch` components.

::prose-show-case
:docs-field-choice-card

#code
```vue [DocsFieldChoiceCard.vue]
<template>
  <div class="mx-auto w-full max-w-md">
    <UiFieldGroup>
      <UiFieldSet>
        <UiFieldLabel for="compute-environment-p8w"> Compute Environment </UiFieldLabel>
        <UiFieldDescription> Select the compute environment for your cluster. </UiFieldDescription>
        <UiRadioGroup default-value="kubernetes">
          <UiFieldLabel for="kubernetes-r2h">
            <UiField orientation="horizontal">
              <UiFieldContent>
                <UiFieldTitle>Kubernetes</UiFieldTitle>
                <UiFieldDescription>
                  Run GPU workloads on a K8s configured cluster.
                </UiFieldDescription>
              </UiFieldContent>
              <UiRadioGroupItem id="kubernetes-r2h" value="kubernetes" />
            </UiField>
          </UiFieldLabel>
          <UiFieldLabel for="vm-z4k">
            <UiField orientation="horizontal">
              <UiFieldContent>
                <UiFieldTitle>Virtual Machine</UiFieldTitle>
                <UiFieldDescription>
                  Access a VM configured cluster to run GPU workloads.
                </UiFieldDescription>
              </UiFieldContent>
              <UiRadioGroupItem id="vm-z4k" value="vm" />
            </UiField>
          </UiFieldLabel>
        </UiRadioGroup>
      </UiFieldSet>
    </UiFieldGroup>
  </div>
</template>
```
::

### Field Group

Stack `Field` components with `FieldGroup`. Add `FieldSeparator` to divide them.

::prose-show-case
:docs-field-field-group

#code
```vue [DocsFieldFieldGroup.vue]
<template>
  <div class="mx-auto w-full max-w-md">
    <UiFieldGroup>
      <UiFieldSet>
        <UiFieldLabel>Responses</UiFieldLabel>
        <UiFieldDescription>
          Get notified when ChatGPT responds to requests that take time, like research or image
          generation.
        </UiFieldDescription>
        <UiFieldGroup data-slot="checkbox-group">
          <UiField orientation="horizontal">
            <UiCheckbox :id="id1" default-value disabled />
            <UiFieldLabel :for="id1" class="font-normal"> Push notifications </UiFieldLabel>
          </UiField>
        </UiFieldGroup>
      </UiFieldSet>
      <UiFieldSeparator />
      <UiFieldSet>
        <UiFieldLabel>Tasks</UiFieldLabel>
        <UiFieldDescription>
          Get notified when tasks you've created have updates.
          <a href="#">Manage tasks</a>
        </UiFieldDescription>
        <UiFieldGroup data-slot="checkbox-group">
          <UiField orientation="horizontal">
            <UiCheckbox :id="id2" />
            <UiFieldLabel :for="id2" class="font-normal"> Push notifications </UiFieldLabel>
          </UiField>
          <UiField orientation="horizontal">
            <UiCheckbox :id="id3" />
            <UiFieldLabel :for="id3" class="font-normal"> Email notifications </UiFieldLabel>
          </UiField>
        </UiFieldGroup>
      </UiFieldSet>
    </UiFieldGroup>
  </div>
</template>

<script lang="ts" setup>
  const id1 = useId();
  const id2 = useId();
  const id3 = useId();
</script>
```
::

### Responsive Layout

- **Vertical fields:** Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.
- **Horizontal fields:** Set `orientation="horizontal"` on `Field` to align the label and control side-by-side. Pair with `FieldContent` to keep descriptions aligned.
- **Responsive fields:** Set `orientation="responsive"` for automatic column layouts inside container-aware parents. Apply `@container/field-group` classes on `FieldGroup` to switch orientations at specific breakpoints.

::prose-show-case
:docs-field-responsive-layout

#code
```vue [DocsFieldResponsiveLayout.vue]
<template>
  <div class="mx-auto w-full max-w-4xl">
    <form>
      <UiFieldSet>
        <UiFieldLegend>Profile</UiFieldLegend>
        <UiFieldDescription>Fill in your profile information.</UiFieldDescription>
        <UiFieldSeparator />
        <UiFieldGroup>
          <UiField orientation="responsive">
            <UiFieldContent>
              <UiFieldLabel :for="id1">Name</UiFieldLabel>
              <UiFieldDescription> Provide your full name for identification </UiFieldDescription>
            </UiFieldContent>
            <UiInput :id="id1" placeholder="Evil Rabbit" required />
          </UiField>
          <UiFieldSeparator />
          <UiField orientation="responsive">
            <UiFieldContent>
              <UiFieldLabel :for="id2">Message</UiFieldLabel>
              <UiFieldDescription>
                You can write your message here. Keep it short, preferably under 100 characters.
              </UiFieldDescription>
            </UiFieldContent>
            <UiTextarea
              :id="id2"
              placeholder="Hello, world!"
              required
              class="min-h-[100px] resize-none sm:min-w-[300px]"
            />
          </UiField>
          <UiFieldSeparator />
          <UiField orientation="responsive">
            <UiButton type="submit">Submit</UiButton>
            <UiButton type="button" variant="outline"> Cancel </UiButton>
          </UiField>
        </UiFieldGroup>
      </UiFieldSet>
    </form>
  </div>
</template>

<script lang="ts" setup>
  const id1 = useId();
  const id2 = useId();
</script>
```
::

## Validation and Errors

- Add `data-invalid` to `Field` to switch the entire block into an error state.
- Add `aria-invalid` on the input itself for assistive technologies.
- Render `FieldError` immediately after the control or inside `FieldContent` to keep error messages aligned with the field.

```vue
<template>
  <UiField data-invalid>
    <UiFieldLabel for="email">Email</UiFieldLabel>
    <UiInput id="email" type="email" aria-invalid />
    <UiFieldError>Enter a valid email address.</UiFieldError>
  </UiField>
</template>
```

## Accessibility

- `FieldSet` and `FieldLegend` keep related controls grouped for keyboard and assistive tech users.
- `Field` outputs `role="group"` so nested controls inherit labeling from `FieldLabel` and `FieldLegend` when combined.
- Apply `FieldSeparator` sparingly to ensure screen readers encounter clear section boundaries.


# Flip Clock

## Source code

Click :source-code-link{component="FlipClock"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Credits

This port is based on the 8 Star Labs UI flip clock — thanks to [8 Star Labs UI](https://ui.8starlabs.com/docs/components/flip-clock){rel="&#x22;nofollow&#x22;"} for the original design.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add flip-clock
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add flip-clock
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add flip-clock
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add flip-clock
```
::

## Usage

### Live clock and countdown

::prose-show-case
:docs-flip-clock-basic

#code
```vue [DocsFlipClockBasic.vue]
<template>
  <div class="flex flex-col gap-10">
    <section class="space-y-3">
      <p class="text-muted-foreground text-sm">Live clock</p>
      <UiFlipClock size="lg" />
    </section>

    <section class="space-y-3">
      <p class="text-muted-foreground text-sm">Countdown (shows days, violet variant)</p>
      <UiFlipClock countdown show-days="always" :target-date="targetDate" variant="violet" />
    </section>
  </div>
</template>

<script lang="ts" setup>
  const targetDate = ref(new Date(Date.now() + 1000 * 60 * 60 * 24 + 1000 * 60 * 45));
</script>
```
::

### Sizes

::prose-show-case
:docs-flip-clock-sizes

#code
```vue [DocsFlipClockSizes.vue]
<template>
  <div class="flex flex-col gap-6">
    <div class="flex flex-wrap items-center gap-6">
      <div class="space-y-2">
        <p class="text-muted-foreground text-sm">Size: sm</p>
        <UiFlipClock size="sm" />
      </div>
      <div class="space-y-2">
        <p class="text-muted-foreground text-sm">Size: md</p>
        <UiFlipClock size="md" />
      </div>
      <div class="space-y-2">
        <p class="text-muted-foreground text-sm">Size: lg</p>
        <UiFlipClock size="lg" />
      </div>
      <div class="space-y-2">
        <p class="text-muted-foreground text-sm">Size: xl</p>
        <UiFlipClock size="xl" />
      </div>
    </div>
  </div>
</template>
```
::

### Variants

::prose-show-case
:docs-flip-clock-variants

#code
```vue [DocsFlipClockVariants.vue]
<template>
  <div class="flex flex-col gap-6">
    <div class="grid gap-4 md:grid-cols-2">
      <div v-for="variant in variants" :key="variant" class="space-y-2">
        <p class="text-muted-foreground text-sm">Variant: {{ variant }}</p>
        <UiFlipClock size="sm" :variant="variant" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const variants = [
    "default",
    "secondary",
    "destructive",
    "outline",
    "muted",
    "red",
    "orange",
    "amber",
    "yellow",
    "lime",
    "green",
    "emerald",
    "teal",
    "cyan",
    "sky",
    "blue",
    "indigo",
    "violet",
    "purple",
    "fuchsia",
    "pink",
    "rose",
  ] as const;
</script>
```
::

### Day display modes

::prose-show-case
:docs-flip-clock-show-days

#code
```vue [DocsFlipClockShowDays.vue]
<template>
  <div class="grid gap-6">
    <div class="space-y-2">
      <p class="text-muted-foreground text-sm">show-days="auto" (only when days > 0)</p>
      <UiFlipClock countdown show-days="auto" :target-date="targetDate" />
    </div>
    <div class="space-y-2">
      <p class="text-muted-foreground text-sm">show-days="always"</p>
      <UiFlipClock countdown show-days="always" :target-date="targetDate" variant="emerald" />
    </div>
    <div class="space-y-2">
      <p class="text-muted-foreground text-sm">show-days="never"</p>
      <UiFlipClock countdown show-days="never" :target-date="targetDate" variant="fuchsia" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import dayjs from "dayjs";

  const targetDate = computed(() => {
    return dayjs().add(2, "day").add(5, "hour").add(30, "minute").toDate();
  });
</script>
```
::

## Props

- `countdown` (boolean, default `false`): when `true`, counts down toward `targetDate`; otherwise shows the current time.
- `targetDate` (Date | string | number): future point in time to count down to. Ignored when `countdown` is `false`.
- `showDays` (`auto` | `always` | `never`, default `auto`): controls when the days column is rendered.
- `size` (`sm` | `md` | `lg` | `xl`): adjusts digit dimensions and spacing.
- `variant`: supports `default`, `secondary`, `destructive`, `outline`, `muted`, plus Tailwind color hues (`red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`).

## Accessibility

- The wrapping element uses `aria-live="polite"` and includes a visually hidden time string for screen readers.
- Digits update individually to avoid excessive announcements while keeping time changes detectable.


# Floating Dock

## Source code

Click :source-code-link{component="FloatingDock.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add floating-dock
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add floating-dock
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add floating-dock
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add floating-dock
```
::

Use `active: true` on any item to show the small running-app dot, similar to the macOS dock.

## Usage

### Basic

::prose-show-case
:docs-floating-dock

#code
```vue [DocsFloatingDock.vue]
<template>
  <div
    class="from-background to-muted/30 relative min-h-[280px] rounded-3xl border bg-linear-to-br"
  >
    <UiFloatingDock
      :items="items"
      desktop-class="absolute bottom-4 left-1/2 -translate-x-1/2"
      mobile-class="absolute right-4 bottom-4"
    />
  </div>
</template>

<script lang="ts" setup>
  const items = [
    { title: "Home", icon: "lucide:house", href: "#", active: true },
    { title: "Search", icon: "lucide:search", href: "#" },
    { title: "Notifications", icon: "lucide:bell", href: "#", active: true },
    { title: "Profile", icon: "lucide:user-round", href: "#", active: true },
    { title: "Settings", icon: "lucide:settings-2", href: "#" },
  ];
</script>
```
::

### Soft colors

::prose-show-case
:docs-floating-dock-soft-colors

#code
```vue [DocsFloatingDockSoftColors.vue]
<template>
  <div
    class="dark:via-background relative min-h-[280px] rounded-[2rem] bg-linear-to-br from-sky-100 via-white to-violet-100 p-4 dark:from-sky-950/40 dark:to-violet-950/40"
  >
    <UiFloatingDock
      :items="items"
      desktop-class="absolute bottom-4 left-1/2 -translate-x-1/2"
      mobile-class="absolute right-4 bottom-4"
    />
  </div>
</template>

<script lang="ts" setup>
  const items = [
    { title: "Inbox", icon: "lucide:inbox", href: "#", active: true },
    { title: "Calendar", icon: "lucide:calendar-days", href: "#", active: true },
    { title: "Files", icon: "lucide:folder-open", href: "#" },
    { title: "Teams", icon: "lucide:users-round", href: "#", active: true },
    { title: "Analytics", icon: "lucide:chart-column", href: "#" },
  ];
</script>
```
::

### Custom item slot

Use the `#item` slot when you want to render something other than the default icon output. This is useful for components like `UiFancyIcon` or any other custom visual treatment.

::prose-show-case
:docs-floating-dock-fancy-icon

#code
```vue [DocsFloatingDockFancyIcon.vue]
<template>
  <div
    class="from-background to-muted/20 relative min-h-[300px] rounded-[2rem] border bg-linear-to-br p-4"
  >
    <UiFloatingDock
      :items="items"
      desktop-class="absolute bottom-4 left-1/2 -translate-x-1/2"
      mobile-class="absolute right-4 bottom-4"
    >
      <template #item="{ item }">
        <UiFancyIcon
          :icon="typeof item.icon === 'string' ? item.icon : undefined"
          color="primary"
          theme="gradient"
          size="md"
        />
      </template>
    </UiFloatingDock>
  </div>
</template>

<script lang="ts" setup>
  const items = [
    { title: "Inbox", icon: "lucide:inbox", href: "#", active: true, color: "primary" },
    { title: "Search", icon: "lucide:search", href: "#", color: "info" },
    { title: "Alerts", icon: "lucide:bell", href: "#", active: true, color: "warning" },
    { title: "Teams", icon: "lucide:users-round", href: "#", color: "success" },
    { title: "Settings", icon: "lucide:settings-2", href: "#", color: "gray" },
  ];
</script>
```
::


# Form

Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex.

Well-designed HTML forms are:

- Well-structured and semantically correct.
- Easy to use and navigate (keyboard).
- Accessible with ARIA attributes and proper labels.
- Has support for client and server side validation.
- Well-styled and consistent with the rest of the application.

In this guide, we will take a look at building forms with :prose-a[vee-validate]{href="https://vee-validate.logaretm.com/v4/" target="\_blank"} and :prose-a[zod]{href="https://zod.dev/" target="\_blank"}. We're going to use a `<FormField>` component to compose accessible forms using Reka UI components.

## Features

The `<Form />` component is a wrapper around the `vee-validate` library. It provides a few things:

- Composable components for building forms.
- A `<FormField />` component for building controlled form fields.
- Form validation using `zod`.
- Applies the correct `aria` attributes to form fields based on states, handle unqiue IDs
- Built to work with all Reka UI components.
- Bring your own schema library. We use `zod` but you can use any other supported schema validation you want, like `yup` or `valibot`.
- You have full control over the markup and styling.

:prose-a[vee-validate]{href="https://vee-validate.logaretm.com/v4/" target="\_blank"} makes use of two flavors to add validation to your forms.

- Composition API
- Higher-order components (HOC)

## Anatomy

```html
<template>
  <form>
    <Field v-slot="{ ... }">
      <FormItem>
        <template #label>
          <FormLabel />
        </template>
        <FormControl>
          <!-- any Form Input component or native input elements -->
        </FormControl>
        <template #description>
          <FormDescription />
        </template>
        <template #message>
          <FormMessage />
        </template>
      </FormItem>
    </Field>
  </form>
</template>
```

The `<Field/>` component is auto-imported by the `@vee-validate/nuxt` module. You can change the name of the impported components in your `nuxt.config .ts` file. You can visit :prose-a[here]{href="https://vee-validate.logaretm.com/v4/integrations/nuxt/" target="\_blank"} for more information.

## Source code

Click :source-code-link{component="Form"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add form
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add form
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add form
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add form
```
::

## Usage

### User profile form

::prose-show-case
:docs-form-user

#code
```vue [DocsFormUser.vue]
<template>
  <UiCard
    class="mx-auto max-w-sm"
    title="Profile"
    description="Update your profile information below"
  >
    <template #content>
      <UiCardContent as="form" class="flex flex-col gap-4" @submit="onSubmit">
        <Field v-slot="{ componentField }" name="fullName">
          <UiFormItem label="Full name" description="This will be displayed to the public">
            <UiInput v-bind="componentField" />
          </UiFormItem>
        </Field>
        <Field v-slot="{ componentField }" name="email">
          <UiFormItem label="Email">
            <UiInput type="email" v-bind="componentField" />
          </UiFormItem>
        </Field>
        <Field v-slot="{ componentField }" name="phone">
          <UiFormItem hint="Optional" label="Phone">
            <UiInput type="tel" v-bind="componentField" />
          </UiFormItem>
        </Field>
        <div>
          <UiButton type="submit">Update profile</UiButton>
        </div>
      </UiCardContent>
    </template>
  </UiCard>
</template>

<script lang="ts" setup>
  import { object, string } from "yup";

  const { handleSubmit } = useForm({
    validationSchema: toTypedSchema(
      object({
        fullName: string().label("Full Name").min(3).required().trim(),
        email: string().label("Email").email().required().trim(),
        phone: string()
          .label("Phone number")
          .transform((value) => (!value ? null : value))
          .length(10)
          .nullable(),
      })
    ),
  });

  const onSubmit = handleSubmit((values) => {
    alert(JSON.stringify(values, null, 2));
  });
</script>
```
::


# Gradient Divider

## Source code

Click :source-code-link{component="GradientDivider.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add gradient-divider
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add gradient-divider
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add gradient-divider
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add gradient-divider
```
::

## Usage

::prose-show-case
:docs-gradient-divider

#code
```vue [DocsGradientDivider.vue]
<template>
  <div class="flex w-full">
    <UiGradientDivider />
  </div>
</template>
```
::

## Vertical

::prose-show-case
:docs-gradient-divider-vertical

#code
```vue [DocsGradientDividerVertical.vue]
<template>
  <div class="flex h-24 items-center justify-center gap-6">
    <span class="text-muted-foreground text-sm">Start</span>
    <UiGradientDivider orientation="vertical" />
    <span class="text-muted-foreground text-sm">End</span>
  </div>
</template>
```
::


# Heading

## Source code

Click :source-code-link{component="Heading.vue"} to see the source code for this component on GitHub.

Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add heading
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add heading
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add heading
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add heading
```
::

## Usage

### Basic example

::prose-show-case
:docs-heading-basic

#code
```vue [DocsHeadingBasic.vue]
<template>
  <div class="grid gap-2">
    <ui-heading>{{ text }}</ui-heading>
    <ui-heading :level="2">{{ text }}</ui-heading>
    <ui-heading :level="3">{{ text }}</ui-heading>
    <ui-heading :level="4">{{ text }}</ui-heading>
    <ui-heading :level="5">{{ text }}</ui-heading>
    <ui-heading :level="6">{{ text }}</ui-heading>
  </div>
</template>

<script lang="ts" setup>
  const text = "The quick brown fox jumps over the lazy dog.";
</script>
```
::


# Hover Card

## Source code

Click :source-code-link{component="HoverCard"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add hover-card
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add hover-card
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add hover-card
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add hover-card
```
::

## Usage

### Basic

::prose-show-case
:docs-hover-card

#code
```vue [DocsHoverCard.vue]
<template>
  <div class="flex items-center justify-center">
    <UiHoverCard>
      <UiHoverCardTrigger as-child>
        <div
          class="bg-background flex h-20 w-20 cursor-pointer items-center justify-center rounded-full border shadow-xs"
        >
          <Icon name="logos:nuxt-icon" class="h-8 w-8" />
        </div>
      </UiHoverCardTrigger>
      <UiHoverCardContent class="h-[460px] w-80 overflow-hidden rounded-lg p-0">
        <div class="group relative flex h-full w-full flex-col justify-end overflow-hidden">
          <img
            src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80"
            class="absolute inset-0 h-full w-full object-cover"
          />
          <div class="absolute inset-0 h-full w-full bg-black opacity-50" />
          <div
            class="relative h-[40%] w-full rounded-t-2xl bg-white p-4 text-slate-800 transition-all group-hover:h-[50%]"
          >
            <p class="text-lg leading-none font-semibold">John Doe</p>
            <small class="text-sm opacity-70"
              >Software Engineer @<a
                target="_blank"
                class="underline underline-offset-2"
                href="https://nuxt.com"
                >nuxtjs</a
              ></small
            >
            <p class="mt-2 text-sm">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima non, aut ab inventore
              quod pariatur iste.
            </p>

            <div class="mt-5 hidden transition-all group-hover:block">
              <UiButton class="dark:bg-primary-foreground dark:text-primary w-full"
                >View profile</UiButton
              >
            </div>
          </div>
        </div>
      </UiHoverCardContent>
    </UiHoverCard>
  </div>
</template>
```
::

### Vue

::prose-show-case
:docs-hover-card-vue

#code
```vue [DocsHoverCardVue.vue]
<template>
  <div class="flex items-center justify-center">
    <UiHoverCard>
      <UiHoverCardTrigger as-child>
        <UiButton variant="link"> @vuejs </UiButton>
      </UiHoverCardTrigger>
      <UiHoverCardContent class="w-80">
        <div class="flex justify-between space-x-4">
          <UiAvatar class="ring-muted ring-1">
            <UiAvatarImage src="https://github.com/vuejs.png" />
            <UiAvatarFallback>VC</UiAvatarFallback>
          </UiAvatar>
          <div class="space-y-1">
            <h4 class="text-sm font-semibold">@vuejs</h4>
            <p class="text-sm">
              Progressive JavaScript framework for building modern web interfaces.
            </p>
            <div class="flex items-center pt-2">
              <Icon name="lucide:calendar-days" class="mr-2 size-4 opacity-70" />
              <span class="text-muted-foreground text-xs"> Joined January 2014 </span>
            </div>
          </div>
        </div>
      </UiHoverCardContent>
    </UiHoverCard>
  </div>
</template>
```
::


# Icon

## Source code

Click :source-code-link{component="Icon.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Anatomy

The Icon component automatically detects the type of icon you want to display and renders it appropriately.

```vue [Icon Anatomy.vue]
<template>
  <!-- Iconify Icon -->
  <UiIcon name="lucide:home" />

  <!-- Emoji -->
  <UiIcon name="🚀" />

  <!-- Image URL -->
  <UiIcon name="https://example.com/icon.png" />
</template>
```

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add icon
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add icon
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add icon
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add icon
```
::

## Usage

### Iconify Icons

The primary use case is displaying icons from Iconify's vast collection of icon sets. Simply use the format `collection:icon-name`.

::prose-show-case
:docs-icon

#code
```vue [DocsIcon.vue]
<template>
  <div class="flex items-center gap-4">
    <UiIcon name="lucide:home" :size="24" />
    <UiIcon name="heroicons:heart" :size="24" />
    <UiIcon name="mdi:github" :size="24" />
    <UiIcon name="tabler:settings" :size="24" />
    <UiIcon name="ri:notification-line" :size="24" />
  </div>
</template>
```
::

### Different Sizes

Control the size of icons using the `size` prop. It accepts both numbers (pixels) and strings.

::prose-show-case
:docs-icon-sizes

#code
```vue [DocsIconSizes.vue]
<template>
  <div class="flex items-center gap-4">
    <UiIcon name="lucide:star" :size="16" />
    <UiIcon name="lucide:star" :size="24" />
    <UiIcon name="lucide:star" :size="32" />
    <UiIcon name="lucide:star" :size="48" />
    <UiIcon name="lucide:star" :size="64" />
  </div>
</template>
```
::

### Emojis

The component automatically detects and renders emojis properly.

::prose-show-case
:docs-icon-emoji

#code
```vue [DocsIconEmoji.vue]
<template>
  <div class="flex items-center gap-4">
    <UiIcon name="🚀" :size="24" />
    <UiIcon name="🎨" :size="24" />
    <UiIcon name="💻" :size="24" />
    <UiIcon name="🔥" :size="24" />
    <UiIcon name="✨" :size="24" />
    <UiIcon name="🎉" :size="24" />
  </div>
</template>
```
::

### Custom Images

You can also use custom image URLs. The component will render them as `<img>` tags.

::prose-show-case
:docs-icon-image

#code
```vue [DocsIconImage.vue]
<template>
  <div class="flex items-center gap-4">
    <UiIcon name="https://i.pravatar.cc/150?img=1" :size="32" />
    <UiIcon name="https://i.pravatar.cc/150?img=5" :size="32" />
    <UiIcon name="https://i.pravatar.cc/150?img=8" :size="32" />
  </div>
</template>
```
::

### With Colors

Style icons using Tailwind classes. The component inherits color from the parent context.

::prose-show-case
:docs-icon-colors

#code
```vue [DocsIconColors.vue]
<template>
  <div class="flex items-center gap-4">
    <UiIcon name="lucide:heart" :size="32" class="text-red-500" />
    <UiIcon name="lucide:star" :size="32" class="text-yellow-500" />
    <UiIcon name="lucide:leaf" :size="32" class="text-green-500" />
    <UiIcon name="lucide:droplet" :size="32" class="text-blue-500" />
    <UiIcon name="lucide:zap" :size="32" class="text-purple-500" />
  </div>
</template>
```
::

### In Buttons

Icons work seamlessly with other components like buttons.

::prose-show-case
:docs-icon-button

#code
```vue [DocsIconButton.vue]
<template>
  <div class="flex items-center gap-3">
    <UiButton>
      <UiIcon name="lucide:download" :size="16" />
      Download
    </UiButton>

    <UiButton variant="outline">
      <UiIcon name="lucide:share-2" :size="16" />
      Share
    </UiButton>

    <UiButton size="icon" variant="ghost">
      <UiIcon name="lucide:heart" :size="20" />
    </UiButton>
  </div>
</template>
```
::

### Popular Icon Sets

Here are some popular icon sets you can use with the component:

::prose-show-case
:docs-icon-sets

#code
```vue [DocsIconSets.vue]
<template>
  <div class="space-y-6">
    <div>
      <h3 class="mb-3 text-sm font-medium">Lucide</h3>
      <div class="flex items-center gap-3">
        <UiIcon name="lucide:home" :size="24" />
        <UiIcon name="lucide:user" :size="24" />
        <UiIcon name="lucide:settings" :size="24" />
        <UiIcon name="lucide:search" :size="24" />
        <UiIcon name="lucide:mail" :size="24" />
      </div>
    </div>

    <div>
      <h3 class="mb-3 text-sm font-medium">Heroicons</h3>
      <div class="flex items-center gap-3">
        <UiIcon name="heroicons:home" :size="24" />
        <UiIcon name="heroicons:user" :size="24" />
        <UiIcon name="heroicons:cog" :size="24" />
        <UiIcon name="heroicons:magnifying-glass" :size="24" />
        <UiIcon name="heroicons:envelope" :size="24" />
      </div>
    </div>

    <div>
      <h3 class="mb-3 text-sm font-medium">Material Design Icons</h3>
      <div class="flex items-center gap-3">
        <UiIcon name="mdi:home" :size="24" />
        <UiIcon name="mdi:account" :size="24" />
        <UiIcon name="mdi:cog" :size="24" />
        <UiIcon name="mdi:magnify" :size="24" />
        <UiIcon name="mdi:email" :size="24" />
      </div>
    </div>
  </div>
</template>
```
::

## Features

- **Automatic Detection**: Intelligently detects whether the input is an Iconify icon, emoji, or image URL
- **Vast Icon Library**: Access to 200,000+ icons from Iconify's collection
- **Flexible Sizing**: Support for both numeric and string size values
- **Emoji Support**: Built-in emoji rendering with proper sizing
- **Image URLs**: Fallback to image rendering for custom icons
- **Type Safe**: Full TypeScript support with proper type definitions
- **Class Support**: Accepts Tailwind and custom classes for styling

## Props

```ts
interface IconProps {
  /**
   * The icon to display. Can be:
   * - Iconify icon name (e.g., "lucide:home")
   * - Emoji (e.g., "🚀")
   * - Image URL (e.g., "https://example.com/icon.png")
   */
  name: string;

  /**
   * Size of the icon in pixels
   * @default 16
   */
  size?: number | string;
}
```

## Finding Icons

To find icons from Iconify's collection:

1. Visit [Iconify Icon Sets](https://icon-sets.iconify.design/){rel="&#x22;nofollow&#x22;"}
2. Search for the icon you want
3. Copy the icon name in the format `collection:icon-name`
4. Use it in your component: `<UiIcon name="lucide:search" />`

## Popular Icon Collections

- **Lucide** (`lucide:`) - Modern, clean icons
- **Heroicons** (`heroicons:`) - Tailwind CSS icons
- **Material Design** (`mdi:`) - Google's Material Design
- **Tabler Icons** (`tabler:`) - Open source icons
- **Remix Icon** (`ri:`) - Neutral-style icons
- **Simple Icons** (`simple-icons:`) - Brand icons
- **Font Awesome** (`fa6-solid:`, `fa6-regular:`) - Popular icon set

## Customization

The Icon component is highly flexible and can be styled using Tailwind classes:

```vue
<!-- Color -->
<UiIcon name="lucide:heart" class="text-red-500" />

<!-- Size with Tailwind -->
<UiIcon name="lucide:star" class="h-8 w-8" />

<!-- Rotation -->
<UiIcon name="lucide:loader" class="animate-spin" />

<!-- Opacity -->
<UiIcon name="lucide:info" class="opacity-50" />
```


# Iframe (Lazy)

## Source code

Click :source-code-link{component="IframeLazy.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add iframe-lazy
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add iframe-lazy
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add iframe-lazy
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add iframe-lazy
```
::

## Usage

### Basic

The simplest way to use the component is by passing a `src` prop. The iframe will load only when it comes into view.

::prose-show-case
:docs-iframe-lazy

#code
```vue [DocsIframeLazy.vue]
<template>
  <div class="space-y-4">
    <p class="text-sm text-muted-foreground">Scroll down to load the iframe</p>
    <div class="h-[600px] w-full rounded-lg border">
      <UiIframeLazy src="https://ui.nuxt.com" class="h-full w-full rounded-lg" />
    </div>
  </div>
</template>
```
::

### Custom Placeholder

You can customize the placeholder shown before the iframe loads using the `#placeholder` slot.

::prose-show-case
:docs-iframe-lazy-custom-placeholder

#code
```vue [DocsIframeLazyCustomPlaceholder.vue]
<template>
  <div class="space-y-4">
    <p class="text-sm text-muted-foreground">Scroll down to see custom placeholder</p>
    <div class="h-[500px] w-full rounded-lg border">
      <UiIframeLazy src="https://originui.com" class="h-full w-full rounded-lg">
        <template #placeholder>
          <div
            class="flex size-full items-center justify-center bg-gradient-to-br from-primary/10 to-primary/5"
          >
            <div class="flex flex-col items-center gap-3">
              <Icon name="lucide:loader-2" class="size-8 animate-spin text-primary" />
              <p class="text-sm font-medium">Loading content...</p>
            </div>
          </div>
        </template>
      </UiIframeLazy>
    </div>
  </div>
</template>
```
::

### Eager Loading

Set `loading="eager"` to load the iframe immediately without waiting for intersection.

::prose-show-case
:docs-iframe-lazy-eager

#code
```vue [DocsIframeLazyEager.vue]
<template>
  <div class="space-y-4">
    <div class="flex items-center gap-2">
      <UiBadge variant="secondary">Eager Loading</UiBadge>
      <p class="text-sm text-muted-foreground">Loads immediately</p>
    </div>
    <div class="h-[400px] w-full rounded-lg border">
      <UiIframeLazy src="https://ui.shadcn.com" loading="eager" class="h-full w-full rounded-lg" />
    </div>
  </div>
</template>
```
::

### No Placeholder

Disable the placeholder by setting `placeholder` to `false`.

::prose-show-case
:docs-iframe-lazy-no-placeholder

#code
```vue [DocsIframeLazyNoPlaceholder.vue]
<template>
  <div class="space-y-4">
    <p class="text-sm text-muted-foreground">No placeholder will be shown</p>
    <div class="h-[450px] w-full rounded-lg border">
      <UiIframeLazy
        src="https://reka-ui.com"
        :placeholder="false"
        class="h-full w-full rounded-lg"
      />
    </div>
  </div>
</template>
```
::

### With Load Event

Listen to the `@load` event to know when the iframe has finished loading.

::prose-show-case
:docs-iframe-lazy-load-event

#code
```vue [DocsIframeLazyLoadEvent.vue]
<template>
  <div class="space-y-4">
    <div class="flex items-center gap-2">
      <UiBadge :variant="loaded ? 'default' : 'secondary'">
        {{ loaded ? "Loaded" : "Loading..." }}
      </UiBadge>
      <p class="text-sm text-muted-foreground">
        {{ loaded ? "Content is ready" : "Waiting for content" }}
      </p>
    </div>
    <div class="h-[400px] w-full rounded-lg border">
      <UiIframeLazy
        src="https://ui.nuxt.com/getting-started"
        class="h-full w-full rounded-lg"
        @load="handleLoad"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  const loaded = ref(false);

  const handleLoad = (event: Event) => {
    loaded.value = true;
    console.log("Iframe loaded:", event);
  };
</script>
```
::

### Custom Root Margin

Adjust when the iframe loads by changing the `rootMargin`. Positive values trigger loading earlier, negative values later.

::prose-show-case
:docs-iframe-lazy-root-margin

#code
```vue [DocsIframeLazyRootMargin.vue]
<template>
  <div class="space-y-4">
    <div class="flex items-center gap-2">
      <UiBadge variant="outline">Root Margin: 500px</UiBadge>
      <p class="text-sm text-muted-foreground">Loads 500px before entering viewport</p>
    </div>
    <div class="h-[400px] w-full rounded-lg border">
      <UiIframeLazy
        src="https://tailwindcss.com"
        root-margin="500px"
        class="h-full w-full rounded-lg"
      >
        <template #placeholder>
          <div class="flex size-full items-center justify-center bg-muted">
            <div class="flex flex-col items-center gap-2">
              <Icon name="lucide:clock" class="size-6 text-muted-foreground" />
              <p class="text-xs text-muted-foreground">Waiting to load...</p>
            </div>
          </div>
        </template>
      </UiIframeLazy>
    </div>
  </div>
</template>
```
::

### Multiple Iframes

Use multiple lazy-loaded iframes on the same page for better performance.

::prose-show-case
:docs-iframe-lazy-multiple

#code
```vue [DocsIframeLazyMultiple.vue]
<template>
  <div class="space-y-6">
    <p class="text-sm text-muted-foreground">
      Each iframe loads independently when scrolled into view
    </p>

    <div v-for="(site, index) in sites" :key="index" class="space-y-2">
      <div class="flex items-center gap-2">
        <UiBadge variant="outline">{{ site.name }}</UiBadge>
      </div>
      <div class="h-[350px] w-full rounded-lg border">
        <UiIframeLazy :src="site.url" class="h-full w-full rounded-lg">
          <template #placeholder>
            <div class="flex size-full items-center justify-center bg-muted/50">
              <div class="flex flex-col items-center gap-2">
                <Icon :name="site.icon" class="size-8 text-muted-foreground" />
                <p class="text-sm text-muted-foreground">Loading {{ site.name }}...</p>
              </div>
            </div>
          </template>
        </UiIframeLazy>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  const sites = [
    {
      name: "Nuxt UI",
      url: "https://ui.nuxt.com",
      icon: "simple-icons:nuxtdotjs",
    },
    {
      name: "Origin UI",
      url: "https://originui.com",
      icon: "lucide:layout-template",
    },
    {
      name: "Reka UI",
      url: "https://reka-ui.com",
      icon: "lucide:layers",
    },
  ];
</script>
```
::

## Props

| Prop            | Type                | Default     | Description                                                                    |
| --------------- | ------------------- | ----------- | ------------------------------------------------------------------------------ |
| `src`           | `string`            | `undefined` | The URL of the page to embed in the iframe                                     |
| `class`         | `string`            | `undefined` | Additional classes to apply to the wrapper element                             |
| `iframeClass`   | `string`            | `undefined` | Additional classes to apply to the iframe element                              |
| `loading`       | `"lazy" | "eager"`  | `"lazy"`    | When to load the iframe - lazy waits for intersection, eager loads immediately |
| `placeholder`   | `boolean`           | `true`      | Whether to show a placeholder before the iframe loads                          |
| `rootMargin`    | `string`            | `"150px"`   | Margin around the root for intersection detection (e.g., "150px", "20%")       |
| `threshold`     | `number | number[]` | `0`         | Threshold for intersection detection (0.0 to 1.0)                              |
| `disableScroll` | `boolean`           | `false`     | Disable scrolling within the iframe                                            |

## Events

| Event  | Payload | Description                              |
| ------ | ------- | ---------------------------------------- |
| `load` | `Event` | Emitted when the iframe finishes loading |

## Slots

| Slot          | Props | Description                                    |
| ------------- | ----- | ---------------------------------------------- |
| `placeholder` | -     | Custom content to show before the iframe loads |

## Features

- **Lazy Loading**: Iframes only load when they enter the viewport, improving page performance
- **Intersection Observer**: Uses modern browser API for efficient viewport detection
- **Custom Placeholders**: Show loading states, skeletons, or custom content while waiting
- **Flexible Configuration**: Control when loading triggers with `rootMargin` and `threshold`
- **Load Events**: React to iframe load completion with the `@load` event
- **Performance**: Reduces initial page load time and bandwidth usage
- **Accessible**: Maintains proper iframe attributes like `allowfullscreen`

## Use Cases

- Embedding third-party content (YouTube, maps, documentation)
- Loading multiple iframes on documentation pages
- Deferring heavy content until needed
- Improving Core Web Vitals scores
- Reducing initial page weight and load time


# Input

## Source code

Click :source-code-link{component="Input.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add input
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add input
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add input
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add input
```
::

## Usage

### Email

::prose-show-case
:docs-input-email

#code
```vue [DocsInputEmail.vue]
<template>
  <div class="mx-auto w-full max-w-xs">
    <UiInput type="email" placeholder="Email" />
  </div>
</template>
```
::

### Disabled

::prose-show-case
:docs-input-disabled

#code
```vue [DocsInputDisabled.vue]
<template>
  <div class="mx-auto w-full max-w-xs">
    <UiInput type="email" placeholder="Email" disabled />
  </div>
</template>
```
::

### Label

::prose-show-case
:docs-input-label

#code
```vue [DocsInputLabel.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <div class="grid w-full max-w-sm gap-2">
      <UiLabel for="picture">Picture</UiLabel>
      <UiInput id="picture" type="file" />
    </div>
  </div>
</template>
```
::

### Form

::prose-show-case
:docs-input-form

#code
```vue [DocsInputForm.vue]
<template>
  <div class="mx-auto flex w-full max-w-lg items-center justify-center">
    <form class="w-full space-y-4" @submit="onSubmit">
      <Field v-slot="{ componentField }" name="username">
        <UiFormItem label="Username" description="Others will be able to see this">
          <UiInput v-bind="componentField" />
        </UiFormItem>
      </Field>
      <div>
        <UiButton type="submit">Update</UiButton>
      </div>
    </form>
  </div>
</template>

<script lang="ts" setup>
  import { object, string } from "yup";

  const { handleSubmit } = useForm({
    validationSchema: toTypedSchema(
      object({
        username: string().label("Username").required().min(3).max(20).trim().lowercase(),
      })
    ),
  });

  const onSubmit = handleSubmit((values) => {
    useSonner("Form submitted successfully!", {
      description: `Your username has been updated to ${values.username}.`,
    });
  });
</script>
```
::

### Max Length

Restrict the number of characters that can be entered into the input field.

::prose-show-case
:docs-input-max-length

#code
```vue [DocsInputMaxLength.vue]
<template>
  <div class="mx-auto max-w-md">
    <div class="flex w-full flex-col gap-3">
      <UiInput :maxlength="5" placeholder="Enter username" />
      <p class="text-muted-foreground text-sm">No more than 5 characters</p>
    </div>
  </div>
</template>
```
::

### Pattern

Restrict the type of characters that can be entered into the input field.

You don't need to use `/` at the beginning and end of the pattern as the RegExp is being created internally with the `new RegExp()` constructor.

::prose-show-case
:docs-input-pattern

#code
```vue [DocsInputPattern.vue]
<template>
  <div class="mx-auto max-w-md">
    <div class="flex w-full flex-col gap-3">
      <UiInput pattern="[^\s]" placeholder="Enter username" />
      <p class="text-muted-foreground text-sm">No spaces can be entered</p>
    </div>
  </div>
</template>
```
::


# Input Group

## Source code

Click :source-code-link{component="InputGroup"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add input-group
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add input-group
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add input-group
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add input-group
```
::

## Usage

### Basic

::prose-show-case
:docs-input-group

#code
```vue [DocsInputGroup.vue]
<template>
  <div class="mx-auto grid w-full max-w-sm gap-6">
    <UiInputGroup>
      <UiInputGroupInput placeholder="Search..." />
      <UiInputGroupAddon>
        <Icon name="lucide:search" />
      </UiInputGroupAddon>
      <UiInputGroupAddon align="inline-end">12 results</UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup>
      <UiInputGroupInput placeholder="example.com" class="!pl-1" />
      <UiInputGroupAddon>
        <UiInputGroupText>https://</UiInputGroupText>
      </UiInputGroupAddon>
      <UiInputGroupAddon align="inline-end">
        <UiTooltip>
          <UiTooltipTrigger as-child>
            <UiInputGroupButton class="rounded-full" size="icon-xs">
              <Icon name="lucide:info" />
            </UiInputGroupButton>
          </UiTooltipTrigger>
          <UiTooltipContent>
            This is content in a tooltip.
            <UiTooltipArrow />
          </UiTooltipContent>
        </UiTooltip>
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup>
      <UiInputGroupTextarea placeholder="Ask, Search or Chat..." />
      <UiInputGroupAddon align="block-end">
        <UiInputGroupButton variant="outline" class="rounded-full" size="icon-xs">
          <Icon name="lucide:plus" />
        </UiInputGroupButton>
        <UiDropdownMenu>
          <UiDropdownMenuTrigger as-child>
            <UiInputGroupButton variant="ghost">Auto</UiInputGroupButton>
          </UiDropdownMenuTrigger>
          <UiDropdownMenuContent side="top" align="start" class="[--radius:0.95rem]">
            <UiDropdownMenuItem>Auto</UiDropdownMenuItem>
            <UiDropdownMenuItem>Agent</UiDropdownMenuItem>
            <UiDropdownMenuItem>Manual</UiDropdownMenuItem>
          </UiDropdownMenuContent>
        </UiDropdownMenu>
        <UiInputGroupText class="ml-auto">52% used</UiInputGroupText>
        <UiSeparator orientation="vertical" class="!h-4" />
        <UiInputGroupButton variant="default" class="rounded-full" size="icon-xs" disabled>
          <Icon name="lucide:arrow-up" />
          <span class="sr-only">Send</span>
        </UiInputGroupButton>
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup>
      <UiInputGroupInput placeholder="@uithing" />
      <UiInputGroupAddon align="inline-end">
        <div
          class="bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full"
        >
          <Icon name="lucide:check" class="size-3" />
        </div>
      </UiInputGroupAddon>
    </UiInputGroup>
  </div>
</template>
```
::

### Icon

::prose-show-case
:docs-input-group-icon

#code
```vue [DocsInputGroupIcon.vue]
<template>
  <div class="mx-auto grid w-full max-w-sm gap-6">
    <UiInputGroup>
      <UiInputGroupInput placeholder="Search..." />
      <UiInputGroupAddon>
        <Icon name="lucide:search" aria-label="Search" />
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup>
      <UiInputGroupInput type="email" placeholder="Enter your email" />
      <UiInputGroupAddon>
        <Icon name="lucide:mail" aria-label="Email" />
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup>
      <UiInputGroupInput placeholder="Card number" />
      <UiInputGroupAddon>
        <Icon name="lucide:credit-card" aria-label="Credit Card" />
      </UiInputGroupAddon>
      <UiInputGroupAddon align="inline-end">
        <Icon name="lucide:check" aria-label="Check" />
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup>
      <UiInputGroupInput placeholder="Card number" />
      <UiInputGroupAddon align="inline-end">
        <Icon name="lucide:star" aria-label="Star" />
        <Icon name="lucide:info" aria-label="Info" />
      </UiInputGroupAddon>
    </UiInputGroup>
  </div>
</template>
```
::

### Text

::prose-show-case
:docs-input-group-text

#code
```vue [DocsInputGroupText.vue]
<template>
  <div class="mx-auto grid w-full max-w-sm gap-6">
    <UiInputGroup>
      <UiInputGroupAddon>
        <UiInputGroupText>$</UiInputGroupText>
      </UiInputGroupAddon>
      <UiInputGroupInput placeholder="0.00" />
      <UiInputGroupAddon align="inline-end">
        <UiInputGroupText>USD</UiInputGroupText>
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup>
      <UiInputGroupAddon>
        <UiInputGroupText>https://</UiInputGroupText>
      </UiInputGroupAddon>
      <UiInputGroupInput placeholder="example.com" class="!pl-0.5" />
      <UiInputGroupAddon align="inline-end">
        <UiInputGroupText>.com</UiInputGroupText>
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup>
      <UiInputGroupInput placeholder="Enter your username" />
      <UiInputGroupAddon align="inline-end">
        <UiInputGroupText>@company.com</UiInputGroupText>
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup>
      <UiInputGroupTextarea placeholder="Enter your message" />
      <UiInputGroupAddon align="block-end">
        <UiInputGroupText class="text-muted-foreground text-xs">
          120 characters left
        </UiInputGroupText>
      </UiInputGroupAddon>
    </UiInputGroup>
  </div>
</template>
```
::

### Button

::prose-show-case
:docs-input-group-button

#code
```vue [DocsInputGroupButton.vue]
<template>
  <div class="mx-auto grid w-full max-w-sm gap-6">
    <UiInputGroup>
      <UiInputGroupInput placeholder="https://behonbaker.com" readonly />
      <UiInputGroupAddon align="inline-end">
        <UiInputGroupButton
          aria-label="Copy"
          :disabled="copied"
          title="Copy"
          size="icon-xs"
          @click="copy('https://behonbaker.com')"
        >
          <Icon :name="copied ? 'lucide:check' : 'lucide:copy'" />
        </UiInputGroupButton>
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup class="[--radius:9999px]">
      <UiPopover>
        <UiPopoverTrigger as-child>
          <UiInputGroupAddon>
            <UiInputGroupButton variant="secondary" size="icon-xs">
              <Icon name="lucide:info" />
            </UiInputGroupButton>
          </UiInputGroupAddon>
        </UiPopoverTrigger>
        <UiPopoverContent align="start" class="flex flex-col gap-1 rounded-xl text-sm">
          <p class="font-medium">Your connection is not secure.</p>
          <p>You should not enter any sensitive information on this site.</p>
        </UiPopoverContent>
      </UiPopover>
      <UiInputGroupAddon class="text-muted-foreground pl-1.5"> https:// </UiInputGroupAddon>
      <UiInputGroupInput id="input-secure-19" />
      <UiInputGroupAddon align="inline-end">
        <UiInputGroupButton size="icon-xs" @click="isFavorite = !isFavorite">
          <Icon
            name="lucide:star"
            :data-favorite="isFavorite"
            class="data-[favorite=true]:text-blue-600"
          />
        </UiInputGroupButton>
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup>
      <UiInputGroupInput placeholder="Type to search..." />
      <UiInputGroupAddon align="inline-end">
        <UiInputGroupButton variant="secondary">Search</UiInputGroupButton>
      </UiInputGroupAddon>
    </UiInputGroup>
  </div>
</template>

<script lang="ts" setup>
  const { copied, copy } = useClipboard({ legacy: true });
  const isFavorite = ref(false);
</script>
```
::

### Tooltip

::prose-show-case
:docs-input-group-tooltip

#code
```vue [DocsInputGroupTooltip.vue]
<template>
  <div class="mx-auto grid w-full max-w-sm gap-4">
    <UiInputGroup>
      <UiInputGroupInput placeholder="Enter password" type="password" />
      <UiInputGroupAddon align="inline-end">
        <UiTooltip>
          <UiTooltipTrigger as-child>
            <UiInputGroupButton variant="ghost" aria-label="Info" size="icon-xs">
              <Icon name="lucide:info" />
            </UiInputGroupButton>
          </UiTooltipTrigger>
          <UiTooltipContent>
            <p>Password must be at least 8 characters</p>
            <UiTooltipArrow />
          </UiTooltipContent>
        </UiTooltip>
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup>
      <UiInputGroupInput placeholder="Your email address" />
      <UiInputGroupAddon align="inline-end">
        <UiTooltip>
          <UiTooltipTrigger as-child>
            <UiInputGroupButton variant="ghost" aria-label="Help" size="icon-xs">
              <Icon name="lucide:circle-help" />
            </UiInputGroupButton>
          </UiTooltipTrigger>
          <UiTooltipContent>
            <p>We'll use this to send you notifications</p>
            <UiTooltipArrow />
          </UiTooltipContent>
        </UiTooltip>
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup>
      <UiInputGroupInput placeholder="Enter API key" />
      <UiTooltip>
        <UiTooltipTrigger as-child>
          <UiInputGroupAddon>
            <UiInputGroupButton variant="ghost" aria-label="Help" size="icon-xs">
              <Icon name="lucide:circle-help" />
            </UiInputGroupButton>
          </UiInputGroupAddon>
        </UiTooltipTrigger>
        <UiTooltipContent side="left">
          <p>Click for help with API keys</p>
          <UiTooltipArrow />
        </UiTooltipContent>
      </UiTooltip>
    </UiInputGroup>
  </div>
</template>
```
::

### Textarea

::prose-show-case
:docs-input-group-textarea

#code
```vue [DocsInputGroupTextarea.vue]
<template>
  <div class="mx-auto grid w-full max-w-md gap-4">
    <UiInputGroup>
      <UiInputGroupTextarea
        id="textarea-code-32"
        placeholder="console.log('Hello, world!');"
        class="min-h-[200px]"
      />
      <UiInputGroupAddon align="block-end" class="border-t">
        <UiInputGroupText>Line 1, Column 1</UiInputGroupText>
        <UiInputGroupButton size="sm" class="ml-auto" variant="default">
          Run <Icon name="lucide:corner-down-left" />
        </UiInputGroupButton>
      </UiInputGroupAddon>
      <UiInputGroupAddon align="block-start" class="border-b">
        <UiInputGroupText class="font-mono font-medium">
          <Icon name="logos:javascript" />
          script.js
        </UiInputGroupText>
        <UiInputGroupButton aria-label="Run" class="ml-auto" size="icon-xs">
          <Icon name="lucide:refresh-ccw" />
        </UiInputGroupButton>
        <UiInputGroupButton aria-label="Copy" variant="ghost" size="icon-xs">
          <Icon name="lucide:copy" />
        </UiInputGroupButton>
      </UiInputGroupAddon>
    </UiInputGroup>
  </div>
</template>
```
::

### Loader

::prose-show-case
:docs-input-group-loader

#code
```vue [DocsInputGroupLoader.vue]
<template>
  <div class="mx-auto grid w-full max-w-sm gap-4">
    <UiInputGroup data-disabled>
      <UiInputGroupInput placeholder="Searching..." disabled />
      <UiInputGroupAddon align="inline-end">
        <UiLoader icon="svg-spinners:wind-toy" />
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup data-disabled>
      <UiInputGroupInput placeholder="Processing..." disabled />
      <UiInputGroupAddon>
        <UiLoader icon="svg-spinners:blocks-wave" />
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup data-disabled>
      <UiInputGroupInput placeholder="Saving changes..." disabled />
      <UiInputGroupAddon align="inline-end">
        <UiInputGroupText>Saving...</UiInputGroupText>
        <UiLoader icon="svg-spinners:3-dots-fade" />
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup data-disabled>
      <UiInputGroupInput placeholder="Refreshing data..." disabled />
      <UiInputGroupAddon>
        <UiLoader />
      </UiInputGroupAddon>
      <UiInputGroupAddon align="inline-end">
        <UiInputGroupText class="text-muted-foreground"> Please wait... </UiInputGroupText>
      </UiInputGroupAddon>
    </UiInputGroup>
  </div>
</template>
```
::

### Label

::prose-show-case
:docs-input-group-label

#code
```vue [DocsInputGroupLabel.vue]
<template>
  <div class="mx-auto grid w-full max-w-sm gap-4">
    <UiInputGroup>
      <UiInputGroupInput id="email" placeholder="baybreezy" />
      <UiInputGroupAddon>
        <UiLabel for="email">@</UiLabel>
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup>
      <UiInputGroupInput id="email-2" placeholder="behon.baker.com" />
      <UiInputGroupAddon align="block-start">
        <UiLabel for="email-2" class="text-foreground"> Email </UiLabel>
        <UiTooltip>
          <UiTooltipTrigger as-child>
            <UiInputGroupButton
              variant="ghost"
              aria-label="Help"
              class="ml-auto rounded-full"
              size="icon-xs"
            >
              <Icon name="lucide:info" />
            </UiInputGroupButton>
          </UiTooltipTrigger>
          <UiTooltipContent>
            <p>We'll use this to send you notifications</p>
          </UiTooltipContent>
        </UiTooltip>
      </UiInputGroupAddon>
    </UiInputGroup>
  </div>
</template>
```
::

### Dropdown

::prose-show-case
:docs-input-group-dropdown

#code
```vue [DocsInputGroupDropdown.vue]
<template>
  <div class="mx-auto grid w-full max-w-sm gap-4">
    <UiInputGroup>
      <UiInputGroupInput placeholder="Enter file name" />
      <UiInputGroupAddon align="inline-end">
        <UiDropdownMenu>
          <UiDropdownMenuTrigger as-child>
            <UiInputGroupButton variant="ghost" aria-label="More" size="icon-xs">
              <Icon name="lucide:ellipsis" />
            </UiInputGroupButton>
          </UiDropdownMenuTrigger>
          <UiDropdownMenuContent align="end">
            <UiDropdownMenuItem>Settings</UiDropdownMenuItem>
            <UiDropdownMenuItem>Copy path</UiDropdownMenuItem>
            <UiDropdownMenuItem>Open location</UiDropdownMenuItem>
          </UiDropdownMenuContent>
        </UiDropdownMenu>
      </UiInputGroupAddon>
    </UiInputGroup>
    <UiInputGroup class="[--radius:1rem]">
      <UiInputGroupInput placeholder="Enter search query" />
      <UiInputGroupAddon align="inline-end">
        <UiDropdownMenu>
          <UiDropdownMenuTrigger as-child>
            <UiInputGroupButton variant="ghost" class="!pr-1.5 text-xs">
              Search In... <Icon name="lucide:chevron-down" class="size-3" />
            </UiInputGroupButton>
          </UiDropdownMenuTrigger>
          <UiDropdownMenuContent align="end" class="[--radius:0.95rem]">
            <UiDropdownMenuItem>Documentation</UiDropdownMenuItem>
            <UiDropdownMenuItem>Blog Posts</UiDropdownMenuItem>
            <UiDropdownMenuItem>Changelog</UiDropdownMenuItem>
          </UiDropdownMenuContent>
        </UiDropdownMenu>
      </UiInputGroupAddon>
    </UiInputGroup>
  </div>
</template>
```
::


# Item

The `Item` component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the `ItemGroup` component to create a list of items.

## Source code

Click :source-code-link{component="Item"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add item
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add item
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add item
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add item
```
::

## Usage

```vue
<template>
  <UiItem>
    <UiItemHeader>Item Header</UiItemHeader>
    <UiItemMedia />
    <UiItemContent>
      <UiItemTitle>Item</UiItemTitle>
      <UiItemDescription>Item</UiItemDescription>
    </UiItemContent>
    <UiItemActions />
    <UiItemFooter>Item Footer</UiItemFooter>
  </UiItem>
</template>
```

## Item vs Field

Use `Field` if you need to display a form input such as a checkbox, input, radio, or select.

If you only need to display content such as a title, description, and actions, use `Item`.

## Examples

### Basic

::prose-show-case
:docs-item

#code
```vue [DocsItem.vue]
<template>
  <div class="mx-auto flex w-full max-w-md flex-col gap-6">
    <UiItem variant="outline">
      <UiItemContent>
        <UiItemTitle>Basic Item</UiItemTitle>
        <UiItemDescription> A simple item with title and description. </UiItemDescription>
      </UiItemContent>
      <UiItemActions>
        <UiButton variant="outline" size="sm"> Action </UiButton>
      </UiItemActions>
    </UiItem>
    <UiItem variant="outline" size="sm" as-child>
      <a href="#">
        <UiItemMedia>
          <Icon name="lucide:badge-check" class="size-5" />
        </UiItemMedia>
        <UiItemContent>
          <UiItemTitle>Your profile has been verified.</UiItemTitle>
        </UiItemContent>
        <UiItemActions>
          <Icon name="lucide:chevron-right" class="size-4" />
        </UiItemActions>
      </a>
    </UiItem>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Variants

::prose-show-case
:docs-item-variants

#code
```vue [DocsItemVariants.vue]
<template>
  <div class="mx-auto flex w-full max-w-xl flex-col gap-6">
    <UiItem v-for="(item, index) in items" :key="index" :variant="item.variant">
      <UiItemContent>
        <UiItemTitle>{{ item.title }}</UiItemTitle>
        <UiItemDescription>
          {{ item.description }}
        </UiItemDescription>
      </UiItemContent>
      <UiItemActions>
        <UiButton variant="outline" size="sm">{{ item.action }}</UiButton>
      </UiItemActions>
    </UiItem>
  </div>
</template>

<script lang="ts" setup>
  const items = [
    {
      title: "Default Variant",
      description: "Standard styling with subtle background and borders.",
      action: "Open",
      variant: "default",
    },
    {
      title: "Outline Variant",
      description: "Outlined style with clear borders and transparent background.",
      action: "Open",
      variant: "outline",
    },
    {
      title: "Muted Variant",
      description: "Subdued appearance with muted colors for secondary content.",
      action: "Open",
      variant: "muted",
    },
  ] as const;
</script>
```
::

### Size

The `Item` component has different sizes for different use cases. For example, you can use the `sm` size for a compact item or the `default` size for a standard item.

::prose-show-case
:docs-item-size

#code
```vue [DocsItemSize.vue]
<template>
  <div class="mx-auto flex w-full max-w-md flex-col gap-6">
    <UiItem variant="outline">
      <UiItemContent>
        <UiItemTitle>Basic Item</UiItemTitle>
        <UiItemDescription> A simple item with title and description. </UiItemDescription>
      </UiItemContent>
      <UiItemActions>
        <UiButton variant="outline" size="sm"> Action </UiButton>
      </UiItemActions>
    </UiItem>
    <UiItem variant="outline" size="sm" as-child>
      <NuxtLink href="#">
        <UiItemMedia>
          <Icon name="lucide:badge-check" class="size-5" />
        </UiItemMedia>
        <UiItemContent>
          <UiItemTitle>Your profile has been verified.</UiItemTitle>
        </UiItemContent>
        <UiItemActions>
          <Icon name="lucide:chevron-right" class="size-4" />
        </UiItemActions>
      </NuxtLink>
    </UiItem>
  </div>
</template>
```
::

### Icon

::prose-show-case
:docs-item-icon

#code
```vue [DocsItemIcon.vue]
<template>
  <div class="mx-auto flex w-full max-w-lg flex-col gap-6">
    <UiItem variant="outline">
      <UiItemMedia variant="icon">
        <Icon name="lucide:shield-alert" />
      </UiItemMedia>
      <UiItemContent>
        <UiItemTitle>Security Alert</UiItemTitle>
        <UiItemDescription> New login detected from unknown device. </UiItemDescription>
      </UiItemContent>
      <UiItemActions>
        <UiButton size="sm" variant="outline"> Review </UiButton>
      </UiItemActions>
    </UiItem>
  </div>
</template>
```
::

### Avatar

::prose-show-case
:docs-item-avatar

#code
```vue [DocsItemAvatar.vue]
<template>
  <div class="mx-auto flex w-full max-w-lg flex-col gap-6">
    <UiItem variant="outline">
      <UiItemMedia>
        <UiAvatar class="size-10">
          <UiAvatarImage class="bg-muted" src="https://github.com/baybreezy.png" alt="@baybreezy" />
          <UiAvatarFallback>BR</UiAvatarFallback>
        </UiAvatar>
      </UiItemMedia>
      <UiItemContent>
        <UiItemTitle>Behon Baker</UiItemTitle>
        <UiItemDescription>Last seen 5 months ago</UiItemDescription>
      </UiItemContent>
      <UiItemActions>
        <UiButton size="icon-sm" variant="outline" class="rounded-full" aria-label="Invite">
          <Icon name="lucide:plus" />
        </UiButton>
      </UiItemActions>
    </UiItem>
    <UiItem variant="outline">
      <UiItemMedia>
        <div
          class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale"
        >
          <UiAvatar class="hidden sm:flex">
            <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
            <UiAvatarFallback>CN</UiAvatarFallback>
          </UiAvatar>
          <UiAvatar class="hidden sm:flex">
            <UiAvatarImage
              class="bg-muted"
              src="https://github.com/baybreezy.png"
              alt="@baybreezy"
            />
            <UiAvatarFallback>BR</UiAvatarFallback>
          </UiAvatar>
          <UiAvatar>
            <UiAvatarImage src="https://github.com/mirari.png" alt="@mirari" />
            <UiAvatarFallback>MI</UiAvatarFallback>
          </UiAvatar>
        </div>
      </UiItemMedia>
      <UiItemContent>
        <UiItemTitle>No Team Members</UiItemTitle>
        <UiItemDescription> Invite your team to collaborate on this project. </UiItemDescription>
      </UiItemContent>
      <UiItemActions>
        <UiButton size="sm" variant="outline"> Invite </UiButton>
      </UiItemActions>
    </UiItem>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Image

::prose-show-case
:docs-item-image

#code
```vue [DocsItemImage.vue]
<template>
  <div class="mx-auto flex w-full max-w-md flex-col gap-6">
    <UiItemGroup class="gap-4">
      <UiItem v-for="(song, i) in music" :key="i" variant="outline" as-child role="listitem">
        <NuxtLink href="#">
          <UiItemMedia variant="image">
            <img
              :src="`https://avatar.vercel.sh/${song.title}`"
              :alt="song.title"
              :width="32"
              :height="32"
              class="object-cover grayscale transition-all group-hover/item:grayscale-0"
            />
          </UiItemMedia>
          <UiItemContent>
            <UiItemTitle class="line-clamp-1">
              {{ song.title }} -
              <span class="text-muted-foreground">{{ song.album }}</span>
            </UiItemTitle>
            <UiItemDescription>{{ song.artist }}</UiItemDescription>
          </UiItemContent>
          <UiItemContent class="flex-none text-center">
            <UiItemDescription>{{ song.duration }}</UiItemDescription>
          </UiItemContent>
        </NuxtLink>
      </UiItem>
    </UiItemGroup>
  </div>
</template>

<script lang="ts" setup>
  const music = [
    {
      title: "Midnight City Lights",
      artist: "Neon Dreams",
      album: "Electric Nights",
      duration: "3:45",
    },
    {
      title: "Coffee Shop Conversations",
      artist: "The Morning Brew",
      album: "Urban Stories",
      duration: "4:05",
    },
    {
      title: "Digital Rain",
      artist: "Cyber Symphony",
      album: "Binary Beats",
      duration: "3:30",
    },
  ];
</script>
```
::

### Group

::prose-show-case
:docs-item-group

#code
```vue [DocsItemGroup.vue]
<template>
  <div class="mx-auto flex w-full max-w-md flex-col gap-6">
    <UiItemGroup>
      <template v-for="(person, index) in people" :key="index">
        <UiItem>
          <UiItemMedia>
            <UiAvatar>
              <UiAvatarImage :src="person.avatar" class="grayscale group-hover/item:grayscale-0" />
              <UiAvatarFallback>{{ person.username.charAt(0) }}</UiAvatarFallback>
            </UiAvatar>
          </UiItemMedia>
          <UiItemContent class="gap-1">
            <UiItemTitle>{{ person.username }}</UiItemTitle>
            <UiItemDescription>{{ person.email }}</UiItemDescription>
          </UiItemContent>
          <UiItemActions>
            <UiButton variant="ghost" size="icon" class="rounded-full">
              <Icon name="lucide:plus" />
            </UiButton>
          </UiItemActions>
        </UiItem>
        <UiItemSeparator v-if="index !== people.length - 1" />
      </template>
    </UiItemGroup>
  </div>
</template>

<script lang="ts" setup>
  const people = [
    {
      username: "baybreezy",
      avatar: "https://github.com/baybreezy.png",
      email: "baybreezy@uithing.com",
    },
    {
      username: "mirari",
      avatar: "https://github.com/mirari.png",
      email: "mirari@uithing.com",
    },
    {
      username: "evilrabbit",
      avatar: "https://github.com/evilrabbit.png",
      email: "evilrabbit@uithing.com",
    },
  ];
</script>
```
::

### Header

::prose-show-case
:docs-item-header

#code
```vue [DocsItemHeader.vue]
<template>
  <div class="mx-auto flex w-full max-w-xl flex-col gap-6">
    <UiItemGroup class="grid grid-cols-3 gap-4">
      <UiItem v-for="(model, i) in models" :key="i" variant="outline">
        <UiItemHeader>
          <img
            :src="model.image"
            :alt="model.name"
            :width="128"
            :height="128"
            class="aspect-square w-full rounded-sm object-cover"
          />
        </UiItemHeader>
        <UiItemContent>
          <UiItemTitle>{{ model.name }}</UiItemTitle>
          <UiItemDescription>{{ model.description }}</UiItemDescription>
        </UiItemContent>
      </UiItem>
    </UiItemGroup>
  </div>
</template>

<script lang="ts" setup>
  const models = [
    {
      name: "v0-1.5-sm",
      description: "Everyday tasks and UI generation.",
      image:
        "https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop",
      credit: "Valeria Reverdo on Unsplash",
    },
    {
      name: "v0-1.5-lg",
      description: "Advanced thinking or reasoning.",
      image:
        "https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop",
      credit: "Michael Oeser on Unsplash",
    },
    {
      name: "v0-2.0-mini",
      description: "Open Source model for everyone.",
      image:
        "https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop",
      credit: "Cherry Laithang on Unsplash",
    },
  ];
</script>
```
::

### Link

To render an item as a link, use the `as-child` prop. The hover and focus states will be applied to the anchor element.

::prose-show-case
:docs-item-link

#code
```vue [DocsItemLink.vue]
<template>
  <div class="mx-auto flex w-full max-w-md flex-col gap-4">
    <UiItem as-child>
      <NuxtLink href="#">
        <UiItemContent>
          <UiItemTitle>Visit our documentation</UiItemTitle>
          <UiItemDescription> Learn how to get started with our components. </UiItemDescription>
        </UiItemContent>
        <UiItemActions>
          <Icon name="lucide:chevron-right" class="size-4" />
        </UiItemActions>
      </NuxtLink>
    </UiItem>
    <UiItem variant="outline" as-child>
      <NuxtLink href="#" target="_blank" rel="noopener noreferrer">
        <UiItemContent>
          <UiItemTitle>External resource</UiItemTitle>
          <UiItemDescription> Opens in a new tab with security attributes. </UiItemDescription>
        </UiItemContent>
        <UiItemActions>
          <Icon name="lucide:external-link" class="size-4" />
        </UiItemActions>
      </NuxtLink>
    </UiItem>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Dropdown

::prose-show-case
:docs-item-dropdown

#code
```vue [DocsItemDropdown.vue]
<template>
  <div class="mx-auto flex min-h-64 w-full max-w-md flex-col items-center gap-6">
    <UiDropdownMenu>
      <UiDropdownMenuTrigger as-child>
        <UiButton variant="outline" size="sm" class="w-fit">
          Select <Icon name="lucide:chevron-down" />
        </UiButton>
      </UiDropdownMenuTrigger>
      <UiDropdownMenuContent class="w-72 [--radius:0.65rem]" align="end">
        <UiDropdownMenuItem v-for="person in people" :key="person.username" class="p-0">
          <UiItem size="sm" class="w-full p-2">
            <UiItemMedia>
              <UiAvatar class="size-8">
                <UiAvatarImage
                  :src="person.avatar"
                  :alt="`${person.username}'s avatar`"
                  class="grayscale"
                />
                <UiAvatarFallback>{{ person.username.charAt(0) }}</UiAvatarFallback>
              </UiAvatar>
            </UiItemMedia>
            <UiItemContent class="gap-0.5">
              <UiItemTitle>{{ person.username }}</UiItemTitle>
              <UiItemDescription>{{ person.email }}</UiItemDescription>
            </UiItemContent>
          </UiItem>
        </UiDropdownMenuItem>
      </UiDropdownMenuContent>
    </UiDropdownMenu>
  </div>
</template>

<script lang="ts" setup>
  const people = [
    {
      username: "baybreezy",
      avatar: "https://github.com/baybreezy.png",
      email: "baybreezy@uithing.com",
    },
    {
      username: "mirari",
      avatar: "https://github.com/mirari.png",
      email: "mirari@uithing.com",
    },
    {
      username: "evilrabbit",
      avatar: "https://github.com/evilrabbit.png",
      email: "evilrabbit@uithing.com",
    },
  ];
</script>
```
::


# Keyboard Key

## Source code

Click :source-code-link{component="Kbd.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add kbd
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add kbd
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add kbd
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add kbd
```
::

## Usage

```vue
<template>
  <UiKbd>Ctrl</UiKbd>
</template>
```

## Examples

### Basic

::prose-show-case
:docs-kbd

#code
```vue [DocsKbd.vue]
<template>
  <div class="mx-auto flex flex-col items-center gap-4">
    <UiKbdGroup>
      <UiKbd>⌘</UiKbd>
      <UiKbd>⇧</UiKbd>
      <UiKbd>⌥</UiKbd>
      <UiKbd>⌃</UiKbd>
    </UiKbdGroup>
    <UiKbdGroup>
      <UiKbd>Ctrl</UiKbd>
      <span>+</span>
      <UiKbd>B</UiKbd>
    </UiKbdGroup>
  </div>
</template>
```
::

### Group

Use the `KbdGroup` component to group keyboard keys together.

::prose-show-case
:docs-kbd-group

#code
```vue [DocsKbdGroup.vue]
<template>
  <div class="mx-auto flex flex-col items-center gap-4">
    <p class="text-muted-foreground text-sm">
      Use
      <UiKbdGroup>
        <UiKbd>Ctrl + B</UiKbd>
        <UiKbd>Ctrl + K</UiKbd>
      </UiKbdGroup>
      to open the command palette
    </p>
  </div>
</template>
```
::

### Button

Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button.

::prose-show-case
:docs-kbd-button

#code
```vue [DocsKbdButton.vue]
<template>
  <div class="mx-auto flex flex-wrap items-center justify-center gap-4">
    <UiButton variant="outline" size="sm" class="pr-2"> Accept <UiKbd>⏎</UiKbd> </UiButton>
    <UiButton variant="outline" size="sm" class="pr-2"> Cancel <UiKbd>Esc</UiKbd> </UiButton>
  </div>
</template>
```
::

### Tooltip

You can use the `Kbd` component inside a `Tooltip` component to display a tooltip with a keyboard key.

::prose-show-case
:docs-kbd-tooltip

#code
```vue [DocsKbdTooltip.vue]
<template>
  <div class="mx-auto flex flex-wrap items-center justify-center gap-4">
    <UiButtonGroup>
      <UiTooltip>
        <UiTooltipTrigger as-child>
          <UiButton size="sm" variant="outline"> Save </UiButton>
        </UiTooltipTrigger>
        <UiTooltipContent>
          <div class="flex items-center gap-2">Save Changes <UiKbd>S</UiKbd></div>
        </UiTooltipContent>
      </UiTooltip>
      <UiTooltip>
        <UiTooltipTrigger as-child>
          <UiButton size="sm" variant="outline"> Print </UiButton>
        </UiTooltipTrigger>
        <UiTooltipContent>
          <div class="flex items-center gap-2">
            Print Document
            <UiKbdGroup>
              <UiKbd>Ctrl</UiKbd>
              <UiKbd>P</UiKbd>
            </UiKbdGroup>
          </div>
        </UiTooltipContent>
      </UiTooltip>
    </UiButtonGroup>
  </div>
</template>
```
::

### Input Group

You can use the `Kbd` component inside a `InputGroupAddon` component to display a keyboard key inside an input group.

::prose-show-case
:docs-kbd-input-group

#code
```vue [DocsKbdInputGroup.vue]
<template>
  <div class="mx-auto flex w-full max-w-xs flex-col gap-6">
    <UiInputGroup>
      <UiInputGroupInput placeholder="Search..." />
      <UiInputGroupAddon>
        <Icon name="lucide:search" />
      </UiInputGroupAddon>
      <UiInputGroupAddon align="inline-end">
        <UiKbd>⌘</UiKbd>
        <UiKbd>K</UiKbd>
      </UiInputGroupAddon>
    </UiInputGroup>
  </div>
</template>
```
::

### Sizes

::prose-show-case
:docs-kbd-sizes

#code
```vue [DocsKbdSizes.vue]
<template>
  <div class="mx-auto flex flex-col items-center gap-4">
    <UiKbdGroup>
      <UiKbd size="xs">Ctrl</UiKbd>
      <span>+</span>
      <UiKbd size="xs">B</UiKbd>
    </UiKbdGroup>
    <UiKbdGroup>
      <UiKbd size="sm">Ctrl</UiKbd>
      <span>+</span>
      <UiKbd size="sm">B</UiKbd>
    </UiKbdGroup>
    <UiKbdGroup>
      <UiKbd size="md">Ctrl</UiKbd>
      <span>+</span>
      <UiKbd size="md">B</UiKbd>
    </UiKbdGroup>
  </div>
</template>
```
::

### Variants

::prose-show-case
:docs-kbd-variants

#code
```vue [DocsKbdVariants.vue]
<template>
  <div class="mx-auto flex flex-col items-center gap-4">
    <UiKbdGroup>
      <UiKbd variant="outline">Ctrl</UiKbd>
      <span>+</span>
      <UiKbd variant="outline">B</UiKbd>
    </UiKbdGroup>
    <UiKbdGroup>
      <UiKbd>Ctrl</UiKbd>
      <span>+</span>
      <UiKbd>B</UiKbd>
    </UiKbdGroup>
  </div>
</template>
```
::


# Label

## Source code

Click :source-code-link{component="Label.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add label
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add label
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add label
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add label
```
::

## Usage

### Input

::prose-show-case
:docs-input-label

#code
```vue [DocsInputLabel.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <div class="grid w-full max-w-sm gap-2">
      <UiLabel for="picture">Picture</UiLabel>
      <UiInput id="picture" type="file" />
    </div>
  </div>
</template>
```
::


# List

## Source code

Click :source-code-link{component="List"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add list
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add list
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add list
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add list
```
::

## Usage

### Basic

::prose-show-case
:docs-list-basic

#code
```vue [DocsListBasic.vue]
<template>
  <div class="flex items-center justify-center">
    <UiList class="max-w-sm">
      <template v-for="n in 5" :key="n">
        <UiListItem class="items-start px-0">
          <UiAvatar :src="`https://avatar.vercel.sh/${n}`" />
          <UiListContent>
            <UiListTitle :title="`List item #${n}`" />
            <UiListSubtitle
              class="line-clamp-2"
              subtitle=" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ex praesentium
                libero commodi obcaecati eligendi hic, ducimus quos saepe harum voluptatem eos qui
                delectus molestias vero enim, magni id quas?"
            />
          </UiListContent>
          <UiButton
            size="icon-sm"
            variant="ghost"
            class="ml-auto shrink-0 self-center rounded-full"
          >
            <Icon name="lucide:chevron-right" />
          </UiButton>
        </UiListItem>
        <UiSeparator class="my-2.5 ml-auto w-[85%] last:hidden" />
      </template>
    </UiList>
  </div>
</template>
```
::

### Mini cart

::prose-show-case
:docs-list-products

#code
```vue [DocsListProducts.vue]
<template>
  <div class="flex items-center justify-center">
    <UiList class="max-w-sm">
      <template v-for="n in cartItems" :key="n.product">
        <UiListItem class="items-start px-0">
          <UiAvatar :src="`https://avatar.vercel.sh/${n.product}`" />
          <UiListContent>
            <UiListTitle :title="n.product" />
            <UiListSubtitle>
              <p>Qty: {{ n.quantity }}</p>
            </UiListSubtitle>
          </UiListContent>
          <p class="ml-auto text-sm font-semibold">
            {{
              new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(n.price)
            }}
          </p>
        </UiListItem>
        <UiSeparator class="my-2 ml-auto w-[85%] last:hidden" />
      </template>
    </UiList>
  </div>
</template>
<script lang="ts" setup>
  const cartItems = [
    { product: "Pencil", price: 2.0, quantity: 3 },
    { product: "Eraser", price: 1.0, quantity: 2 },
    { product: "Notebook", price: 5.0, quantity: 5 },
    { product: "Pen", price: 3.0, quantity: 6 },
    { product: "Ruler", price: 2.0, quantity: 1 },
  ];
</script>
```
::

### Navigation list

::prose-show-case
:docs-list-nav

#code
```vue [DocsListNav.vue]
<template>
  <div class="flex items-center justify-center">
    <UiList class="bg-background max-w-[250px] rounded-lg border">
      <template v-for="n in navList" :key="n.title">
        <UiListItem :to="n.link" class="">
          <Icon :name="n.icon" class="text-muted-foreground h-5 w-5" />
          <UiListContent>
            <UiListTitle :title="n.title" class="text-sm font-medium" />
          </UiListContent>
          <span class="text-muted-foreground/70 ml-auto shrink-0 self-center rounded-full">
            <Icon name="lucide:chevron-right" />
          </span>
        </UiListItem>
      </template>
    </UiList>
  </div>
</template>

<script lang="ts" setup>
  const navList = [
    { title: "Avatar", icon: "lucide:circle", link: "/components/avatar" },
    { title: "Card", icon: "lucide:square", link: "/components/card" },
    { title: "Checkbox", icon: "lucide:check-square", link: "/components/checkbox" },
    { title: "Dialog", icon: "lucide:square-asterisk", link: "/components/dialog" },
    { title: "Select", icon: "lucide:text-cursor-input", link: "/components/select" },
    { title: "Switch", icon: "lucide:toggle-left", link: "/components/switch" },
    { title: "Tooltip", icon: "lucide:message-circle", link: "/components/tooltip" },
  ];
</script>
```
::


# Listbox

## Source code

Click :source-code-link{component="Listbox"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add listbox
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add listbox
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add listbox
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add listbox
```
::

## Usage

### Basic

::prose-show-case
:docs-listbox-basic

#code
```vue [DocsListboxBasic.vue]
<template>
  <div>
    <UiListbox v-model="selected">
      <UiListboxFilter v-model="searchTerm" placeholder="Search..." />
      <UiListboxContent class="max-h-full px-0">
        <UiScrollArea class="h-[300px]">
          <UiListboxGroup class="px-3">
            <template v-if="filteredPeople.length === 0">
              <div class="flex items-center justify-center py-5 text-sm font-medium">
                <span>No results found</span>
              </div>
            </template>
            <template v-else>
              <UiListboxGroupLabel>People</UiListboxGroupLabel>
              <template v-for="p in filteredPeople" :key="p">
                <UiListboxItem :value="p">
                  <span>{{ p }}</span>
                </UiListboxItem>
              </template>
            </template>
          </UiListboxGroup>
        </UiScrollArea>
      </UiListboxContent>
    </UiListbox>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import { useFilter } from "reka-ui";

  const genPeople = async () => {
    return Array.from({ length: 20 }, () => faker.person.fullName());
  };

  const { data: people } = await useAsyncData("listOfPeopleBasic", async () => genPeople(), {
    default: () => [],
  });

  const selected = ref(people.value?.[3]);
  const searchTerm = ref("");

  const { contains } = useFilter({ sensitivity: "base" });
  const filteredPeople = computed(() => people.value.filter((p) => contains(p, searchTerm.value)));
</script>
```
::

### Objects

::prose-show-case
:docs-listbox-objects

#code
```vue [DocsListboxObjects.vue]
<template>
  <div>
    <UiListbox v-model="selected">
      <UiListboxFilter v-model="search" placeholder="Search..." />
      <UiListboxContent>
        <UiListboxGroup>
          <template v-if="filteredPeople?.length > 0">
            <UiListboxGroupLabel>People</UiListboxGroupLabel>
            <template v-for="p in filteredPeople" :key="p.id">
              <UiListboxItem :value="p">
                <div class="flex items-center gap-5">
                  <UiAvatar class="size-8" :src="p.avatar" />
                  <div class="text-sm">
                    <p class="font-medium">{{ p.name }}</p>
                    <p class="text-muted-foreground text-xs">{{ p.email }}</p>
                  </div>
                </div>
              </UiListboxItem>
            </template>
          </template>
          <template v-else>
            <div class="flex items-center justify-center py-5 text-sm font-medium">
              <p>No results found</p>
            </div>
          </template>
        </UiListboxGroup>
      </UiListboxContent>
    </UiListbox>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import { useFilter } from "reka-ui";

  const genPeople = async () => {
    return Array.from({ length: 10 }, () => ({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
      email: faker.internet.email(),
      avatar: faker.image.avatar(),
    }));
  };

  const { data: people } = await useAsyncData("listOfPeopleObjects", async () => genPeople(), {
    default: () => [],
  });

  const search = ref("");
  const selected = ref(people.value?.[3]);
  const { contains } = useFilter({ sensitivity: "base" });

  const filteredPeople = computed(() =>
    people.value.filter((p) => contains(p.name, search.value) || contains(p.email, search.value))
  );
</script>
```
::

### Multiple - Strings

::prose-show-case
:docs-listbox-string-multiple

#code
```vue [DocsListboxStringMultiple.vue]
<template>
  <div>
    <UiListbox v-model="selected" multiple>
      <UiListboxFilter v-model="search" placeholder="Search..." />
      <UiListboxContent>
        <UiListboxGroup>
          <template v-if="filteredPeople?.length > 0">
            <UiListboxGroupLabel>People</UiListboxGroupLabel>
            <template v-for="p in filteredPeople" :key="p.id">
              <UiListboxItem :value="p">
                <span>{{ p }}</span>
              </UiListboxItem>
            </template>
          </template>
          <template v-else>
            <div class="flex items-center justify-center py-5 text-sm font-medium">
              <p>No results found</p>
            </div>
          </template>
        </UiListboxGroup>
      </UiListboxContent>
    </UiListbox>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const genPeople = async () => {
    return Array.from({ length: 30 }, () => faker.person.fullName());
  };

  const { data: people } = await useAsyncData("multipleString", async () => genPeople(), {
    default: () => [],
  });

  const search = ref("");
  const selected = ref([people.value?.[3]]);

  const filteredPeople = ref<string[]>([]);
  watchDebounced(
    search,
    (v) => {
      if (!v) {
        filteredPeople.value = useCloned(people).cloned.value;
      }
      filteredPeople.value = people.value.filter((p) => p.toLowerCase().includes(v.toLowerCase()));
    },
    { debounce: 300, maxWait: 2000, immediate: true }
  );
</script>
```
::

### Multiple - Objects

::prose-show-case
:docs-listbox-objects-multiple

#code
```vue [DocsListboxObjectsMultiple.vue]
<template>
  <div>
    <UiListbox v-model="selected" multiple>
      <UiListboxFilter v-model="search" placeholder="Search..." />
      <UiListboxContent>
        <UiListboxGroup>
          <template v-if="filteredPeople?.length > 0">
            <UiListboxGroupLabel>People</UiListboxGroupLabel>
            <template v-for="p in filteredPeople" :key="p.id">
              <UiListboxItem :value="p">
                <div class="flex items-center gap-5">
                  <UiAvatar class="size-8" :src="p.avatar" />
                  <div class="text-sm">
                    <p class="font-medium">{{ p.name }}</p>
                    <p class="text-muted-foreground text-xs">{{ p.email }}</p>
                  </div>
                </div>
              </UiListboxItem>
            </template>
          </template>
          <template v-else>
            <div class="flex items-center justify-center py-5 text-sm font-medium">
              <p>No results found</p>
            </div>
          </template>
        </UiListboxGroup>
      </UiListboxContent>
    </UiListbox>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const genPeople = async () => {
    return Array.from({ length: 30 }, () => ({
      id: faker.string.uuid(),
      name: faker.person.fullName(),
      email: faker.internet.email(),
      avatar: faker.image.avatar(),
    }));
  };

  const { data: people } = await useAsyncData("multipleObjectList", async () => genPeople(), {
    default: () => [],
  });

  const search = ref("");
  const selected = ref([people.value?.[3]]);

  const filteredPeople = computed(() => {
    return people.value?.filter((p) => p.name.toLowerCase().includes(search.value.toLowerCase()));
  });
</script>
```
::

### Virtualizer - Strings

::prose-show-case
:docs-listbox-string-virtualizer

#code
```vue [DocsListboxStringVirtualizer.vue]
<template>
  <div>
    <UiListbox>
      <UiListboxContent>
        <UiListboxVirtualizer v-slot="{ option }" :estimate-size="36" :options="people">
          <UiListboxItem :value="option">
            <span>{{ option }}</span>
          </UiListboxItem>
        </UiListboxVirtualizer>
      </UiListboxContent>
    </UiListbox>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const genPeople = async () => {
    return Array.from({ length: 2000 }, () => faker.person.fullName());
  };

  const { data: people } = await useAsyncData("virtualListOfStrings", async () => genPeople(), {
    default: () => [],
  });
</script>
```
::

### Origin UI

::prose-show-case
:docs-listbox-origin

#code
```vue [DocsListboxOrigin.vue]
<template>
  <div class="mx-auto grid max-w-xs grid-cols-1 gap-10">
    <div class="flex flex-col gap-2">
      <UiLabel>Listbox with single option</UiLabel>
      <UiListbox highlight-on-hover default-value="react" selection-behavior="replace">
        <UiListboxContent class="bg-background p-1">
          <UiListboxItem
            v-for="(item, index) in frameworks"
            :key="index"
            :value="item.id"
            :disabled="item.disabled"
          >
            {{ item.name }}
          </UiListboxItem>
        </UiListboxContent>
      </UiListbox>
    </div>
    <div class="flex flex-col gap-2">
      <UiLabel>Listbox with multiple option</UiLabel>
      <UiListbox multiple highlight-on-hover :default-value="['react', 'vue']">
        <UiListboxContent class="bg-background p-1">
          <UiListboxItem v-for="(item, index) in frameworks" :key="index" :value="item.id">
            {{ item.name }}
          </UiListboxItem>
        </UiListboxContent>
      </UiListbox>
    </div>
    <div class="flex flex-col gap-2">
      <UiLabel>Listbox with option groups</UiLabel>
      <UiListbox multiple highlight-on-hover :default-value="['react', 'vue']">
        <UiListboxContent class="bg-background p-1">
          <template v-for="(group, index) in groups" :key="index">
            <UiListboxGroup>
              <UiListboxGroupLabel class="text-muted-foreground px-2 py-1.5 text-xs font-medium">{{
                group.title
              }}</UiListboxGroupLabel>
              <UiListboxItem v-for="(item, k) in group.items" :key="k" :value="item.id">
                {{ item.name }}
              </UiListboxItem>
            </UiListboxGroup>
            <UiSeparator v-if="groups.length - 1 != index" class="my-2" />
          </template>
        </UiListboxContent>
      </UiListbox>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const frameworks = [
    { id: "react", name: "React" },
    { id: "vue", name: "Vue" },
    { id: "angular", name: "Angular", disabled: true },
    { id: "svelte", name: "Svelte" },
  ];

  const groups = [
    {
      title: "Veggies",
      items: [
        { id: "carrot", name: "Carrot" },
        { id: "broccoli", name: "Broccoli" },
        { id: "spinach", name: "Spinach" },
      ],
    },
    {
      title: "Proteins",
      items: [
        { id: "chicken", name: "Chicken" },
        { id: "tofu", name: "Tofu" },
        { id: "beans", name: "Beans" },
      ],
    },
    {
      title: "Condiments",
      items: [
        { id: "mayonaise", name: "Mayonaise" },
        { id: "mustard", name: "Mustard" },
      ],
    },
  ];
</script>
```
::

### Transfer

::prose-show-case
:docs-listbox-transfer

#code
```vue [DocsListboxTransfer.vue]
<template>
  <div class="flex h-[310px] w-full gap-5">
    <UiListbox v-model="selectedList1" class="w-full" multiple highlight-on-hover>
      <UiListboxContent class="h-full max-h-full">
        <UiListboxGroup>
          <UiListboxGroupLabel>List 1</UiListboxGroupLabel>
          <UiGradientDivider class="mt-1 mb-2" />
          <template v-for="(item, i) in list1" :key="i">
            <UiListboxItem :value="item">{{ item }}</UiListboxItem>
          </template>
        </UiListboxGroup>
      </UiListboxContent>
    </UiListbox>
    <div class="flex shrink-0 items-center gap-2">
      <UiButton
        :disabled="!selectedList2.length"
        size="icon"
        variant="outline"
        @click="transferAction('2to1')"
      >
        <Icon name="lucide:chevron-left" class="size-4" />
      </UiButton>
      <UiButton
        :disabled="!selectedList1.length"
        size="icon"
        variant="outline"
        @click="transferAction('1to2')"
      >
        <Icon name="lucide:chevron-right" class="size-4" />
      </UiButton>
    </div>

    <UiListbox v-model="selectedList2" class="w-full" multiple highlight-on-hover>
      <UiListboxContent class="h-full max-h-full">
        <UiListboxGroup>
          <UiListboxGroupLabel>List 2</UiListboxGroupLabel>
          <UiGradientDivider class="mt-1 mb-2" />
          <template v-for="(item, i) in list2" :key="i">
            <UiListboxItem :value="item">{{ item }}</UiListboxItem>
          </template>
        </UiListboxGroup>
      </UiListboxContent>
    </UiListbox>
  </div>
</template>

<script lang="ts" setup>
  const states = [
    "California",
    "Illinois",
    "Maryland",
    "Texas",
    "Florida",
    "Colorado",
    "Connecticut ",
  ];

  const list1 = ref([...states]);
  const list2 = ref<string[]>([]);

  const selectedList1 = ref<string[]>([]);
  const selectedList2 = ref<string[]>([]);

  function transferAction(action: "1to2" | "2to1") {
    const [fromList, toList, selectedList] =
      action === "1to2" ? [list1, list2, selectedList1] : [list2, list1, selectedList2];

    fromList.value = fromList.value.filter((item) => !selectedList.value.includes(item));
    toList.value.push(...selectedList.value);
    selectedList.value = [];
  }
</script>
```
::


# Loader

## Source code

Click :source-code-link{component="Loader.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add loader
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add loader
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add loader
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add loader
```
::

## Usage

### Basic

::prose-show-case
:docs-loader-basic

#code
```vue [DocsLoaderBasic.vue]
<template>
  <div>
    <UiLoader />
  </div>
</template>
```
::

### Variants

So you can use any of the loaders located on the [Iconify Website](https://icones.js.org/collection/svg-spinners){rel="&#x22;nofollow&#x22;"}. Simply copy the name of the loader and paste it into the `icon` prop.

::prose-show-case
:docs-loader-variants

#code
```vue [DocsLoaderVariants.vue]
<template>
  <div class="flex justify-center gap-3">
    <UiLoader v-for="variant in variants" :key="variant" :icon="variant" />
  </div>
</template>

<script lang="ts" setup>
  const variants = [
    "svg-spinners:dot-revolve",
    "svg-spinners:gooey-balls-2",
    "svg-spinners:bars-scale-fade",
    "svg-spinners:270-ring-with-bg",
  ];
</script>
```
::

### Sizes

You can adjust the size of the loader by passing a CSS class to the `class` prop.

::prose-show-case
:docs-loader-sizes

#code
```vue [DocsLoaderSizes.vue]
<template>
  <div class="flex justify-center gap-3">
    <UiLoader class="size-5" />
    <UiLoader class="size-8" />
    <UiLoader class="size-10" />
    <UiLoader class="size-12" />
  </div>
</template>
```
::

### Colors

You can adjust the color of the loader by passing a CSS class to the `class` prop.

::prose-show-case
:docs-loader-colors

#code
```vue [DocsLoaderColors.vue]
<template>
  <div class="flex justify-center gap-3">
    <UiLoader v-for="color in colors" :key="color" :class="[color, 'size-6']" />
  </div>
</template>

<script lang="ts" setup>
  const colors = [
    "text-primary",
    "text-destructive",
    "text-emerald-500",
    "text-rose-500",
    "text-sky-500",
    "text-violet-500",
    "text-amber-500",
  ];
</script>
```
::

### Full Page Loader

The loader can operate as a full page loader by passing the `full-page` prop.

When the `full-page` prop is passed, the loader will take up the entire screen.

It can be closed manually or by pressing the `esc` key.

::prose-show-case
:docs-loader-backdrop

#code
```vue [DocsLoaderBackdrop.vue]
<template>
  <div class="flex flex-col items-center gap-5">
    <UiLoader v-model="showLockedLoader" lock-scroll full-page class="size-14">
      <div class="flex flex-col items-center justify-center gap-3">
        <p>Loading... Press <UiKbd variant="outline">esc</UiKbd> to close</p>
        <UiButton size="sm" variant="outline" @click="showLockedLoader = false">
          Close Loader
        </UiButton>
      </div>
    </UiLoader>
    <UiButton variant="outline" @click="showLockedLoader = !showLockedLoader">
      Display Loader
    </UiButton>
  </div>
</template>

<script lang="ts" setup>
  const showLockedLoader = ref(false);
</script>
```
::


# Marker

## Source code

Click :source-code-link{component="Marker"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add marker
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add marker
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add marker
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add marker
```
::

## Usage

::prose-show-case
:docs-marker-demo

#code
```vue [DocsMarkerDemo.vue]
<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <UiMarker>
      <UiMarkerIcon>
        <Icon name="lucide:git-branch" />
      </UiMarkerIcon>
      <UiMarkerContent>Switched to a new branch</UiMarkerContent>
    </UiMarker>
    <UiMarker role="status">
      <UiMarkerIcon>
        <Icon name="lucide:loader-circle" class="animate-spin" data-slot="spinner" />
      </UiMarkerIcon>
      <UiMarkerContent class="shimmer"> Thinking... </UiMarkerContent>
    </UiMarker>
    <UiMarker variant="separator">
      <UiMarkerContent>Conversation compacted</UiMarkerContent>
    </UiMarker>
    <UiMarker>
      <UiMarkerIcon>
        <Icon name="lucide:search" />
      </UiMarkerIcon>
      <UiMarkerContent>Explored 4 files</UiMarkerContent>
    </UiMarker>
  </div>
</template>

<script lang="ts" setup></script>
```
::

## Anatomy

```vue [Marker Anatomy.vue] lines
<template>
  <UiMarker>
    <UiMarkerIcon />
    <UiMarkerContent />
  </UiMarker>
</template>
```

## Features

- Inline marker, bordered row, and labeled separator variants
- Decorative icon slot that is hidden from assistive tech
- Polymorphic root via `as` or `as-child` for link and button markers
- Pairs with the [`shimmer`](https://uithing.com/utilities/shimmer) utility for streaming status text
- Every part renders through `Primitive`, so `as` / `as-child` and Vue `class` overrides work on any part

## Examples

### Variants

Use `variant` to switch between an inline marker, bordered row, and labeled separator.

::prose-show-case
:docs-marker-variants-demo

#code
```vue [DocsMarkerVariantsDemo.vue]
<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <UiMarker>
      <UiMarkerContent>A default marker for inline notes.</UiMarkerContent>
    </UiMarker>
    <UiMarker variant="separator">
      <UiMarkerContent>A separator marker</UiMarkerContent>
    </UiMarker>
    <UiMarker variant="border">
      <UiMarkerContent>A border marker for row boundaries.</UiMarkerContent>
    </UiMarker>
  </div>
</template>

<script lang="ts" setup></script>
```
::

| Variant     | Description                                          |
| ----------- | ---------------------------------------------------- |
| `default`   | An inline marker for status, notes, and actions.     |
| `border`    | A default marker with a bottom border under the row. |
| `separator` | A centered label with divider lines on each side.    |

### Status

Set `role="status"` and include a loading icon for streaming or in-progress markers so updates are announced.

::prose-show-case
:docs-marker-status-demo

#code
```vue [DocsMarkerStatusDemo.vue]
<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <UiMarker role="status">
      <UiMarkerIcon>
        <Icon name="lucide:loader-circle" class="animate-spin" data-slot="spinner" />
      </UiMarkerIcon>
      <UiMarkerContent>Compacting conversation</UiMarkerContent>
    </UiMarker>
    <UiMarker variant="separator" role="status">
      <UiMarkerIcon>
        <Icon name="lucide:loader-circle" class="animate-spin" data-slot="spinner" />
      </UiMarkerIcon>
      <UiMarkerContent>Running tests</UiMarkerContent>
    </UiMarker>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Shimmer

Add the [`shimmer`](https://uithing.com/utilities/shimmer) utility class to `UiMarkerContent` for an animated streaming-text effect.

::prose-show-case
:docs-marker-shimmer-demo

#code
```vue [DocsMarkerShimmerDemo.vue]
<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <UiMarker role="status">
      <UiMarkerContent class="shimmer"> Thinking... </UiMarkerContent>
    </UiMarker>
    <UiMarker variant="separator" role="status">
      <UiMarkerContent class="shimmer"> Reading 4 files </UiMarkerContent>
    </UiMarker>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Separator

Use the `separator` variant for labeled dividers, such as dates or section breaks, in a conversation.

::prose-show-case
:docs-marker-separator-demo

#code
```vue [DocsMarkerSeparatorDemo.vue]
<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <UiMarker variant="separator">
      <UiMarkerContent>Today</UiMarkerContent>
    </UiMarker>
    <UiMarker variant="separator">
      <UiMarkerContent>Worked for 42s</UiMarkerContent>
    </UiMarker>
    <UiMarker variant="separator">
      <UiMarkerContent>Conversation compacted</UiMarkerContent>
    </UiMarker>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Border

Use the `border` variant for status rows that should keep the default marker alignment while separating the next row.

::prose-show-case
:docs-marker-border-demo

#code
```vue [DocsMarkerBorderDemo.vue]
<template>
  <div class="flex w-full max-w-sm flex-col gap-3 py-12">
    <UiMarker variant="border">
      <UiMarkerIcon>
        <Icon name="lucide:git-branch" />
      </UiMarkerIcon>
      <UiMarkerContent>Switched to release-candidate</UiMarkerContent>
    </UiMarker>
    <UiMarker variant="border">
      <UiMarkerIcon>
        <Icon name="lucide:search" />
      </UiMarkerIcon>
      <UiMarkerContent>Reviewed 8 related files</UiMarkerContent>
    </UiMarker>
    <UiMarker variant="border">
      <UiMarkerIcon>
        <Icon name="lucide:file-text" />
      </UiMarkerIcon>
      <UiMarkerContent>Opened implementation notes</UiMarkerContent>
    </UiMarker>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### With Icon

Use `UiMarkerIcon` to render an icon alongside the content. Use `flex-col` to stack the icon above the content.

::prose-show-case
:docs-marker-icon-demo

#code
```vue [DocsMarkerIconDemo.vue]
<template>
  <div class="flex w-full max-w-sm flex-col gap-12 py-12">
    <UiMarker>
      <UiMarkerIcon>
        <Icon name="lucide:git-branch" />
      </UiMarkerIcon>
      <UiMarkerContent>Switched to a new branch</UiMarkerContent>
    </UiMarker>
    <UiMarker variant="separator">
      <UiMarkerIcon>
        <Icon name="lucide:search" />
      </UiMarkerIcon>
      <UiMarkerContent>Explored 4 files</UiMarkerContent>
    </UiMarker>
    <UiMarker class="flex-col">
      <UiMarkerIcon>
        <Icon name="lucide:book-open-check" />
      </UiMarkerIcon>
      <UiMarkerContent>Syncing completed</UiMarkerContent>
    </UiMarker>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Links and Buttons

Turn a marker into a link or button with the `as-child` prop on `UiMarker`.

::prose-show-case
:docs-marker-link-button-demo

#code
```vue [DocsMarkerLinkButtonDemo.vue]
<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <UiMarker as-child>
      <a href="#links-and-buttons">
        <UiMarkerIcon>
          <Icon name="lucide:git-branch" />
        </UiMarkerIcon>
        <UiMarkerContent>View the pull request</UiMarkerContent>
      </a>
    </UiMarker>
    <UiMarker as-child>
      <button
        type="button"
        class="hover:text-foreground transition-colors"
        @click="() => useSonner('You clicked the revert button')"
      >
        <UiMarkerIcon>
          <Icon name="lucide:rotate-ccw" />
        </UiMarkerIcon>
        <UiMarkerContent>Revert this change</UiMarkerContent>
      </button>
    </UiMarker>
  </div>
</template>

<script lang="ts" setup></script>
```
::

## Accessibility

`Marker` is presentational by default. The correct semantics depend on how you use it, so choose the role based on intent rather than relying on a single default.

### Status and Progress

For streaming or progress markers such as "Thinking..." or a running tool, set `role="status"` so assistive tech announces the update as it appears. `UiMarker` forwards `role` to the underlying element.

```vue
<template>
  <UiMarker role="status">
    <UiMarkerIcon>
      <Icon name="lucide:loader-circle" class="animate-spin" />
    </UiMarkerIcon>
    <UiMarkerContent>Compacting conversation</UiMarkerContent>
  </UiMarker>
</template>
```

### Labeled Separators

A separator that carries text, such as a date or a section label, needs no role. The divider lines are decorative CSS pseudo-elements, and the text is announced as ordinary content.

```vue
<template>
  <UiMarker variant="separator">
    <UiMarkerContent>Today</UiMarkerContent>
  </UiMarker>
</template>
```

::callout
**Note:** Do not add `role="separator"` to a labeled divider. A separator takes its accessible name from `aria-label`, not from its text, and its contents are treated as presentational, so the visible label would not be announced. Reserve `role="separator"` for a divider with no meaningful text.
::

### Bordered Markers

A bordered marker keeps the same semantics as the default marker. The bottom border is decorative, so choose `role="status"`, `as-child`, or no role based on the marker's purpose.

```vue
<template>
  <UiMarker variant="border">
    <UiMarkerIcon>
      <Icon name="lucide:file-text" />
    </UiMarkerIcon>
    <UiMarkerContent>Opened implementation notes</UiMarkerContent>
  </UiMarker>
</template>
```

### Decorative Icons

`UiMarkerIcon` is decorative and hidden from assistive tech with `aria-hidden`, so the adjacent `UiMarkerContent` carries the meaning. For an icon-only marker, provide an `aria-label` or visible text so it is not announced as empty.

```vue
<template>
  <UiMarker aria-label="Synced">
    <UiMarkerIcon>
      <Icon name="lucide:check" />
    </UiMarkerIcon>
  </UiMarker>
</template>
```

### Interactive Markers

When a marker links or triggers an action, render it as a real `<button>` or `<a>` with the `as-child` prop so it is focusable and exposes the correct role. The accessible name comes from the marker text.

```vue
<template>
  <UiMarker as-child>
    <a href="/files">
      <UiMarkerIcon>
        <Icon name="lucide:file-text" />
      </UiMarkerIcon>
      <UiMarkerContent>Explored 4 files</UiMarkerContent>
    </a>
  </UiMarker>
</template>
```

## API Reference

All Marker parts render through `Primitive`. Use `as` to choose another element, or `as-child` to merge the component's attributes and styles onto the single element or component in its default slot.

### Marker

The root marker element.

| Prop       | Type                                 | Default     | Description                                                  |
| ---------- | ------------------------------------ | ----------- | ------------------------------------------------------------ |
| `variant`  | `"default" | "border" | "separator"` | `"default"` | The marker layout.                                           |
| `as`       | `PrimitiveProps["as"]`               | `"div"`     | Element or component to render.                              |
| `as-child` | `boolean`                            | `false`     | Render the default slot as the root and merge props onto it. |
| `class`    | `HTMLAttributes["class"]`            | -           | Additional classes to apply to the root element.             |

### MarkerIcon

A decorative icon slot. Hidden from assistive tech with `aria-hidden`.

| Prop       | Type                      | Default  | Description                                                  |
| ---------- | ------------------------- | -------- | ------------------------------------------------------------ |
| `as`       | `PrimitiveProps["as"]`    | `"span"` | Element or component to render.                              |
| `as-child` | `boolean`                 | `false`  | Render the default slot as the root and merge props onto it. |
| `class`    | `HTMLAttributes["class"]` | -        | Additional classes to apply to the icon slot.                |

### MarkerContent

The marker text content.

| Prop       | Type                      | Default  | Description                                                  |
| ---------- | ------------------------- | -------- | ------------------------------------------------------------ |
| `as`       | `PrimitiveProps["as"]`    | `"span"` | Element or component to render.                              |
| `as-child` | `boolean`                 | `false`  | Render the default slot as the root and merge props onto it. |
| `class`    | `HTMLAttributes["class"]` | -        | Additional classes to apply to the content slot.             |


# Menubar

## Source code

Click :source-code-link{component="Menubar"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add menubar
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add menubar
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add menubar
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add menubar
```
::

## Usage

### Full example

::prose-show-case
:docs-menubar

#code
```vue [DocsMenubar.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiMenubar>
      <template v-for="(item, i) in menu" :key="i">
        <UiMenubarMenu :value="item.value">
          <UiMenubarTrigger class="cursor-pointer">
            {{ item.trigger }}
          </UiMenubarTrigger>

          <UiMenubarContent>
            <template v-for="(child, k) in item.items" :key="`child-${k}`">
              <UiMenubarSeparator v-if="child.divider" />
              <UiMenubarCheckboxItem
                v-else-if="child.type === 'check'"
                v-model="child.model!.value"
                :title="child.title"
                :shortcut="child.shortcut"
                @select="(e) => e.preventDefault()"
              />
              <UiMenubarRadioGroup v-else-if="child.type === 'radio'" v-model="child.model!.value">
                <template v-for="(o, m) in child.options" :key="m">
                  <UiMenubarRadioItem
                    :title="o.title"
                    :shortcut="o.shortcut"
                    :value="o.value"
                    @select="(e) => e.preventDefault()"
                  />
                </template>
              </UiMenubarRadioGroup>
              <UiMenubarItem
                v-else-if="!child.divider && !child.items"
                :title="child.title"
                :inset="child.inset"
                :shortcut="child.shortcut"
                :disabled="child.disabled"
              />
              <UiMenubarSub v-else-if="child.items">
                <UiMenubarSubTrigger :title="child.title" />
                <UiMenubarSubContent class="w-44">
                  <template v-for="(kid, j) in child.items" :key="`kid-${j}`">
                    <UiMenubarSeparator v-if="kid.divider" />
                    <UiMenubarItem v-else :inset="kid.inset" :title="kid.title" :icon="kid.icon" />
                  </template>
                </UiMenubarSubContent>
              </UiMenubarSub>
            </template>
          </UiMenubarContent>
        </UiMenubarMenu>
      </template>
    </UiMenubar>
  </div>
</template>

<script lang="ts" setup>
  const showBookmarks = ref(false);
  const showURLs = ref(false);
  const person = ref();
  type Menu = {
    trigger?: string;
    value?: string;
    items?: Array<{
      title?: string;
      shortcut?: string;
      disabled?: boolean;
      inset?: boolean;
      type?: "check" | "radio";
      model?: { value: any };
      options?: Array<{ title: string; value: any; shortcut?: string }>;
      icon?: string;
      items?: Menu["items"];
      divider?: boolean;
    }>;
  };
  const menu: Menu[] = [
    {
      trigger: "File",
      value: "file",
      items: [
        { title: "New Tab", shortcut: "⌘T" },
        { title: "New Window", shortcut: "⌘NW" },
        { title: "New Incognito Window", disabled: true },
        { divider: true },
        {
          title: "Share",
          items: [
            { title: "WhatsApp", icon: "logos:whatsapp-icon" },
            { title: "Facebook", icon: "logos:facebook" },
            { title: "Twitter", icon: "logos:twitter" },
          ],
        },
        { divider: true },
        { title: "Print", shortcut: "⌘P" },
      ],
    },
    {
      trigger: "Edit",
      value: "edit",
      items: [
        { title: "Undo", shortcut: "⌘Z" },
        { title: "Redo", shortcut: "⇧⌘Z" },
        { divider: true },
        {
          title: "Find",
          items: [
            { title: "Search the web" },
            { divider: true },
            { title: "Find..." },
            { title: "Find Next" },
            { title: "Find Previous" },
          ],
        },
        { divider: true },
        { title: "Cut" },
        { title: "Copy" },
        { title: "Paste" },
      ],
    },
    {
      trigger: "View",
      value: "view",
      items: [
        { title: "Always show bookmarks bar", model: showBookmarks, type: "check" },
        { title: "Always show full URLs", model: showURLs, type: "check" },
        { divider: true },
        { title: "Reload", shortcut: "⌘R", inset: true },
        { title: "Force reload", shortcut: "⇧⌘R", disabled: true, inset: true },
        { divider: true },
        { title: "Toggle fullscreen", inset: true },
        { title: "Hide sidebar", inset: true },
      ],
    },
    {
      trigger: "Profile",
      value: "profile",
      items: [
        {
          model: person,
          type: "radio",
          options: [
            { title: "Andy", value: "andy" },
            { title: "Bob", value: "bob" },
            { title: "Charlie", value: "charlie" },
          ],
        },
        { divider: true },
        { title: "Edit", shortcut: "⌘E", inset: true },
        { title: "Add profile", shortcut: "⇧⌘P", inset: true },
      ],
    },
  ];
</script>
```
::

### Simple

A minimal menubar with keyboard shortcuts and disabled items — great as a starting point.

::prose-show-case
:docs-menubar-simple

#code
```vue [DocsMenubarSimple.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiMenubar>
      <UiMenubarMenu value="file">
        <UiMenubarTrigger class="cursor-pointer">File</UiMenubarTrigger>
        <UiMenubarContent>
          <UiMenubarItem title="New File" shortcut="⌘N" />
          <UiMenubarItem title="Open..." shortcut="⌘O" />
          <UiMenubarItem title="Save" shortcut="⌘S" />
          <UiMenubarItem title="Save As..." shortcut="⇧⌘S" />
          <UiMenubarSeparator />
          <UiMenubarItem title="Close Window" shortcut="⌘W" />
        </UiMenubarContent>
      </UiMenubarMenu>

      <UiMenubarMenu value="edit">
        <UiMenubarTrigger class="cursor-pointer">Edit</UiMenubarTrigger>
        <UiMenubarContent>
          <UiMenubarItem title="Undo" shortcut="⌘Z" />
          <UiMenubarItem title="Redo" shortcut="⇧⌘Z" />
          <UiMenubarSeparator />
          <UiMenubarItem title="Cut" shortcut="⌘X" />
          <UiMenubarItem title="Copy" shortcut="⌘C" />
          <UiMenubarItem title="Paste" shortcut="⌘V" />
          <UiMenubarSeparator />
          <UiMenubarItem title="Select All" shortcut="⌘A" />
        </UiMenubarContent>
      </UiMenubarMenu>

      <UiMenubarMenu value="format">
        <UiMenubarTrigger class="cursor-pointer">Format</UiMenubarTrigger>
        <UiMenubarContent>
          <UiMenubarItem title="Bold" shortcut="⌘B" />
          <UiMenubarItem title="Italic" shortcut="⌘I" />
          <UiMenubarItem title="Underline" shortcut="⌘U" />
          <UiMenubarSeparator />
          <UiMenubarItem title="Strikethrough" disabled />
          <UiMenubarItem title="Superscript" disabled />
        </UiMenubarContent>
      </UiMenubarMenu>
    </UiMenubar>
  </div>
</template>
```
::

### With labels

Use `UiMenubarLabel` to visually group items within a menu into named sections.

::prose-show-case
:docs-menubar-with-labels

#code
```vue [DocsMenubarWithLabels.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiMenubar>
      <UiMenubarMenu value="insert">
        <UiMenubarTrigger class="cursor-pointer">Insert</UiMenubarTrigger>
        <UiMenubarContent class="w-52">
          <UiMenubarLabel>Media</UiMenubarLabel>
          <UiMenubarItem title="Image..." icon="lucide:image" />
          <UiMenubarItem title="Video..." icon="lucide:video" />
          <UiMenubarItem title="Audio..." icon="lucide:music" />
          <UiMenubarSeparator />
          <UiMenubarLabel>Content</UiMenubarLabel>
          <UiMenubarItem title="Table" icon="lucide:table" />
          <UiMenubarItem title="Code Block" icon="lucide:code" />
          <UiMenubarItem title="Blockquote" icon="lucide:quote" />
          <UiMenubarSeparator />
          <UiMenubarLabel>Other</UiMenubarLabel>
          <UiMenubarItem title="Horizontal Rule" icon="lucide:minus" />
          <UiMenubarItem title="Page Break" icon="lucide:file-plus" />
        </UiMenubarContent>
      </UiMenubarMenu>

      <UiMenubarMenu value="view">
        <UiMenubarTrigger class="cursor-pointer">View</UiMenubarTrigger>
        <UiMenubarContent class="w-48">
          <UiMenubarLabel>Layout</UiMenubarLabel>
          <UiMenubarItem title="Sidebar" shortcut="⌘B" icon="lucide:panel-left" />
          <UiMenubarItem title="Activity Bar" icon="lucide:layout-dashboard" />
          <UiMenubarSeparator />
          <UiMenubarLabel>Appearance</UiMenubarLabel>
          <UiMenubarItem title="Zoom In" shortcut="⌘+" icon="lucide:zoom-in" />
          <UiMenubarItem title="Zoom Out" shortcut="⌘-" icon="lucide:zoom-out" />
          <UiMenubarItem title="Reset Zoom" shortcut="⌘0" icon="lucide:maximize" />
        </UiMenubarContent>
      </UiMenubarMenu>

      <UiMenubarMenu value="tools">
        <UiMenubarTrigger class="cursor-pointer">Tools</UiMenubarTrigger>
        <UiMenubarContent class="w-52">
          <UiMenubarLabel>Analysis</UiMenubarLabel>
          <UiMenubarItem title="Word Count" icon="lucide:hash" />
          <UiMenubarItem title="Spell Check" shortcut="⌘;" icon="lucide:spell-check" />
          <UiMenubarSeparator />
          <UiMenubarLabel>Automation</UiMenubarLabel>
          <UiMenubarItem title="Macros" icon="lucide:play-circle" />
          <UiMenubarItem title="Extensions" icon="lucide:puzzle" />
        </UiMenubarContent>
      </UiMenubarMenu>
    </UiMenubar>
  </div>
</template>
```
::

### Destructive items

Use `variant="destructive"` on `UiMenubarItem` to highlight dangerous or irreversible actions.

::prose-show-case
:docs-menubar-destructive

#code
```vue [DocsMenubarDestructive.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiMenubar>
      <UiMenubarMenu value="project">
        <UiMenubarTrigger class="cursor-pointer">Project</UiMenubarTrigger>
        <UiMenubarContent class="w-52">
          <UiMenubarItem title="Settings..." icon="lucide:settings" shortcut="⌘," />
          <UiMenubarItem title="Rename..." icon="lucide:pencil" />
          <UiMenubarItem title="Duplicate" icon="lucide:copy" />
          <UiMenubarSeparator />
          <UiMenubarItem title="Archive Project" icon="lucide:archive" />
          <UiMenubarItem
            title="Delete Project"
            icon="lucide:trash-2"
            variant="destructive"
            shortcut="⌘⌫"
          />
        </UiMenubarContent>
      </UiMenubarMenu>

      <UiMenubarMenu value="team">
        <UiMenubarTrigger class="cursor-pointer">Team</UiMenubarTrigger>
        <UiMenubarContent class="w-52">
          <UiMenubarItem title="Invite Members..." icon="lucide:user-plus" />
          <UiMenubarItem title="Manage Roles" icon="lucide:shield" />
          <UiMenubarSeparator />
          <UiMenubarItem title="Leave Team" icon="lucide:log-out" variant="destructive" />
          <UiMenubarItem
            title="Disband Team"
            icon="lucide:users-x"
            variant="destructive"
            disabled
          />
        </UiMenubarContent>
      </UiMenubarMenu>

      <UiMenubarMenu value="account">
        <UiMenubarTrigger class="cursor-pointer">Account</UiMenubarTrigger>
        <UiMenubarContent class="w-52">
          <UiMenubarItem title="Profile" icon="lucide:user" />
          <UiMenubarItem title="Billing" icon="lucide:credit-card" />
          <UiMenubarSeparator />
          <UiMenubarItem title="Sign Out" icon="lucide:log-out" shortcut="⇧⌘Q" />
          <UiMenubarItem
            title="Delete Account"
            icon="lucide:user-x"
            variant="destructive"
            shortcut="⌫"
          />
        </UiMenubarContent>
      </UiMenubarMenu>
    </UiMenubar>
  </div>
</template>
```
::

### Translucent

Pass `translucent` to `UiMenubarContent` for a frosted-glass panel effect.

::prose-show-case
:docs-menubar-translucent

#code
```vue [DocsMenubarTranslucent.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiMenubar>
      <UiMenubarMenu value="file">
        <UiMenubarTrigger class="cursor-pointer">File</UiMenubarTrigger>
        <UiMenubarContent translucent>
          <UiMenubarItem title="New Tab" shortcut="⌘T" />
          <UiMenubarItem title="New Window" shortcut="⌘N" />
          <UiMenubarSeparator />
          <UiMenubarItem title="Open Location..." shortcut="⌘L" />
          <UiMenubarItem title="Close Tab" shortcut="⌘W" />
          <UiMenubarSeparator />
          <UiMenubarItem title="Print..." shortcut="⌘P" />
        </UiMenubarContent>
      </UiMenubarMenu>

      <UiMenubarMenu value="window">
        <UiMenubarTrigger class="cursor-pointer">Window</UiMenubarTrigger>
        <UiMenubarContent translucent>
          <UiMenubarItem title="Minimize" shortcut="⌘M" />
          <UiMenubarItem title="Zoom" />
          <UiMenubarSeparator />
          <UiMenubarItem title="Move to Left Side" />
          <UiMenubarItem title="Move to Right Side" />
          <UiMenubarSeparator />
          <UiMenubarItem title="Bring All to Front" />
        </UiMenubarContent>
      </UiMenubarMenu>

      <UiMenubarMenu value="help">
        <UiMenubarTrigger class="cursor-pointer">Help</UiMenubarTrigger>
        <UiMenubarContent translucent class="w-56">
          <UiMenubarItem title="Documentation" icon="lucide:book-open" />
          <UiMenubarItem title="Keyboard Shortcuts" icon="lucide:keyboard" shortcut="⌘/" />
          <UiMenubarSeparator />
          <UiMenubarItem title="Report an Issue" icon="lucide:bug" />
          <UiMenubarItem title="About" icon="lucide:info" />
        </UiMenubarContent>
      </UiMenubarMenu>
    </UiMenubar>
  </div>
</template>
```
::


# Message

## Source code

Click :source-code-link{component="Message"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add message
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add message
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add message
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add message
```
::

## Usage

The `Message` component lays out a single message in a conversation. It handles the avatar, alignment, header, and footer around the message surface.

For AI apps, you can render reasoning steps, tool calls and assistant messages using the `Message` component.

::prose-show-case
:docs-message-demo

#code
```vue [DocsMessageDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-6 py-12">
    <UiMessage align="end">
      <UiMessageAvatar>
        <UiAvatar>
          <UiAvatarImage src="https://github.com/baybreezy.png" alt="@me" />
          <UiAvatarFallback>ME</UiAvatarFallback>
        </UiAvatar>
      </UiMessageAvatar>
      <UiMessageContent>
        <UiBubble>
          <UiBubbleContent>Deploying to prod real quick.</UiBubbleContent>
        </UiBubble>
      </UiMessageContent>
    </UiMessage>
    <UiMessage>
      <UiMessageAvatar>
        <UiAvatar>
          <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@rabbit" />
          <UiAvatarFallback>R</UiAvatarFallback>
        </UiAvatar>
      </UiMessageAvatar>
      <UiMessageContent>
        <UiBubble variant="muted">
          <UiBubbleContent>It&apos;s 4:55 PM. On a Friday.</UiBubbleContent>
        </UiBubble>
      </UiMessageContent>
    </UiMessage>
    <UiMessage align="end">
      <UiMessageAvatar>
        <UiAvatar>
          <UiAvatarImage src="https://github.com/baybreezy.png" alt="@me" />
          <UiAvatarFallback>ME</UiAvatarFallback>
        </UiAvatar>
      </UiMessageAvatar>
      <UiMessageContent>
        <UiBubble>
          <UiBubbleContent>It&apos;s a one-line change.</UiBubbleContent>
        </UiBubble>
        <UiMessageFooter>Delivered</UiMessageFooter>
      </UiMessageContent>
    </UiMessage>
    <UiMessage>
      <UiMessageAvatar>
        <UiAvatar>
          <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@rabbit" />
          <UiAvatarFallback>R</UiAvatarFallback>
        </UiAvatar>
      </UiMessageAvatar>
      <UiMessageContent>
        <UiBubbleGroup>
          <UiBubble variant="muted">
            <UiBubbleContent> It&apos;s always a one-line change 😭. </UiBubbleContent>
          </UiBubble>
          <UiBubble variant="muted">
            <UiBubbleContent>Alright, let me take a look.</UiBubbleContent>
            <UiBubbleReactions aria-label="Reactions: thumbs up">
              <span>👍</span>
            </UiBubbleReactions>
          </UiBubble>
        </UiBubbleGroup>
      </UiMessageContent>
    </UiMessage>
    <UiMarker role="status">
      <UiMarkerContent class="shimmer">
        <span class="font-medium">Oliver</span> is typing...
      </UiMarkerContent>
    </UiMarker>
  </div>
</template>

<script lang="ts" setup></script>
```
::

**Note:** `Message` owns the row layout — avatar, alignment, header, and footer. Render the visible message surface inside it with [`Bubble`](https://uithing.com/components/bubble).

## Anatomy

```vue [Message Anatomy.vue] lines
<template>
  <UiMessageGroup>
    <UiMessage>
      <UiMessageAvatar />
      <UiMessageContent>
        <UiMessageHeader />
        <UiBubble />
        <UiMessageFooter />
      </UiMessageContent>
    </UiMessage>
  </UiMessageGroup>
</template>
```

Use `UiMessageGroup` to stack consecutive messages from the same sender.

## Features

- Start and end alignment for sender and receiver rows via the `align` prop
- Avatar slot that anchors to the bottom of the message and stays clear of the footer
- Header and footer slots for sender names, status, and message actions
- Footer follows the message side; actions stay aligned on `align="end"` rows
- Group wrapper for stacking consecutive messages from the same sender
- Every part renders through `Primitive`, so `as` / `as-child` and Vue `class` overrides work on any part

## Examples

### Avatar

Use `UiMessageAvatar` to render an avatar next to the message. Set `align="end"` on the message to align the avatar to the end of the message.

::prose-show-case
:docs-message-avatar-demo

#code
```vue [DocsMessageAvatarDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-6 py-12">
    <UiMessage>
      <UiMessageAvatar>
        <UiAvatar>
          <UiAvatarImage src="https://github.com/mirari.png" alt="@avatar" />
          <UiAvatarFallback>R</UiAvatarFallback>
        </UiAvatar>
      </UiMessageAvatar>
      <UiMessageContent>
        <UiBubble variant="muted">
          <UiBubbleContent> The build failed during dependency installation. </UiBubbleContent>
        </UiBubble>
      </UiMessageContent>
    </UiMessage>
    <UiMessage align="end">
      <UiMessageAvatar>
        <UiAvatar>
          <UiAvatarImage src="https://github.com/baybreezy.png" alt="@avatar" />
          <UiAvatarFallback>R</UiAvatarFallback>
        </UiAvatar>
      </UiMessageAvatar>
      <UiMessageContent>
        <UiBubble>
          <UiBubbleContent>Can you share the exact error?</UiBubbleContent>
        </UiBubble>
      </UiMessageContent>
    </UiMessage>
    <UiMessage>
      <UiMessageAvatar>
        <UiAvatar>
          <UiAvatarImage src="https://github.com/mirari.png" alt="@avatar" />
          <UiAvatarFallback>R</UiAvatarFallback>
        </UiAvatar>
      </UiMessageAvatar>
      <UiMessageContent>
        <UiBubbleGroup>
          <UiBubble variant="muted">
            <UiBubbleContent>Here&apos;s the error from the logs</UiBubbleContent>
          </UiBubble>
          <UiBubble variant="muted">
            <UiBubbleContent>
              Something went wrong with the build. The libraries are not installed correctly. Try
              running the build again.
            </UiBubbleContent>
          </UiBubble>
        </UiBubbleGroup>
      </UiMessageContent>
    </UiMessage>
  </div>
</template>

<script lang="ts" setup></script>
```
::

| align   | Description                                         |
| ------- | --------------------------------------------------- |
| `start` | Align the message to the start of the conversation. |
| `end`   | Align the message to the end of the conversation.   |

### Group

Use `UiMessageGroup` to stack consecutive messages from the same sender. Render an empty `UiMessageAvatar` on the earlier messages to keep them aligned with the avatar on the last one.

::prose-show-case
:docs-message-group-demo

#code
```vue [DocsMessageGroupDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-6 py-12">
    <UiMessageGroup>
      <UiMessage>
        <UiMessageAvatar />
        <UiMessageContent>
          <UiBubble variant="muted">
            <UiBubbleContent>I checked the registry addresses.</UiBubbleContent>
          </UiBubble>
        </UiMessageContent>
      </UiMessage>
      <UiMessage>
        <UiMessageAvatar>
          <UiAvatar>
            <UiAvatarImage src="https://github.com/evilrabbit.png" alt="@avatar" />
            <UiAvatarFallback>CN</UiAvatarFallback>
          </UiAvatar>
        </UiMessageAvatar>
        <UiMessageContent>
          <UiBubble variant="muted">
            <UiBubbleContent>
              The component and example JSON now live under the UI registry.
            </UiBubbleContent>
          </UiBubble>
        </UiMessageContent>
      </UiMessage>
    </UiMessageGroup>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Header and Footer

Use `UiMessageHeader` for a sender name and `UiMessageFooter` for metadata such as a delivery or read status.

::prose-show-case
:docs-message-header-and-footer-demo

#code
```vue [DocsMessageHeaderAndFooterDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-8 py-12">
    <UiMessage>
      <UiMessageContent>
        <UiMessageHeader>Olivia</UiMessageHeader>
        <UiBubble variant="muted">
          <UiBubbleContent>I already checked the logs.</UiBubbleContent>
        </UiBubble>
      </UiMessageContent>
    </UiMessage>
    <UiMessage align="end">
      <UiMessageContent>
        <UiBubble>
          <UiBubbleContent>
            Send the report to the team. Ping @shadcn if you need help.
          </UiBubbleContent>
        </UiBubble>
        <UiMessageFooter>
          <div>Read <span class="font-normal">Yesterday</span></div>
        </UiMessageFooter>
      </UiMessageContent>
    </UiMessage>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Actions

Place message-level actions in `UiMessageFooter`, such as copy, retry, or feedback buttons.

::prose-show-case
:docs-message-actions-demo

#code
```vue [DocsMessageActionsDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-8 py-12">
    <UiMessage>
      <UiMessageContent>
        <UiBubble variant="muted">
          <UiBubbleContent>
            The install failure is coming from the workspace package.
          </UiBubbleContent>
        </UiBubble>
        <UiMessageFooter>
          <UiButton variant="ghost" size="icon" aria-label="Copy" title="Copy">
            <Icon name="lucide:copy" />
          </UiButton>
          <UiButton variant="ghost" size="icon" aria-label="Like" title="Like">
            <Icon name="lucide:thumbs-up" />
          </UiButton>
          <UiButton variant="ghost" size="icon" aria-label="Dislike" title="Dislike">
            <Icon name="lucide:thumbs-down" />
          </UiButton>
        </UiMessageFooter>
      </UiMessageContent>
    </UiMessage>
    <UiMessage align="end">
      <UiMessageContent>
        <UiBubble>
          <UiBubbleContent>Okay drop me a link. Taking a look...</UiBubbleContent>
        </UiBubble>
        <UiMessageFooter class="gap-2">
          <span class="text-destructive font-normal">Failed to send</span>
          <UiButton variant="ghost" size="icon-sm" title="Retry" aria-label="Retry">
            <Icon name="lucide:refresh-ccw" />
          </UiButton>
        </UiMessageFooter>
      </UiMessageContent>
    </UiMessage>
  </div>
</template>

<script lang="ts" setup></script>
```
::

## Accessibility

`Message` is a presentational layout wrapper. Accessibility comes from the content you place inside it.

### Label icon-only actions

Action buttons in `UiMessageFooter` are usually icon-only, so give each one an `aria-label`.

```vue
<template>
  <UiMessageFooter>
    <UiButton variant="ghost" size="icon" aria-label="Copy">
      <Icon name="lucide:copy" />
    </UiButton>
  </UiMessageFooter>
</template>
```

### Status updates

For in-progress messages, use a [`Marker`](https://uithing.com/components/marker) with `role="status"` so assistive tech announces the update as it appears.

```vue
<template>
  <UiMessage>
    <UiMarker role="status">
      <UiMarkerIcon>
        <Icon name="lucide:loader-circle" class="animate-spin" />
      </UiMarkerIcon>
      <UiMarkerContent>Checking the logs...</UiMarkerContent>
    </UiMarker>
  </UiMessage>
</template>
```

## API Reference

All Message parts render through `Primitive`. Use `as` to choose another element, or `as-child` to merge the component's attributes and styles onto the single element or component in its default slot.

### Message

The message row wrapper.

| Prop       | Type                      | Default   | Description                                                  |
| ---------- | ------------------------- | --------- | ------------------------------------------------------------ |
| `align`    | `"start" | "end"`         | `"start"` | The alignment of the message in the conversation.            |
| `as`       | `PrimitiveProps["as"]`    | `"div"`   | Element or component to render.                              |
| `as-child` | `boolean`                 | `false`   | Render the default slot as the root and merge props onto it. |
| `class`    | `HTMLAttributes["class"]` | -         | Additional classes to apply to the row.                      |

### MessageGroup

Groups consecutive messages from the same sender.

| Prop       | Type                      | Default | Description                                                  |
| ---------- | ------------------------- | ------- | ------------------------------------------------------------ |
| `as`       | `PrimitiveProps["as"]`    | `"div"` | Element or component to render.                              |
| `as-child` | `boolean`                 | `false` | Render the default slot as the root and merge props onto it. |
| `class`    | `HTMLAttributes["class"]` | -       | Additional classes to apply to the group root.               |

### MessageAvatar

The avatar slot, aligned to the bottom of the message. When the message has a `UiMessageFooter`, the avatar shifts up to stay aligned with the message surface instead of the footer.

| Prop       | Type                      | Default | Description                                                  |
| ---------- | ------------------------- | ------- | ------------------------------------------------------------ |
| `as`       | `PrimitiveProps["as"]`    | `"div"` | Element or component to render.                              |
| `as-child` | `boolean`                 | `false` | Render the default slot as the root and merge props onto it. |
| `class`    | `HTMLAttributes["class"]` | -       | Additional classes to apply to the avatar wrapper.           |

### MessageContent

Wraps the header, message surface, and footer.

| Prop       | Type                      | Default | Description                                                  |
| ---------- | ------------------------- | ------- | ------------------------------------------------------------ |
| `as`       | `PrimitiveProps["as"]`    | `"div"` | Element or component to render.                              |
| `as-child` | `boolean`                 | `false` | Render the default slot as the root and merge props onto it. |
| `class`    | `HTMLAttributes["class"]` | -       | Additional classes to apply to the content wrapper.          |

### MessageHeader

Displays content above the message, such as a sender name. Aligns to the message side.

| Prop       | Type                      | Default | Description                                                  |
| ---------- | ------------------------- | ------- | ------------------------------------------------------------ |
| `as`       | `PrimitiveProps["as"]`    | `"div"` | Element or component to render.                              |
| `as-child` | `boolean`                 | `false` | Render the default slot as the root and merge props onto it. |
| `class`    | `HTMLAttributes["class"]` | -       | Additional classes to apply to the header.                   |

### MessageFooter

Displays content below the message, such as status or actions. Aligns to the message side.

| Prop       | Type                      | Default | Description                                                  |
| ---------- | ------------------------- | ------- | ------------------------------------------------------------ |
| `as`       | `PrimitiveProps["as"]`    | `"div"` | Element or component to render.                              |
| `as-child` | `boolean`                 | `false` | Render the default slot as the root and merge props onto it. |
| `class`    | `HTMLAttributes["class"]` | -       | Additional classes to apply to the footer.                   |


# Message Scroller

## Source code

Click :source-code-link{component="MessageScroller"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add message-scroller
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add message-scroller
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add message-scroller
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add message-scroller
```
::

### Add CSS

Add this to your main CSS file or import it in your project:

```css
@keyframes ms-anim-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ms-anim-slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ms-anim-slide-side {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes ms-anim-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes ms-anim-spring-bounce {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes ms-anim-blur-fade {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
@keyframes ms-anim-scale-fade {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ms-anim-fade {
  animation: ms-anim-fade 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ms-anim-slide-up {
  animation: ms-anim-slide-up 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ms-anim-slide-side {
  animation: ms-anim-slide-side 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ms-anim-pop {
  animation: ms-anim-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ms-anim-spring-bounce {
  animation: ms-anim-spring-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ms-anim-blur-fade {
  animation: ms-anim-blur-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ms-anim-scale-fade {
  animation: ms-anim-scale-fade 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  [class*="ms-anim-"] {
    animation: none;
  }
}
```

## MessageScroller

A great streaming chat scroller has to juggle a lot at once: pin to the live edge while a reply streams, but never fight a reader who scrolls up; anchor each new turn near the top with a peek of the previous exchange; preserve position when older history loads above; and expose commands to jump anywhere in the thread. `MessageScroller` owns those hard parts so your message list doesn't have to.

It does **not** own your messages, AI state, transport, or model — it is a headless scroll container you compose around your own rows.

## Usage

::prose-show-case
:docs-message-scroller-demo

#code
```vue [DocsMessageScrollerDemo.vue]
<template>
  <UiMessageScrollerProvider>
    <div class="relative flex flex-col gap-4">
      <UiCard class="mx-auto h-140 w-full max-w-sm gap-0">
        <UiCardHeader class="gap-1 border-b">
          <UiCardTitle>New Chat</UiCardTitle>
          <UiCardDescription>How can I help you today?</UiCardDescription>
          <UiCardAction>
            <UiTooltip>
              <UiTooltipTrigger as-child>
                <UiButton
                  class="rounded-full"
                  variant="outline"
                  size="icon"
                  aria-label="Reset conversation"
                  :disabled="isBusy"
                  @click="reset"
                >
                  <Icon name="lucide:rotate-cw" />
                </UiButton>
              </UiTooltipTrigger>
              <UiTooltipContent>
                <p>Reset</p>
              </UiTooltipContent>
            </UiTooltip>
          </UiCardAction>
        </UiCardHeader>
        <UiCardContent class="flex-1 overflow-hidden p-0">
          <UiEmpty v-if="messages.length === 0" class="h-full">
            <UiEmptyHeader>
              <UiEmptyMedia variant="icon">
                <Icon name="lucide:message-circle-dashed" />
              </UiEmptyMedia>
              <UiEmptyTitle>Morning, shadcn!</UiEmptyTitle>
              <UiEmptyDescription>
                What are we working on today? Press send to start a new conversation
              </UiEmptyDescription>
            </UiEmptyHeader>
          </UiEmpty>
          <UiMessageScroller v-else>
            <UiMessageScrollerViewport>
              <UiMessageScrollerContent :aria-busy="isBusy" class="p-6">
                <DocsMessageScrollerAnimatedItem
                  v-for="message in messages"
                  :key="message.id"
                  :message="message"
                  :scroll-anchor="message.role === 'user'"
                />
              </UiMessageScrollerContent>
            </UiMessageScrollerViewport>
            <UiMessageScrollerButton variant="outline" class="bg-secondary! rounded-full" />
          </UiMessageScroller>
        </UiCardContent>
        <UiCardFooter class="flex-col gap-2">
          <form class="w-full" @submit.prevent="onSubmit">
            <UiInputGroup>
              <div class="h-14 w-full px-3 py-2.5">
                <span
                  class="line-clamp-2 text-sm opacity-60 data-[status=ready]:opacity-100"
                  :data-status="status"
                >
                  <template v-if="nextMessage">{{ nextMessage.text }}</template>
                  <span v-else class="text-muted-foreground">
                    No messages queued. Reset the conversation.
                  </span>
                </span>
              </div>
              <UiInputGroupAddon align="block-end" class="pt-1">
                <UiDropdownMenu>
                  <UiDropdownMenuTrigger as-child>
                    <UiInputGroupButton
                      aria-label="Add files"
                      type="button"
                      size="icon-sm"
                      variant="outline"
                      class="rounded-full"
                    >
                      <Icon name="lucide:plus" />
                    </UiInputGroupButton>
                  </UiDropdownMenuTrigger>
                  <UiDropdownMenuContent align="start" side="top" class="w-44">
                    <UiDropdownMenuItem>
                      <Icon name="lucide:paperclip" />
                      Add Photos &amp; Files
                    </UiDropdownMenuItem>
                    <UiDropdownMenuSeparator />
                    <UiDropdownMenuItem>
                      <Icon name="lucide:image" />
                      Create Image
                    </UiDropdownMenuItem>
                    <UiDropdownMenuItem>
                      <Icon name="lucide:telescope" />
                      Deep Research
                    </UiDropdownMenuItem>
                    <UiDropdownMenuItem>
                      <Icon name="lucide:globe" />
                      Web Search
                    </UiDropdownMenuItem>
                  </UiDropdownMenuContent>
                </UiDropdownMenu>
                <UiInputGroupButton
                  type="submit"
                  variant="default"
                  size="icon-sm"
                  class="ml-auto rounded-full"
                  :disabled="!nextMessage || isBusy"
                >
                  <Icon name="lucide:arrow-up" />
                  <span class="sr-only">Send</span>
                </UiInputGroupButton>
              </UiInputGroupAddon>
            </UiInputGroup>
          </form>
        </UiCardFooter>
      </UiCard>
      <div class="text-muted-foreground px-0.5 text-center text-xs">
        Demo is read only. Press send to send messages.
      </div>
    </div>
  </UiMessageScrollerProvider>
</template>

<script lang="ts" setup>
  const chat = createDemoChat()
    .user(
      "I'm building a chat for our app and the scroll behavior is driving me nuts. Every time the AI streams a reply, the whole thread jumps around."
    )
    .assistant(
      "That's the classic streaming scroll problem. Wrap your message list in `MessageScroller` and turn on `autoScroll` — the viewport pins to the bottom as tokens arrive, so users always see the latest text land in place.\n\nThe important part: it only auto-scrolls while the reader is already at the bottom. The moment they scroll up to read something earlier, auto-scroll backs off and their position is preserved."
    )
    .user(
      "Okay, but when someone sends a new message the view still feels jarring — like the whole conversation reloads from the top."
    )
    .assistant(
      "MessageScrollerItem fixes that with turn anchoring. Set `scrollAnchor` on the turn that should settle near the top instead of blindly snapping to the document bottom.\n\nIt also leaves a small peek of the previous exchange visible above the anchor, so context isn't lost. The reply starts in view without that disorienting jump you get from a plain overflow container."
    )
    .user(
      "And if they've scrolled up to re-read an older answer? I don't want to yank them back down."
    )
    .assistant(
      "You won't. Auto-scroll only runs when the viewport is already pinned to the bottom, so scrolling up is a deliberate opt-out — their place in the thread stays put even as new tokens keep arriving below.\n\nWhen there is content they haven't seen yet, `MessageScrollerButton` appears at the bottom of the viewport. One tap jumps them back to the newest message and re-engages auto-scroll."
    )
    .user("Last one — does this work with assistive tech?")
    .assistant(
      '`MessageScrollerContent` sets `role="log"` and `aria-relevant="additions"` by default, so screen readers announce new messages as they stream in.\n\nThe scroll button is a real `<button>` with an sr-only label, and it\'s removed from the tab order when you\'re already at the bottom — no ghost focus stops.'
    );

  const { messages, status, nextMessage, send, reset } = useMessageScrollerDemoChat(chat, {
    chunkDelayMs: 20,
  });

  const isBusy = computed(() => status.value === "streaming");

  function onSubmit() {
    if (!nextMessage.value || isBusy.value) return;
    send();
  }
</script>
```
::

The provider must have a constrained height (or a height-bounded parent) so the viewport can scroll.

## Anatomy

```vue [Message Scroller Anatomy.vue] lines
<template>
  <UiMessageScrollerProvider auto-scroll default-scroll-position="last-anchor">
    <UiMessageScroller>
      <UiMessageScrollerViewport>
        <UiMessageScrollerContent>
          <UiMessageScrollerItem
            v-for="message in messages"
            :key="message.id"
            :message-id="message.id"
            :scroll-anchor="message.role === 'user'"
          >
            <!-- Message / Bubble / Marker goes here -->
          </UiMessageScrollerItem>
        </UiMessageScrollerContent>
      </UiMessageScrollerViewport>
      <UiMessageScrollerButton direction="end" />
    </UiMessageScroller>
  </UiMessageScrollerProvider>
</template>
```

## Examples

### Anchoring Turns

A turn is the part of the conversation that starts a new exchange — usually the user's message and the assistant reply that follows. An *anchor* is the row the viewport should treat as the start of that turn. Mark that row with `scrollAnchor`. When a new anchor is appended, the viewport moves it near the top and keeps a peek of the previous item above it, so the new turn does not feel detached from its context.

```vue
<template>
  <UiMessageScrollerItem :message-id="message.id" :scroll-anchor="message.role === 'user'">
    <!-- ... -->
  </UiMessageScrollerItem>
</template>
```

Scroll anchors are not tied to message role. You can turn any row into an anchor: a user message, a system marker, a handoff event, or anything else that starts a meaningful turn.

::prose-show-case
:docs-message-scroller-anchoring-demo

#code
```vue [DocsMessageScrollerAnchoringDemo.vue]
<template>
  <div class="relative flex flex-col gap-4">
    <UiCard class="mx-auto h-140 w-full max-w-sm gap-0">
      <UiCardHeader class="border-b">
        <UiCardTitle>Anchoring Turns</UiCardTitle>
        <UiCardDescription> Choose which role settles near the top edge. </UiCardDescription>
        <UiCardAction>
          <UiButton
            type="button"
            variant="outline"
            size="icon"
            aria-label="Reset anchored turns"
            :disabled="messages.length === 0"
            @click="reset"
          >
            <Icon name="lucide:rotate-cw" />
          </UiButton>
        </UiCardAction>
      </UiCardHeader>
      <UiCardContent class="min-h-0 flex-1 overflow-hidden p-0">
        <UiEmpty v-if="messages.length === 0" class="h-full">
          <UiEmptyHeader>
            <UiEmptyMedia variant="icon">
              <Icon name="lucide:message-circle-dashed" />
            </UiEmptyMedia>
            <UiEmptyTitle>No anchored messages yet</UiEmptyTitle>
            <UiEmptyDescription>
              Send the first message to see the selected role anchor.
            </UiEmptyDescription>
          </UiEmptyHeader>
        </UiEmpty>
        <UiMessageScrollerProvider v-else>
          <UiMessageScroller>
            <UiMessageScrollerViewport>
              <UiMessageScrollerContent class="p-6">
                <DocsMessageScrollerAnimatedItem
                  v-for="message in messages"
                  :key="message.id"
                  :message="message"
                  :scroll-anchor="message.role === anchorRole"
                  user-variant="muted"
                  assistant-variant="ghost"
                />
              </UiMessageScrollerContent>
            </UiMessageScrollerViewport>
            <UiMessageScrollerButton />
          </UiMessageScroller>
        </UiMessageScrollerProvider>
      </UiCardContent>
      <UiCardFooter>
        <UiToggleGroup
          type="multiple"
          aria-label="Select scroll anchor role"
          :model-value="[anchorRole]"
          @update:model-value="onValueChange"
        >
          <UiToggleGroupItem value="user" aria-label="Anchor user messages">
            User
          </UiToggleGroupItem>
          <UiToggleGroupItem value="assistant" aria-label="Anchor assistant messages">
            Assistant
          </UiToggleGroupItem>
        </UiToggleGroup>
        <UiButton type="button" size="icon" class="ml-auto" :disabled="!nextMessage" @click="send">
          <Icon name="lucide:arrow-up" />
          <span class="sr-only">Send Message</span>
        </UiButton>
      </UiCardFooter>
    </UiCard>
    <div class="text-muted-foreground mx-auto max-w-xs px-0.5 text-center text-xs">
      Toggle the anchor role, then send messages to compare where turns settle.
    </div>
  </div>
</template>

<script lang="ts" setup>
  const scriptedMessages: DemoMessage[] = [
    {
      id: "anchor-1-user",
      role: "user",
      text: "Can you show me how anchoring behaves when a new prompt starts the turn?",
    },
    {
      id: "anchor-1-assistant",
      role: "assistant",
      text: "Append the user prompt first, then append the assistant response. With User selected, the prompt settles near the top and the assistant response fills in below it.",
    },
    {
      id: "anchor-2-user",
      role: "user",
      text: "What changes when assistant messages are the anchor?",
    },
    {
      id: "anchor-2-assistant",
      role: "assistant",
      text: "Now each assistant response is the item `MessageScroller` keeps in view. This is useful when the reply is the moment you want readers to land on after each turn.",
    },
    {
      id: "anchor-3-user",
      role: "user",
      text: "Can I switch roles and keep adding turns?",
    },
    {
      id: "anchor-3-assistant",
      role: "assistant",
      text: "Yes. The next appended message with the selected role becomes the anchor, so you can compare user and assistant anchoring without resetting the demo.",
    },
  ];

  const anchorRole = ref<DemoRole>("user");
  const messages = ref<DemoMessage[]>([]);
  const messageIndex = ref(0);
  const nextMessage = computed<DemoMessage | null>(
    () => scriptedMessages[messageIndex.value] ?? null
  );

  function reset() {
    messages.value = [];
    messageIndex.value = 0;
  }

  function onValueChange(value: unknown) {
    const nextValue = Array.isArray(value) ? value[0] : value;

    if (nextValue === "user" || nextValue === "assistant") {
      anchorRole.value = nextValue;
      reset();
    }
  }

  function send() {
    if (!nextMessage.value) return;

    messages.value = [...messages.value, nextMessage.value];
    messageIndex.value += 1;
  }
</script>
```
::

### Group Chat

In a group chat, the turn boundary is often the message that asks the model to respond, or a marker like "Marcus joined the chat". Typing indicators and history controls usually should not anchor. Because anchoring is role-independent, you can anchor a marker just as easily as a message.

::prose-show-case
:docs-message-scroller-group-chat-demo

#code
```vue [DocsMessageScrollerGroupChatDemo.vue]
<template>
  <UiMessageScrollerProvider>
    <div class="relative flex flex-col gap-4">
      <UiCard class="mx-auto h-140 w-full max-w-sm gap-0">
        <UiCardHeader class="gap-1 border-b">
          <UiCardTitle>Group Chat</UiCardTitle>
          <UiCardDescription>
            A group chat with several participants and an assistant. The Marker is marked as a turn.
          </UiCardDescription>
          <UiCardAction>
            <UiTooltip>
              <UiTooltipTrigger as-child>
                <UiButton
                  type="button"
                  variant="outline"
                  size="icon"
                  aria-label="Reset conversation"
                  :disabled="rockyTurn === 'idle'"
                  @click="reset"
                >
                  <Icon name="lucide:rotate-cw" />
                </UiButton>
              </UiTooltipTrigger>
              <UiTooltipContent>
                <p>Reset</p>
              </UiTooltipContent>
            </UiTooltip>
          </UiCardAction>
        </UiCardHeader>
        <UiCardContent class="min-h-0 flex-1 p-0">
          <UiMessageScrollerProvider>
            <UiMessageScroller :key="demoKey">
              <UiMessageScrollerViewport>
                <UiMessageScrollerContent class="p-6">
                  <template v-for="item in items" :key="item.id">
                    <UiMessageScrollerItem
                      v-if="item.type === 'message'"
                      :message-id="item.id"
                      :scroll-anchor="item.scrollAnchor"
                    >
                      <UiMessage :align="item.sender === currentUser ? 'end' : 'start'">
                        <UiMessageContent>
                          <UiMessageHeader v-if="item.sender !== currentUser">
                            {{ item.sender }}
                          </UiMessageHeader>
                          <UiBubble :variant="messageVariant(item)">
                            <UiBubbleContent>{{ item.text }}</UiBubbleContent>
                          </UiBubble>
                        </UiMessageContent>
                      </UiMessage>
                    </UiMessageScrollerItem>
                    <UiMessageScrollerItem v-else :scroll-anchor="item.scrollAnchor">
                      <UiMarker variant="separator">
                        <UiMarkerContent>{{ item.text }}</UiMarkerContent>
                      </UiMarker>
                    </UiMessageScrollerItem>
                  </template>
                </UiMessageScrollerContent>
              </UiMessageScrollerViewport>
              <UiMessageScrollerButton />
            </UiMessageScroller>
          </UiMessageScrollerProvider>
        </UiCardContent>
        <UiCardFooter class="flex flex-col items-center gap-2 border-t">
          <UiButton
            type="button"
            :disabled="isComplete"
            class="w-full"
            variant="secondary"
            @click="advance"
          >
            {{ buttonLabel }}
          </UiButton>
          <p class="text-muted-foreground text-xs">
            {{
              rockyTurn === "idle"
                ? "This will create a marker and make it the anchor"
                : "Now send Rocky's reply into the conversation"
            }}
          </p>
        </UiCardFooter>
      </UiCard>
      <div class="text-muted-foreground mx-auto max-w-sm px-0.5 text-center text-xs text-balance">
        When a user joins, a marker is created. scrollAnchor on the marker marks it as the next turn
      </div>
    </div>
  </UiMessageScrollerProvider>
</template>

<script lang="ts" setup>
  type GroupChatItem =
    | {
        id: string;
        type: "event";
        text: string;
        scrollAnchor?: boolean;
      }
    | {
        id: string;
        type: "message";
        sender: string;
        role: "assistant" | "participant";
        text: string;
        scrollAnchor?: boolean;
      };

  const currentUser = "Grace";

  const initialItems: GroupChatItem[] = [
    {
      id: "group-1",
      type: "message",
      sender: "Grace",
      role: "participant",
      text: "@mary, the astrophage line keeps matching Venus energy output. Can you check my math?",
    },
    {
      id: "group-2",
      type: "message",
      sender: "Mary (Agent)",
      role: "assistant",
      text: "Yes. Confirmed. The curve points to a microorganism harvesting stellar energy and breeding near carbon dioxide. If @rocky agrees, this is the clue we need.",
    },
    {
      id: "group-3",
      type: "message",
      sender: "Grace",
      role: "participant",
      text: "ping @rocky",
      scrollAnchor: true,
    },
  ];

  const rockyMarker: GroupChatItem = {
    id: "group-4",
    type: "event",
    text: "Rocky has joined the chat",
    scrollAnchor: true,
  };

  const rockyMessage: GroupChatItem = {
    id: "group-5",
    type: "message",
    sender: "Rocky",
    role: "participant",
    text: "Amaze. Astrophage eats light, makes heat, goes to carbon dioxide. Rocky has fuel model. Grace is smart.",
  };

  const demoKey = ref(0);
  const rockyTurn = ref<"idle" | "marker" | "message">("idle");

  const items = computed(() => {
    if (rockyTurn.value === "message") return [...initialItems, rockyMarker, rockyMessage];
    if (rockyTurn.value === "marker") return [...initialItems, rockyMarker];
    return initialItems;
  });
  const buttonLabel = computed(() =>
    rockyTurn.value === "idle" ? "Add Rocky" : "Send Message as Rocky"
  );
  const isComplete = computed(() => rockyTurn.value === "message");

  function advance() {
    rockyTurn.value = rockyTurn.value === "idle" ? "marker" : "message";
  }

  function reset() {
    rockyTurn.value = "idle";
    demoKey.value += 1;
  }

  function messageVariant(item: Extract<GroupChatItem, { type: "message" }>) {
    if (item.sender === currentUser) return "muted";
    return item.role === "assistant" ? "ghost" : "tinted";
  }
</script>
```
::

### Keeping Context Visible

When a new turn starts, it should still feel like part of the same continuous thread. `scrollPreviousItemPeek` keeps a slice of the previous item visible above the anchor, so the reader keeps their context instead of feeling like the conversation restarted on a blank page.

::prose-show-case
:docs-message-scroller-previous-context-demo

#code
```vue [DocsMessageScrollerPreviousContextDemo.vue]
<template>
  <UiMessageScrollerProvider :key="demoKey" :scroll-margin="24" :scroll-previous-item-peek="peek">
    <div class="relative flex flex-col gap-4">
      <UiCard class="mx-auto h-140 w-full max-w-sm gap-0">
        <UiCardHeader class="gap-1 border-b">
          <UiCardTitle>Keeping Context Visible</UiCardTitle>
          <UiCardDescription>
            New turns keep part of the previous reply in view.
          </UiCardDescription>
          <UiCardAction>
            <UiTooltip>
              <UiTooltipTrigger as-child>
                <UiButton
                  class="rounded-full"
                  variant="outline"
                  size="icon"
                  aria-label="Reset context example"
                  :disabled="isBusy"
                  @click="onReset"
                >
                  <Icon name="lucide:rotate-cw" />
                </UiButton>
              </UiTooltipTrigger>
              <UiTooltipContent>
                <p>Reset</p>
              </UiTooltipContent>
            </UiTooltip>
          </UiCardAction>
        </UiCardHeader>
        <UiCardContent class="flex-1 overflow-hidden p-0">
          <UiMessageScroller>
            <UiMessageScrollerViewport>
              <UiMessageScrollerContent :aria-busy="isBusy" class="p-6">
                <DocsMessageScrollerAnimatedItem
                  v-for="message in messages"
                  :key="message.id"
                  :message="message"
                  :scroll-anchor="message.role === 'user'"
                />
              </UiMessageScrollerContent>
            </UiMessageScrollerViewport>
            <UiMessageScrollerButton class="rounded-full" />
          </UiMessageScroller>
        </UiCardContent>
        <UiCardFooter class="flex-col gap-2">
          <form class="w-full" @submit.prevent="onSubmit">
            <UiInputGroup>
              <div class="h-14 w-full px-3 py-2.5">
                <span
                  class="line-clamp-2 text-sm opacity-60 data-[status=ready]:opacity-100"
                  :data-status="status"
                >
                  <template v-if="nextMessage">{{ nextMessage.text }}</template>
                  <span v-else class="text-muted-foreground">
                    No messages queued. Reset the context.
                  </span>
                </span>
              </div>
              <UiInputGroupAddon align="block-end" class="pt-1">
                <UiDropdownMenu>
                  <UiDropdownMenuTrigger as-child>
                    <UiInputGroupButton
                      aria-label="Add files"
                      type="button"
                      size="icon-sm"
                      variant="outline"
                      class="rounded-full"
                    >
                      <Icon name="lucide:plus" />
                    </UiInputGroupButton>
                  </UiDropdownMenuTrigger>
                  <UiDropdownMenuContent align="start" side="top" class="w-44">
                    <UiDropdownMenuItem>
                      <Icon name="lucide:paperclip" />
                      Add Photos &amp; Files
                    </UiDropdownMenuItem>
                    <UiDropdownMenuSeparator />
                    <UiDropdownMenuItem>
                      <Icon name="lucide:image" />
                      Create Image
                    </UiDropdownMenuItem>
                    <UiDropdownMenuItem>
                      <Icon name="lucide:telescope" />
                      Deep Research
                    </UiDropdownMenuItem>
                    <UiDropdownMenuItem>
                      <Icon name="lucide:globe" />
                      Web Search
                    </UiDropdownMenuItem>
                  </UiDropdownMenuContent>
                </UiDropdownMenu>
                <div class="flex w-28 items-center gap-2">
                  <span class="text-muted-foreground text-xs tabular-nums"> {{ peek }}px </span>
                  <UiSlider
                    aria-label="Previous context peek"
                    :model-value="[peek]"
                    :min="64"
                    :max="128"
                    :step="1"
                    :disabled="isBusy"
                    @update:model-value="onPeekChange"
                  />
                </div>
                <UiInputGroupButton
                  type="submit"
                  variant="default"
                  size="icon-sm"
                  class="ml-auto rounded-full"
                  :disabled="!nextMessage || isBusy"
                >
                  <Icon name="lucide:arrow-up" />
                  <span class="sr-only">Send</span>
                </UiInputGroupButton>
              </UiInputGroupAddon>
            </UiInputGroup>
          </form>
        </UiCardFooter>
      </UiCard>
      <div class="text-muted-foreground px-0.5 text-center text-xs">
        Adjust the slider and send. Observe the previous message peek
      </div>
    </div>
  </UiMessageScrollerProvider>
</template>

<script lang="ts" setup>
  const DEFAULT_PEEK = 64;

  const chat = createDemoChat()
    .user(
      "I'm building a chat for our app and the scroll behavior is driving me nuts. Every time the AI streams a reply, the whole thread jumps around."
    )
    .assistant(
      "That's the classic streaming scroll problem. Wrap your message list in `MessageScroller` and turn on `autoScroll` — the viewport pins to the bottom as tokens arrive, so users always see the latest text land in place.\n\nThe important part: it only auto-scrolls while the reader is already at the bottom. The moment they scroll up to read something earlier, auto-scroll backs off and their position is preserved. You get smooth streaming without fighting the user's intent."
    )
    .user(
      "Okay, but when someone sends a new message the view still feels jarring — like the whole conversation reloads from the top."
    )
    .assistant(
      "MessageScrollerItem fixes that with turn anchoring. Set `scrollAnchor` on the turn that should settle near the top instead of blindly snapping to the document bottom.\n\nIt also leaves a small peek of the previous exchange visible above the anchor, so context isn't lost. The reply starts in view without that disorienting jump you get from a plain overflow container."
    )
    .user(
      "And if they've scrolled up to re-read an older answer? I don't want to yank them back down."
    )
    .assistant(
      "You won't. Auto-scroll only runs when the viewport is already pinned to the bottom, so scrolling up is a deliberate opt-out — their place in the thread stays put even as new tokens keep arriving below.\n\nWhen there is content they haven't seen yet, `MessageScrollerButton` appears at the bottom of the viewport. One tap jumps them back to the newest message and re-engages auto-scroll. Same pattern as Slack or iMessage: quiet when you're caught up, helpful when you're not."
    )
    .user("Last one — does this work with assistive tech?")
    .assistant(
      '`MessageScrollerContent` sets `role="log"` and `aria-relevant="additions"` by default, so screen readers announce new messages as they stream in.\n\nThe scroll button is a real `<button>` with an sr-only label, and it\'s removed from the tab order when you\'re already at the bottom — no ghost focus stops.'
    );

  const { messages, status, nextMessage, send, reset } = useMessageScrollerDemoChat(chat, {
    initialCount: 2,
    chunkDelayMs: 35,
  });

  const demoKey = ref(0);
  const peek = ref(DEFAULT_PEEK);

  const isBusy = computed(() => status.value === "streaming");

  function onSubmit() {
    if (!nextMessage.value || isBusy.value) return;
    send();
  }

  function onReset() {
    reset();
    peek.value = DEFAULT_PEEK;
    demoKey.value += 1;
  }

  function onPeekChange(value: number[] | undefined) {
    const nextValue = Array.isArray(value) ? value[0] : value;
    peek.value = nextValue ?? DEFAULT_PEEK;
  }
</script>
```
::

### Following the Live Edge

When the reader is at the live edge, `autoScroll` keeps streamed replies in view as they grow. Scrolling away from the live edge — by wheel, touch, keyboard, or dragging the scrollbar — releases the view, so new chunks arrive without moving the reader. `autoScroll` composes with turn anchoring: when a new turn anchors near the top, the view stays put while the reply streams into the room below it.

::prose-show-case
:docs-message-scroller-streaming-demo

#code
```vue [DocsMessageScrollerStreamingDemo.vue]
<template>
  <UiMessageScrollerProvider auto-scroll>
    <div class="relative flex flex-col gap-4">
      <UiCard class="mx-auto h-140 w-full max-w-sm gap-0">
        <UiCardHeader class="gap-1 border-b">
          <UiCardTitle>Streaming Messages</UiCardTitle>
          <UiCardDescription>
            Auto-scroll follows the live edge of the conversation.
          </UiCardDescription>
          <UiCardAction>
            <UiTooltip>
              <UiTooltipTrigger as-child>
                <UiButton
                  variant="outline"
                  size="icon"
                  aria-label="Reset stream"
                  :disabled="messages.length === 0 || isBusy"
                  class="rounded-full"
                  @click="reset"
                >
                  <Icon name="lucide:rotate-cw" />
                </UiButton>
              </UiTooltipTrigger>
              <UiTooltipContent>
                <p>Reset</p>
              </UiTooltipContent>
            </UiTooltip>
          </UiCardAction>
        </UiCardHeader>
        <UiCardContent class="flex-1 overflow-hidden p-0">
          <UiEmpty v-if="messages.length === 0" class="h-full">
            <UiEmptyHeader>
              <UiEmptyMedia variant="icon">
                <Icon name="lucide:message-circle-dashed" />
              </UiEmptyMedia>
              <UiEmptyTitle>Ready to Stream</UiEmptyTitle>
              <UiEmptyDescription>
                Press send to stream a scripted launch summary.
              </UiEmptyDescription>
            </UiEmptyHeader>
          </UiEmpty>
          <UiMessageScroller v-else>
            <UiMessageScrollerViewport>
              <UiMessageScrollerContent :aria-busy="isBusy" class="p-6">
                <DocsMessageScrollerAnimatedItem
                  v-for="message in messages"
                  :key="message.id"
                  :message="message"
                  :scroll-anchor="message.role === 'user'"
                />
              </UiMessageScrollerContent>
            </UiMessageScrollerViewport>
            <UiMessageScrollerButton />
          </UiMessageScroller>
        </UiCardContent>
        <UiCardFooter class="flex-col gap-2">
          <form class="w-full" @submit.prevent="onSubmit">
            <UiInputGroup>
              <div class="h-14 w-full px-3 py-2.5">
                <span
                  class="line-clamp-2 text-sm opacity-60 data-[status=ready]:opacity-100"
                  :data-status="status"
                >
                  <template v-if="nextMessage">{{ nextMessage.text }}</template>
                  <span v-else class="text-muted-foreground">
                    No messages queued. Reset the stream.
                  </span>
                </span>
              </div>
              <UiInputGroupAddon align="block-end" class="pt-1">
                <UiDropdownMenu>
                  <UiDropdownMenuTrigger as-child>
                    <UiInputGroupButton
                      aria-label="Add files"
                      type="button"
                      size="icon-sm"
                      variant="outline"
                      class="rounded-full"
                    >
                      <Icon name="lucide:plus" />
                    </UiInputGroupButton>
                  </UiDropdownMenuTrigger>
                  <UiDropdownMenuContent align="start" side="top" class="w-44">
                    <UiDropdownMenuItem>
                      <Icon name="lucide:paperclip" />
                      Add Photos &amp; Files
                    </UiDropdownMenuItem>
                    <UiDropdownMenuSeparator />
                    <UiDropdownMenuItem>
                      <Icon name="lucide:image" />
                      Create Image
                    </UiDropdownMenuItem>
                    <UiDropdownMenuItem>
                      <Icon name="lucide:telescope" />
                      Deep Research
                    </UiDropdownMenuItem>
                    <UiDropdownMenuItem>
                      <Icon name="lucide:globe" />
                      Web Search
                    </UiDropdownMenuItem>
                  </UiDropdownMenuContent>
                </UiDropdownMenu>
                <UiInputGroupButton
                  type="submit"
                  variant="default"
                  size="icon-sm"
                  class="ml-auto rounded-full"
                  :disabled="!nextMessage || isBusy"
                >
                  <Icon name="lucide:arrow-up" />
                  <span class="sr-only">Send</span>
                </UiInputGroupButton>
              </UiInputGroupAddon>
            </UiInputGroup>
          </form>
        </UiCardFooter>
      </UiCard>
      <div class="text-muted-foreground px-0.5 text-center text-xs">
        Streaming is simulated. `autoScroll` is enabled.
      </div>
    </div>
  </UiMessageScrollerProvider>
</template>

<script lang="ts" setup>
  const chat = createDemoChat()
    .user(
      "I'm building a chat for our app and the scroll behavior is driving me nuts. Every time the AI streams a reply, the whole thread jumps around."
    )
    .assistant(
      "That's the classic streaming scroll problem. Wrap your message list in `MessageScroller` and turn on `autoScroll` — the viewport pins to the bottom as tokens arrive, so users always see the latest text land in place.\n\nThe important part: it only auto-scrolls while the reader is already at the bottom. The moment they scroll up to read something earlier, auto-scroll backs off and their position is preserved. You get smooth streaming without fighting the user's intent."
    )
    .user(
      "Okay, but when someone sends a new message the view still feels jarring — like the whole conversation reloads from the top."
    )
    .assistant(
      "MessageScrollerItem fixes that with turn anchoring. Set `scrollAnchor` on the turn that should settle near the top instead of blindly snapping to the document bottom.\n\nIt also leaves a small peek of the previous exchange visible above the anchor, so context isn't lost. The reply starts in view without that disorienting jump you get from a plain overflow container."
    )
    .user(
      "And if they've scrolled up to re-read an older answer? I don't want to yank them back down."
    )
    .assistant(
      "You won't. Auto-scroll only runs when the viewport is already pinned to the bottom, so scrolling up is a deliberate opt-out — their place in the thread stays put even as new tokens keep arriving below.\n\nWhen there is content they haven't seen yet, `MessageScrollerButton` appears at the bottom of the viewport. One tap jumps them back to the newest message and re-engages auto-scroll. Same pattern as Slack or iMessage: quiet when you're caught up, helpful when you're not."
    )
    .user("Last one — does this work with assistive tech?")
    .assistant(
      '`MessageScrollerContent` sets `role="log"` and `aria-relevant="additions"` by default, so screen readers announce new messages as they stream in.\n\nThe scroll button is a real `<button>` with an sr-only label, and it\'s removed from the tab order when you\'re already at the bottom — no ghost focus stops.'
    );

  const { messages, status, nextMessage, send, reset } = useMessageScrollerDemoChat(chat, {
    chunkDelayMs: 20,
  });

  const isBusy = computed(() => status.value === "streaming");

  function onSubmit() {
    if (!nextMessage.value || isBusy.value) return;
    send();
  }
</script>
```
::

### Opening Saved Threads

Reopening a saved thread at the absolute end often drops the reader in without enough context. A better default is `"last-anchor"`: show the last meaningful turn, like the user's latest message, with the reply below it.

::prose-show-case
:docs-message-scroller-opening-position-demo

#code
```vue [DocsMessageScrollerOpeningPositionDemo.vue]
<template>
  <div class="relative flex flex-col gap-4">
    <UiCard class="mx-auto h-140 w-full max-w-sm gap-0">
      <UiCardHeader class="gap-1 border-b">
        <UiCardTitle>Opening Position</UiCardTitle>
        <UiCardDescription> Choose where a saved transcript opens. </UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="flex-1 overflow-hidden p-0">
        <UiMessageScrollerProvider>
          <DocsMessageScrollerOpeningPositionInner :position="position" :position-key="positionKey">
            <UiMessageScroller>
              <UiMessageScrollerViewport>
                <UiMessageScrollerContent class="p-6">
                  <DocsMessageScrollerAnimatedItem
                    v-for="message in messages"
                    :key="message.id"
                    :message="message"
                    :scroll-anchor="message.role === 'user'"
                    user-variant="muted"
                    assistant-variant="ghost"
                  />
                </UiMessageScrollerContent>
              </UiMessageScrollerViewport>
              <UiMessageScrollerButton />
            </UiMessageScroller>
          </DocsMessageScrollerOpeningPositionInner>
        </UiMessageScrollerProvider>
      </UiCardContent>
      <UiCardFooter class="flex items-center justify-center border-t">
        <UiTabs :model-value="position" class="w-full" @update:model-value="onValueChange">
          <UiTabsList class="w-full">
            <UiTabsTrigger v-for="option in positions" :key="option.value" :value="option.value">
              {{ option.label }}
            </UiTabsTrigger>
          </UiTabsList>
        </UiTabs>
      </UiCardFooter>
    </UiCard>
    <div class="text-muted-foreground mx-auto max-w-sm px-0.5 text-center text-xs">
      Toggle the defaultScrollPosition to see where the transcript starts when you open the thread
    </div>
  </div>
</template>

<script lang="ts" setup>
  type Position = "start" | "end" | "last-anchor";

  const messages: DemoMessage[] = [
    {
      id: "open-1",
      role: "user",
      text: "This is the first message the user sent in the conversation.",
    },
    {
      id: "open-2",
      role: "assistant",
      text: "Workspace creation rose 8%, but first invite completion only rose 2%.",
    },
    {
      id: "open-3",
      role: "user",
      text: "This is the last message the user sent in the conversation.",
    },
    {
      id: "open-4",
      role: "assistant",
      text: "Start with the invite step. Teams are creating workspaces but waiting to add collaborators.\n\nRecommended follow-up:\n\n1. Compare invite drop-off by account size.\n2. Check whether users who skip invites still return within 24 hours.\n3. Review the empty-state copy on the first project screen.\n4. Segment activation by template, since template users may not need invites right away.\n\nIf that pattern holds, the next experiment should make collaboration useful earlier instead of prompting for invites harder.",
    },
  ];

  const positions: { value: Position; label: string }[] = [
    { value: "start", label: "start" },
    { value: "end", label: "end" },
    { value: "last-anchor", label: "last-anchor" },
  ];

  const position = ref<Position>("last-anchor");
  const positionKey = ref(0);

  function onValueChange(value: unknown) {
    if (value === "start" || value === "end" || value === "last-anchor") {
      position.value = value;
      positionKey.value += 1;
    }
  }
</script>
```
::

### Loading Earlier Messages

Loading earlier messages should not move the conversation the reader is already looking at. When older rows are prepended above the current transcript, `UiMessageScrollerViewport` preserves the visible row so the reader stays in the same place while history loads above them. This is enabled by default through `preserveScrollOnPrepend`.

::prose-show-case
:docs-message-scroller-load-history-demo

#code
```vue [DocsMessageScrollerLoadHistoryDemo.vue]
<template>
  <UiMessageScrollerProvider>
    <div class="relative flex flex-col gap-4">
      <UiCard class="mx-auto h-140 w-full max-w-sm gap-0">
        <UiCardHeader class="gap-1 border-b">
          <UiCardTitle>Load History</UiCardTitle>
          <UiCardDescription> Prepended messages keep your place. </UiCardDescription>
          <UiCardAction>
            <UiTooltip>
              <UiTooltipTrigger as-child>
                <UiButton
                  type="button"
                  variant="outline"
                  size="icon"
                  aria-label="Reset loaded messages"
                  :disabled="!canReset"
                  @click="reset"
                >
                  <Icon name="lucide:rotate-cw" />
                </UiButton>
              </UiTooltipTrigger>
              <UiTooltipContent>
                <p>Reset</p>
              </UiTooltipContent>
            </UiTooltip>
          </UiCardAction>
        </UiCardHeader>
        <UiCardContent class="flex-1 overflow-hidden p-0">
          <UiMessageScroller :key="demoKey">
            <UiMessageScrollerViewport>
              <UiMessageScrollerContent class="p-6">
                <DocsMessageScrollerAnimatedItem
                  v-for="message in messages"
                  :key="message.id"
                  :message="message"
                  :scroll-anchor="message.role === 'user'"
                  user-variant="muted"
                  assistant-variant="ghost"
                />
                <UiMessageScrollerItem :scroll-anchor="false">
                  <UiMarker variant="separator">
                    <UiMarkerContent>End of Conversation</UiMarkerContent>
                  </UiMarker>
                </UiMessageScrollerItem>
              </UiMessageScrollerContent>
            </UiMessageScrollerViewport>
            <UiMessageScrollerButton />
          </UiMessageScroller>
        </UiCardContent>
        <UiCardFooter class="flex flex-col items-center gap-2 border-t">
          <UiButton
            type="button"
            :disabled="!canLoadHistory"
            class="w-full"
            variant="secondary"
            @click="loadHistory"
          >
            {{ canLoadHistory ? "Load History" : "History Loaded" }}
          </UiButton>
          <p class="text-muted-foreground text-xs">
            Restore earlier messages while keeping your place.
          </p>
        </UiCardFooter>
      </UiCard>
      <div class="text-muted-foreground mx-auto max-w-sm px-0.5 text-center text-xs text-balance">
        Click Load History to load the entire conversation
      </div>
    </div>
  </UiMessageScrollerProvider>
</template>

<script lang="ts" setup>
  const chat = createDemoChat()
    .user("Can you summarize the incident channel?")
    .assistant(
      "The first alert was a delayed export job. It started backing up around 09:42 UTC and triggered the warning once the retry queue crossed the threshold.\n\nNo customer-facing checkout paths were affected, but exports for larger workspaces were running about 12 minutes behind."
    )
    .user("Was checkout affected?")
    .assistant(
      "No checkout errors were reported. Payment authorization, order creation, and confirmation emails stayed inside their normal latency bands.\n\nThe only elevated metric was export queue depth, which maps to analytics downloads instead of checkout."
    )
    .user("What changed in the last deploy?")
    .assistant(
      "Only the export queue worker changed. The deploy moved large CSV jobs onto the shared retry policy, which made each failed attempt hold a worker slot longer than before.\n\nThe app deploy did not include checkout, pricing, or billing API changes."
    )
    .user("Do we need to roll back?")
    .assistant(
      "Not yet. Queue depth is recovering after we reduced retry concurrency, and the oldest pending job is now under five minutes old.\n\nKeep rollback ready if the queue starts climbing again, but the current trend points toward recovery."
    )
    .user("Keep watching for customer-visible issues.")
    .assistant(
      "I will watch the queue and support tags for another 15 minutes. I am tracking export failures, delayed download requests, and any support thread that mentions missing reports.\n\nIf those stay quiet through the next batch window, we can close this as an internal degradation."
    );

  const history: DemoMessage[] = chat.turns.map((turn, index) => ({
    id: `history-${index}`,
    role: turn.role,
    text: turn.text,
  }));
  const INITIAL_VISIBLE_COUNT = 5;

  const demoKey = ref(0);
  const messages = ref<DemoMessage[]>(history.slice(-INITIAL_VISIBLE_COUNT));

  const canLoadHistory = computed(() => messages.value.length < history.length);
  const canReset = computed(() => messages.value.length > INITIAL_VISIBLE_COUNT);

  function loadHistory() {
    // Prepend the earlier messages to the top; preserveScrollOnPrepend keeps
    // the viewport anchored so the reader's place does not jump.
    const remaining = history.slice(0, history.length - messages.value.length);
    messages.value.unshift(...remaining);
    useSonner("History loaded", {
      description: "Scroll up to see earlier messages.",
    });
  }

  function reset() {
    messages.value = history.slice(-INITIAL_VISIBLE_COUNT);
    demoKey.value += 1;
  }
</script>
```
::

### Animating New Messages

A common chat pattern is to animate the user's message when it is sent, then let the assistant reply stream into a regular row below it. Keep `messageId` and `scrollAnchor` on the animated item and use transform and opacity for the entrance — avoid animating height, margin, or padding, which can fight the scroller's positioning.

::prose-show-case
:docs-message-scroller-animation-demo

#code
```vue [DocsMessageScrollerAnimationDemo.vue]
<template>
  <div class="relative flex flex-col gap-4">
    <UiCard class="mx-auto h-140 w-full max-w-sm gap-0">
      <UiCardHeader class="border-b">
        <UiCardTitle>Animation</UiCardTitle>
        <UiCardDescription>
          Choose how user messages are animated when they are added to the conversation.
        </UiCardDescription>
        <UiCardAction class="flex items-center gap-2">
          <UiButton
            type="button"
            variant="outline"
            size="icon"
            aria-label="Reset animated messages"
            :disabled="messages.length === 0 || isBusy"
            class="rounded-full"
            @click="reset"
          >
            <Icon name="lucide:rotate-cw" />
          </UiButton>
        </UiCardAction>
      </UiCardHeader>
      <UiCardContent class="min-h-0 flex-1 overflow-hidden p-0">
        <UiEmpty v-if="messages.length === 0" class="h-full">
          <UiEmptyHeader>
            <UiEmptyMedia variant="icon">
              <Icon name="lucide:message-circle-dashed" />
            </UiEmptyMedia>
            <UiEmptyTitle>No Messages Yet</UiEmptyTitle>
            <UiEmptyDescription>
              Click the button below to send the first message.
            </UiEmptyDescription>
          </UiEmptyHeader>
        </UiEmpty>
        <UiMessageScrollerProvider v-else>
          <UiMessageScroller>
            <UiMessageScrollerViewport>
              <UiMessageScrollerContent :aria-busy="isBusy" class="p-6">
                <DocsMessageScrollerAnimatedItem
                  v-for="message in messages"
                  :key="message.id"
                  :message="message"
                  :animation-preset="presetId"
                  user-variant="muted"
                  assistant-variant="ghost"
                />
              </UiMessageScrollerContent>
            </UiMessageScrollerViewport>
            <UiMessageScrollerButton />
          </UiMessageScroller>
        </UiMessageScrollerProvider>
      </UiCardContent>
      <UiCardFooter class="gap-2 border-t">
        <UiSelect v-model="presetId">
          <UiSelectTrigger class="rounded-full" aria-label="Animation preset">
            <UiSelectValue>{{ presetName }}</UiSelectValue>
          </UiSelectTrigger>
          <UiSelectContent align="start" side="top">
            <UiSelectGroup>
              <UiSelectItem
                v-for="animation in MESSAGE_ANIMATION_PRESETS"
                :key="animation.id"
                :value="animation.id"
              >
                {{ animation.name }}
              </UiSelectItem>
            </UiSelectGroup>
          </UiSelectContent>
        </UiSelect>
        <UiButton
          type="button"
          size="icon"
          class="ml-auto rounded-full"
          :disabled="!nextMessage || isBusy"
          @click="onSend"
        >
          <Icon name="lucide:arrow-up" />
          <span class="sr-only">Send Message</span>
        </UiButton>
      </UiCardFooter>
    </UiCard>
    <div class="text-muted-foreground mx-auto max-w-sm px-0.5 text-center text-xs text-balance">
      Select an animation then click send to see it in action.
    </div>
  </div>
</template>

<script lang="ts" setup>
  const chat = createDemoChat()
    .user("Can user messages pop in like iMessage without breaking anchoring?")
    .assistant(
      "Yes. Animate the user row with transform and opacity, and let the assistant response stream normally below it.\n\nThat keeps the row measurement predictable while still giving the newly sent bubble a more tactile entrance."
    )
    .user("What makes the animation feel more like iMessage?")
    .assistant(
      "Use a quick spring from the trailing edge: a little scale, a small upward move, and no layout animation.\n\nThe bubble feels tactile, but the measured row stays predictable, so anchoring and auto-scroll do not have to fight a changing layout."
    )
    .user("Can I switch between presets while testing the same thread?")
    .assistant(
      "Yes. Keep the conversation in place while you change the preset, then send the next message to compare the new entrance against the same context.\n\nThat makes it easier to judge the difference between a subtle fade, a snappy pop, and a more dramatic 3D tilt without rebuilding the scenario each time."
    );

  const { messages, status, nextMessage, send, reset } = useMessageScrollerDemoChat(chat, {
    chunkDelayMs: 15,
  });

  const presetId = ref<MessageAnimationId>("fade");
  const isBusy = computed(() => status.value === "streaming");
  const presetName = computed(
    () => MESSAGE_ANIMATION_PRESETS.find((preset) => preset.id === presetId.value)?.name
  );

  function onSend() {
    if (!nextMessage.value || isBusy.value) return;
    send();
  }
</script>
```
::

### Jumping to Messages

Search results, permalinks, outline items, and toolbar buttons often need to drive the transcript from outside the message list. Use `useMessageScroller` for those controls — the composable reads from `UiMessageScrollerProvider`, so it works in any component inside the provider.

```vue
<script setup lang="ts">
  const { scrollToMessage, scrollToEnd, scrollToStart } = useMessageScroller();
</script>
```

::prose-show-case
:docs-message-scroller-commands-demo

#code
```vue [DocsMessageScrollerCommandsDemo.vue]
<template>
  <UiMessageScrollerProvider default-scroll-position="end">
    <div class="relative flex flex-col gap-4">
      <UiCard class="mx-auto h-140 w-full max-w-sm gap-0">
        <UiCardHeader class="gap-1 border-b">
          <UiCardTitle>Commands</UiCardTitle>
          <UiCardDescription> Drive the transcript from outside. </UiCardDescription>
          <UiCardAction>
            <DocsMessageScrollerCommandMenu :messages="messages" />
          </UiCardAction>
        </UiCardHeader>
        <UiCardContent class="flex-1 overflow-hidden p-0">
          <UiMessageScroller>
            <UiMessageScrollerViewport>
              <UiMessageScrollerContent class="p-6">
                <DocsMessageScrollerAnimatedItem
                  v-for="message in messages"
                  :key="message.id"
                  :message="message"
                  :scroll-anchor="message.role === 'user'"
                  user-variant="muted"
                  assistant-variant="ghost"
                />
              </UiMessageScrollerContent>
            </UiMessageScrollerViewport>
            <UiMessageScrollerButton />
          </UiMessageScroller>
        </UiCardContent>
      </UiCard>
      <div class="text-muted-foreground mx-auto max-w-sm px-0.5 text-center text-xs text-balance">
        Use the controls to jump to any message in the conversation.
      </div>
    </div>
  </UiMessageScrollerProvider>
</template>

<script lang="ts" setup>
  const messages: DemoMessage[] = [
    {
      id: "command-activation",
      role: "user",
      text: "We're seeing activation dip after workspace creation. Can you help me find the likely step?",
    },
    {
      id: "command-activation-reply",
      role: "assistant",
      text: "The sharpest drop is between creating the workspace and inviting the first teammate.\n\nWorkspace creation is still healthy, but the invite step is where users pause. That suggests the product is asking for collaboration before the user has enough confidence in the workspace.",
    },
    {
      id: "command-compare",
      role: "user",
      text: "What should I compare before we change the onboarding flow?",
    },
    {
      id: "command-compare-reply",
      role: "assistant",
      text: "Compare three cohorts:\n\n1. Users who choose a template before inviting teammates.\n2. Users who start from a blank workspace.\n3. Users who skip invites and return within 24 hours.\n\nIf template users invite faster, the fix is probably better first-run guidance rather than a louder invite prompt.",
    },
    {
      id: "command-experiment",
      role: "user",
      text: "Can you turn that into an experiment?",
    },
    {
      id: "command-experiment-reply",
      role: "assistant",
      text: "Yes. Create a variant that shows a short checklist after workspace creation:\n\n- Pick a template.\n- Add one project detail.\n- Invite a teammate when the workspace has context.\n\nMeasure first invite completion, 24-hour return rate, and whether teams create a second project.",
    },
    {
      id: "command-risk",
      role: "user",
      text: "What's the risk if we delay the invite prompt?",
    },
    {
      id: "command-risk-reply",
      role: "assistant",
      text: "The main risk is reducing team creation for accounts that already know who they want to invite.\n\nTo protect that path, keep the invite action visible in the header and only change the primary empty-state guidance. That gives confident teams a direct route without forcing uncertain users through the invite step too early.",
    },
  ];
</script>
```
::

### Tracking the Reader's Position

Use `useMessageScrollerVisibility` to track the reader's position — a table-of-contents or jump menu that highlights the current anchored turn. `currentAnchorId` answers "where am I" and stays set after that anchor scrolls above the viewport; `visibleMessageIds` answers "what is on screen", in document order.

::prose-show-case
:docs-message-scroller-visibility-demo

#code
```vue [DocsMessageScrollerVisibilityDemo.vue]
<template>
  <UiMessageScrollerProvider :scroll-margin="12">
    <div class="relative flex flex-col gap-4">
      <div class="relative mx-auto w-full max-w-sm">
        <UiCard class="h-140 w-full gap-0">
          <UiCardHeader class="gap-1 border-b">
            <UiCardTitle>Transcript Outline</UiCardTitle>
            <UiCardDescription> Track the current anchored turn. </UiCardDescription>
          </UiCardHeader>
          <UiCardContent class="flex-1 overflow-hidden p-0">
            <UiMessageScroller>
              <UiMessageScrollerViewport>
                <UiMessageScrollerContent class="p-6">
                  <DocsMessageScrollerAnimatedItem
                    v-for="message in messages"
                    :key="message.id"
                    :message="message"
                    :scroll-anchor="message.role === 'user'"
                    user-variant="muted"
                    assistant-variant="ghost"
                  />
                </UiMessageScrollerContent>
              </UiMessageScrollerViewport>
              <UiMessageScrollerButton />
            </UiMessageScroller>
          </UiCardContent>
        </UiCard>
        <div class="absolute top-1/2 -right-12 -translate-y-1/2">
          <DocsMessageScrollerTranscriptOutline :messages="messages" />
        </div>
      </div>
      <div class="text-muted-foreground mx-auto max-w-sm px-0.5 text-center text-xs">
        Open the outline to jump between anchored turns as you read.
      </div>
    </div>
  </UiMessageScrollerProvider>
</template>

<script lang="ts" setup>
  const messages: DemoMessage[] = [
    {
      id: "vis-brief",
      role: "user",
      text: "Review the incident handoff and tell me what to read first.",
    },
    {
      id: "vis-brief-reply",
      role: "assistant",
      text: "Start with the summary and the impact section. The regression affected the upload queue, but the recovery path completed for every queued job.",
    },
    {
      id: "vis-impact",
      role: "user",
      text: "What was the customer impact?",
    },
    {
      id: "vis-impact-reply",
      role: "assistant",
      text: "Impact was limited to delayed processing.\n\nNo records were dropped, and the reconciliation worker confirmed each retry batch. Support saw confusion from two customers, but there were no checkout or billing errors.",
    },
    {
      id: "vis-actions",
      role: "user",
      text: "What actions are open?",
    },
    {
      id: "vis-actions-reply",
      role: "assistant",
      text: "Keep the retry window enabled until the next deploy, then add a queue-depth alert as the long-term fix.\n\nThe alert should fire on sustained queue growth, not a single short spike.",
    },
    {
      id: "vis-checklist",
      role: "user",
      text: "Give me the follow-up checklist.",
    },
    {
      id: "vis-checklist-reply",
      role: "assistant",
      text: "After that, compare the queue recovery graph with the deploy timeline so the handoff shows exactly when processing returned to baseline. That makes it easier for support and engineering to answer the same customer questions without re-reading the whole incident thread.\n\nI would also add a short owner note beside each follow-up item. The checklist is small, but ownership keeps the retry-window decision, alert tuning, and support macro from drifting into separate follow-up conversations.\n\nKeep the retry window enabled until the next deploy, then add a queue-depth alert as the long-term fix.\n\nThe alert should fire on sustained queue growth, not a single short spike.",
    },
  ];
</script>
```
::

### Reading Scroll State

Use `useMessageScrollerScrollable` when you need scroll state in JavaScript, such as a status indicator or a custom "jump to latest" control. It reports which edges the viewport can still scroll toward.

::prose-show-case
:docs-message-scroller-scrollable-demo

#code
```vue [DocsMessageScrollerScrollableDemo.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-4">
    <UiCard class="h-140 w-full gap-0 overflow-hidden">
      <UiCardHeader class="gap-1 border-b">
        <UiCardTitle>Scroll Status</UiCardTitle>
        <UiCardDescription>
          Where the reader can scroll to based on current scroll position.
        </UiCardDescription>
      </UiCardHeader>
      <UiMessageScrollerProvider default-scroll-position="start">
        <UiCardContent class="flex-1 overflow-hidden p-0">
          <UiMessageScroller>
            <UiMessageScrollerViewport>
              <UiMessageScrollerContent class="gap-4 p-6">
                <DocsMessageScrollerAnimatedItem
                  v-for="message in messages"
                  :key="message.id"
                  :message="message"
                  :scroll-anchor="message.role === 'user'"
                  user-variant="muted"
                  assistant-variant="ghost"
                />
              </UiMessageScrollerContent>
            </UiMessageScrollerViewport>
            <UiMessageScrollerButton />
          </UiMessageScroller>
        </UiCardContent>
        <DocsMessageScrollerScrollStateFooter />
      </UiMessageScrollerProvider>
    </UiCard>
    <div class="text-muted-foreground px-0.5 text-center text-xs">
      Scroll the transcript to see the footer update.
    </div>
  </div>
</template>

<script lang="ts" setup>
  const messages: DemoMessage[] = Array.from({ length: 12 }, (_, index) => ({
    id: `scrollable-${index + 1}`,
    role: index % 2 === 0 ? "user" : "assistant",
    text:
      index % 2 === 0
        ? `Review scroll checkpoint ${index + 1}.`
        : `Checkpoint ${index + 1} is synced. The scrollable hook updates as the viewport moves.\n\nWhen the reader is at the first message, the footer should only point them down. Once they move into the middle of the transcript, it should explain that both directions are available.\n\nAt the latest message, the footer should switch again and only point them back up.`,
  }));
</script>
```
::

## API Reference

All Message Scroller parts render a `<div>` by default, except `MessageScrollerButton`, which renders a [`Button`](https://uithing.com/components/button).

### MessageScrollerProvider

Owns the scroll state and behavior. Descendants read from it with `useMessageScroller`, `useMessageScrollerScrollable`, and `useMessageScrollerVisibility`.

| Prop                     | Type                              | Default | Description                                                     |
| ------------------------ | --------------------------------- | ------- | --------------------------------------------------------------- |
| `autoScroll`             | `boolean`                         | `false` | Follow the live edge while the reader is pinned to the bottom.  |
| `defaultScrollPosition`  | `"start" | "end" | "last-anchor"` | `"end"` | Opening position for the transcript.                            |
| `scrollEdgeThreshold`    | `number`                          | `8`     | Distance in px from an edge before it is considered scrollable. |
| `scrollPreviousItemPeek` | `number`                          | `64`    | Amount in px of the previous turn kept visible when anchoring.  |
| `scrollMargin`           | `number`                          | `0`     | Extra offset in px applied when scrolling to an element.        |

### MessageScroller

The scroll region's outer wrapper. Needs a constrained height (or a height-bounded parent) so its viewport can scroll.

| Prop    | Type                      | Default | Description                                      |
| ------- | ------------------------- | ------- | ------------------------------------------------ |
| `class` | `HTMLAttributes["class"]` | -       | Additional classes to apply to the root element. |

### MessageScrollerViewport

The scrollable region. Renders as a `role="region"`, `aria-label="Messages"`, focusable (`tabindex="0"`) native scroll container.

| Prop                      | Type                      | Default | Description                                          |
| ------------------------- | ------------------------- | ------- | ---------------------------------------------------- |
| `preserveScrollOnPrepend` | `boolean`                 | `true`  | Keep the current view when messages are added above. |
| `class`                   | `HTMLAttributes["class"]` | -       | Additional classes to apply to the viewport.         |

### MessageScrollerContent

Renders as `role="log"` with `aria-relevant="additions"` so assistive tech announces new rows.

| Prop          | Type                      | Default | Description                                         |
| ------------- | ------------------------- | ------- | --------------------------------------------------- |
| `class`       | `HTMLAttributes["class"]` | -       | Additional classes to apply to the content element. |
| `spacerClass` | `HTMLAttributes["class"]` | -       | Additional classes to apply to the trailing spacer. |

### MessageScrollerItem

| Prop           | Type                      | Default | Description                                          |
| -------------- | ------------------------- | ------- | ---------------------------------------------------- |
| `messageId`    | `string`                  | -       | Stable id used for anchoring, visibility, and jumps. |
| `scrollAnchor` | `boolean`                 | `false` | Marks this row as the start of a turn.               |
| `class`        | `HTMLAttributes["class"]` | -       | Additional classes to apply to the item.             |

### MessageScrollerButton

Exposes `data-active` for styling and becomes `inert` with `tabindex="-1"` when there is nothing to scroll toward.

| Prop        | Type                        | Default       | Description                          |
| ----------- | --------------------------- | ------------- | ------------------------------------ |
| `direction` | `"start" | "end"`           | `"end"`       | Direction the button scrolls toward. |
| `behavior`  | `ScrollBehavior`            | `"smooth"`    | Scroll behavior for the jump.        |
| `variant`   | `ButtonVariants["variant"]` | `"secondary"` | The button variant.                  |
| `size`      | `ButtonVariants["size"]`    | `"icon-sm"`   | The button size.                     |
| `class`     | `HTMLAttributes["class"]`   | -             | Additional classes to apply.         |

### Composables

#### useMessageScroller()

```ts
const { scrollToMessage, scrollToEnd, scrollToStart } = useMessageScroller();
```

- `scrollToMessage(id, options?)` — scroll to the item with the matching `messageId`. Returns `true` if handled (queued if the item is not mounted yet), `false` if the id is missing after rows have mounted.
- `scrollToEnd(options?)` / `scrollToStart(options?)` — scroll to the live edge or the top.

#### useMessageScrollerVisibility()

```ts
const visibility = useMessageScrollerVisibility();
// visibility.value.currentAnchorId, visibility.value.visibleMessageIds
```

Tracking only runs while something subscribes, and rows need a `messageId` to participate.

#### useMessageScrollerScrollable()

```ts
const scrollable = useMessageScrollerScrollable();
// scrollable.value.start, scrollable.value.end
```

Reports which edges the viewport can still scroll toward. For styling the scroller itself, prefer the `data-scrollable` attribute.


# Nav

## Credits

This component is a port of the one created by [Intent UI](https://intentui.com/docs/components/layouts/navbar){rel="&#x22;nofollow&#x22;"}. Thanks to them for their work!

## Source code

Click :source-code-link{component="Nav"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add nav
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add nav
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add nav
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add nav
```
::

## Usage

### Default

::prose-show-case
:docs-nav1

#code
```vue [DocsNav1.vue]
<template>
  <div>
    <!-- Reusable User Menu -->
    <DefineUserMenu>
      <UiDropdownMenu>
        <UiDropdownMenuTrigger as-child>
          <UiButton variant="ghost" size="icon-sm">
            <UiAvatar>
              <UiAvatarImage src="https://behonbaker.com/icon.png" alt="Behon Baker" />
              <UiAvatarFallback>BB</UiAvatarFallback>
            </UiAvatar>
          </UiButton>
        </UiDropdownMenuTrigger>
        <UiDropdownMenuContent class="w-52" align="end">
          <UiDropdownMenuLabel class="flex font-normal">
            <div class="flex flex-col space-y-1">
              <p class="text-sm leading-none font-medium">Behon Baker</p>
              <p class="text-muted-foreground text-xs leading-none">behon.baker.com</p>
            </div>
          </UiDropdownMenuLabel>
          <UiDropdownMenuSeparator />
          <UiDropdownMenuGroup>
            <UiDropdownMenuItem title="Profile" shortcut="⇧⌘P" />
            <UiDropdownMenuItem title="Billing" shortcut="⌘B" />
            <UiDropdownMenuItem title="Settings" shortcut="⌘S" />
            <UiDropdownMenuItem title="New Team" />
          </UiDropdownMenuGroup>
          <UiDropdownMenuSeparator />
          <UiDropdownMenuItem title="Help" shortcut="?" />
          <UiDropdownMenuItem title="Keyboard Shortcuts" shortcut="⇧?" />
          <UiDropdownMenuSeparator />
          <UiDropdownMenuItem title="Log out" shortcut="⇧⌘Q" variant="destructive" />
        </UiDropdownMenuContent>
      </UiDropdownMenu>
    </DefineUserMenu>
    <UiNavProvider>
      <UiNav>
        <UiNavStart>
          <NuxtLink
            class="flex items-center gap-x-2 text-base font-black"
            aria-label="Goto documentation of Nav"
            to="/components/nav"
          >
            <NuxtImg src="/icon.png" class="size-6 rounded sm:size-5" />
            <span> UI Thing </span>
          </NuxtLink>
        </UiNavStart>
        <UiNavGap />
        <UiNavSection>
          <UiNavItem :to="route.path">Home</UiNavItem>
          <UiNavItem class="@max-[768px]/nav-provider:hidden" href="#">Shop</UiNavItem>
          <UiNavItem class="@max-[768px]/nav-provider:hidden" href="#">Offers</UiNavItem>
          <UiNavItem class="@max-[768px]/nav-provider:hidden" href="#">Orders</UiNavItem>
          <UiDropdownMenu>
            <UiDropdownMenuTrigger as-child>
              <UiNavItem>
                Categories
                <Icon name="lucide:chevron-down" class="col-start-3" />
              </UiNavItem>
            </UiDropdownMenuTrigger>
            <UiDropdownMenuContent class="min-w-(--reka-dropdown-menu-trigger-width) sm:min-w-56">
              <UiDropdownMenuGroup>
                <UiDropdownMenuItem
                  v-for="(item, i) in categories"
                  :key="i"
                  :text-value="item.label"
                  as-child
                >
                  <NuxtLink :to="item.url">
                    {{ item.label }}
                  </NuxtLink>
                </UiDropdownMenuItem>
              </UiDropdownMenuGroup>
            </UiDropdownMenuContent>
          </UiDropdownMenu>
        </UiNavSection>
        <UiNavSpacer />
        <UiNavSection class="max-md:hidden">
          <UiButton variant="ghost" size="icon-sm" aria-label="Search for products">
            <Icon name="lucide:search" />
          </UiButton>
          <UiButton variant="ghost" size="icon-sm" aria-label="Your Bag">
            <Icon name="lucide:shopping-bag" />
          </UiButton>
          <UiNavSeparator class="mr-2.5" />
          <UserMenu />
        </UiNavSection>
      </UiNav>
      <UiNavMobile>
        <UiNavTrigger />
        <UiNavSpacer />
        <UiButton variant="ghost" size="icon-sm" aria-label="Search for products">
          <Icon name="lucide:search" />
        </UiButton>
        <UiButton variant="ghost" size="icon-sm" aria-label="Your Bag">
          <Icon name="lucide:shopping-bag" />
        </UiButton>
        <UiNavSeparator class="mr-2.5" />
        <UserMenu />
      </UiNavMobile>
    </UiNavProvider>
    <UiContainer class="py-6 sm:py-12">
      <UiHeading>Default Nav</UiHeading>
    </UiContainer>
  </div>
</template>

<script lang="ts" setup>
  const route = useRoute();
  const [DefineUserMenu, UserMenu] = createReusableTemplate();

  const categories = [
    {
      id: 1,
      label: "Electronics",
      url: "#",
    },
    {
      id: 2,
      label: "Fashion",
      url: "#",
    },
    {
      id: 3,
      label: "Home & Kitchen",
      url: "#",
    },
    {
      id: 4,
      label: "Sports",
      url: "#",
    },
    {
      id: 5,
      label: "Books",
      url: "#",
    },
    {
      id: 6,
      label: "Beauty & Personal Care",
      url: "#",
    },
    {
      id: 7,
      label: "Grocery",
      url: "#",
    },
    {
      id: 8,
      label: "Toys & Games",
      url: "#",
    },
    {
      id: 9,
      label: "Automotive",
      url: "#",
    },
    {
      id: 10,
      label: "Health & Wellness",
      url: "#",
    },
  ];
</script>
```
::

### Inset

::prose-show-case
:docs-nav-inset

#code
```vue [DocsNavInset.vue]
<template>
  <div>
    <!-- Reusable User Menu -->
    <DefineUserMenu>
      <UiDropdownMenu>
        <UiDropdownMenuTrigger as-child>
          <UiButton variant="ghost" size="icon-sm">
            <UiAvatar>
              <UiAvatarImage src="https://behonbaker.com/icon.png" alt="Behon Baker" />
              <UiAvatarFallback>BB</UiAvatarFallback>
            </UiAvatar>
          </UiButton>
        </UiDropdownMenuTrigger>
        <UiDropdownMenuContent class="w-52" align="end">
          <UiDropdownMenuLabel class="flex font-normal">
            <div class="flex flex-col space-y-1">
              <p class="text-sm leading-none font-medium">Behon Baker</p>
              <p class="text-muted-foreground text-xs leading-none">behon.baker.com</p>
            </div>
          </UiDropdownMenuLabel>
          <UiDropdownMenuSeparator />
          <UiDropdownMenuGroup>
            <UiDropdownMenuItem title="Profile" shortcut="⇧⌘P" />
            <UiDropdownMenuItem title="Billing" shortcut="⌘B" />
            <UiDropdownMenuItem title="Settings" shortcut="⌘S" />
            <UiDropdownMenuItem title="New Team" />
          </UiDropdownMenuGroup>
          <UiDropdownMenuSeparator />
          <UiDropdownMenuItem title="Help" shortcut="?" />
          <UiDropdownMenuItem title="Keyboard Shortcuts" shortcut="⇧?" />
          <UiDropdownMenuSeparator />
          <UiDropdownMenuItem title="Log out" shortcut="⇧⌘Q" variant="destructive" />
        </UiDropdownMenuContent>
      </UiDropdownMenu>
    </DefineUserMenu>
    <UiNavProvider>
      <UiNav intent="inset">
        <UiNavStart>
          <NuxtLink
            class="flex items-center gap-x-2 text-base font-black"
            aria-label="Goto documentation of Nav"
            to="/components/nav"
          >
            <NuxtImg src="/icon.png" class="size-6 rounded sm:size-5" />
            <span> UI Thing </span>
          </NuxtLink>
        </UiNavStart>
        <UiNavGap />
        <UiNavSection>
          <UiNavItem :to="route.path">Home</UiNavItem>
          <UiNavItem class="@max-[768px]/nav-provider:hidden" href="#">Shop</UiNavItem>
          <UiNavItem class="@max-[768px]/nav-provider:hidden" href="#">Offers</UiNavItem>
          <UiNavItem href="#">Orders</UiNavItem>
        </UiNavSection>
        <UiNavSpacer />
        <UiNavSection class="max-md:hidden">
          <UiButton variant="ghost" size="icon-sm" aria-label="Search for products">
            <Icon name="lucide:search" />
          </UiButton>
          <UiButton variant="ghost" size="icon-sm" aria-label="Your Bag">
            <Icon name="lucide:shopping-bag" />
          </UiButton>
          <UiNavSeparator class="mr-2.5" />
          <UserMenu />
        </UiNavSection>
      </UiNav>
      <UiNavMobile>
        <UiNavTrigger />
        <UiNavSpacer />
        <UiButton variant="ghost" size="icon-sm" aria-label="Search for products">
          <Icon name="lucide:search" />
        </UiButton>
        <UiButton variant="ghost" size="icon-sm" aria-label="Your Bag">
          <Icon name="lucide:shopping-bag" />
        </UiButton>
        <UiNavSeparator class="mr-2.5" />
        <UserMenu />
      </UiNavMobile>
    </UiNavProvider>
    <UiNavInset>
      <UiContainer class="py-6 sm:py-12">
        <UiHeading>Inset Nav</UiHeading>
      </UiContainer>
    </UiNavInset>
  </div>
</template>

<script lang="ts" setup>
  const route = useRoute();
  const [DefineUserMenu, UserMenu] = createReusableTemplate();
</script>
```
::

### Floating

::prose-show-case
:docs-nav-floating

#code
```vue [DocsNavFloating.vue]
<template>
  <div>
    <!-- Reusable User Menu -->
    <DefineUserMenu>
      <UiDropdownMenu>
        <UiDropdownMenuTrigger as-child>
          <UiButton variant="ghost" size="icon-sm">
            <UiAvatar>
              <UiAvatarImage src="https://behonbaker.com/icon.png" alt="Behon Baker" />
              <UiAvatarFallback>BB</UiAvatarFallback>
            </UiAvatar>
          </UiButton>
        </UiDropdownMenuTrigger>
        <UiDropdownMenuContent class="w-52" align="end">
          <UiDropdownMenuLabel class="flex font-normal">
            <div class="flex flex-col space-y-1">
              <p class="text-sm leading-none font-medium">Behon Baker</p>
              <p class="text-muted-foreground text-xs leading-none">behon.baker.com</p>
            </div>
          </UiDropdownMenuLabel>
          <UiDropdownMenuSeparator />
          <UiDropdownMenuGroup>
            <UiDropdownMenuItem title="Profile" shortcut="⇧⌘P" />
            <UiDropdownMenuItem title="Billing" shortcut="⌘B" />
            <UiDropdownMenuItem title="Settings" shortcut="⌘S" />
            <UiDropdownMenuItem title="New Team" />
          </UiDropdownMenuGroup>
          <UiDropdownMenuSeparator />
          <UiDropdownMenuItem title="Help" shortcut="?" />
          <UiDropdownMenuItem title="Keyboard Shortcuts" shortcut="⇧?" />
          <UiDropdownMenuSeparator />
          <UiDropdownMenuItem title="Log out" shortcut="⇧⌘Q" variant="destructive" />
        </UiDropdownMenuContent>
      </UiDropdownMenu>
    </DefineUserMenu>
    <UiNavProvider>
      <UiNav intent="float">
        <UiNavStart>
          <NuxtLink
            class="flex items-center gap-x-2 text-base font-black"
            aria-label="Goto documentation of Nav"
            to="/components/nav"
          >
            <NuxtImg src="/icon.png" class="size-6 rounded sm:size-5" />
            <span> UI Thing </span>
          </NuxtLink>
        </UiNavStart>
        <UiNavGap />
        <UiNavSection>
          <UiNavItem :to="route.path">Home</UiNavItem>
          <UiNavItem class="@max-[768px]/nav-provider:hidden" href="#">Shop</UiNavItem>
          <UiNavItem class="@max-[768px]/nav-provider:hidden" href="#">Offers</UiNavItem>
          <UiNavItem href="#">Orders</UiNavItem>
        </UiNavSection>
        <UiNavSpacer />
        <UiNavSection class="max-md:hidden">
          <UiButton variant="ghost" size="icon-sm" aria-label="Search for products">
            <Icon name="lucide:search" />
          </UiButton>
          <UiButton variant="ghost" size="icon-sm" aria-label="Your Bag">
            <Icon name="lucide:shopping-bag" />
          </UiButton>
          <UiNavSeparator class="mr-2.5" />
          <UserMenu />
        </UiNavSection>
      </UiNav>
      <UiNavMobile>
        <UiNavTrigger />
        <UiNavSpacer />
        <UiButton variant="ghost" size="icon-sm" aria-label="Search for products">
          <Icon name="lucide:search" />
        </UiButton>
        <UiButton variant="ghost" size="icon-sm" aria-label="Your Bag">
          <Icon name="lucide:shopping-bag" />
        </UiButton>
        <UiNavSeparator class="mr-2.5" />
        <UserMenu />
      </UiNavMobile>
    </UiNavProvider>

    <UiContainer class="py-6 sm:py-12">
      <UiHeading>Floating Nav</UiHeading>
    </UiContainer>
  </div>
</template>

<script lang="ts" setup>
  const route = useRoute();
  const [DefineUserMenu, UserMenu] = createReusableTemplate();
</script>
```
::


# Navbar

## Source code

Click :source-code-link{component="Navbar.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add navbar
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add navbar
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add navbar
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add navbar
```
::

## Usage

### Basic

::prose-show-case
:docs-navbar

#code
```vue [DocsNavbar.vue]
<template>
  <div>
    <UiNavbar>
      <UiContainer class="flex h-14 items-center justify-between border border-b-0">
        <p class="font-semibold">UI Thing</p>
        <nav class="hidden items-center gap-5 sm:flex">
          <NuxtLink
            v-for="l in ['Home', 'About', 'Contact', 'Projects']"
            :key="l"
            class="text-muted-foreground hover:text-foreground text-sm transition-colors"
            to="/"
            >{{ l }}</NuxtLink
          >
        </nav>
      </UiContainer>
    </UiNavbar>
  </div>
</template>
```
::

## Origin UI

### One

::prose-show-case
:docs-origin-navbar1

#code
```vue [DocsOriginNavbar1.vue]
<template>
  <header class="border-b px-4">
    <div class="flex h-16 items-center justify-between gap-4">
      <!-- Left side -->
      <div class="flex items-center gap-2">
        <!-- Mobile menu trigger  -->
        <UiPopover>
          <UiPopoverTrigger as-child>
            <UiButton class="group size-8 md:hidden" variant="ghost" size="icon">
              <svg
                class="pointer-events-none"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M4 12L20 12"
                  class="origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]"
                />
                <path
                  d="M4 12H20"
                  class="origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45"
                />
                <path
                  d="M4 12H20"
                  class="origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]"
                />
              </svg>
            </UiButton>
          </UiPopoverTrigger>
          <UiPopoverContent align="start" class="w-36 p-1 md:hidden">
            <UiNavigationMenu class="max-w-none *:w-full">
              <UiNavigationMenuList class="flex-col items-start gap-0 md:gap-2">
                <UiNavigationMenuItem
                  v-for="(link, index) in navigationLinks"
                  :key="index"
                  class="w-full"
                >
                  <UiNavigationMenuLink :href="link.href" class="py-1.5" :active="link.active">
                    {{ link.label }}
                  </UiNavigationMenuLink>
                </UiNavigationMenuItem>
              </UiNavigationMenuList>
            </UiNavigationMenu>
          </UiPopoverContent>
        </UiPopover>
        <!-- Main nav -->
        <div class="flex items-center gap-6">
          <a href="#" class="text-primary hover:text-primary/90">
            <svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" fill="currentColor">
              <path
                d="M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z"
              />
              <path
                d="M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z"
              />
            </svg>
          </a>
          <!-- Navigation menu  -->
          <UiNavigationMenu class="max-md:hidden">
            <UiNavigationMenuList class="gap-2">
              <UiNavigationMenuItem v-for="(link, index) in navigationLinks" :key="index">
                <UiNavigationMenuLink
                  :active="link.active"
                  :href="link.href"
                  class="text-muted-foreground hover:text-primary py-1.5 font-medium"
                >
                  {{ link.label }}
                </UiNavigationMenuLink>
              </UiNavigationMenuItem>
            </UiNavigationMenuList>
          </UiNavigationMenu>
        </div>
      </div>
      <!-- Right side -->
      <div class="flex items-center gap-2">
        <UiButton as-child variant="ghost" size="sm" class="text-sm">
          <NuxtLink href="#">Sign In</NuxtLink>
        </UiButton>
        <UiButton as-child size="sm" class="text-sm">
          <NuxtLink href="#">Get Started</NuxtLink>
        </UiButton>
      </div>
    </div>
  </header>
</template>

<script lang="ts" setup>
  // Navigation links array to be used in both desktop and mobile menus
  const navigationLinks = [
    { href: "#", label: "Home", active: true },
    { href: "#", label: "Features" },
    { href: "#", label: "Pricing" },
  ];
</script>
```
::

### Two

::prose-show-case
:docs-origin-navbar2

#code
```vue [DocsOriginNavbar2.vue]
<template>
  <header class="@container border-b px-4 md:px-6">
    <div class="flex h-16 items-center justify-between gap-4">
      <!--Left side -->
      <div class="flex items-center gap-2">
        <!--Mobile menu trigger -->
        <UiPopover>
          <UiPopoverTrigger as-child>
            <UiButton class="group size-8 @[450px]:hidden" variant="ghost" size="icon">
              <svg
                class="pointer-events-none"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M4 12L20 12"
                  class="origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]"
                />
                <path
                  d="M4 12H20"
                  class="origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45"
                />
                <path
                  d="M4 12H20"
                  class="origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]"
                />
              </svg>
            </UiButton>
          </UiPopoverTrigger>
          <UiPopoverContent align="start" class="w-64 p-1 @[450px]:hidden">
            <UiNavigationMenu class="max-w-none *:w-full">
              <UiNavigationMenuList class="flex-col items-start gap-0 md:gap-2">
                <UiNavigationMenuItem
                  v-for="(link, index) in navigationLinks"
                  :key="index"
                  class="w-full"
                >
                  <template v-if="link.submenu">
                    <div class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
                      {{ link.label }}
                    </div>
                    <ul>
                      <li v-for="(item, itemIndex) in link.items" :key="itemIndex">
                        <UiNavigationMenuLink :href="item.href" class="py-1.5">
                          {{ item.label }}
                        </UiNavigationMenuLink>
                      </li>
                    </ul>
                  </template>
                  <template v-else>
                    <UiNavigationMenuLink :href="link.href" class="py-1.5">
                      {{ link.label }}
                    </UiNavigationMenuLink>
                  </template>
                  <template v-if="index < navigationLinks.length - 1">
                    <template
                      v-if="
                        (!link.submenu && navigationLinks?.[index + 1]?.submenu) ||
                        (link.submenu && !navigationLinks?.[index + 1]?.submenu) ||
                        (link.submenu &&
                          navigationLinks[index + 1]?.submenu &&
                          link.type !== navigationLinks[index + 1]?.type)
                      "
                    >
                      <div
                        role="separator"
                        aria-orientation="horizontal"
                        class="bg-border -mx-1 my-1 h-px w-full"
                      />
                    </template>
                  </template>
                </UiNavigationMenuItem>
              </UiNavigationMenuList>
            </UiNavigationMenu>
          </UiPopoverContent>
        </UiPopover>
        <!--Main nav -->
        <div class="flex items-center gap-6">
          <NuxtLink href="#" class="text-primary hover:text-primary/90">
            <svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" fill="currentColor">
              <path
                d="M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z"
              />
              <path
                d="M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z"
              />
            </svg>
          </NuxtLink>
          <!--Navigation menu -->
          <UiNavigationMenu :viewport="false" class="@max-[450px]:hidden">
            <UiNavigationMenuList class="gap-2">
              <UiNavigationMenuItem v-for="(link, index) in navigationLinks" :key="index">
                <!--Check if link has a submenu -->
                <template v-if="link.submenu">
                  <UiNavigationMenuTrigger
                    class="text-muted-foreground hover:text-primary bg-transparent px-2 py-1.5 font-medium *:[svg]:-me-0.5 *:[svg]:size-3.5"
                  >
                    {{ link.label }}
                  </UiNavigationMenuTrigger>
                  <UiNavigationMenuContent
                    class="data-[motion=from-end]:slide-in-from-right-16! data-[motion=from-start]:slide-in-from-left-16! data-[motion=to-end]:slide-out-to-right-16! data-[motion=to-start]:slide-out-to-left-16! z-50 p-1"
                  >
                    <ul :class="link.type === 'description' ? 'min-w-64' : 'min-w-48'">
                      <li v-for="(item, itemIndex) in link.items" :key="itemIndex">
                        <UiNavigationMenuLink :href="item.href" class="py-1.5">
                          <!--Display icon if present -->
                          <div class="flex items-center gap-2">
                            <template v-if="link.type == 'icon' && 'icon' in item">
                              <Icon
                                v-if="item.icon"
                                :name="item.icon"
                                class="text-foreground size-4 opacity-60"
                                aria-hidden="true"
                              />
                              <span>{{ item.label }}</span>
                            </template>
                          </div>

                          <!--Display label with description if present -->

                          <template v-if="link.type == 'description' && 'description' in item">
                            <div class="space-y-1">
                              <div class="font-medium">{{ item.label }}</div>
                              <p class="text-muted-foreground line-clamp-2 text-xs">
                                {{ item.description }}
                              </p>
                            </div>
                          </template>

                          <!-- Display simple label if not icon or description type -->
                          <template
                            v-else-if="
                              !link.type || (link.type !== 'icon' && link.type !== 'description')
                            "
                          >
                            <span>{{ item.label }}</span></template
                          >
                        </UiNavigationMenuLink>
                      </li>
                    </ul>
                  </UiNavigationMenuContent>
                </template>
                <template v-else>
                  <UiNavigationMenuLink
                    :href="link?.href"
                    class="text-muted-foreground hover:text-primary py-1.5 font-medium"
                  >
                    {{ link.label }}
                  </UiNavigationMenuLink>
                </template>
              </UiNavigationMenuItem>
            </UiNavigationMenuList>
          </UiNavigationMenu>
        </div>
      </div>
      <!--Right side -->
      <div class="flex items-center gap-2">
        <UiButton as-child size="sm" class="@[450px]:text-sm">
          <a href="#">Get Started</a>
        </UiButton>
      </div>
    </div>
  </header>
</template>

<script lang="ts" setup>
  type Nav = {
    label: string;
    href?: string;
    submenu?: boolean;
    type?: "description" | "simple" | "icon";
    items?: {
      href: string;
      label: string;
      description?: string;
      icon?: string; // Icon name for lucide icons
    }[];
  };
  // Navigation links array to be used in both desktop and mobile menus
  const navigationLinks: Nav[] = [
    {
      label: "Features",
      submenu: true,
      type: "description",
      items: [
        {
          href: "#",
          label: "Components",
          description: "Browse all components in the library.",
        },
        {
          href: "#",
          label: "Documentation",
          description: "Learn how to use the library.",
        },
        {
          href: "#",
          label: "Templates",
          description: "Pre-built layouts for common use cases.",
        },
      ],
    },
    {
      label: "Pricing",
      submenu: true,
      type: "simple",
      items: [
        { href: "#", label: "Product A" },
        { href: "#", label: "Product B" },
        { href: "#", label: "Product C" },
        { href: "#", label: "Product D" },
      ],
    },
    {
      label: "About",
      submenu: true,
      type: "icon",
      items: [
        { href: "#", label: "Getting Started", icon: "lucide:book-open" },
        { href: "#", label: "Tutorials", icon: "lucide:life-buoy" },
        { href: "#", label: "About Us", icon: "lucide:info" },
      ],
    },
  ];
</script>
```
::

### Three

::prose-show-case
:docs-origin-navbar3

#code
```vue [DocsOriginNavbar3.vue]
<template>
  <header class="@container border-b px-4 md:px-6">
    <div class="flex h-16 justify-between gap-4">
      <!--Left side -->
      <div class="flex gap-2">
        <div class="flex items-center @[450px]:hidden">
          <!--Mobile menu trigger -->
          <UiPopover>
            <UiPopoverTrigger as-child>
              <UiButton class="group size-8" variant="ghost" size="icon">
                <svg
                  class="pointer-events-none"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M4 12L20 12"
                    class="origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]"
                  />
                  <path
                    d="M4 12H20"
                    class="origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45"
                  />
                  <path
                    d="M4 12H20"
                    class="origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]"
                  />
                </svg>
              </UiButton>
            </UiPopoverTrigger>
            <UiPopoverContent align="start" class="w-36 p-1 @[450px]:hidden">
              <UiNavigationMenu class="max-w-none *:w-full">
                <UiNavigationMenuList class="flex-col items-start gap-0 @[450px]:gap-2">
                  <UiNavigationMenuItem
                    v-for="(link, index) in navigationLinks"
                    :key="index"
                    class="w-full"
                  >
                    <UiNavigationMenuLink :href="link.href" class="py-1.5" :active="link.active">
                      {{ link.label }}
                    </UiNavigationMenuLink>
                  </UiNavigationMenuItem>
                </UiNavigationMenuList>
              </UiNavigationMenu>
            </UiPopoverContent>
          </UiPopover>
        </div>
        <!--Main nav -->
        <div class="flex items-center gap-6">
          <a href="#" class="text-primary hover:text-primary/90">
            <svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" fill="currentColor">
              <path
                d="M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z"
              />
              <path
                d="M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z"
              />
            </svg>
          </a>
          <!--Navigation menu -->
          <UiNavigationMenu class="h-full *:h-full @max-[450px]:hidden">
            <UiNavigationMenuList class="h-full gap-2">
              <UiNavigationMenuItem
                v-for="(link, index) in navigationLinks"
                :key="index"
                class="h-full"
              >
                <UiNavigationMenuLink
                  :active="link.active"
                  :href="link.href"
                  :data-active="link.active"
                  class="text-muted-foreground hover:border-b-primary hover:text-primary data-[active=true]:border-b-primary h-full justify-center rounded-none border-y-2 border-transparent py-1.5 font-medium hover:bg-transparent data-[active=true]:bg-transparent!"
                >
                  {{ link.label }}
                </UiNavigationMenuLink>
              </UiNavigationMenuItem>
            </UiNavigationMenuList>
          </UiNavigationMenu>
        </div>
      </div>
      <!--Right side -->
      <div class="flex items-center gap-2">
        <UiButton as-child variant="ghost" size="sm" class="text-sm">
          <a href="#">Sign In</a>
        </UiButton>
        <UiButton as-child size="sm" class="text-sm">
          <a href="#">Get Started</a>
        </UiButton>
      </div>
    </div>
  </header>
</template>

<script lang="ts" setup>
  // Navigation links array to be used in both desktop and mobile menus
  const navigationLinks = [
    { href: "#", label: "Home", active: true },
    { href: "#", label: "Pricing" },
    { href: "#", label: "About" },
  ];
</script>
```
::


# Navigation Menu

## Source code

Click :source-code-link{component="NavigationMenu"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add navigation-menu
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add navigation-menu
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add navigation-menu
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add navigation-menu
```
::

## Anatomy

```vue
<template>
  <UiNavigationMenu>
    <UiNavigationMenuList>
      <UiNavigationMenuItem>
        <UiNavigationMenuTrigger />
        <UiNavigationMenuContent>
          <NavigationMenuLink />
        </UiNavigationMenuContent>
      </UiNavigationMenuItem>

      <UiNavigationMenuItem>
        <NavigationMenuLink />
      </UiNavigationMenuItem>

      <UiNavigationMenuItem>
        <UiNavigationMenuTrigger />
        <UiNavigationMenuContent>
          <UiNavigationMenuSub>
            <UiNavigationMenuList />
          </UiNavigationMenuSub>
        </UiNavigationMenuContent>
      </UiNavigationMenuItem>
    </UiNavigationMenuList>
  </UiNavigationMenu>
</template>
```

## Usage

### Horizontal Navigation Menu

The default orientation of the Navigation Menu is horizontal.

::prose-show-case
:docs-navigation-menu

#code
```vue [DocsNavigationMenu.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiNavigationMenu>
      <UiNavigationMenuList>
        <UiNavigationMenuItem>
          <UiNavigationMenuTrigger title="Beach day" />
          <UiNavigationMenuContent>
            <div class="grid w-[600px] grid-cols-2 gap-5 p-4">
              <img
                src="https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"
                alt="Beach"
                class="h-full w-full rounded-md object-cover"
              />
              <ul class="flex flex-col gap-2">
                <li
                  v-for="(item, i) in beachAmenities"
                  :key="i"
                  class="hover:bg-muted rounded-md p-3 text-sm"
                >
                  <p class="text-foreground mb-1 leading-none font-semibold">{{ item.title }}</p>
                  <p class="text-muted-foreground line-clamp-2">{{ item.description }}</p>
                </li>
              </ul>
            </div>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>
        <UiNavigationMenuItem>
          <UiNavigationMenuTrigger title="Components" />
          <UiNavigationMenuContent>
            <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
              <DocsNavigationMenuListItem
                v-for="item in components"
                :key="item.title"
                :title="item.title"
                :href="item.href"
              >
                {{ item.description }}
              </DocsNavigationMenuListItem>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>
        <UiNavigationMenuItem>
          <UiNavigationMenuTrigger title="Learn more" />
          <UiNavigationMenuContent>
            <div class="grid h-[300px] w-[500px] grid-cols-2 place-items-center gap-5 p-3">
              <img
                src="https://www.reka-ui.com/logo.svg"
                alt="Radix Vue Logo"
                class="h-full w-full"
              />
              <div>
                <p class="text-foreground text-lg font-semibold">Radix Vue</p>
                <p class="text-muted-foreground mt-2">
                  Unstyled, accessible components for building high-quality design systems and web
                  apps in Vue.
                </p>
              </div>
            </div>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>
        <UiNavigationMenuItem>
          <UiNavigationMenuLink as-child>
            <UiButton variant="ghost">Documentation</UiButton>
          </UiNavigationMenuLink>
        </UiNavigationMenuItem>
      </UiNavigationMenuList>
    </UiNavigationMenu>
  </div>
</template>

<script lang="ts" setup>
  const beachAmenities = [
    {
      title: "Sun",
      description: "The Sun is the star at the center of the Solar System.",
    },
    {
      title: "Sand",
      description:
        "Sand is a granular material composed of finely divided rock and mineral particles.",
    },
    {
      title: "Water",
      description:
        "Water is an inorganic, transparent, tasteless, odorless, and nearly colorless chemical substance.",
    },
  ];
  const components: { title: string; href: string; description: string }[] = [
    {
      title: "Alert Dialog",
      href: "/components/alertdialog",
      description:
        "A modal dialog that interrupts the user with important content and expects a response.",
    },
    {
      title: "Hover Card",
      href: "/components/hovercard",
      description: "For sighted users to preview content available behind a link.",
    },
    {
      title: "Progress",
      href: "/components/progress",
      description:
        "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
    },
    {
      title: "Scroll-area",
      href: "/components/scrollarea",
      description: "Visually or semantically separates content.",
    },
    {
      title: "Tabs",
      href: "/components/tabs",
      description:
        "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
    },
    {
      title: "Tooltip",
      href: "/components/tooltip",
      description:
        "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
    },
  ];
</script>
```
::

### Shadcn UI

The default orientation of the Navigation Menu is horizontal.

::prose-show-case
:docs-navigation-menu-shadcn

#code
```vue [DocsNavigationMenuShadcn.vue]
<template>
  <div>
    <DefineListItem v-slot="{ title, href, $slots }">
      <li>
        <UiNavigationMenuLink as-child>
          <NuxtLink :href>
            <div class="text-sm leading-none font-medium">{{ title }}</div>
            <p class="text-muted-foreground line-clamp-2 text-sm leading-snug">
              <component :is="$slots.default" />
            </p>
          </NuxtLink>
        </UiNavigationMenuLink>
      </li>
    </DefineListItem>

    <!-- Actual component example -->
    <UiNavigationMenu :viewport="false">
      <UiNavigationMenuList>
        <UiNavigationMenuItem>
          <UiNavigationMenuTrigger>Home</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <ul class="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
              <li class="row-span-3">
                <UiNavigationMenuLink as-child>
                  <a
                    class="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md"
                    href="/"
                  >
                    <div class="mt-4 mb-2 text-lg font-medium">shadcn/ui</div>
                    <p class="text-muted-foreground text-sm leading-tight">
                      Beautifully designed components built with Tailwind CSS.
                    </p>
                  </a>
                </UiNavigationMenuLink>
              </li>
              <ListItem href="/docs" title="Introduction">
                Re-usable components built using Radix UI and Tailwind CSS.
              </ListItem>
              <ListItem href="/docs/installation" title="Installation">
                How to install dependencies and structure your app.
              </ListItem>
              <ListItem href="/docs/primitives/typography" title="Typography">
                Styles for headings, paragraphs, lists...etc
              </ListItem>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>
        <UiNavigationMenuItem>
          <UiNavigationMenuTrigger>Components</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <ul class="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
              <template v-for="item in components" :key="item.title">
                <ListItem :title="item.title" :href="item.href">
                  {{ item.description }}
                </ListItem>
              </template>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>
        <UiNavigationMenuItem>
          <UiNavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
            <NuxtLink href="/docs">Docs</NuxtLink>
          </UiNavigationMenuLink>
        </UiNavigationMenuItem>
        <UiNavigationMenuItem>
          <UiNavigationMenuTrigger>List</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <ul class="grid w-[300px] gap-4">
              <li>
                <UiNavigationMenuLink as-child>
                  <NuxtLink href="#">
                    <div class="font-medium">Components</div>
                    <div class="text-muted-foreground">Browse all components in the library.</div>
                  </NuxtLink>
                </UiNavigationMenuLink>
                <UiNavigationMenuLink as-child>
                  <NuxtLink href="#">
                    <div class="font-medium">Documentation</div>
                    <div class="text-muted-foreground">Learn how to use the library.</div>
                  </NuxtLink>
                </UiNavigationMenuLink>
                <UiNavigationMenuLink as-child>
                  <NuxtLink href="#">
                    <div class="font-medium">Blog</div>
                    <div class="text-muted-foreground">Read our latest blog posts.</div>
                  </NuxtLink>
                </UiNavigationMenuLink>
              </li>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>
        <UiNavigationMenuItem>
          <UiNavigationMenuTrigger>Simple</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <ul class="grid w-[200px] gap-4">
              <li>
                <UiNavigationMenuLink as-child>
                  <NuxtLink href="#">Components</NuxtLink>
                </UiNavigationMenuLink>
                <UiNavigationMenuLink as-child>
                  <NuxtLink href="#">Documentation</NuxtLink>
                </UiNavigationMenuLink>
                <UiNavigationMenuLink as-child>
                  <NuxtLink href="#">Blocks</NuxtLink>
                </UiNavigationMenuLink>
              </li>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>
        <UiNavigationMenuItem>
          <UiNavigationMenuTrigger>With Icon</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <ul class="grid w-[200px] gap-4">
              <li>
                <UiNavigationMenuLink as-child>
                  <NuxtLink href="#" class="flex-row items-center gap-2">
                    <Icon name="lucide:circle-help" />
                    Backlog
                  </NuxtLink>
                </UiNavigationMenuLink>
                <UiNavigationMenuLink as-child>
                  <NuxtLink href="#" class="flex-row items-center gap-2">
                    <Icon name="lucide:circle" />
                    To Do
                  </NuxtLink>
                </UiNavigationMenuLink>
                <UiNavigationMenuLink as-child>
                  <NuxtLink href="#" class="flex-row items-center gap-2">
                    <Icon name="lucide:circle-check" />
                    Done
                  </NuxtLink>
                </UiNavigationMenuLink>
              </li>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>
      </UiNavigationMenuList>
    </UiNavigationMenu>
  </div>
</template>

<script lang="ts" setup>
  import { navigationMenuTriggerStyle } from "~/components/Ui/NavigationMenu/Trigger.vue";

  const components: { title: string; href: string; description: string }[] = [
    {
      title: "Alert Dialog",
      href: "/docs/primitives/alert-dialog",
      description:
        "A modal dialog that interrupts the user with important content and expects a response.",
    },
    {
      title: "Hover Card",
      href: "/docs/primitives/hover-card",
      description: "For sighted users to preview content available behind a link.",
    },
    {
      title: "Progress",
      href: "/docs/primitives/progress",
      description:
        "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
    },
    {
      title: "Scroll-area",
      href: "/docs/primitives/scroll-area",
      description: "Visually or semantically separates content.",
    },
    {
      title: "Tabs",
      href: "/docs/primitives/tabs",
      description:
        "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
    },
    {
      title: "Tooltip",
      href: "/docs/primitives/tooltip",
      description:
        "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
    },
  ];

  const [DefineListItem, ListItem] = createReusableTemplate({
    props: {
      title: String,
      href: String,
    },
  });
</script>
```
::


# Number Field

## Source code

Click :source-code-link{component="NumberField"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add number-field
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add number-field
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add number-field
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add number-field
```
::

## Usage

### Basic

::prose-show-case
:docs-number-field

#code
```vue [DocsNumberField.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <div class="max-w-[120px]">
      <UiNumberField />
    </div>
  </div>
</template>
```
::

### Disabled

::prose-show-case
:docs-number-field-disabled

#code
```vue [DocsNumberFieldDisabled.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <div class="max-w-[120px]">
      <UiNumberField disabled />
    </div>
  </div>
</template>
```
::

### Decimal

::prose-show-case
:docs-number-field-decimal

#code
```vue [DocsNumberFieldDecimal.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <div class="max-w-[150px]">
      <UiNumberField
        :default-value="5"
        :min="0"
        :format-options="{
          signDisplay: 'exceptZero',
          minimumFractionDigits: 1,
        }"
      />
    </div>
  </div>
</template>
```
::

### Percent

::prose-show-case
:docs-number-field-percent

#code
```vue [DocsNumberFieldPercent.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <div class="max-w-[150px]">
      <UiNumberField
        :default-value="0.1"
        :min="0"
        :max="1"
        :step="0.01"
        :format-options="{
          style: 'percent',
        }"
      />
    </div>
  </div>
</template>
```
::

### Currency

::prose-show-case
:docs-number-field-currency

#code
```vue [DocsNumberFieldCurrency.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <div class="max-w-[200px]">
      <UiNumberField
        :default-value="20_000"
        :min="0"
        :max="30_000"
        :format-options="{
          style: 'currency',
          currency: 'JMD',
        }"
      />
    </div>
  </div>
</template>
```
::

### Custom

::prose-show-case
:docs-number-field-custom

#code
```vue [DocsNumberFieldCustom.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <div class="max-w-[150px]">
      <UiNumberField :min="0">
        <UiNumberFieldInput placeholder="15" />
        <UiNumberFieldDecrement class="border-l" />
        <UiNumberFieldIncrement class="border-l" />
      </UiNumberField>
    </div>
  </div>
</template>
```
::


# Pagination

## Source code

Click :source-code-link{component="Pagination"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add pagination
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add pagination
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add pagination
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add pagination
```
::

## Anatomy

```vue
<template>
  <UiPagination>
    <UiPaginationList v-slot="{ items }">
      <UiPaginationFirst asChild :icon="firstIcon" />
      <UiPaginationPrev asChild :icon="prevIcon" />

      <template v-for="(page, index) in items" :key="index">
        <UiPaginationItem asChild v-if="page.type === 'page'" v-bind="page" />
        <UiPaginationEllipsis
          asChild
          v-else-if="page.type === 'ellipsis'"
          v-bind="page"
          :icon="ellipsisIcon"
        />
      </template>

      <UiPaginationNext asChild :icon="nextIcon" />
      <UiPaginationLast asChild :icon="lastIcon" />
    </UiPaginationList>
  </UiPagination>
</template>
```

## Usage

### Full example

::prose-show-case
:docs-pagination

#code
```vue [DocsPagination.vue]
<template>
  <div class="flex w-full justify-center">
    <UiPagination :items-per-page="10" :total="100" :sibling-count="1" />
  </div>
</template>
```
::

## Origin UI Examples

These are some examples that I found today over here [Origin UI](https://originui.com/breadcrumbs-paginations){rel="&#x22;nofollow&#x22;" target="\_blank"} ❤️. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

### Apart

::prose-show-case
:docs-pagination-apart

#code
```vue [DocsPaginationApart.vue]
<template>
  <div class="flex w-full flex-col items-center gap-10">
    <UiPagination :total="2" :items-per-page="1" class="mx-auto w-full max-w-md">
      <UiPaginationList class="w-full justify-between">
        <UiPaginationPrev as-child>
          <UiButton variant="outline" size="default">
            <span class="sr-only">Previous</span>
            <Icon name="lucide:chevron-left" class="size-4" />
            Previous
          </UiButton>
        </UiPaginationPrev>
        <UiPaginationNext as-child>
          <UiButton variant="outline" size="default">
            <span class="sr-only">Next</span>
            Next
            <Icon name="lucide:chevron-right" class="size-4" />
          </UiButton>
        </UiPaginationNext>
      </UiPaginationList>
    </UiPagination>
    <UiPagination :total="2" :items-per-page="1" class="mx-auto w-full max-w-md">
      <UiPaginationList class="w-full justify-between">
        <UiPaginationPrev as-child>
          <UiButton class="group" variant="ghost" size="default">
            <span class="sr-only">Previous</span>
            <Icon
              name="lucide:arrow-left"
              class="size-4 transition-transform group-hover:-translate-x-0.5"
            />
            Previous
          </UiButton>
        </UiPaginationPrev>
        <UiPaginationNext as-child>
          <UiButton class="group" variant="ghost" size="default">
            <span class="sr-only">Next</span>
            Next
            <Icon
              name="lucide:arrow-right"
              class="size-4 transition-transform group-hover:translate-x-0.5"
            />
          </UiButton>
        </UiPaginationNext>
      </UiPaginationList>
    </UiPagination>
  </div>
</template>
```
::

### Info Center

::prose-show-case
:docs-pagination-info-center

#code
```vue [DocsPaginationInfoCenter.vue]
<template>
  <div class="flex flex-col items-center gap-10">
    <UiPagination v-model:page="page1" :total :items-per-page class="mx-auto w-full max-w-md">
      <UiPaginationList class="w-full justify-between">
        <UiPaginationPrev as-child>
          <UiButton variant="outline" size="icon-sm">
            <span class="sr-only">Previous</span>
            <Icon name="lucide:chevron-left" class="size-4" />
          </UiButton>
        </UiPaginationPrev>
        <div class="text-muted-foreground text-sm">
          Page <span class="text-foreground">{{ page1 }}</span> of
          <span class="text-foreground">{{ itemsPerPage }}</span>
        </div>
        <UiPaginationNext as-child>
          <UiButton variant="outline" size="icon-sm">
            <span class="sr-only">Next</span>
            <Icon name="lucide:chevron-right" class="size-4" />
          </UiButton>
        </UiPaginationNext>
      </UiPaginationList>
    </UiPagination>
    <UiPagination v-model:page="page2" :total :items-per-page class="mx-auto w-full max-w-md">
      <UiPaginationList class="w-full justify-between gap-5">
        <UiPaginationPrev as-child>
          <UiButton variant="ghost" size="icon-sm">
            <span class="sr-only">Previous</span>
            <Icon name="lucide:chevron-left" class="size-4" />
          </UiButton>
        </UiPaginationPrev>
        <div class="text-muted-foreground text-sm">
          Page <span class="text-foreground">{{ page2 }}</span> of
          <span class="text-foreground">{{ itemsPerPage }}</span>
        </div>
        <UiPaginationNext as-child>
          <UiButton variant="ghost" size="icon-sm">
            <span class="sr-only">Next</span>
            <Icon name="lucide:chevron-right" class="size-4" />
          </UiButton>
        </UiPaginationNext>
      </UiPaginationList>
    </UiPagination>
  </div>
</template>

<script lang="ts" setup>
  const page1 = ref(1);
  const page2 = ref(1);
  const total = 100;
  const itemsPerPage = 10;
</script>
```
::

### Info Start & End

::prose-show-case
:docs-pagination-info-start-end

#code
```vue [DocsPaginationInfoStartEnd.vue]
<template>
  <div class="mx-auto flex w-full max-w-md flex-col items-center gap-10">
    <UiPagination v-model:page="page1" :total :items-per-page>
      <UiPaginationList class="w-full justify-between">
        <div class="text-muted-foreground text-sm">
          Page <span class="text-foreground">{{ page1 }}</span> of
          <span class="text-foreground">{{ itemsPerPage }}</span>
        </div>
        <div class="flex items-center gap-3">
          <UiPaginationPrev as-child>
            <UiButton variant="outline" size="sm">
              <span>Previous</span>
            </UiButton>
          </UiPaginationPrev>
          <UiPaginationNext as-child>
            <UiButton variant="outline" size="sm">
              <span>Next</span>
            </UiButton>
          </UiPaginationNext>
        </div>
      </UiPaginationList>
    </UiPagination>
    <UiPagination v-model:page="page1" :total :items-per-page class="mx-auto w-full max-w-md">
      <UiPaginationList class="w-full justify-between">
        <div class="text-muted-foreground text-sm">
          Page <span class="text-foreground">{{ page1 }}</span> of
          <span class="text-foreground">{{ itemsPerPage }}</span>
        </div>
        <div class="flex items-center gap-3">
          <UiPaginationPrev as-child>
            <UiButton variant="outline" size="icon-sm">
              <span class="sr-only">Previous</span>
              <Icon name="lucide:arrow-left" class="size-4" />
            </UiButton>
          </UiPaginationPrev>
          <UiPaginationNext as-child>
            <UiButton variant="outline" size="icon-sm">
              <span class="sr-only">Next</span>
              <Icon name="lucide:arrow-right" class="size-4" />
            </UiButton>
          </UiPaginationNext>
        </div>
      </UiPaginationList>
    </UiPagination>
    <UiPagination v-model:page="page2" :total :items-per-page class="mx-auto w-full max-w-md">
      <UiPaginationList class="w-full justify-between">
        <div class="flex items-center gap-3">
          <UiPaginationPrev as-child>
            <UiButton variant="outline" size="sm">
              <span>Previous</span>
            </UiButton>
          </UiPaginationPrev>
          <UiPaginationNext as-child>
            <UiButton variant="outline" size="sm">
              <span>Next</span>
            </UiButton>
          </UiPaginationNext>
        </div>
        <div class="text-muted-foreground text-sm">
          Page <span class="text-foreground">{{ page2 }}</span> of
          <span class="text-foreground">{{ itemsPerPage }}</span>
        </div>
      </UiPaginationList>
    </UiPagination>
    <UiPagination v-model:page="page2" :total :items-per-page class="mx-auto w-full max-w-md">
      <UiPaginationList class="w-full justify-between">
        <div class="flex items-center gap-3">
          <UiPaginationPrev as-child>
            <UiButton variant="outline" size="icon-sm">
              <span class="sr-only">Previous</span>
              <Icon name="lucide:arrow-left" class="size-4" />
            </UiButton>
          </UiPaginationPrev>
          <UiPaginationNext as-child>
            <UiButton variant="outline" size="icon-sm">
              <span class="sr-only">Next</span>
              <Icon name="lucide:arrow-right" class="size-4" />
            </UiButton>
          </UiPaginationNext>
        </div>
        <div class="text-muted-foreground text-sm">
          Page <span class="text-foreground">{{ page2 }}</span> of
          <span class="text-foreground">{{ itemsPerPage }}</span>
        </div>
      </UiPaginationList>
    </UiPagination>
  </div>
</template>

<script lang="ts" setup>
  const page1 = ref(1);
  const page2 = ref(1);
  const total = 100;
  const itemsPerPage = 10;
</script>
```
::

### Bootstrap

::prose-show-case
:docs-pagination-bootstrap

#code
```vue [DocsPaginationBootstrap.vue]
<template>
  <div class="flex flex-col items-center gap-10">
    <UiPagination v-model:page="page1" :items-per-page :sibling-count="1" :total class="mx-auto">
      <UiPaginationList v-slot="{ items }" class="gap-0 rounded-lg border">
        <UiPaginationPrev class="h-full rounded-e-none" as-child icon="lucide:chevron-left" />
        <template v-for="(page, index) in items" :key="index">
          <UiPaginationItem v-if="page.type === 'page'" as-child v-bind="page">
            <UiButton
              class="data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground dark:data-[selected=true]:bg-primary dark:data-[selected=true]:text-primary-foreground size-9 rounded-none border-0 shadow-none dark:bg-transparent"
              variant="outline"
              size="icon-sm"
              >{{ page.value }}</UiButton
            >
          </UiPaginationItem>
          <UiPaginationEllipsis
            v-else-if="page.type === 'ellipsis'"
            as-child
            v-bind="page"
            icon="lucide:ellipsis"
          />
        </template>
        <UiPaginationNext class="h-full rounded-s-none" as-child icon="lucide:chevron-right" />
      </UiPaginationList>
    </UiPagination>
  </div>
</template>

<script lang="ts" setup>
  const page1 = ref(6);
  const total = 100;
  const itemsPerPage = 10;
</script>
```
::

### Table

::prose-show-case
:docs-pagination-table

#code
```vue [DocsPaginationTable.vue]
<template>
  <div class="@container flex w-full items-center justify-between gap-5">
    <div class="flex items-center gap-3">
      <UiLabel :for="id1" class="hidden text-sm @[450px]:inline-block">Rows per page</UiLabel>
      <UiSelect v-model="itemsPerPage">
        <UiSelectTrigger :id="id1" class="h-8 w-fit whitespace-nowrap" />
        <UiSelectContent class="min-w-fit">
          <UiSelectItem v-for="item in selectOptions" :key="item" :text="item" :value="item" />
        </UiSelectContent>
      </UiSelect>
    </div>
    <div class="text-muted-foreground grow text-right text-sm whitespace-nowrap">
      <span class="text-foreground">{{ page1 }}</span> of
      <span class="text-foreground">{{ pageTotal }}</span>
    </div>
    <div>
      <UiPagination
        v-model:page="page1"
        :items-per-page="Number(itemsPerPage)"
        :sibling-count="1"
        :total
      >
        <UiPaginationList class="justify-end">
          <UiPaginationFirst as-child variant="outline" icon="lucide:chevron-first" />
          <UiPaginationPrev as-child variant="outline" icon="lucide:chevron-left" />
          <UiPaginationNext as-child variant="outline" icon="lucide:chevron-right" />
          <UiPaginationLast as-child variant="outline" icon="lucide:chevron-last" />
        </UiPaginationList>
      </UiPagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const page1 = ref(1);
  const total = 100;
  const itemsPerPage = ref("10");
  const id1 = useId();

  const selectOptions = ["10", "20", "50", "100"];

  const pageTotal = computed(() => Math.ceil(total / Number(itemsPerPage.value)));
</script>
```
::


# Pin Input

## Source code

Click :source-code-link{component="PinInput"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add pin-input
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add pin-input
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add pin-input
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add pin-input
```
::

## Usage

### Placeholder

Passing a value to the placeholder prop will render a placeholder character in each input.

::prose-show-case
:docs-pin-input

#code
```vue [DocsPinInput.vue]
<template>
  <div class="flex items-center justify-center">
    <UiLabel class="flex flex-col items-start">
      <p class="mb-3 text-sm font-medium">Placeholder</p>
      <UiPinInput placeholder="0" />
    </UiLabel>
  </div>
</template>
```
::

### Separator

Passing a value to the separator prop will render a separator character between each input.

::prose-show-case
:docs-pin-input-separator

#code
```vue [DocsPinInputSeparator.vue]
<template>
  <div class="flex items-center justify-center">
    <UiLabel class="flex flex-col items-start">
      <p class="mb-3 text-sm font-medium">Separator</p>
      <UiPinInput :input-count="6" separator="-" />
    </UiLabel>
  </div>
</template>
```
::

### Complete event

The complete event is emitted when the user has entered a value in all inputs.

::prose-show-case
:docs-pin-input-complete

#code
```vue [DocsPinInputComplete.vue]
<template>
  <div class="flex items-center justify-center">
    <UiLabel class="flex flex-col items-start">
      <p class="mb-3 text-sm font-medium">Enter OTP sent to your email</p>
      <UiPinInput :input-count="5" type="number" @complete="useSonner.success('OTP Complete')" />
    </UiLabel>
  </div>
</template>
```
::

### Origin UI

::prose-show-case
:docs-pin-input-origin

#code
```vue [DocsPinInputOrigin.vue]
<template>
  <div class="mx-auto grid max-w-xs grid-cols-1 gap-10">
    <div class="flex flex-col gap-3">
      <UiLabel for="otp-single">OTP input single</UiLabel>
      <UiPinInput id="otp-single">
        <UiPinInputGroup>
          <template v-for="(item, i) in 4" :key="i">
            <UiPinInputInput
              :index="i"
              class="rounded-s-none rounded-e-none border-l-0 will-change-[box-shadow] first:rounded-s-md first:border-l last:rounded-e-md focus:z-20 focus:border-l"
            />
          </template>
        </UiPinInputGroup>
      </UiPinInput>
    </div>
    <div class="flex flex-col gap-3">
      <UiLabel for="otp-double">OTP input double</UiLabel>
      <UiPinInput id="otp-double" otp>
        <UiPinInputGroup>
          <template v-for="(item, n) in [1, 2, 3]" :key="n">
            <UiPinInputInput
              :index="n"
              class="rounded-s-none rounded-e-none border-l-0 will-change-[box-shadow] first:rounded-s-md first:border-l last:rounded-e-md focus:z-20 focus:border-l"
            />
          </template>
        </UiPinInputGroup>
        <Icon name="lucide:minus" />
        <UiPinInputGroup>
          <template v-for="(item, n) in [4, 5, 6]" :key="n">
            <UiPinInputInput
              :index="n + 3"
              class="rounded-s-none rounded-e-none border-l-0 will-change-[box-shadow] first:rounded-s-md first:border-l last:rounded-e-md focus:z-20 focus:border-l"
            />
          </template>
        </UiPinInputGroup>
      </UiPinInput>
    </div>
  </div>
</template>
```
::


# Placeholder

## Source code

Click :source-code-link{component="Placeholder.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add placeholder
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add placeholder
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add placeholder
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add placeholder
```
::

## Usage

::prose-show-case
:docs-placeholder

#code
```vue [DocsPlaceholder.vue]
<template>
  <div>
    <UiPlaceholder class="h-[400px]" />
  </div>
</template>
```
::


# Pointer Highlight

## Source code

Click :source-code-link{component="PointerHighlight.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add pointer-highlight
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add pointer-highlight
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add pointer-highlight
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add pointer-highlight
```
::

## Usage

### Inline text

::prose-show-case
:docs-pointer-highlight-inline

#code
```vue [DocsPointerHighlightInline.vue]
<template>
  <div class="mx-auto max-w-lg py-20 text-2xl font-bold tracking-tight md:text-4xl">
    The best way to grow is to
    <UiPointerHighlight container-class="mx-1 inline-block align-middle">
      <span>collaborate</span>
    </UiPointerHighlight>
  </div>
</template>
```
::

### Basic example

::prose-show-case
:docs-pointer-highlight-basic

#code
```vue [DocsPointerHighlightBasic.vue]
<template>
  <div class="flex justify-center py-10">
    <UiPointerHighlight>
      <div>
        <p class="text-lg font-semibold">Everything important deserves a little attention.</p>
      </div>
    </UiPointerHighlight>
  </div>
</template>
```
::

### Animated background

::prose-show-case
:docs-pointer-highlight-background

#code
```vue [DocsPointerHighlightBackground.vue]
<template>
  <div class="mx-auto max-w-lg py-20 text-2xl font-bold tracking-tight md:text-4xl">
    There has to be some
    <UiPointerHighlight
      rectangle-class="bg-neutral-200 dark:bg-neutral-700 border-neutral-300 dark:border-neutral-600"
      pointer-class="text-yellow-500"
    >
      <span class="relative z-10">background to animate too</span>
    </UiPointerHighlight>
  </div>
</template>
```
::

### Styled card

::prose-show-case
:docs-pointer-highlight-card

#code
```vue [DocsPointerHighlightCard.vue]
<template>
  <div class="flex justify-center py-10">
    <UiPointerHighlight
      container-class="rounded-lg"
      rectangle-class="rounded-lg border-primary/60"
      pointer-class="text-primary"
    >
      <UiCard
        class="from-background via-muted/40 to-background m-1! w-full max-w-[320px] rounded-lg border-dashed bg-linear-to-br py-0"
      >
        <UiCardHeader class="border-b py-6">
          <UiCardTitle>Early access invite</UiCardTitle>
          <UiCardDescription>
            Join the next release preview and test features before they ship.
          </UiCardDescription>
        </UiCardHeader>
        <UiCardContent class="space-y-4 py-6">
          <p class="text-muted-foreground text-sm">
            Get early builds, changelog previews, and a private feedback channel with the team.
          </p>
          <UiButton class="w-full">Request invite</UiButton>
        </UiCardContent>
      </UiCard>
    </UiPointerHighlight>
  </div>
</template>
```
::

### Marketing grid

::prose-show-case
:docs-pointer-highlight-marketing

#code
```vue [DocsPointerHighlightMarketing.vue]
<template>
  <div class="mx-auto grid max-w-4xl grid-cols-1 gap-4 py-20 sm:grid-cols-3">
    <div class="rounded-md p-6">
      <div class="h-40 w-full rounded-lg bg-linear-to-r from-blue-200 to-sky-200" />
      <div class="mx-auto mt-4 max-w-lg text-base font-bold tracking-tight md:text-base">
        <UiPointerHighlight
          container-class="mr-1 inline-block align-middle"
          rectangle-class="rounded-xl border-neutral-300 bg-neutral-200 leading-loose dark:border-neutral-600 dark:bg-neutral-700"
          pointer-class="size-3 text-yellow-500"
        >
          <span class="relative z-10">collab tool</span>
        </UiPointerHighlight>
        of the century with max benefits and minimal effort.
      </div>
      <p class="mt-4 text-sm text-neutral-500 dark:text-neutral-400">
        Our state of the art collab tool of the century with max benefits.
      </p>
    </div>

    <div class="rounded-md p-6">
      <div class="h-40 w-full rounded-lg bg-linear-to-r from-blue-200 to-purple-200" />
      <div class="mx-auto mt-4 max-w-lg text-base font-bold tracking-tight md:text-base">
        Discover our
        <UiPointerHighlight
          container-class="mx-1 inline-block align-middle"
          rectangle-class="rounded-xl border-blue-300 bg-blue-100 leading-loose dark:border-blue-700 dark:bg-blue-900"
          pointer-class="size-3 text-blue-500"
        >
          <span class="relative z-10">innovative </span>
        </UiPointerHighlight>
        solutions for your business needs.
      </div>
      <p class="mt-4 text-sm text-neutral-500 dark:text-neutral-400">
        Transforming ideas into reality with cutting-edge technology and expert guidance.
      </p>
    </div>

    <div class="rounded-md p-6">
      <div class="h-40 w-full rounded-lg bg-linear-45 from-green-200 to-yellow-200" />
      <div class="mx-auto mt-4 max-w-lg text-base font-bold tracking-tight md:text-base">
        Experience the future with our
        <UiPointerHighlight
          container-class="ml-1 inline-block align-middle"
          rectangle-class="rounded-xl border-green-300 bg-green-100 leading-loose dark:border-green-700 dark:bg-green-900"
          pointer-class="size-3 text-green-500"
        >
          <span class="relative z-10">sustainable technology</span>
        </UiPointerHighlight>
        .
      </div>
      <p class="mt-4 text-sm text-neutral-500 dark:text-neutral-400">
        Eco-friendly solutions designed for a better tomorrow and reduced environmental impact.
      </p>
    </div>
  </div>
</template>
```
::

### Class customization

Use `containerClass`, `rectangleClass`, and `pointerClass` to control the spacing and appearance of the highlight treatment.

::prose-show-case
:docs-pointer-highlight-classes

#code
```vue [DocsPointerHighlightClasses.vue]
<template>
  <div class="grid gap-8 py-10 @4xl:grid-cols-3">
    <div class="flex justify-center">
      <UiPointerHighlight container-class="rounded-[2rem] bg-muted/40 ">
        <UiButton variant="outline" class="m-4! rounded-xl">Container spacing</UiButton>
      </UiPointerHighlight>
    </div>

    <div class="flex justify-center">
      <UiPointerHighlight
        rectangle-class="rounded-2xl border-dashed border-emerald-500/70 shadow-[0_0_0_1px_rgba(16,185,129,0.2)]"
      >
        <div class="bg-card rounded-2xl border px-6 py-4 text-sm font-medium">Custom rectangle</div>
      </UiPointerHighlight>
    </div>

    <div class="flex justify-center">
      <UiPointerHighlight
        pointer-class="text-rose-500 size-6 drop-shadow-[0_0_12px_rgba(244,63,94,0.45)]"
      >
        <div class="bg-primary/10 text-primary rounded-2xl px-6 py-4 text-sm font-medium">
          Custom pointer
        </div>
      </UiPointerHighlight>
    </div>
  </div>
</template>
```
::


# Popover

## Source code

Click :source-code-link{component="Popover"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add popover
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add popover
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add popover
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add popover
```
::

## Anatomy

```vue
<template>
  <UiPopover>
    <UiPopoverTrigger />
    <UiPopoverContent>
      <!-- Some markup -->
    </UiPopoverContent>
  </UiPopover>
</template>
```

## Usage

### Full example

::prose-show-case
:docs-popover

#code
```vue [DocsPopover.vue]
<template>
  <div class="flex w-full justify-center">
    <UiPopover>
      <UiPopoverTrigger as-child>
        <UiButton variant="outline">Open popover</UiButton>
      </UiPopoverTrigger>
      <UiPopoverContent class="w-80 p-6">
        <div class="flex h-full flex-col gap-1.5">
          <p class="leading-none font-semibold">Dimensions</p>
          <p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
          <div class="mt-5 grid gap-3">
            <div class="grid grid-cols-3 items-center gap-4">
              <UiLabel for="width">Width</UiLabel>
              <UiInput id="width" type="text" value="100%" class="col-span-2 h-8" />
            </div>
            <div class="grid grid-cols-3 items-center gap-4">
              <UiLabel for="maxWidth">Max. width</UiLabel>
              <UiInput id="maxWidth" type="text" value="300px" class="col-span-2 h-8" />
            </div>
            <div class="grid grid-cols-3 items-center gap-4">
              <UiLabel for="height">Height</UiLabel>
              <UiInput id="height" type="text" value="25px" class="col-span-2 h-8" />
            </div>
            <div class="grid grid-cols-3 items-center gap-4">
              <UiLabel for="maxHeight">Max. height</UiLabel>
              <UiInput id="maxHeight" type="text" value="none" class="col-span-2 h-8" />
            </div>
          </div>
        </div>
      </UiPopoverContent>
    </UiPopover>
  </div>
</template>
```
::

### Origin UI

::prose-show-case
:docs-popover-origin

#code
```vue [DocsPopoverOrigin.vue]
<template>
  <div class="grid grid-cols-2 place-items-center gap-y-20">
    <div class="flex items-center justify-center">
      <UiPopover>
        <UiPopoverTrigger as-child>
          <UiButton variant="outline" size="icon" aria-label="Filters">
            <Icon name="lucide:list-filter" class="size-4" aria-hidden="true" />
          </UiButton>
        </UiPopoverTrigger>
        <UiPopoverContent class="w-44 p-3">
          <div class="space-y-3">
            <div class="text-muted-foreground text-xs font-medium">Filters</div>
            <UiGradientDivider />
            <form>
              <UiCheckboxGroup
                v-model="selectedFilters"
                orientation="vertical"
                class="flex flex-col gap-3"
              >
                <div v-for="(item, i) in filters" :key="i">
                  <div class="flex items-center gap-3">
                    <UiCheckbox :id="item.id" :value="item.id" />
                    <UiLabel :for="item.id" class="font-normal">{{ item.label }}</UiLabel>
                  </div>
                </div>
              </UiCheckboxGroup>
              <UiGradientDivider class="my-3" />
              <div class="flex justify-between gap-2">
                <UiPopoverClose as-child>
                  <UiButton size="sm" variant="outline" class="h-7 px-2"> Clear </UiButton>
                </UiPopoverClose>
                <UiPopoverClose as-child>
                  <UiButton size="sm" class="h-7 px-2">Apply</UiButton>
                </UiPopoverClose>
              </div>
            </form>
          </div>
        </UiPopoverContent>
      </UiPopover>
    </div>

    <div class="flex items-center justify-center">
      <UiPopover>
        <UiPopoverTrigger as="div">
          <UiChip
            v-if="unreadCount"
            size="3xl"
            :text="unreadCount > 99 ? '99+' : unreadCount.toString()"
          >
            <UiButton
              size="icon"
              variant="outline"
              class="relative"
              aria-label="Open notifications"
            >
              <Icon name="lucide:bell" class="size-4" aria-hidden="true" />
            </UiButton>
          </UiChip>
          <UiButton
            v-else
            size="icon"
            variant="outline"
            class="relative"
            aria-label="Open notifications"
          >
            <Icon name="lucide:bell" class="size-4" aria-hidden="true" />
          </UiButton>
        </UiPopoverTrigger>
        <UiPopoverContent class="w-80 p-1">
          <div class="flex items-baseline justify-between gap-4 px-3 py-2">
            <div class="text-sm font-semibold">Notifications</div>
            <button
              v-if="unreadCount > 0"
              class="text-xs font-medium hover:underline"
              @click="handleMarkAllAsRead"
            >
              Mark all as read
            </button>
          </div>
          <UiGradientDivider
            role="separator"
            aria-orientation="horizontal"
            class="bg-border -mx-1 my-1 h-px"
          />
          <div
            v-for="notification in notifications"
            :key="notification.id"
            class="hover:bg-accent rounded-md px-3 py-2 text-sm transition-colors"
          >
            <div class="relative flex items-start pe-3">
              <div class="flex-1 space-y-1">
                <button
                  class="text-foreground/80 text-left after:absolute after:inset-0"
                  @click="() => handleNotificationClick(notification.id)"
                >
                  <span class="text-foreground font-medium hover:underline">
                    {{ notification.user }}
                  </span>
                  {{ notification.action }}
                  <span class="text-foreground font-medium hover:underline">
                    {{ notification.target }}
                  </span>
                  .
                </button>
                <div class="text-muted-foreground text-xs">
                  {{ notification.timestamp }}
                </div>
              </div>
              <div v-if="notification.unread" class="absolute end-0 self-center">
                <span class="sr-only">Unread</span>
                <svg
                  width="6"
                  height="6"
                  fill="currentColor"
                  viewBox="0 0 6 6"
                  xmlns="http://www.w3.org/2000/svg"
                  aria-hidden="true"
                >
                  <circle cx="3" cy="3" r="3" />
                </svg>
              </div>
            </div>
          </div>
        </UiPopoverContent>
      </UiPopover>
    </div>

    <div class="flex items-center justify-center">
      <UiPopover>
        <UiPopoverTrigger as-child>
          <UiButton variant="outline">Tooltip-like popover</UiButton>
        </UiPopoverTrigger>
        <UiPopoverContent class="max-w-[280px] py-3 shadow-none" side="top">
          <div class="space-y-3">
            <div class="space-y-1">
              <p class="text-[13px] font-medium">Popover with button</p>
              <p class="text-muted-foreground text-xs">
                I am a popover that would like to look like a tooltip. I can't be a tooltip because
                of the interactive element inside me.
              </p>
            </div>
            <UiPopoverClose as-child>
              <UiButton size="sm" class="h-7 px-2">Know more</UiButton>
            </UiPopoverClose>
          </div>
        </UiPopoverContent>
      </UiPopover>
    </div>

    <div class="flex items-center justify-center">
      <UiPopover>
        <UiPopoverTrigger as-child>
          <UiButton variant="outline">Tooltip-like with steps</UiButton>
        </UiPopoverTrigger>
        <UiPopoverContent class="max-w-[280px] py-3 shadow-none" side="top">
          <div class="space-y-3">
            <div class="space-y-1">
              <p class="text-[13px] font-medium">
                {{ tips[currentTip]?.title }}
              </p>
              <p class="text-muted-foreground text-xs">
                {{ tips[currentTip]?.description }}
              </p>
            </div>
            <div class="flex items-center justify-between gap-2">
              <span class="text-muted-foreground text-xs">
                {{ currentTip + 1 }}/{{ tips.length }}
              </span>
              <button class="text-xs font-medium hover:underline" @click="handleNavigation">
                {{ currentTip === tips.length - 1 ? "Start over" : "Next" }}
              </button>
            </div>
          </div>
        </UiPopoverContent>
      </UiPopover>
    </div>

    <div class="flex items-center justify-center">
      <UiPopover>
        <UiPopoverTrigger as-child>
          <UiButton variant="outline">Tooltip-like with nav</UiButton>
        </UiPopoverTrigger>
        <UiPopoverContent class="max-w-[280px] py-3 shadow-none" side="top">
          <div class="space-y-3">
            <div class="space-y-1">
              <p class="text-[13px] font-medium">
                {{ tips2[currentTip2]?.title }}
              </p>
              <p class="text-muted-foreground text-xs">
                {{ tips2[currentTip2]?.description }}
              </p>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-muted-foreground text-xs">
                {{ currentTip2 + 1 }}/{{ tips2.length }}
              </span>
              <div class="flex gap-0.5">
                <UiButton
                  size="icon"
                  variant="ghost"
                  class="size-6"
                  :disabled="isFirstTip"
                  aria-label="Previous tip"
                  @click="handlePrev"
                >
                  <Icon name="lucide:arrow-left" class="size-4" aria-hidden="true" />
                </UiButton>
                <UiButton
                  size="icon"
                  variant="ghost"
                  class="size-6"
                  :disabled="isLastTip"
                  aria-label="Next tip"
                  @click="handleNext"
                >
                  <Icon name="lucide:arrow-right" class="size-4" aria-hidden="true" />
                </UiButton>
              </div>
            </div>
          </div>
        </UiPopoverContent>
      </UiPopover>
    </div>

    <div class="flex items-center justify-center">
      <UiPopover>
        <UiPopoverTrigger as-child>
          <UiButton variant="outline">Share</UiButton>
        </UiPopoverTrigger>
        <UiPopoverContent class="w-72">
          <div class="flex flex-col gap-3 text-center">
            <div class="text-sm font-medium">Share code</div>
            <div class="flex flex-wrap justify-center gap-2">
              <UiButton size="icon" variant="outline" aria-label="Embed">
                <Icon name="ri:code-fill" size="16" aria-hidden="true" />
              </UiButton>
              <UiButton size="icon" variant="outline" aria-label="Share on Twitter">
                <Icon name="ri:twitter-x-fill" size="16" aria-hidden="true" />
              </UiButton>
              <UiButton size="icon" variant="outline" aria-label="Share on Facebook">
                <Icon name="ri:facebook-fill" size="16" aria-hidden="true" />
              </UiButton>
              <UiButton size="icon" variant="outline" aria-label="Share via email">
                <Icon name="ri:mail-line" size="16" aria-hidden="true" />
              </UiButton>
            </div>
            <div class="space-y-2">
              <UiVeeInput
                readonly
                class="peer pe-9"
                placeholder="Code"
                :model-value="code"
                type="url"
              >
                <template #trailingIcon>
                  <button
                    v-tippy="copied ? 'Copied!' : 'Copy to clipboard'"
                    type="button"
                    :disabled="copied"
                    aria-label="Copy code"
                    class="border-l-input text-muted-foreground/80 ring-offset-background hover:bg-muted/50 hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 absolute inset-y-0 end-0 z-10 flex h-full w-9 items-center justify-center rounded-e-md border border-transparent transition-shadow focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
                    @click="copy(code)"
                  >
                    <Icon
                      :name="copied ? 'lucide:check' : 'lucide:copy'"
                      class="size-4"
                      :class="[copied ? 'text-emerald-500' : '']"
                    />
                  </button>
                </template>
              </UiVeeInput>
            </div>
          </div>
        </UiPopoverContent>
      </UiPopover>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const id = useId();

  const filters = ref([
    { id: `${id}-1`, label: "Real Time" },
    { id: `${id}-2`, label: "Top Channels" },
    { id: `${id}-3`, label: "Last Orders" },
    { id: `${id}-4`, label: "Total Spent" },
  ]);
  const selectedFilters = ref<string[]>([]);

  interface Notification {
    id: number;
    user: string;
    action: string;
    target: string;
    timestamp: string;
    unread: boolean;
  }

  const initialNotifications: Notification[] = [
    {
      id: 1,
      user: "Chris Tompson",
      action: "requested review on",
      target: "PR #42: Feature implementation",
      timestamp: "15 minutes ago",
      unread: true,
    },
    {
      id: 2,
      user: "Emma Davis",
      action: "shared",
      target: "New component library",
      timestamp: "45 minutes ago",
      unread: true,
    },
    {
      id: 3,
      user: "James Wilson",
      action: "assigned you to",
      target: "API integration task",
      timestamp: "4 hours ago",
      unread: false,
    },
    {
      id: 4,
      user: "Alex Morgan",
      action: "replied to your comment in",
      target: "Authentication flow",
      timestamp: "12 hours ago",
      unread: false,
    },
    {
      id: 5,
      user: "Sarah Chen",
      action: "commented on",
      target: "Dashboard redesign",
      timestamp: "2 days ago",
      unread: false,
    },
    {
      id: 6,
      user: "Miky Derya",
      action: "mentioned you in",
      target: "Origin UI open graph image",
      timestamp: "2 weeks ago",
      unread: false,
    },
  ];

  const notifications = ref<Notification[]>(initialNotifications);
  const unreadCount = computed(() => notifications.value.filter((n) => n.unread).length);

  const handleMarkAllAsRead = () => {
    notifications.value = notifications.value.map((notification) => ({
      ...notification,
      unread: false,
    }));
  };

  const handleNotificationClick = (id: number) => {
    notifications.value = notifications.value.map((notification) =>
      notification.id === id ? { ...notification, unread: false } : notification
    );
  };

  const tips = [
    {
      title: "Welcome to Dashboard",
      description:
        "This is your new workspace. Here you'll find all your projects, recent activities, settings, and more.",
    },
    {
      title: "Quick Actions",
      description:
        "Use the toolbar above to create new projects, invite team members, or access settings.",
    },
    {
      title: "Need Help?",
      description:
        "Click the support icon in the top right corner to access our help center and documentation.",
    },
  ];

  const currentTip = ref(0);

  const handleNavigation = () => {
    if (currentTip.value === tips.length - 1) {
      currentTip.value = 0;
    } else {
      currentTip.value++;
    }
  };

  //

  const tips2 = [
    {
      title: "Welcome to Dashboard",
      description:
        "This is your new workspace. Here you'll find all your projects, recent activities, settings, and more.",
    },
    {
      title: "Quick Actions",
      description:
        "Use the toolbar above to create new projects, invite team members, or access settings.",
    },
    {
      title: "Need Help?",
      description:
        "Click the support icon in the top right corner to access our help center and documentation.",
    },
    {
      title: "Keyboard Shortcuts",
      description:
        "Press ⌘K to open the command palette. Use arrow keys to navigate and Enter to select an action.",
    },
    {
      title: "Stay Updated",
      description:
        "Enable notifications to receive updates about your projects, team activity, and important deadlines.",
    },
  ];

  const currentTip2 = ref(0);

  const handleNext = () => {
    if (currentTip2.value < tips2.length - 1) {
      currentTip2.value++;
    }
  };

  const handlePrev = () => {
    if (currentTip2.value > 0) {
      currentTip2.value--;
    }
  };

  const isFirstTip = computed(() => currentTip2.value === 0);
  const isLastTip = computed(() => currentTip2.value === tips2.length - 1);

  //
  const code = ref("https://ui-thing.com/Avx8HD");

  const { copy, copied } = useClipboard();
</script>
```
::


# Progress

## Source code

Click :source-code-link{component="Progress"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add progress
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add progress
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add progress
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add progress
```
::

## Anatomy

```vue
<template>
  <UiProgress>
    <UiProgressIndicator :style="{ transform: `translateX(-${100 - (modelValue || 0)}%)` }" />
  </UiProgress>
</template>
```

## Usage

### Full example

::prose-show-case
:docs-progress

#code
```vue [DocsProgress.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-2">
    <div class="flex justify-between text-sm">
      <span>Progress</span>
      <span class="text-muted-foreground">{{ value }}%</span>
    </div>
    <UiProgress v-model="value" />
  </div>
</template>

<script lang="ts" setup>
  const value = ref(10);

  useIntervalFn(() => {
    // set value to a random number between 0 and 100
    value.value = Math.floor(Math.random() * 100);
  }, 3000);
</script>
```
::

### Loader

::prose-show-case
:docs-progress-loading

#code
```vue [DocsProgressLoading.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm flex-col gap-2">
    <div class="flex justify-between text-sm">
      <span>{{ counter == 100 ? "Complete" : "Loading..." }}</span>
      <span class="text-muted-foreground">{{ counter }}%</span>
    </div>
    <UiProgress class="h-2 [--primary:var(--color-blue-500)]" :model-value="counter" />
  </div>
</template>

<script lang="ts" setup>
  const { pause, counter } = useInterval(100, {
    controls: true,
  });
  watch(counter, (v) => {
    if (v === 100) pause();
  });
</script>
```
::


# QR Code

## Source code

Click :source-code-link{component="QRCode"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add qrcode
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add qrcode
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add qrcode
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add qrcode
```
::

## Usage

### Basic

::prose-show-case
:docs-q-r-code-basic

#code
```vue [DocsQRCodeBasic.vue]
<template>
  <div class="flex items-center justify-center">
    <UiQRCode value="https://uithing.com" />
  </div>
</template>
```
::

### Large Size

::prose-show-case
:docs-q-r-code-large

#code
```vue [DocsQRCodeLarge.vue]
<template>
  <div class="flex items-center justify-center">
    <UiQRCode value="https://uithing.com" size="lg" />
  </div>
</template>
```
::

### Custom Frame Handles

::prose-show-case
:docs-q-r-code-custom-handles

#code
```vue [DocsQRCodeCustomHandles.vue]
<template>
  <div class="flex items-center justify-center">
    <UiQRCode value="https://uithing.com" size="lg">
      <template #top-left>
        <UiQRCodeFrameHandle class="absolute top-0 left-0 border-blue-500" />
      </template>
      <template #top-right>
        <UiQRCodeFrameHandle class="absolute top-0 right-0 rotate-90 border-emerald-500" />
      </template>
      <template #bottom-right>
        <UiQRCodeFrameHandle class="absolute right-0 bottom-0 rotate-180 border-red-500" />
      </template>
      <template #bottom-left>
        <UiQRCodeFrameHandle class="absolute bottom-0 left-0 -rotate-90 border-yellow-500" />
      </template>
    </UiQRCode>
  </div>
</template>
```
::

### With Gradient Scan

::prose-show-case
:docs-q-r-code-gradient-scan

#code
```vue [DocsQRCodeGradientScan.vue]
<template>
  <div class="relative mx-auto flex aspect-square w-full max-w-60 items-center justify-center">
    <UiQRCode value="https://uithing.com" size="lg" />
    <UiQRCodeGradientScan />
  </div>
</template>
```
::

### Dynamic Value Update

::prose-show-case
:docs-q-r-code-dynamic

#code
```vue [DocsQRCodeDynamic.vue]
<template>
  <div class="mx-auto flex max-w-100 flex-col items-center gap-8">
    <UiVeeInput v-model="qrValue" label="QR Code Value" placeholder="Enter URL or text" />

    <UiQRCode :value="qrValue" size="lg" />
  </div>
</template>

<script lang="ts" setup>
  const qrValue = ref("https://uithing.com");
</script>
```
::

### With Custom Options

::prose-show-case
:docs-q-r-code-custom-options

#code
```vue [DocsQRCodeCustomOptions.vue]
<template>
  <div class="flex items-center justify-center">
    <UiQRCode
      value="https://example.com"
      size="lg"
      :options="{
        backgroundOptions: { color: 'var(--color-background)', round: 0.1 },
        image: '/icon.png',
        imageOptions: { margin: 4, hideBackgroundDots: true },
        dotsOptions: {
          color: 'var(--color-indigo-500)',
          type: 'dots',
        },
        cornersSquareOptions: {
          color: 'var(--color-green-500)',
          type: 'dot',
          gradient: {
            type: 'linear',
            rotation: 45,
            colorStops: [
              { offset: 0, color: 'var(--color-purple-500)' },
              { offset: 1, color: 'var(--color-pink-500)' },
            ],
          },
        },
        cornersDotOptions: {
          type: 'dot',
          gradient: {
            type: 'radial',
            colorStops: [
              { offset: 0, color: 'var(--color-cyan-50)' },
              { offset: 1, color: 'var(--color-indigo-500)' },
            ],
          },
        },
      }"
    />
  </div>
</template>
```
::

### Full Featured

::prose-show-case
:docs-q-r-code-full

#code
```vue [DocsQRCodeFull.vue]
<template>
  <div class="space-y-6">
    <UiVeeInput v-model="url" label="Enter URL" placeholder="https://..." />

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <!-- Medium QR Code -->
      <div class="space-y-2">
        <h3 class="text-sm font-medium">Medium Size</h3>
        <div class="border-border flex justify-center rounded-lg border p-4">
          <UiQRCode :value="url" size="md" />
        </div>
      </div>

      <!-- Large QR Code with Gradient -->
      <div class="space-y-2">
        <h3 class="text-sm font-medium">Large with Gradient</h3>
        <div class="border-border relative flex justify-center rounded-lg border p-4">
          <UiQRCode :value="url" size="lg"> </UiQRCode>
          <UiQRCodeGradientScan />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const url = ref("https://example.com");
</script>
```
::

## Props

| Prop      | Type                   | Default     | Description                                         |
| --------- | ---------------------- | ----------- | --------------------------------------------------- |
| `value`   | `string`               | required    | The value to encode in the QR code                  |
| `size`    | `'md' | 'lg'`          | `'md'`      | The size of the QR code                             |
| `options` | `QRCodeStylingOptions` | `undefined` | Additional options to customize the QR code styling |
| `class`   | `string`               | `undefined` | Additional CSS classes to apply to the root element |

## Slots

| Slot           | Description                                   |
| -------------- | --------------------------------------------- |
| `top-left`     | Slot for the top-left frame handle            |
| `top-right`    | Slot for the top-right frame handle           |
| `bottom-right` | Slot for the bottom-right frame handle        |
| `bottom-left`  | Slot for the bottom-left frame handle         |
| `overlay`      | Slot for overlay content (like gradient scan) |

## Sub-Components

### Frame Handle

The `UiQRCodeFrameHandle` component is used to display the corner handles of the QR code. It can be customized or hidden using the named slots.

### Gradient Scan

The `UiQRCodeGradientScan` component creates a gradient scanning effect overlay on the QR code, commonly seen in modern QR code designs.

## Notes

- The QR code uses the [qr-code-styling](https://www.npmjs.com/package/qr-code-styling){rel="&#x22;nofollow&#x22;"} library for generation and rendering
- QR codes are rendered as SVG for scalability and crisp rendering
- All size variants are responsive and accessible
- The component automatically updates when the `value` prop or `options` change


# Questionnaire

`Questionnaire` renders a real `<form>` and every item renders a `<fieldset>` with a `<legend>`, so answers submit with `FormData` and no extra state is needed. It handles one question at a time, with progress, keyboard navigation, and validation built in.

## Source code

Click :source-code-link{component="Questionnaire"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add questionnaire
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add questionnaire
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add questionnaire
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add questionnaire
```
::

## Usage

```vue
<template>
  <UiQuestionnaire :items="items" @submit="handleSubmit">
    <UiQuestionnaireProgress />

    <UiQuestionnaireItem name="direction" required>
      <UiQuestionnaireTitle>What should the agent build next?</UiQuestionnaireTitle>
      <UiQuestionnaireDescription>Choose a direction.</UiQuestionnaireDescription>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="tool-calls">Tool call timeline</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="approvals">Approval checkpoints</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireItem name="timing" required>
      <UiQuestionnaireTitle>When should work begin?</UiQuestionnaireTitle>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="now">Start now</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="backlog">Add it to the backlog</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireActions>
      <UiQuestionnairePrevious />
      <UiQuestionnaireSkip />
      <UiQuestionnaireNext />
      <UiQuestionnaireSubmit />
    </UiQuestionnaireActions>
  </UiQuestionnaire>
</template>

<script lang="ts" setup>
  const items = [
    { name: "direction", required: true },
    { name: "timing", required: true },
  ];

  function handleSubmit(event: Event) {
    event.preventDefault();

    const answers = new FormData(event.target as HTMLFormElement);
    console.log(Object.fromEntries(answers));
  }
</script>
```

## Composition

Use the following composition to build a questionnaire:

```sh
UiQuestionnaire
├── UiQuestionnaireProgress
├── UiQuestionnaireItem
│   ├── UiQuestionnaireTitle
│   ├── UiQuestionnaireDescription
│   ├── UiQuestionnaireChoices
│   │   ├── UiQuestionnaireChoice
│   │   │   └── UiQuestionnaireChoiceDescription
│   │   └── UiQuestionnaireInput
│   └── UiQuestionnaireError
└── UiQuestionnaireActions
    ├── UiQuestionnairePrevious
    ├── UiQuestionnaireSkip
    ├── UiQuestionnaireNext
    └── UiQuestionnaireSubmit
```

## Server Rendering

Pass `items` to server-render the active item, progress, actions, and answer shortcuts. Without it the questionnaire only learns its order once the items have mounted on the client.

## Features

- One question at a time, with progress, navigation, and validation handled for you
- Single-choice, multiple-choice, freeform, and intentionally skipped answers
- Keyboard shortcuts for choices, plus arrow key navigation between questions and answers
- Declarative `items` for item order, conditional items, and stable shortcut assignment
- Controlled navigation with `v-model:item` for custom validation flows
- Native form reset restores the answers you marked as defaults

## Examples

### Multiple Selection

Use `multiple` for an item that accepts more than one fixed answer.

::prose-show-case
:docs-questionnaire-multiple

#code
```vue [DocsQuestionnaireMultiple.vue]
<template>
  <UiQuestionnaire
    class="mx-auto max-w-md"
    :items="items"
    shortcuts="letters"
    @submit="handleSubmit"
  >
    <UiQuestionnaireItem name="context" multiple required>
      <UiQuestionnaireTitle>What context should the agent inspect?</UiQuestionnaireTitle>
      <UiQuestionnaireDescription>
        Select every source that may affect the implementation.
      </UiQuestionnaireDescription>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="source">Relevant source files</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="tests">Existing tests</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="docs">Architecture documentation</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="history">Recent commit history</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireActions>
      <UiQuestionnaireSubmit>Share context</UiQuestionnaireSubmit>
    </UiQuestionnaireActions>
  </UiQuestionnaire>
</template>

<script lang="ts" setup>
  const items = [
    {
      choices: [{ value: "source" }, { value: "tests" }, { value: "docs" }, { value: "history" }],
      name: "context",
      required: true,
    },
  ] as const;

  function handleSubmit(event: Event) {
    event.preventDefault();

    const context = new FormData(event.target as HTMLFormElement).getAll("context");

    useSonner("Context selected", {
      description: `Context: ${context.join(", ") || "None"}`,
    });
  }
</script>
```
::

### Freeform Answer

Compose `UiQuestionnaireInput` with fixed choices when the user can provide another answer.

::prose-show-case
:docs-questionnaire-freeform

#code
```vue [DocsQuestionnaireFreeform.vue]
<template>
  <UiQuestionnaire
    class="mx-auto max-w-md"
    :items="items"
    shortcuts="letters"
    @submit="handleSubmit"
  >
    <UiQuestionnaireItem name="approach" required>
      <UiQuestionnaireTitle>How should the agent approach this refactor?</UiQuestionnaireTitle>
      <UiQuestionnaireDescription>
        Choose a strategy or write a more specific instruction.
      </UiQuestionnaireDescription>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="incremental"
          >Make the smallest safe change</UiQuestionnaireChoice
        >
        <UiQuestionnaireChoice value="module">Refactor one module at a time</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="rewrite"
          >Replace the implementation completely</UiQuestionnaireChoice
        >
        <UiQuestionnaireInput
          aria-label="Another refactoring approach"
          placeholder="Describe another approach…"
        />
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireActions>
      <UiQuestionnaireSubmit>Use this approach</UiQuestionnaireSubmit>
    </UiQuestionnaireActions>
  </UiQuestionnaire>
</template>

<script lang="ts" setup>
  const items = [
    {
      choices: [{ value: "incremental" }, { value: "module" }, { value: "rewrite" }],
      name: "approach",
      required: true,
    },
  ] as const;

  function handleSubmit(event: Event) {
    event.preventDefault();

    const approach = new FormData(event.target as HTMLFormElement).get("approach");

    useSonner("Approach selected", {
      description: `Approach: ${approach ?? "None"}`,
    });
  }
</script>
```
::

### Explicit Skip

Add `UiQuestionnaireSkip` when an optional item may be intentionally left unanswered.

::prose-show-case
:docs-questionnaire-skip

#code
```vue [DocsQuestionnaireSkip.vue]
<template>
  <UiQuestionnaire
    class="mx-auto max-w-md"
    default-item="task"
    :items="items"
    @submit="handleSubmit"
  >
    <UiQuestionnaireProgress />

    <UiQuestionnaireItem name="task" required>
      <UiQuestionnaireTitle>What kind of change is this?</UiQuestionnaireTitle>
      <UiQuestionnaireDescription
        >Choose the category that best describes the work.</UiQuestionnaireDescription
      >
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="feature">New feature</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="fix">Bug fix</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="refactor">Refactor</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireItem name="constraints" @update:status="constraintStatus = $event">
      <UiQuestionnaireTitle>Are there any implementation constraints?</UiQuestionnaireTitle>
      <UiQuestionnaireDescription>
        Answer if needed, or intentionally skip this question.
      </UiQuestionnaireDescription>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="no-dependencies"
          >Do not add dependencies</UiQuestionnaireChoice
        >
        <UiQuestionnaireChoice value="no-migrations"
          >Do not change the database</UiQuestionnaireChoice
        >
        <UiQuestionnaireChoice value="preserve-api">Preserve the public API</UiQuestionnaireChoice>
        <UiQuestionnaireInput
          aria-label="Another implementation constraint"
          placeholder="Describe another constraint…"
        />
      </UiQuestionnaireChoices>
    </UiQuestionnaireItem>

    <UiQuestionnaireItem name="review" required>
      <UiQuestionnaireTitle>How should the work be reviewed?</UiQuestionnaireTitle>
      <UiQuestionnaireDescription>
        Choose the checks the agent should complete before handoff.
      </UiQuestionnaireDescription>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="tests">Run the test suite</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="diff">Review the final diff</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="both">Tests and diff review</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireActions>
      <UiQuestionnairePrevious />
      <UiQuestionnaireSkip />
      <UiQuestionnaireNext>Next</UiQuestionnaireNext>
      <UiQuestionnaireSubmit>Submit brief</UiQuestionnaireSubmit>
    </UiQuestionnaireActions>
  </UiQuestionnaire>
</template>

<script lang="ts" setup>
  import type { QuestionnaireItemStatus } from "~/utils/questionnaire";

  const items = [
    { name: "task", required: true },
    { name: "constraints" },
    { name: "review", required: true },
  ] as const;

  const constraintStatus = ref<QuestionnaireItemStatus>("unanswered");

  function handleSubmit(event: Event) {
    event.preventDefault();

    const formData = new FormData(event.target as HTMLFormElement);
    const constraints =
      constraintStatus.value === "skipped" ? "Skipped" : (formData.get("constraints") ?? "None");

    useSonner("Agent brief submitted", {
      description: `Task: ${formData.get("task") ?? "None"} · Constraints: ${constraints} · Review: ${formData.get("review") ?? "None"}`,
    });
  }
</script>
```
::

### Shortcuts

Assign a letter or number key to each answer with `shortcuts`. Declare `choices` on `items` so the keys stay stable regardless of the render order.

::prose-show-case
:docs-questionnaire-shortcuts

#code
```vue [DocsQuestionnaireShortcuts.vue]
<template>
  <div class="relative mx-auto flex h-full w-full max-w-md flex-col">
    <UiNativeSelect v-model="mode" class="absolute end-0 top-0 w-32" aria-label="Shortcut style">
      <option value="none">No shortcuts</option>
      <option value="letters">Letters</option>
      <option value="numbers">Numbers</option>
    </UiNativeSelect>

    <UiQuestionnaire class="mt-auto" :items="items" :shortcuts="shortcuts" @submit="handleSubmit">
      <UiQuestionnaireItem name="action" required>
        <UiQuestionnaireTitle>What should the agent do next?</UiQuestionnaireTitle>
        <UiQuestionnaireDescription>
          Use the displayed shortcut or navigate with the keyboard.
        </UiQuestionnaireDescription>
        <UiQuestionnaireChoices>
          <UiQuestionnaireChoice value="inspect">Inspect the implementation</UiQuestionnaireChoice>
          <UiQuestionnaireChoice value="tests">Run the relevant tests</UiQuestionnaireChoice>
          <UiQuestionnaireChoice value="patch">Prepare the patch</UiQuestionnaireChoice>
        </UiQuestionnaireChoices>
        <UiQuestionnaireError />
      </UiQuestionnaireItem>

      <UiQuestionnaireActions>
        <UiQuestionnaireSubmit>Confirm action</UiQuestionnaireSubmit>
      </UiQuestionnaireActions>
    </UiQuestionnaire>
  </div>
</template>

<script lang="ts" setup>
  import type { QuestionnaireShortcutMode } from "~/utils/questionnaire";

  const items = [
    {
      choices: [{ value: "inspect" }, { value: "tests" }, { value: "patch" }],
      name: "action",
      required: true,
    },
  ] as const;

  const mode = ref<"letters" | "numbers" | "none">("letters");

  const shortcuts = computed<QuestionnaireShortcutMode | undefined>(() =>
    mode.value === "none" ? undefined : mode.value
  );

  function handleSubmit(event: Event) {
    event.preventDefault();

    const action = new FormData(event.target as HTMLFormElement).get("action");

    useSonner("Next action selected", {
      description: `Action: ${action ?? "None"} · Shortcuts: ${shortcuts.value ?? "none"}`,
    });
  }
</script>
```
::

### Custom Validation

Combine controlled navigation with an external schema such as Zod to return to an invalid item and present its error.

::prose-show-case
:docs-questionnaire-validation

#code
```vue [DocsQuestionnaireValidation.vue]
<template>
  <UiQuestionnaire
    v-model:item="item"
    class="mx-auto max-w-md"
    :items="items"
    @submit="handleSubmit"
  >
    <UiCard class="w-full">
      <UiQuestionnaireItem :invalid="Boolean(errors.detail)" name="detail" required>
        <UiCardHeader>
          <UiQuestionnaireTitle>How much detail should the answer include?</UiQuestionnaireTitle>
          <UiQuestionnaireDescription>Choose the response depth.</UiQuestionnaireDescription>
          <UiCardAction>
            <UiQuestionnaireProgress v-slot="{ current, total }" class="min-w-0">
              {{ current }} / {{ total }}
            </UiQuestionnaireProgress>
          </UiCardAction>
        </UiCardHeader>
        <UiCardContent>
          <UiQuestionnaireChoices>
            <UiQuestionnaireChoice value="summary" @change="clearError('detail')">
              Concise summary
            </UiQuestionnaireChoice>
            <UiQuestionnaireChoice value="complete" @change="clearError('detail')">
              Complete answer
            </UiQuestionnaireChoice>
          </UiQuestionnaireChoices>
          <UiQuestionnaireError>
            <template v-if="errors.detail">
              {{ errors.detail }}
            </template>
          </UiQuestionnaireError>
        </UiCardContent>
      </UiQuestionnaireItem>

      <UiQuestionnaireItem :invalid="Boolean(errors.audience)" name="audience" required>
        <UiCardHeader>
          <UiQuestionnaireTitle>Who will read the answer?</UiQuestionnaireTitle>
          <UiQuestionnaireDescription
            >Public answers require complete context.</UiQuestionnaireDescription
          >
          <UiCardAction>
            <UiQuestionnaireProgress v-slot="{ current, total }" class="min-w-0">
              {{ current }} / {{ total }}
            </UiQuestionnaireProgress>
          </UiCardAction>
        </UiCardHeader>
        <UiCardContent>
          <UiQuestionnaireChoices>
            <UiQuestionnaireChoice value="team" @change="clearError('audience')"
              >My team</UiQuestionnaireChoice
            >
            <UiQuestionnaireChoice value="public" @change="clearError('audience')">
              Public audience
            </UiQuestionnaireChoice>
          </UiQuestionnaireChoices>
          <UiQuestionnaireError>
            <template v-if="errors.audience">
              {{ errors.audience }}
            </template>
          </UiQuestionnaireError>
        </UiCardContent>
      </UiQuestionnaireItem>

      <UiCardFooter>
        <UiQuestionnaireActions>
          <UiQuestionnairePrevious />
          <UiQuestionnaireNext>Next</UiQuestionnaireNext>
          <UiQuestionnaireSubmit>Validate answers</UiQuestionnaireSubmit>
        </UiQuestionnaireActions>
      </UiCardFooter>
    </UiCard>
  </UiQuestionnaire>
</template>

<script lang="ts" setup>
  import { z } from "zod";

  type ItemName = "detail" | "audience";

  const items = [
    { name: "detail", required: true },
    { name: "audience", required: true },
  ] as const;

  const questionnaireSchema = z
    .object({
      detail: z.enum(["summary", "complete"]),
      audience: z.enum(["team", "public"]),
    })
    .superRefine((answers, context) => {
      if (answers.audience === "public" && answers.detail === "summary") {
        context.addIssue({
          code: z.ZodIssueCode.custom,
          message: "Public answers need enough context. Choose a complete answer.",
          path: ["detail"],
        });
      }
    });

  const item = ref<string>("detail");
  const errors = ref<Partial<Record<ItemName, string>>>({});

  function clearError(name: ItemName) {
    if (errors.value[name]) {
      errors.value = { ...errors.value, [name]: undefined };
    }
  }

  function handleSubmit(event: Event) {
    event.preventDefault();

    const formData = new FormData(event.target as HTMLFormElement);
    const result = questionnaireSchema.safeParse(Object.fromEntries(formData));

    if (result.success) {
      errors.value = {};
      useSonner("Agent response configured", {
        description: `Detail: ${result.data.detail} · Audience: ${result.data.audience}`,
      });
      return;
    }

    const nextErrors: Partial<Record<ItemName, string>> = {};

    for (const issue of result.error.issues) {
      const name = issue.path[0];

      if ((name === "detail" || name === "audience") && !nextErrors[name]) {
        nextErrors[name] = issue.message;
      }
    }

    const firstInvalidItem = result.error.issues[0]?.path[0];

    errors.value = nextErrors;

    if (firstInvalidItem === "detail" || firstInvalidItem === "audience") {
      item.value = firstInvalidItem;
    }
  }
</script>
```
::

`UiQuestionnaireError` falls back to a built-in message, so only render your own message when you have one:

```vue
<UiQuestionnaireError>
  <template v-if="errors.detail">
    {{ errors.detail }}
  </template>
</UiQuestionnaireError>
```

### Controlled

Control the active item from host state, such as returning to an invalid step. Use `v-model:item`.

::prose-show-case
:docs-questionnaire-controlled

#code
```vue [DocsQuestionnaireControlled.vue]
<template>
  <div class="relative mx-auto flex h-full w-full max-w-md flex-col">
    <p class="text-muted-foreground absolute end-0 top-0 text-sm" role="status">
      Current checkpoint: {{ label }}
    </p>

    <UiQuestionnaire v-model:item="item" class="mt-auto" :items="items" @submit="handleSubmit">
      <UiQuestionnaireProgress />

      <UiQuestionnaireItem name="scope" required>
        <UiQuestionnaireTitle>What may the agent change?</UiQuestionnaireTitle>
        <UiQuestionnaireDescription>
          The host stores the active checkpoint while Questionnaire navigates.
        </UiQuestionnaireDescription>
        <UiQuestionnaireChoices>
          <UiQuestionnaireChoice value="component">Only the target component</UiQuestionnaireChoice>
          <UiQuestionnaireChoice value="tests">Component and related tests</UiQuestionnaireChoice>
          <UiQuestionnaireChoice value="feature">The complete feature area</UiQuestionnaireChoice>
        </UiQuestionnaireChoices>
        <UiQuestionnaireError />
      </UiQuestionnaireItem>

      <UiQuestionnaireItem name="checks" required>
        <UiQuestionnaireTitle>Which verification level should it use?</UiQuestionnaireTitle>
        <UiQuestionnaireChoices>
          <UiQuestionnaireChoice value="targeted">Targeted tests</UiQuestionnaireChoice>
          <UiQuestionnaireChoice value="package">Package tests and typecheck</UiQuestionnaireChoice>
          <UiQuestionnaireChoice value="full">Full workspace verification</UiQuestionnaireChoice>
        </UiQuestionnaireChoices>
        <UiQuestionnaireError />
      </UiQuestionnaireItem>

      <UiQuestionnaireItem name="output" required>
        <UiQuestionnaireTitle>What should the agent return when finished?</UiQuestionnaireTitle>
        <UiQuestionnaireChoices>
          <UiQuestionnaireChoice value="summary">Concise summary</UiQuestionnaireChoice>
          <UiQuestionnaireChoice value="diff">Summary with changed files</UiQuestionnaireChoice>
          <UiQuestionnaireChoice value="handoff"
            >Detailed implementation handoff</UiQuestionnaireChoice
          >
        </UiQuestionnaireChoices>
        <UiQuestionnaireError />
      </UiQuestionnaireItem>

      <UiQuestionnaireActions>
        <UiQuestionnairePrevious />
        <UiQuestionnaireNext>Next</UiQuestionnaireNext>
        <UiQuestionnaireSubmit>Save workflow</UiQuestionnaireSubmit>
      </UiQuestionnaireActions>
    </UiQuestionnaire>
  </div>
</template>

<script lang="ts" setup>
  const items = [
    { name: "scope", required: true },
    { name: "checks", required: true },
    { name: "output", required: true },
  ] as const;

  const itemLabels: Record<string, string> = {
    scope: "Change scope",
    checks: "Verification",
    output: "Final output",
  };

  const item = ref("scope");
  const label = computed(() => itemLabels[item.value]);

  function handleSubmit(event: Event) {
    event.preventDefault();

    const formData = new FormData(event.target as HTMLFormElement);

    useSonner("Agent workflow configured", {
      description: `Scope: ${formData.get("scope") ?? "None"} · Verification: ${formData.get("checks") ?? "None"} · Output: ${formData.get("output") ?? "None"}`,
    });
  }
</script>
```
::

### Resume

Restore a saved active item and default answers, then reset changes back to that saved state.

::prose-show-case
:docs-questionnaire-resume

#code
```vue [DocsQuestionnaireResume.vue]
<template>
  <UiQuestionnaire
    class="mx-auto max-w-md"
    default-item="verification"
    :items="items"
    @reset="useSonner('Saved answers restored')"
    @submit="handleSubmit"
  >
    <UiQuestionnaireProgress />

    <UiQuestionnaireItem name="change" required>
      <UiQuestionnaireTitle>What kind of migration is this?</UiQuestionnaireTitle>
      <UiQuestionnaireDescription>
        This answer was saved during the previous session.
      </UiQuestionnaireDescription>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="incremental" default-checked
          >Incremental migration</UiQuestionnaireChoice
        >
        <UiQuestionnaireChoice value="cutover">Single cutover</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireItem name="verification" multiple required>
      <UiQuestionnaireTitle>How should the migration be verified?</UiQuestionnaireTitle>
      <UiQuestionnaireDescription>
        These checks were selected during the previous session.
      </UiQuestionnaireDescription>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="tests" default-checked
          >Run migration tests</UiQuestionnaireChoice
        >
        <UiQuestionnaireChoice value="typecheck" default-checked
          >Run the typecheck</UiQuestionnaireChoice
        >
        <UiQuestionnaireChoice value="manual">Perform a manual smoke test</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireItem name="notes">
      <UiQuestionnaireTitle>Anything else the agent should remember?</UiQuestionnaireTitle>
      <UiQuestionnaireDescription>This note was saved with the draft.</UiQuestionnaireDescription>
      <UiQuestionnaireInput
        aria-label="Saved migration note"
        default-value="Keep the existing public API stable."
      />
    </UiQuestionnaireItem>

    <UiQuestionnaireActions>
      <UiButton type="reset" variant="outline">Reset changes</UiButton>
      <UiQuestionnairePrevious />
      <UiQuestionnaireNext>Next</UiQuestionnaireNext>
      <UiQuestionnaireSubmit>Update draft</UiQuestionnaireSubmit>
    </UiQuestionnaireActions>
  </UiQuestionnaire>
</template>

<script lang="ts" setup>
  const items = [
    { name: "change", required: true },
    { name: "verification", required: true },
    { name: "notes" },
  ] as const;

  function handleSubmit(event: Event) {
    event.preventDefault();

    const formData = new FormData(event.target as HTMLFormElement);
    const verification = formData.getAll("verification");

    useSonner("Draft updated", {
      description: `Migration: ${formData.get("change") ?? "None"} · Verification: ${verification.join(", ") || "None"} · Notes: ${formData.get("notes") || "None"}`,
    });
  }
</script>
```
::

### Conditional Items

Disable items that do not apply to the user's earlier answers.

::prose-show-case
:docs-questionnaire-conditional

#code
```vue [DocsQuestionnaireConditional.vue]
<template>
  <UiQuestionnaire
    class="mx-auto max-w-md"
    default-item="runtime"
    :items="items"
    @submit="handleSubmit"
  >
    <UiQuestionnaireProgress />

    <UiQuestionnaireItem name="runtime" required>
      <UiQuestionnaireTitle>Where should the agent run?</UiQuestionnaireTitle>
      <UiQuestionnaireDescription>
        Cloud runs add an environment question to this flow.
      </UiQuestionnaireDescription>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice
          :checked="runtime === 'local'"
          value="local"
          @change="runtime = 'local'"
        >
          Local workspace
        </UiQuestionnaireChoice>
        <UiQuestionnaireChoice
          :checked="runtime === 'cloud'"
          value="cloud"
          @change="runtime = 'cloud'"
        >
          Cloud workspace
        </UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireItem name="environment" :disabled="runtime !== 'cloud'" required>
      <UiQuestionnaireTitle>Which cloud environment should it use?</UiQuestionnaireTitle>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="preview">Preview</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="staging">Staging</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="isolated">Isolated sandbox</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireItem name="approval" required>
      <UiQuestionnaireTitle>When should the agent request approval?</UiQuestionnaireTitle>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="writes">Before writing files</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="commands">Before running commands</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="sensitive">Only for sensitive actions</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireActions>
      <UiQuestionnairePrevious />
      <UiQuestionnaireNext>Next</UiQuestionnaireNext>
      <UiQuestionnaireSubmit>Save execution plan</UiQuestionnaireSubmit>
    </UiQuestionnaireActions>
  </UiQuestionnaire>
</template>

<script lang="ts" setup>
  const runtime = ref("local");

  const items = computed(() => [
    { name: "runtime", required: true },
    { disabled: runtime.value !== "cloud", name: "environment", required: true },
    { name: "approval", required: true },
  ]);

  function handleSubmit(event: Event) {
    event.preventDefault();

    const formData = new FormData(event.target as HTMLFormElement);

    useSonner("Execution plan saved", {
      description: `Runtime: ${formData.get("runtime") ?? "None"} · Environment: ${formData.get("environment") ?? "Not applicable"} · Approval: ${formData.get("approval") ?? "None"}`,
    });
  }
</script>
```
::

### Navigation State

Read item status to opt into disabled navigation and custom action styling. Listen to `@update:status` on the items you want to track.

::prose-show-case
:docs-questionnaire-navigation-state

#code
```vue [DocsQuestionnaireNavigationState.vue]
<template>
  <UiQuestionnaire
    v-model:item="item"
    class="mx-auto max-w-md"
    :items="items"
    @submit="handleSubmit"
  >
    <UiQuestionnaireProgress />

    <UiQuestionnaireItem
      name="permission"
      required
      @update:status="setStatus('permission', $event)"
    >
      <UiQuestionnaireTitle>What may the agent modify?</UiQuestionnaireTitle>
      <UiQuestionnaireDescription>
        Next is intentionally disabled until an answer is selected.
      </UiQuestionnaireDescription>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="files">Project files</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="tests">Project files and tests</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="config"
          >Files, tests, and configuration</UiQuestionnaireChoice
        >
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireItem
      name="verification"
      required
      @update:status="setStatus('verification', $event)"
    >
      <UiQuestionnaireTitle>What must pass before completion?</UiQuestionnaireTitle>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="tests">Tests</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="types">Tests and types</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="all">Tests, types, and visual QA</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireActions>
      <UiQuestionnairePrevious />
      <UiQuestionnaireNext
        class="data-[status=unanswered]:opacity-50"
        :disabled="unanswered"
        variant="secondary"
      >
        Next
      </UiQuestionnaireNext>
      <UiQuestionnaireSubmit :disabled="unanswered">Save permissions</UiQuestionnaireSubmit>
    </UiQuestionnaireActions>
  </UiQuestionnaire>
</template>

<script lang="ts" setup>
  import type { QuestionnaireItemStatus } from "~/utils/questionnaire";

  type ItemName = "permission" | "verification";

  const items = [
    { name: "permission", required: true },
    { name: "verification", required: true },
  ] as const;

  const item = ref<ItemName>("permission");
  const statuses = ref<Record<ItemName, QuestionnaireItemStatus>>({
    permission: "unanswered",
    verification: "unanswered",
  });

  const unanswered = computed(() => statuses.value[item.value] === "unanswered");

  function setStatus(name: ItemName, status: QuestionnaireItemStatus) {
    statuses.value = { ...statuses.value, [name]: status };
  }

  function handleSubmit(event: Event) {
    event.preventDefault();

    const formData = new FormData(event.target as HTMLFormElement);

    useSonner("Permissions saved", {
      description: `Permission: ${formData.get("permission") ?? "None"} · Verification: ${formData.get("verification") ?? "None"}`,
    });
  }
</script>
```
::

### Custom Progress

Use the progress slot state to build a custom progress indicator. `UiQuestionnaireProgress` exposes `current`, `total`, `first`, and `last`.

::prose-show-case
:docs-questionnaire-progress

#code
```vue [DocsQuestionnaireProgress.vue]
<template>
  <UiQuestionnaire
    class="mx-auto max-w-md"
    default-item="scope"
    :items="items"
    @submit="handleSubmit"
  >
    <UiQuestionnaireProgress v-slot="{ current, total }" class="w-full">
      <div aria-hidden="true" class="mb-2 flex gap-1.5">
        <span
          v-for="step in total"
          :key="step"
          class="h-1.5 flex-1 rounded-full"
          :class="step <= current ? 'bg-primary' : 'bg-muted'"
        />
      </div>
      <span>Checkpoint {{ current }} of {{ total }}</span>
    </UiQuestionnaireProgress>

    <UiQuestionnaireItem name="scope" required>
      <UiQuestionnaireTitle>How large is the change?</UiQuestionnaireTitle>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="small">Small patch</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="medium">Feature-sized change</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="large">Cross-package change</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireItem name="strategy" required>
      <UiQuestionnaireTitle>How should commits be organized?</UiQuestionnaireTitle>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="single">Single commit</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="logical">Logical commits</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="squash">Squash before review</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireItem name="tests" required>
      <UiQuestionnaireTitle>Which tests should run?</UiQuestionnaireTitle>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="targeted">Targeted tests</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="package">Package suite</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="workspace">Full workspace</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireItem name="delivery" required>
      <UiQuestionnaireTitle>How should the work be delivered?</UiQuestionnaireTitle>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="patch">Patch only</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="commit">Committed locally</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="branch">Push a review branch</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireActions>
      <UiQuestionnairePrevious />
      <UiQuestionnaireNext>Next</UiQuestionnaireNext>
      <UiQuestionnaireSubmit>Finish plan</UiQuestionnaireSubmit>
    </UiQuestionnaireActions>
  </UiQuestionnaire>
</template>

<script lang="ts" setup>
  const items = [
    { name: "scope", required: true },
    { name: "strategy", required: true },
    { name: "tests", required: true },
    { name: "delivery", required: true },
  ] as const;

  function handleSubmit(event: Event) {
    event.preventDefault();

    const formData = new FormData(event.target as HTMLFormElement);

    useSonner("Pull request plan ready", {
      description: `Scope: ${formData.get("scope") ?? "None"} · Commits: ${formData.get("strategy") ?? "None"} · Tests: ${formData.get("tests") ?? "None"} · Delivery: ${formData.get("delivery") ?? "None"}`,
    });
  }
</script>
```
::

### Animated Items

Animate the active item while keeping progress and navigation stationary. The active item is marked with `data-active`.

::prose-show-case
:docs-questionnaire-animated

#code
```vue [DocsQuestionnaireAnimated.vue]
<template>
  <UiQuestionnaire
    class="mx-auto max-w-md"
    default-item="task"
    :items="items"
    @submit="handleSubmit"
  >
    <UiQuestionnaireProgress />

    <UiQuestionnaireItem :class="itemClass" name="task" required>
      <UiQuestionnaireTitle>What should the agent do?</UiQuestionnaireTitle>
      <UiQuestionnaireDescription>Choose the task for this run.</UiQuestionnaireDescription>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="implement"
          >Implement the requested change</UiQuestionnaireChoice
        >
        <UiQuestionnaireChoice value="debug">Debug the current behavior</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="review">Review the implementation</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireItem :class="itemClass" name="review" required>
      <UiQuestionnaireTitle>How should the work be reviewed?</UiQuestionnaireTitle>
      <UiQuestionnaireDescription>Select the verification depth.</UiQuestionnaireDescription>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="targeted">Targeted checks</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="complete">Complete test suite</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="manual">Tests and manual QA</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireItem :class="itemClass" name="delivery" required>
      <UiQuestionnaireTitle>How should the result be delivered?</UiQuestionnaireTitle>
      <UiQuestionnaireDescription>Choose the final handoff format.</UiQuestionnaireDescription>
      <UiQuestionnaireChoices>
        <UiQuestionnaireChoice value="summary">Concise summary</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="diff">Summary and changed files</UiQuestionnaireChoice>
        <UiQuestionnaireChoice value="handoff">Detailed review handoff</UiQuestionnaireChoice>
      </UiQuestionnaireChoices>
      <UiQuestionnaireError />
    </UiQuestionnaireItem>

    <UiQuestionnaireActions>
      <UiQuestionnairePrevious />
      <UiQuestionnaireNext>Next</UiQuestionnaireNext>
      <UiQuestionnaireSubmit>Save workflow</UiQuestionnaireSubmit>
    </UiQuestionnaireActions>
  </UiQuestionnaire>
</template>

<script lang="ts" setup>
  const items = [
    { name: "task", required: true },
    { name: "review", required: true },
    { name: "delivery", required: true },
  ] as const;

  const itemClass =
    "data-active:animate-in data-active:fade-in-0 data-active:slide-in-from-bottom-2 data-active:duration-300 motion-reduce:animate-none";

  function handleSubmit(event: Event) {
    event.preventDefault();

    const formData = new FormData(event.target as HTMLFormElement);

    useSonner("Agent workflow saved", {
      description: `Task: ${formData.get("task") ?? "None"} · Review: ${formData.get("review") ?? "None"} · Delivery: ${formData.get("delivery") ?? "None"}`,
    });
  }
</script>
```
::

### Card

Compose Questionnaire with Card slots while keeping the question title and description semantic. Use `as-child` to render a part as another component:

```vue
<UiQuestionnaireTitle as-child>
  <UiCardTitle>What should the agent work on?</UiCardTitle>
</UiQuestionnaireTitle>
```

::prose-show-case
:docs-questionnaire-card

#code
```vue [DocsQuestionnaireCard.vue]
<template>
  <UiQuestionnaire
    class="mx-auto max-w-md"
    default-item="task"
    :items="items"
    shortcuts="numbers"
    @submit="handleSubmit"
  >
    <UiCard>
      <UiQuestionnaireItem name="task" required>
        <UiCardHeader>
          <UiQuestionnaireTitle as-child>
            <UiCardTitle>What should the agent work on?</UiCardTitle>
          </UiQuestionnaireTitle>
          <UiQuestionnaireDescription as-child>
            <UiCardDescription>Choose the task that should be handled next.</UiCardDescription>
          </UiQuestionnaireDescription>
          <UiCardAction>
            <UiQuestionnaireProgress />
          </UiCardAction>
        </UiCardHeader>
        <UiCardContent>
          <UiQuestionnaireChoices>
            <UiQuestionnaireChoice value="fix">Fix the failing tests</UiQuestionnaireChoice>
            <UiQuestionnaireChoice value="refactor">Refactor the data layer</UiQuestionnaireChoice>
            <UiQuestionnaireChoice value="docs">Update the integration guide</UiQuestionnaireChoice>
          </UiQuestionnaireChoices>
          <UiQuestionnaireError />
        </UiCardContent>
      </UiQuestionnaireItem>

      <UiQuestionnaireItem name="output" required>
        <UiCardHeader>
          <UiQuestionnaireTitle as-child>
            <UiCardTitle>What should the final handoff include?</UiCardTitle>
          </UiQuestionnaireTitle>
          <UiQuestionnaireDescription as-child>
            <UiCardDescription>Pick the level of detail needed for review.</UiCardDescription>
          </UiQuestionnaireDescription>
          <UiCardAction>
            <UiQuestionnaireProgress />
          </UiCardAction>
        </UiCardHeader>
        <UiCardContent>
          <UiQuestionnaireChoices>
            <UiQuestionnaireChoice value="summary">Summary only</UiQuestionnaireChoice>
            <UiQuestionnaireChoice value="files">Summary and changed files</UiQuestionnaireChoice>
            <UiQuestionnaireChoice value="review">Full review handoff</UiQuestionnaireChoice>
          </UiQuestionnaireChoices>
          <UiQuestionnaireError />
        </UiCardContent>
      </UiQuestionnaireItem>

      <UiCardFooter>
        <UiQuestionnaireActions class="w-full">
          <UiQuestionnairePrevious />
          <UiQuestionnaireNext>Next</UiQuestionnaireNext>
          <UiQuestionnaireSubmit>Create task</UiQuestionnaireSubmit>
        </UiQuestionnaireActions>
      </UiCardFooter>
    </UiCard>
  </UiQuestionnaire>
</template>

<script lang="ts" setup>
  const items = [
    {
      choices: [{ value: "fix" }, { value: "refactor" }, { value: "docs" }],
      name: "task",
      required: true,
    },
    {
      choices: [{ value: "summary" }, { value: "files" }, { value: "review" }],
      name: "output",
      required: true,
    },
  ] as const;

  function handleSubmit(event: Event) {
    event.preventDefault();

    const formData = new FormData(event.target as HTMLFormElement);

    useSonner("Agent task created", {
      description: `Task: ${formData.get("task") ?? "None"} · Handoff: ${formData.get("output") ?? "None"}`,
    });
  }
</script>
```
::

`UiQuestionnaireProgress`, `UiQuestionnaireTitle`, `UiQuestionnaireDescription`, `UiQuestionnaireChoices`, `UiQuestionnaireError`, `UiQuestionnaireActions`, and the four navigation buttons all accept `as` and `as-child`. `as-child` on the title replaces the `legend` that names the item, so the item labels itself with the rendered title instead. The title and description keep the id of the child they render.

### Dialog

Compose Questionnaire inside a Dialog while keeping cancellation and dismissal host-owned.

::prose-show-case
:docs-questionnaire-dialog

#code
```vue [DocsQuestionnaireDialog.vue]
<template>
  <UiDialog v-model:open="open">
    <UiDialogTrigger as-child>
      <UiButton variant="outline">Open clarification</UiButton>
    </UiDialogTrigger>
    <UiDialogContent>
      <UiQuestionnaire default-item="scope" :items="items" @submit="handleSubmit">
        <UiQuestionnaireItem name="scope" required>
          <UiDialogHeader>
            <UiQuestionnaireProgress />
            <UiQuestionnaireTitle as-child>
              <UiDialogTitle>Which files are in scope?</UiDialogTitle>
            </UiQuestionnaireTitle>
            <UiQuestionnaireDescription as-child>
              <UiDialogDescription>
                Choose how broadly the agent can update the workspace.
              </UiDialogDescription>
            </UiQuestionnaireDescription>
          </UiDialogHeader>
          <UiQuestionnaireChoices>
            <UiQuestionnaireChoice value="component">Component only</UiQuestionnaireChoice>
            <UiQuestionnaireChoice value="feature"
              >Complete feature directory</UiQuestionnaireChoice
            >
            <UiQuestionnaireChoice value="workspace"
              >Any related workspace file</UiQuestionnaireChoice
            >
          </UiQuestionnaireChoices>
          <UiQuestionnaireError />
        </UiQuestionnaireItem>

        <UiQuestionnaireItem name="tests" required>
          <UiDialogHeader>
            <UiQuestionnaireProgress />
            <UiQuestionnaireTitle as-child>
              <UiDialogTitle>How much verification is needed?</UiDialogTitle>
            </UiQuestionnaireTitle>
            <UiQuestionnaireDescription as-child>
              <UiDialogDescription>
                Choose the checks the agent should run before handoff.
              </UiDialogDescription>
            </UiQuestionnaireDescription>
          </UiDialogHeader>
          <UiQuestionnaireChoices>
            <UiQuestionnaireChoice value="targeted">Targeted tests</UiQuestionnaireChoice>
            <UiQuestionnaireChoice value="package">Package tests</UiQuestionnaireChoice>
            <UiQuestionnaireChoice value="full">Full workspace verification</UiQuestionnaireChoice>
          </UiQuestionnaireChoices>
          <UiQuestionnaireError />
        </UiQuestionnaireItem>

        <UiDialogFooter>
          <UiDialogClose as-child>
            <UiButton type="button" variant="outline">Cancel</UiButton>
          </UiDialogClose>
          <UiQuestionnaireActions>
            <UiQuestionnairePrevious />
            <UiQuestionnaireNext>Next</UiQuestionnaireNext>
            <UiQuestionnaireSubmit>Send answer</UiQuestionnaireSubmit>
          </UiQuestionnaireActions>
        </UiDialogFooter>
      </UiQuestionnaire>
    </UiDialogContent>
  </UiDialog>
</template>

<script lang="ts" setup>
  const items = [
    { name: "scope", required: true },
    { name: "tests", required: true },
  ] as const;

  const open = ref(false);

  function handleSubmit(event: Event) {
    event.preventDefault();

    const formData = new FormData(event.target as HTMLFormElement);

    open.value = false;
    useSonner("Clarification sent", {
      description: `Scope: ${formData.get("scope") ?? "None"} · Verification: ${formData.get("tests") ?? "None"}`,
    });
  }
</script>
```
::

## Keyboard navigation

| Key                         | Description                                                                |
| --------------------------- | -------------------------------------------------------------------------- |
| `Arrow Down`                | Moves focus to the next answer.                                            |
| `Arrow Up`                  | Moves focus to the previous answer.                                        |
| `Arrow Right`               | Moves to the next question once the current one is answered.               |
| `Arrow Left`                | Moves to the previous question.                                            |
| `Enter`                     | Confirms the focused answer and moves on, or submits on the last question. |
| `Meta+Enter` / `Ctrl+Enter` | Confirms the active question from anywhere in the form.                    |
| `A` – `Z` / `1` – `9`       | Selects the matching choice when `shortcuts` is set.                       |

## Accessibility

`UiQuestionnaireItem` renders a `fieldset` with a `legend`, so every question is announced with its answers. Descriptions and errors are associated with the item through `aria-describedby`, and an invalid item exposes `aria-invalid`.

`UiQuestionnaireProgress` renders a named `progressbar` that announces the current question. Inactive items are `hidden` and `inert`, so they stay out of the tab order and the accessibility tree.

Navigation actions are real buttons. `UiQuestionnaireSubmit` submits the form, so a questionnaire keeps working with browser autofill and native form submission.

## API Reference

### Questionnaire

The root form. Manages the active item, progress, validation, and keyboard navigation.

| Prop          | Type                            | Default | Description                                                                        |
| ------------- | ------------------------------- | ------- | ---------------------------------------------------------------------------------- |
| `items`       | `QuestionnaireItemDefinition[]` | -       | Declares item order, `required`, `disabled`, and the `choices` used for shortcuts. |
| `item`        | `string`                        | -       | The active item. Use with `v-model:item`.                                          |
| `defaultItem` | `string`                        | -       | The item shown first. Ignored when `item` is provided.                             |
| `shortcuts`   | `"letters" | "numbers"`         | -       | Assigns a keyboard shortcut to every choice.                                       |
| `noValidate`  | `boolean`                       | `true`  | Set to `false` to run native constraint validation on answered items.              |
| `class`       | `HTMLAttributes["class"]`       | -       | Additional classes to apply to the form.                                           |

| Emit          | Payload  | Description                                                               |
| ------------- | -------- | ------------------------------------------------------------------------- |
| `update:item` | `string` | The active item changed.                                                  |
| `submit`      | `Event`  | Every item is valid. Call `event.preventDefault()` to handle it yourself. |
| `reset`       | `Event`  | The form was reset. Call `event.preventDefault()` to keep the answers.    |

### QuestionnaireProgress

A `progressbar` announcing the active question. Exposes `current`, `total`, `first`, and `last` to its default slot.

| Prop      | Type                      | Default | Description                                      |
| --------- | ------------------------- | ------- | ------------------------------------------------ |
| `class`   | `HTMLAttributes["class"]` | -       | Additional classes to apply to the progress bar. |
| `as`      | `AsTag | Component`       | `"div"` | The element or component to render as.           |
| `asChild` | `boolean`                 | `false` | Render the child element instead.                |

### QuestionnaireItem

A single question, rendered as a `fieldset`. Only the active item is visible.

| Prop       | Type                      | Default | Description                                                               |
| ---------- | ------------------------- | ------- | ------------------------------------------------------------------------- |
| `name`     | `string`                  | -       | Required. The name the answer submits under.                              |
| `required` | `boolean`                 | `false` | Requires an answer before the questionnaire can continue.                 |
| `multiple` | `boolean`                 | `false` | Renders choices as checkboxes and keeps every selected answer.            |
| `disabled` | `boolean`                 | `false` | Removes the item from the flow without unmounting it.                     |
| `invalid`  | `boolean`                 | `false` | Marks the item invalid from outside, for example after schema validation. |
| `class`    | `HTMLAttributes["class"]` | -       | Additional classes to apply to the item.                                  |

| Emit            | Payload                                 | Description              |
| --------------- | --------------------------------------- | ------------------------ |
| `update:status` | `"unanswered" | "answered" | "skipped"` | The item status changed. |

### QuestionnaireTitle

The question, rendered as a `legend`.

| Prop      | Type                      | Default    | Description                               |
| --------- | ------------------------- | ---------- | ----------------------------------------- |
| `class`   | `HTMLAttributes["class"]` | -          | Additional classes to apply to the title. |
| `as`      | `AsTag | Component`       | `"legend"` | The element or component to render as.    |
| `asChild` | `boolean`                 | `false`    | Render the child element instead.         |

### QuestionnaireDescription

Help text associated with the item through `aria-describedby`.

| Prop      | Type                      | Default | Description                                     |
| --------- | ------------------------- | ------- | ----------------------------------------------- |
| `id`      | `string`                  | -       | Overrides the generated id.                     |
| `as`      | `AsTag | Component`       | `"p"`   | The element or component to render as.          |
| `asChild` | `boolean`                 | `false` | Render the child element instead.               |
| `class`   | `HTMLAttributes["class"]` | -       | Additional classes to apply to the description. |

### QuestionnaireChoices

The answer list. Wraps choices and an optional freeform input.

| Prop      | Type                      | Default | Description                              |
| --------- | ------------------------- | ------- | ---------------------------------------- |
| `class`   | `HTMLAttributes["class"]` | -       | Additional classes to apply to the list. |
| `as`      | `AsTag | Component`       | `"div"` | The element or component to render as.   |
| `asChild` | `boolean`                 | `false` | Render the child element instead.        |

### QuestionnaireChoice

A single answer, rendered as a radio or a checkbox depending on the item.

| Prop             | Type                      | Default | Description                                               |
| ---------------- | ------------------------- | ------- | --------------------------------------------------------- |
| `value`          | `string`                  | -       | Required. The submitted value.                            |
| `checked`        | `boolean`                 | -       | Controlled checked state. Use with `v-model:checked`.     |
| `defaultChecked` | `boolean`                 | `false` | Checks the choice on mount and after a native form reset. |
| `disabled`       | `boolean`                 | `false` | Disables the choice.                                      |
| `class`          | `HTMLAttributes["class"]` | -       | Additional classes to apply to the choice.                |

| Emit             | Payload   | Description                        |
| ---------------- | --------- | ---------------------------------- |
| `update:checked` | `boolean` | The choice was checked or cleared. |
| `change`         | `Event`   | The native change event.           |

### QuestionnaireChoiceDescription

Secondary text inside a choice.

| Prop    | Type                      | Default | Description                                     |
| ------- | ------------------------- | ------- | ----------------------------------------------- |
| `class` | `HTMLAttributes["class"]` | -       | Additional classes to apply to the description. |

### QuestionnaireInput

A freeform answer. Answers the item while it holds a value, and submits under the item name.

| Prop           | Type                      | Default  | Description                                         |
| -------------- | ------------------------- | -------- | --------------------------------------------------- |
| `modelValue`   | `string | number`         | -        | Controlled value. Use with `v-model`.               |
| `defaultValue` | `string | number`         | -        | Fills the answer on mount and after a native reset. |
| `type`         | `QuestionnaireInputType`  | `"text"` | The input type.                                     |
| `disabled`     | `boolean`                 | `false`  | Disables the input.                                 |
| `class`        | `HTMLAttributes["class"]` | -        | Additional classes to apply to the input.           |

### QuestionnaireError

The item error. Hidden until the item is invalid, and falls back to a built-in message.

| Prop      | Type                      | Default | Description                               |
| --------- | ------------------------- | ------- | ----------------------------------------- |
| `id`      | `string`                  | -       | Overrides the generated id.               |
| `as`      | `AsTag | Component`       | `"p"`   | The element or component to render as.    |
| `asChild` | `boolean`                 | `false` | Render the child element instead.         |
| `class`   | `HTMLAttributes["class"]` | -       | Additional classes to apply to the error. |

### QuestionnaireActions

The navigation row.

| Prop      | Type                      | Default | Description                             |
| --------- | ------------------------- | ------- | --------------------------------------- |
| `class`   | `HTMLAttributes["class"]` | -       | Additional classes to apply to the row. |
| `as`      | `AsTag | Component`       | `"div"` | The element or component to render as.  |
| `asChild` | `boolean`                 | `false` | Render the child element instead.       |

### QuestionnairePrevious, QuestionnaireSkip, QuestionnaireNext, and QuestionnaireSubmit

Navigation buttons. Each one hides itself when it does not apply: `QuestionnairePrevious` on the first item, `QuestionnaireSkip` on required items, `QuestionnaireNext` on the last item, and `QuestionnaireSubmit` everywhere but the last item.

| Prop       | Type                        | Default                   | Description                                |
| ---------- | --------------------------- | ------------------------- | ------------------------------------------ |
| `variant`  | `ButtonVariants["variant"]` | `"outline"` / `"default"` | The button variant.                        |
| `size`     | `ButtonVariants["size"]`    | `"default"`               | The button size.                           |
| `disabled` | `boolean`                   | `false`                   | Disables the button.                       |
| `as`       | `AsTag | Component`         | `"button"`                | The element or component to render as.     |
| `asChild`  | `boolean`                   | `false`                   | Render the child element instead.          |
| `class`    | `HTMLAttributes["class"]`   | -                         | Additional classes to apply to the button. |


# Radio Group

## Source code

Click :source-code-link{component="RadioGroup"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add radio-group
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add radio-group
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add radio-group
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add radio-group
```
::

## Anatomy

```vue
<template>
  <UiRadioGroup>
    <UiRadioGroupItem value="default" />
    <UiLabel>Default</UiLabel>
  </UiRadioGroup>
</template>
```

## Usage

### Default value

::prose-show-case
:docs-radio-group

#code
```vue [DocsRadioGroup.vue]
<template>
  <div class="flex w-full justify-center">
    <UiRadioGroup default-value="comfortable">
      <div class="flex items-center space-x-2">
        <UiRadioGroupItem id="r1" value="default" />
        <UiLabel for="r1">Default</UiLabel>
      </div>
      <div class="flex items-center space-x-2">
        <UiRadioGroupItem id="r2" value="comfortable" />
        <UiLabel for="r2">Comfortable</UiLabel>
      </div>
      <div class="flex items-center space-x-2">
        <UiRadioGroupItem id="r3" value="compact" />
        <UiLabel for="r3">Compact</UiLabel>
      </div>
    </UiRadioGroup>
  </div>
</template>
```
::

### Form

::prose-show-case
:docs-radio-group-form

#code
```vue [DocsRadioGroupForm.vue]
<template>
  <div class="flex w-full justify-center">
    <form @submit="onSubmit">
      <Field v-slot="{ componentField }" name="type">
        <UiFormItem class="space-y-5">
          <p class="font-medium">What type of notifications should we send?</p>
          <UiRadioGroup v-bind="componentField">
            <UiFormItem
              hide-message
              class="flex flex-row-reverse items-center justify-center gap-3 space-y-0"
              label="All notifications"
            >
              <UiRadioGroupItem value="all" />
            </UiFormItem>
            <UiFormItem
              hide-message
              class="flex flex-row-reverse items-center justify-center gap-3 space-y-0"
              label="Only mentions"
            >
              <UiRadioGroupItem value="mentions" />
            </UiFormItem>
            <UiFormItem
              hide-message
              class="flex flex-row-reverse items-center justify-center gap-3 space-y-0"
              label="Nothing"
            >
              <UiRadioGroupItem value="none" />
            </UiFormItem>
          </UiRadioGroup>
        </UiFormItem>
      </Field>
      <div class="mt-6">
        <UiButton type="submit">Update settings</UiButton>
      </div>
    </form>
  </div>
</template>

<script lang="ts" setup>
  import { object, string } from "yup";

  const { handleSubmit } = useForm({
    validationSchema: toTypedSchema(
      object({
        type: string()
          .oneOf(["all", "mentions", "none"], "You need to select a notification type.")
          .required("You need to select a notification type."),
      })
    ),
  });

  const onSubmit = handleSubmit((values) => {
    useSonner("Settings updated", {
      description: h("pre", { class: "p-2" }, JSON.stringify(values, null, 2)),
    });
  });
</script>
```
::


# Rating

## Source code

Click :source-code-link{component="Rating.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add rating
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add rating
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add rating
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add rating
```
::

## Usage

### Basic

::prose-show-case
:docs-rating

#code
```vue [DocsRating.vue]
<template>
  <div class="text-center">
    <UiRating :model-value="4" />
  </div>
</template>
```
::

### Decimal

::prose-show-case
:docs-rating-decimal

#code
```vue [DocsRatingDecimal.vue]
<template>
  <div class="text-center">
    <UiRating :model-value="3.5" />
  </div>
</template>
```
::

### Show Rating

::prose-show-case
:docs-rating-show-value

#code
```vue [DocsRatingShowValue.vue]
<template>
  <div class="text-center">
    <UiRating :model-value="3.5" show-value />
  </div>
</template>
```
::

### Editable

::prose-show-case
:docs-rating-editable

#code
```vue [DocsRatingEditable.vue]
<template>
  <div class="text-center">
    <UiRating v-model="rating" show-value editable />
  </div>
</template>

<script lang="ts" setup>
  const rating = ref(2.5);
</script>
```
::

### Size

::prose-show-case
:docs-rating-size

#code
```vue [DocsRatingSize.vue]
<template>
  <div class="flex flex-col items-center gap-4">
    <UiRating :model-value="4" size="sm" />
    <UiRating :model-value="4" />
    <UiRating :model-value="4" size="lg" />
  </div>
</template>
```
::

### Icons

::prose-show-case
:docs-rating-icons

#code
```vue [DocsRatingIcons.vue]
<template>
  <div class="flex flex-col items-center gap-4">
    <UiRating :model-value="4" icon="lucide:heart" filled-icon-class-name="text-red-500" />
    <UiRating
      editable
      :model-value="4"
      icon="lucide:sun-medium"
      filled-icon-class-name="text-green-500"
      empty-icon-class-name="text-green-500/30"
    />
  </div>
</template>
```
::

### Statistics

::prose-show-case
:docs-rating-statistics

#code
```vue [DocsRatingStatistics.vue]
<template>
  <UiCard class="mx-auto w-full max-w-sm">
    <UiCardHeader class="min-h-auto border-b-0">
      <UiCardTitle>Customer Reviews Summary</UiCardTitle>
      <UiCardDescription
        >Based on {{ Intl.NumberFormat().format(totalReviews) }} reviews</UiCardDescription
      >
    </UiCardHeader>
    <UiCardContent class="space-y-3">
      <div
        v-for="item in ratings"
        :key="item.stars"
        class="flex items-center justify-between gap-3"
      >
        <div class="flex items-center gap-2.5">
          <span class="w-2 text-sm font-medium">{{ item.stars }}</span>
          <UiRating :model-value="item.stars" />
        </div>
        <div class="text-muted-foreground flex items-center gap-0.5 text-sm">
          <span>{{ Intl.NumberFormat().format(item.count) }}</span>
          <span>({{ item.percentage }}%)</span>
        </div>
      </div>
    </UiCardContent>
  </UiCard>
</template>

<script lang="ts" setup>
  const ratings = [
    { stars: 5, count: 745, percentage: 59.7 },
    { stars: 4, count: 312, percentage: 25.0 },
    { stars: 3, count: 124, percentage: 9.9 },
    { stars: 2, count: 41, percentage: 3.3 },
    { stars: 1, count: 25, percentage: 2.0 },
  ];

  const totalReviews = computed(() => ratings.reduce((total, item) => total + item.count, 0));
</script>
```
::


# Scroll Area

## Source code

Click :source-code-link{component="ScrollArea"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add scroll-area
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add scroll-area
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add scroll-area
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add scroll-area
```
::

## Usage

```vue
<template>
  <UiScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
    Jokester began sneaking into the castle in the middle of the night and leaving jokes all over
    the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious,
    but he couldn't seem to stop Jokester. And then, one day, the people of the kingdom discovered
    that the jokes left by Jokester were so funny that they couldn't help but laugh. And once
    theystarted laughing, they couldn't stop.
  </UiScrollArea>
</template>
```

### Basic example

::prose-show-case
:docs-scroll-area

#code
```vue [DocsScrollArea.vue]
<template>
  <div class="flex w-full justify-center">
    <UiScrollArea class="h-72 w-48 rounded-md border">
      <div class="p-4">
        <h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
        <template v-for="(tag, i) in tags" :key="i">
          <div class="text-sm">{{ tag }}</div>
          <UiSeparator class="my-2" />
        </template>
      </div>
    </UiScrollArea>
  </div>
</template>

<script lang="ts" setup>
  const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
</script>
```
::

### Programmatic scroll

Use the `scrollTo` method and `top` property exposed by `UiScrollArea` to scroll programmatically.

::prose-show-case
:docs-scroll-area-scroll-to

#code
```vue [DocsScrollAreaScrollTo.vue]
<template>
  <div class="flex w-full flex-col items-center gap-4">
    <UiScrollArea ref="scrollAreaRef" class="h-72 w-48 rounded-md border">
      <div class="p-4">
        <h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
        <template v-for="(tag, i) in tags" :key="i">
          <div
            :data-tag-index="i"
            :class="['text-sm', i === targetIndex && 'text-primary font-semibold']"
          >
            {{ tag }}
          </div>
          <UiSeparator v-if="i !== tags.length - 1" class="my-2" />
        </template>
      </div>
    </UiScrollArea>
    <div class="flex flex-wrap justify-center gap-2">
      <UiButton size="sm" variant="outline" @click="jumpScrollToTop">Jump Top</UiButton>
      <UiButton size="sm" variant="outline" @click="smoothScrollToTop">Smooth Top</UiButton>
      <UiButton size="sm" variant="outline" @click="scrollToTag">{{ tags[targetIndex] }}</UiButton>
      <UiButton size="sm" variant="outline" @click="scrollToBottom">Bottom</UiButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const scrollAreaRef = useTemplateRef("scrollAreaRef");
  const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
  const targetIndex = 24;

  const jumpScrollToTop = () => {
    scrollAreaRef.value?.scrollTop?.();
  };

  const smoothScrollToTop = () => {
    scrollAreaRef.value?.scrollTo({ top: 0, behavior: "smooth" });
  };

  const scrollToBottom = () => {
    scrollAreaRef.value?.scrollToBottom?.();
  };

  const scrollToTag = () => {
    const viewport = scrollAreaRef.value?.viewport;
    if (!viewport) return;
    const el = viewport.querySelector(`[data-tag-index="${targetIndex}"]`) as HTMLElement | null;
    if (!el) return;
    const elRect = el.getBoundingClientRect();
    const vpRect = viewport.getBoundingClientRect();
    const top =
      viewport.scrollTop +
      elRect.top -
      vpRect.top -
      viewport.clientHeight / 2 +
      el.clientHeight / 2;
    scrollAreaRef.value?.scrollTo({ top, behavior: "smooth" });
  };
</script>
```
::

### Horizontal scroll

::prose-show-case
:docs-scroll-area-horizontal

#code
```vue [DocsScrollAreaHorizontal.vue]
<template>
  <UiScrollArea orientation="horizontal" class="rounded-md border whitespace-nowrap">
    <div class="flex w-max gap-4 p-4">
      <figure v-for="artwork in works" :key="artwork.artist" class="shrink-0">
        <div class="overflow-hidden rounded-md">
          <img
            :src="artwork.art"
            :alt="`Photo by ${artwork.artist}`"
            class="aspect-[3/4] h-[400px] w-[300px] object-cover"
            width="300px"
            height="400px"
            loading="lazy"
            decoding="async"
          />
        </div>
        <figcaption class="text-muted-foreground pt-2 text-xs">
          Photo by
          <span class="text-foreground font-semibold">
            {{ artwork.artist }}
          </span>
        </figcaption>
      </figure>
    </div>
  </UiScrollArea>
</template>

<script lang="ts" setup>
  export interface Artwork {
    artist: string;
    art: string;
  }

  const works: Artwork[] = [
    {
      artist: "Ornella Binni",
      art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
    },
    {
      artist: "Tom Byrom",
      art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
    },
    {
      artist: "Vladimir Malyavko",
      art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
    },
  ];
</script>
```
::


# Scrollspy

## Source code

Click :source-code-link{component="Scrollspy.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add scrollspy
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add scrollspy
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add scrollspy
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add scrollspy
```
::

## Usage

### Component

::prose-show-case
:docs-scrollspy

#code
```vue [DocsScrollspy.vue]
<template>
  <div class="flex grow gap-5">
    <div class="flex w-[150px] flex-col gap-2">
      <UiScrollspy :target="parentRef" class="sticky top-16 flex flex-col gap-2.5">
        <UiButton
          v-for="item in nav"
          :key="item.id"
          variant="outline"
          :data-scrollspy-anchor="item.id"
          class="data-[active=true]:bg-accent data-[active=true]:text-primary"
        >
          {{ item.label }}
        </UiButton>
      </UiScrollspy>
    </div>
    <div class="grow">
      <div ref="parentRef" class="-me-5 h-[300px] overflow-y-auto pe-5">
        <div class="space-y-8">
          <div v-for="item in nav" :id="item.id" :key="item.id" class="space-y-2.5">
            <h3 class="text-foreground text-base">{{ item.label }}</h3>
            <div class="bg-muted h-[350px] rounded-lg"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const parentRef = useTemplateRef("parentRef");
  const nav = [
    { id: useId(), label: "Section 1" },
    { id: useId(), label: "Section 2" },
    { id: useId(), label: "Section 3" },
    { id: useId(), label: "Section 4" },
    { id: useId(), label: "Section 5" },
  ];
</script>
```
::

### Multiple active links

Set `mode="multiple"` when you want every currently visible heading or section to receive
`data-active="true"` instead of only the single current section.

```vue
<UiScrollspy mode="multiple" :target="parentRef" :offset="80">
  <NuxtLink
    v-for="item in nav"
    :key="item.id"
    :data-scrollspy-anchor="item.id"
    class="data-[active=true]:text-primary"
    :to="`#${item.id}`"
  >
    {{ item.label }}
  </NuxtLink>
</UiScrollspy>
```

The composable also exposes `activeIds` so you can react to the full visible set while still using
`activeId` as the canonical current section for history and change events.

### Composable

::prose-show-case
:docs-scrollspy-composable

#code
```vue [DocsScrollspyComposable.vue]
<template>
  <div class="flex grow gap-5">
    <div class="flex w-[150px] flex-col gap-2">
      <nav ref="root" class="sticky top-16 flex flex-col gap-2.5">
        <UiButton
          v-for="item in nav"
          :key="item.id"
          variant="outline"
          :data-scrollspy-anchor="item.id"
          class="data-[active=true]:bg-accent data-[active=true]:text-primary"
        >
          {{ item.label }}
        </UiButton>
      </nav>
    </div>
    <div class="grow">
      <div ref="parentRef" class="-me-5 h-[300px] overflow-y-auto pe-5">
        <div class="space-y-8">
          <div v-for="item in nav" :id="item.id" :key="item.id" class="space-y-2.5">
            <h3 class="text-foreground text-base">{{ item.label }}</h3>
            <div class="bg-muted h-[350px] rounded-lg"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const parentRef = useTemplateRef("parentRef");
  const nav = [
    { id: useId(), label: "Section 1" },
    { id: useId(), label: "Section 2" },
    { id: useId(), label: "Section 3" },
    { id: useId(), label: "Section 4" },
    { id: useId(), label: "Section 5" },
  ];
  const { root } = useScrollspy({ target: parentRef, offset: 5 });
</script>
```
::

### Horizontal

::prose-show-case
:docs-scrollspy-horizontal

#code
```vue [DocsScrollspyHorizontal.vue]
<template>
  <div class="space-y-5">
    <div class="flex w-full gap-2">
      <UiScrollspy :offset="10" :target="parentRef" class="flex gap-2.5">
        <UiButton
          v-for="item in nav"
          :key="item.id"
          variant="outline"
          :data-scrollspy-anchor="item.id"
          class="data-[active=true]:bg-accent data-[active=true]:text-primary"
        >
          {{ item.label }}
        </UiButton>
      </UiScrollspy>
    </div>
    <div class="w-full">
      <div ref="parentRef" class="-me-5 h-[500px] grow overflow-y-auto pe-5">
        <div class="space-y-8">
          <div v-for="item in nav" :id="item.id" :key="item.id" class="space-y-2.5">
            <h3 class="text-foreground text-base">{{ item.label }}</h3>
            <div class="bg-muted h-[350px] rounded-lg"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const parentRef = useTemplateRef("parentRef");

  const nav = [
    { id: "section-6", label: "Section 1" },
    { id: "section-7", label: "Section 2" },
    { id: "section-8", label: "Section 3" },
    { id: "section-9", label: "Section 4" },
    { id: "section-10", label: "Section 5" },
  ];
</script>
```
::


# Select

## Source code

Click :source-code-link{component="Select"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add select
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add select
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add select
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add select
```
::

## Usage

### Basic example

::prose-show-case
:docs-select

#code
```vue [DocsSelect.vue]
<template>
  <div class="mx-auto flex w-full max-w-xs justify-center">
    <UiSelect v-model="option">
      <UiSelectTrigger placeholder="Select an option" />
      <UiSelectContent>
        <UiSelectLabel>Fruits</UiSelectLabel>
        <UiSelectSeparator />
        <UiSelectGroup>
          <UiSelectItem v-for="(fruit, i) in fruits" :key="i" :value="fruit" :text="fruit" />
        </UiSelectGroup>
        <UiSelectSeparator />
        <UiSelectLabel>Vegetables</UiSelectLabel>
        <UiSelectSeparator />
        <UiSelectGroup>
          <UiSelectItem v-for="(veg, i) in vegetables" :key="i" :value="veg" :text="veg" />
        </UiSelectGroup>
      </UiSelectContent>
    </UiSelect>
  </div>
</template>

<script lang="ts" setup>
  const option = ref();
  const fruits = ["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"];
  const vegetables = ["Aubergine", "Broccoli", "Carrot", "Courgette", "Leek"];
</script>
```
::

### Scrollable

::prose-show-case
:docs-select-scrollable

#code
```vue [DocsSelectScrollable.vue]
<template>
  <div class="flex w-full justify-center">
    <UiSelect>
      <UiSelectTrigger class="w-[280px]">
        <UiSelectValue placeholder="Select a timezone" />
      </UiSelectTrigger>
      <UiSelectContent>
        <UiSelectGroup>
          <UiSelectLabel>North America</UiSelectLabel>
          <UiSelectItem value="est">Eastern Standard Time (EST)</UiSelectItem>
          <UiSelectItem value="cst">Central Standard Time (CST)</UiSelectItem>
          <UiSelectItem value="mst">Mountain Standard Time (MST)</UiSelectItem>
          <UiSelectItem value="pst">Pacific Standard Time (PST)</UiSelectItem>
          <UiSelectItem value="akst">Alaska Standard Time (AKST)</UiSelectItem>
          <UiSelectItem value="hst">Hawaii Standard Time (HST)</UiSelectItem>
        </UiSelectGroup>
        <UiSelectGroup>
          <UiSelectLabel>Europe & Africa</UiSelectLabel>
          <UiSelectItem value="gmt">Greenwich Mean Time (GMT)</UiSelectItem>
          <UiSelectItem value="cet">Central European Time (CET)</UiSelectItem>
          <UiSelectItem value="eet">Eastern European Time (EET)</UiSelectItem>
          <UiSelectItem value="west"> Western European Summer Time (WEST) </UiSelectItem>
          <UiSelectItem value="cat">Central Africa Time (CAT)</UiSelectItem>
          <UiSelectItem value="eat">East Africa Time (EAT)</UiSelectItem>
        </UiSelectGroup>
        <UiSelectGroup>
          <UiSelectLabel>Asia</UiSelectLabel>
          <UiSelectItem value="msk">Moscow Time (MSK)</UiSelectItem>
          <UiSelectItem value="ist">India Standard Time (IST)</UiSelectItem>
          <UiSelectItem value="cst_china">China Standard Time (CST)</UiSelectItem>
          <UiSelectItem value="jst">Japan Standard Time (JST)</UiSelectItem>
          <UiSelectItem value="kst">Korea Standard Time (KST)</UiSelectItem>
          <UiSelectItem value="ist_indonesia">
            Indonesia Central Standard Time (WITA)
          </UiSelectItem>
        </UiSelectGroup>
        <UiSelectGroup>
          <UiSelectLabel>Australia & Pacific</UiSelectLabel>
          <UiSelectItem value="awst"> Australian Western Standard Time (AWST) </UiSelectItem>
          <UiSelectItem value="acst"> Australian Central Standard Time (ACST) </UiSelectItem>
          <UiSelectItem value="aest"> Australian Eastern Standard Time (AEST) </UiSelectItem>
          <UiSelectItem value="nzst">New Zealand Standard Time (NZST)</UiSelectItem>
          <UiSelectItem value="fjt">Fiji Time (FJT)</UiSelectItem>
        </UiSelectGroup>
        <UiSelectGroup>
          <UiSelectLabel>South America</UiSelectLabel>
          <UiSelectItem value="art">Argentina Time (ART)</UiSelectItem>
          <UiSelectItem value="bot">Bolivia Time (BOT)</UiSelectItem>
          <UiSelectItem value="brt">Brasilia Time (BRT)</UiSelectItem>
          <UiSelectItem value="clt">Chile Standard Time (CLT)</UiSelectItem>
        </UiSelectGroup>
      </UiSelectContent>
    </UiSelect>
  </div>
</template>

<script lang="ts" setup></script>
```
::

### Form

::prose-show-case
:docs-select-form

#code
```vue [DocsSelectForm.vue]
<template>
  <div class="flex w-full justify-center">
    <form @submit="onSubmit">
      <Field v-slot="{ componentField }" name="email">
        <UiFormItem label="Primary email" description="This will be shown to the public">
          <UiSelect v-bind="componentField">
            <UiSelectTrigger placeholder="Select primary email" />
            <UiSelectContent>
              <UiSelectGroup>
                <UiSelectItem v-for="(e, i) in emails" :key="i" :value="e" :text="e" />
              </UiSelectGroup>
            </UiSelectContent>
          </UiSelect>
        </UiFormItem>
      </Field>
      <div class="mt-4">
        <UiButton type="submit"> Update profile </UiButton>
      </div>
    </form>
  </div>
</template>

<script lang="ts" setup>
  import { object, string } from "yup";

  const emails = ["m@support.com", "m@google.com", "m@example.com"];

  const { handleSubmit } = useForm({
    validationSchema: toTypedSchema(
      object({
        email: string()
          .label("Email")
          .oneOf(emails, "Please select a valid email")
          .required()
          .email(),
      })
    ),
  });

  const onSubmit = handleSubmit((data) => {
    useSonner("Profile updated", {
      description: h("pre", { class: "p-2" }, JSON.stringify(data, null, 2)),
    });
  });
</script>
```
::

### Origin UI

::prose-show-case
:docs-select-origin

#code
```vue [DocsSelectOrigin.vue]
<template>
  <div class="mx-auto grid w-full max-w-xs grid-cols-1 gap-8 *:data-[slot=select-trigger]:w-full">
    <div class="*:not-first:mt-2">
      <UiLabel>Simple select with default value</UiLabel>
      <UiSelect default-value="1">
        <UiSelectTrigger>
          <UiSelectValue placeholder="Select framework" />
        </UiSelectTrigger>
        <UiSelectContent>
          <UiSelectItem v-for="(item, i) in frameworks" :key="i" :value="item.value">{{
            item.label
          }}</UiSelectItem>
        </UiSelectContent>
      </UiSelect>
    </div>

    <div class="*:not-first:mt-2">
      <UiLabel>Status select</UiLabel>
      <UiSelect v-model="selectedStatus">
        <UiSelectTrigger>
          <UiSelectValue placeholder="Select status">
            <span class="flex items-center gap-2">
              <span
                v-if="selectedStatus"
                class="size-2 rounded-full"
                :class="[selectedStatus?.color]"
              />
              <span>{{ selectedStatus?.label || "Select a status" }}</span>
            </span>
          </UiSelectValue>
        </UiSelectTrigger>
        <UiSelectContent>
          <UiSelectItem v-for="(item, i) in status" :key="i" :value="item">
            <span class="flex items-center gap-2">
              <span class="size-2 rounded-full" :class="item.color" />
              <span>{{ item.label }}</span>
            </span>
          </UiSelectItem>
        </UiSelectContent>
      </UiSelect>
    </div>

    <div class="*:not-first:mt-2">
      <UiLabel>Select with icon</UiLabel>
      <UiSelect default-value="1">
        <UiSelectTrigger class="relative ps-9">
          <div
            class="text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 group-has-[select[disabled]]:opacity-50"
          >
            <Icon name="lucide:clock" class="size-4" aria-hidden="true" />
          </div>
          <UiSelectValue placeholder="Select time" />
        </UiSelectTrigger>
        <UiSelectContent>
          <UiSelectItem value="1">00:00 AM - 11:59 PM</UiSelectItem>
          <UiSelectItem value="2">01:00 AM - 12:59 PM</UiSelectItem>
          <UiSelectItem value="3">02:00 AM - 01:59 PM</UiSelectItem>
          <UiSelectItem value="4">03:00 AM - 02:59 PM</UiSelectItem>
        </UiSelectContent>
      </UiSelect>
    </div>

    <div class="*:not-first:mt-2">
      <UiLabel>Select with helper text</UiLabel>
      <UiSelect default-value="3">
        <UiSelectTrigger>
          <UiSelectValue placeholder="Select framework" />
        </UiSelectTrigger>
        <UiSelectContent>
          <UiSelectItem v-for="(item, index) in frameworks" :key="index" :value="item.value">{{
            item.label
          }}</UiSelectItem>
        </UiSelectContent>
      </UiSelect>
      <p class="text-muted-foreground text-xs" role="region" aria-live="polite">
        Tell us what's your favorite Select framework
      </p>
    </div>

    <div
      class="[--ring:var(--color-indigo-300)] *:not-first:mt-2 in-[.dark]:[--ring:var(--color-indigo-900)]"
    >
      <UiLabel>Select with colored border and ring</UiLabel>
      <UiSelect default-value="2">
        <UiSelectTrigger>
          <UiSelectValue placeholder="Select framework" />
        </UiSelectTrigger>
        <UiSelectContent>
          <UiSelectItem v-for="(item, index) in frameworks" :key="index" :value="item.value">{{
            item.label
          }}</UiSelectItem>
        </UiSelectContent>
      </UiSelect>
    </div>

    <div class="*:not-first:mt-2">
      <UiLabel>Select with error</UiLabel>
      <UiSelect default-value="2">
        <UiSelectTrigger aria-invalid="true">
          <UiSelectValue placeholder="Select framework" />
        </UiSelectTrigger>
        <UiSelectContent>
          <UiSelectItem v-for="(item, index) in frameworks" :key="index" :value="item.value">{{
            item.label
          }}</UiSelectItem>
        </UiSelectContent>
      </UiSelect>
      <p class="text-destructive mt-2 text-xs" role="alert" aria-live="polite">
        Selected option is invalid
      </p>
    </div>

    <div class="*:not-first:mt-2">
      <UiLabel>Select with gray background</UiLabel>
      <UiSelect default-value="2">
        <UiSelectTrigger class="bg-muted w-full border-transparent shadow-none">
          <UiSelectValue placeholder="Select framework" />
        </UiSelectTrigger>
        <UiSelectContent>
          <UiSelectItem v-for="(item, index) in frameworks" :key="index" :value="item.value">{{
            item.label
          }}</UiSelectItem>
        </UiSelectContent>
      </UiSelect>
    </div>

    <div class="*:not-first:mt-2">
      <UiLabel>Select with options groups</UiLabel>
      <UiSelect default-value="1">
        <UiSelectTrigger>
          <UiSelectValue placeholder="Select framework" />
        </UiSelectTrigger>
        <UiSelectContent>
          <UiSelectGroup>
            <UiSelectLabel>Frontend</UiSelectLabel>
            <UiSelectItem value="1">Vue</UiSelectItem>
            <UiSelectItem value="2">Nuxt</UiSelectItem>
            <UiSelectItem value="3">Svelte</UiSelectItem>
          </UiSelectGroup>
          <UiSelectGroup>
            <UiSelectLabel>Backend</UiSelectLabel>
            <UiSelectItem value="4">Node.js</UiSelectItem>
            <UiSelectItem value="5">Python</UiSelectItem>
            <UiSelectItem value="6">Java</UiSelectItem>
          </UiSelectGroup>
        </UiSelectContent>
      </UiSelect>
    </div>

    <div class="*:not-first:mt-2">
      <UiLabel>Select with separator</UiLabel>
      <UiSelect default-value="1">
        <UiSelectTrigger>
          <UiSelectValue placeholder="Select framework" />
        </UiSelectTrigger>
        <UiSelectContent>
          <UiSelectGroup>
            <UiSelectLabel>Frontend</UiSelectLabel>
            <UiSelectItem value="1">Vue</UiSelectItem>
            <UiSelectItem value="2">Nuxt</UiSelectItem>
            <UiSelectItem value="3">Svelte</UiSelectItem>
          </UiSelectGroup>
          <UiSelectSeparator />
          <UiSelectGroup>
            <UiSelectLabel>Backend</UiSelectLabel>
            <UiSelectItem value="4">Node.js</UiSelectItem>
            <UiSelectItem value="5">Python</UiSelectItem>
            <UiSelectItem value="6">Java</UiSelectItem>
          </UiSelectGroup>
        </UiSelectContent>
      </UiSelect>
    </div>

    <div class="*:not-first:mt-2">
      <UiLabel>Select with disabled options</UiLabel>
      <UiSelect default-value="1">
        <UiSelectTrigger>
          <UiSelectValue placeholder="Select framework" />
        </UiSelectTrigger>
        <UiSelectContent>
          <UiSelectItem
            v-for="(item, i) in frameworks"
            :key="i"
            :disabled="item.value == '1' || item.value == '3'"
            :value="item.value"
            >{{ item.label }}</UiSelectItem
          >
        </UiSelectContent>
      </UiSelect>
    </div>

    <div class="group relative">
      <label
        class="bg-background text-foreground absolute start-1 top-0 z-10 block -translate-y-1/2 px-2 text-xs font-medium group-has-disabled:opacity-50"
      >
        Select with overlapping label
      </label>
      <UiSelect>
        <UiSelectTrigger
          class="bg-transparent hover:bg-transparent dark:bg-transparent dark:hover:bg-transparent"
        >
          <UiSelectValue placeholder="Select framework" />
        </UiSelectTrigger>
        <UiSelectContent>
          <UiSelectItem
            v-for="(item, i) in frameworks"
            :key="i"
            :value="item.value"
            :text="item.label"
          />
        </UiSelectContent>
      </UiSelect>
    </div>

    <div class="*:not-first:mt-2">
      <UiLabel>Timezone select</UiLabel>
      <UiSelect default-value="America/Jamaica">
        <UiSelectTrigger>
          <UiSelectValue placeholder="Select timezone" />
        </UiSelectTrigger>
        <UiSelectContent>
          <UiSelectItem
            v-for="{ value, label } in formattedTimezones"
            :key="value"
            :value="value"
            :text="label"
          />
        </UiSelectContent>
      </UiSelect>
    </div>

    <div class="*:not-first:mt-2">
      <UiLabel>Options with flag</UiLabel>
      <UiSelect v-model="selectedOption">
        <UiSelectTrigger
          class="[&>span_svg]:text-muted-foreground/80 [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0"
        >
          <UiSelectValue placeholder="Select country">
            <template v-if="selectedOption">
              <span class="text-lg leading-none">{{ selectedOption.flag }}</span>
              <span class="truncate">{{ selectedOption.label }}</span>
            </template>
          </UiSelectValue>
        </UiSelectTrigger>
        <UiSelectContent
          class="[&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]>span>svg]:shrink-0"
        >
          <UiSelectGroup v-for="continent in options" :key="continent.continent">
            <UiSelectLabel class="ps-2">{{ continent.continent }}</UiSelectLabel>
            <UiSelectItem v-for="country in continent.items" :key="country.value" :value="country">
              <span class="text-lg leading-none">{{ country.flag }}</span>
              <span class="truncate">{{ country.label }}</span>
            </UiSelectItem>
          </UiSelectGroup>
        </UiSelectContent>
      </UiSelect>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const frameworks = [
    { value: "1", label: "Vue" },
    { value: "2", label: "Nuxt" },
    { value: "3", label: "Astro" },
    { value: "5", label: "Vitesse" },
  ];

  const status = [
    { value: "1", label: "Completed", color: "bg-green-500" },
    { value: "2", label: "In Progress", color: "bg-yellow-500" },
    { value: "3", label: "Pending", color: "bg-gray-500" },
    { value: "4", label: "Cancelled", color: "bg-red-500" },
    { value: "5", label: "On Hold", color: "bg-blue-500" },
    { value: "6", label: "Archived", color: "bg-purple-500" },
  ] as const;

  const selectedStatus = ref();

  const timezones = Intl.supportedValuesOf("timeZone");

  const getTimeZones = useMemoize(() => {
    return timezones
      .map((timezone) => {
        const formatter = new Intl.DateTimeFormat("en", {
          timeZone: timezone,
          timeZoneName: "shortOffset",
        });
        const parts = formatter.formatToParts(new Date());
        const offset = parts.find((part) => part.type === "timeZoneName")?.value || "";
        const modifiedOffset = offset === "GMT" ? "GMT+0" : offset;

        return {
          value: timezone,
          label: `(${modifiedOffset}) ${timezone.replace(/_/g, " ")}`,
          numericOffset: parseInt(offset.replace("GMT", "").replace("+", "") || "0"),
        };
      })
      .sort((a, b) => a.numericOffset - b.numericOffset);
  });

  const formattedTimezones = getTimeZones();

  interface Option {
    continent: string;
    items: Country[];
  }

  interface Country {
    value: string;
    label: string;
    flag: string;
  }

  const options: Option[] = [
    {
      continent: "America",
      items: [
        { value: "1", label: "United States", flag: "🇺🇸" },
        { value: "2", label: "Canada", flag: "🇨🇦" },
        { value: "3", label: "Mexico", flag: "🇲🇽" },
      ],
    },
    {
      continent: "Africa",
      items: [
        { value: "4", label: "South Africa", flag: "🇿🇦" },
        { value: "5", label: "Nigeria", flag: "🇳🇬" },
        { value: "6", label: "Morocco", flag: "🇲🇦" },
      ],
    },
    {
      continent: "Asia",
      items: [
        { value: "7", label: "China", flag: "🇨🇳" },
        { value: "8", label: "Japan", flag: "🇯🇵" },
        { value: "9", label: "India", flag: "🇮🇳" },
      ],
    },
    {
      continent: "Europe",
      items: [
        { value: "10", label: "United Kingdom", flag: "🇬🇧" },
        { value: "11", label: "France", flag: "🇫🇷" },
        { value: "12", label: "Germany", flag: "🇩🇪" },
      ],
    },
    {
      continent: "Oceania",
      items: [
        { value: "13", label: "Australia", flag: "🇦🇺" },
        { value: "14", label: "New Zealand", flag: "🇳🇿" },
      ],
    },
  ];

  const selectedOption = ref<Country | undefined>(options[0]?.items[0]);
</script>
```
::


# Select - Native

## Source code

Click :source-code-link{component="NativeSelect.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add native-select
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add native-select
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add native-select
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add native-select
```
::

## Origin UI Examples

::prose-show-case
:docs-native-select-origin

#code
```vue [DocsNativeSelectOrigin.vue]
<template>
  <div class="@container">
    <div class="mx-auto grid max-w-md grid-cols-1 gap-x-6 gap-y-10 @[450px]:grid-cols-2">
      <div class="*:not-first:mt-2">
        <UiLabel>Simple select</UiLabel>
        <UiNativeSelect>
          <option value="1">React</option>
          <option value="2">Next.js</option>
          <option value="3">Astro</option>
          <option value="4">Gatsby</option>
        </UiNativeSelect>
      </div>
      <div class="*:not-first:mt-2">
        <UiLabel>Select with placeholder</UiLabel>
        <UiNativeSelect model-value="">
          <option value="" disabled>Please select a value</option>
          <option value="1">1 to 5</option>
          <option value="2">5 to 10</option>
          <option value="3">More than 10</option>
        </UiNativeSelect>
      </div>
      <div class="col-span-full *:not-first:mt-2">
        <UiLabel>Select with icon</UiLabel>
        <div class="group relative">
          <UiNativeSelect class="ps-9">
            <option value="1">00:00 AM - 11:59 PM</option>
            <option value="2">01:00 AM - 12:59 PM</option>
            <option value="3">02:00 AM - 01:59 PM</option>
            <option value="4">03:00 AM - 02:59 PM</option>
          </UiNativeSelect>
          <div
            class="text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 group-has-[select[disabled]]:opacity-50"
          >
            <Icon name="lucide:clock" class="size-4" aria-hidden="true" />
          </div>
        </div>
      </div>
      <div class="col-span-full *:not-first:mt-2">
        <UiLabel>Select with helper text </UiLabel>
        <UiNativeSelect>
          <option value="1">React</option>
          <option value="2">Next.js</option>
          <option value="3">Astro</option>
          <option value="4">Gatsby</option>
        </UiNativeSelect>
        <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
          Tell us what's your favorite Select framework
        </p>
      </div>
      <div
        class="[--ring:var(--color-indigo-300)] *:not-first:mt-2 in-[.dark]:[--ring:var(--color-indigo-900)]"
      >
        <UiLabel>Select with colored border</UiLabel>
        <UiNativeSelect>
          <option value="1">React</option>
          <option value="2">Next.js</option>
          <option value="3">Astro</option>
          <option value="4">Gatsby</option>
        </UiNativeSelect>
      </div>

      <div class="*:not-first:mt-2">
        <UiLabel>Select with error (native)</UiLabel>
        <UiNativeSelect aria-invalid="true">
          <option value="1">React</option>
          <option value="2">Next.js</option>
          <option value="3">Astro</option>
          <option value="4">Gatsby</option>
        </UiNativeSelect>
        <p class="text-destructive mt-2 text-xs" role="alert" aria-live="polite">
          Selected option is invalid
        </p>
      </div>

      <div class="*:not-first:mt-2">
        <UiLabel>Gray background</UiLabel>
        <UiNativeSelect class="bg-muted border-transparent shadow-none">
          <option value="1">React</option>
          <option value="2">Next.js</option>
          <option value="3">Astro</option>
          <option value="4">Gatsby</option>
        </UiNativeSelect>
      </div>

      <div class="*:not-first:mt-2">
        <UiLabel>Disabled select</UiLabel>
        <UiNativeSelect disabled model-value="1">
          <option value="1">React</option>
          <option value="2">Next.js</option>
          <option value="3">Astro</option>
          <option value="4">Gatsby</option>
        </UiNativeSelect>
      </div>

      <div class="*:not-first:mt-2">
        <UiLabel>Select with auto-width</UiLabel>
        <div class="w-fit">
          <UiNativeSelect model-value="2">
            <option value="1">React</option>
            <option value="2">Next.js</option>
            <option value="3">Astro</option>
            <option value="4">Gatsby</option>
          </UiNativeSelect>
        </div>
      </div>

      <div class="*:not-first:mt-2">
        <UiLabel>Select with option groups</UiLabel>
        <UiNativeSelect>
          <optgroup label="Frontend">
            <option value="1">React</option>
            <option value="2">Vue</option>
            <option value="3">Angular</option>
          </optgroup>
          <optgroup label="Backend">
            <option value="4">Node.js</option>
            <option value="5">Python</option>
            <option value="6">Java</option>
          </optgroup>
        </UiNativeSelect>
      </div>

      <div class="col-span-full *:not-first:mt-2">
        <UiLabel>Timezone select</UiLabel>
        <ClientOnly>
          <UiNativeSelect model-value="America/Jamaica">
            <template v-for="({ value, label }, index) in formattedTimezones" :key="index">
              <option :value>{{ label }}</option>
            </template>
          </UiNativeSelect>
        </ClientOnly>
      </div>

      <div class="group relative">
        <label
          class="bg-background text-foreground absolute start-1 top-0 z-10 block -translate-y-1/2 px-2 text-xs font-medium group-has-[select:disabled]:opacity-50"
        >
          Select with overlapping label
        </label>
        <UiNativeSelect model-value="">
          <option value="" disabled>Select framework</option>
          <option value="1">React</option>
          <option value="2">Next.js</option>
          <option value="3">Astro</option>
          <option value="4">Gatsby</option>
        </UiNativeSelect>
      </div>

      <div
        class="border-input bg-background focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 relative rounded-md border shadow-xs transition-[color,box-shadow] outline-none focus-within:ring-[3px] has-[select:disabled]:cursor-not-allowed has-[select:disabled]:opacity-50 has-[select:is(:disabled)_*]:pointer-events-none"
      >
        <label class="text-foreground block px-3 pt-2 text-xs font-medium">
          Select with inset label
        </label>
        <UiNativeSelect
          model-value=""
          class="border-none bg-transparent shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
        >
          <option value="" disabled>Select framework</option>
          <option value="1">React</option>
          <option value="2">Next.js</option>
          <option value="3">Astro</option>
          <option value="4">Gatsby</option>
        </UiNativeSelect>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const timezones = Intl.supportedValuesOf("timeZone");

  const getTimeZones = useMemoize(() => {
    return timezones
      .map((timezone) => {
        const formatter = new Intl.DateTimeFormat("en", {
          timeZone: timezone,
          timeZoneName: "shortOffset",
        });
        const parts = formatter.formatToParts(new Date());
        const offset = parts.find((part) => part.type === "timeZoneName")?.value || "";
        const modifiedOffset = offset === "GMT" ? "GMT+0" : offset;

        return {
          value: timezone,
          label: `(${modifiedOffset}) ${timezone.replace(/_/g, " ")}`,
          numericOffset: parseInt(offset.replace("GMT", "").replace("+", "") || "0"),
        };
      })
      .sort((a, b) => a.numericOffset - b.numericOffset);
  });

  const formattedTimezones = getTimeZones();
</script>
```
::


# Separator

## Source code

Click :source-code-link{component="Separator.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add separator
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add separator
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add separator
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add separator
```
::

## Usage

### Basic example

::prose-show-case
:docs-separator

#code
```vue [DocsSeparator.vue]
<template>
  <div class="mx-auto max-w-fit">
    <div class="gap-y-1">
      <h4 class="text-sm leading-none font-semibold">UI Thing</h4>
      <p class="text-muted-foreground text-sm">An open-source UI component library for Nuxt.</p>
    </div>
    <UiSeparator class="my-4" />
    <div class="flex h-5 items-center space-x-4 text-sm">
      <div class="hover:text-primary transition-colors">Documentation</div>
      <UiSeparator orientation="vertical" />
      <div class="hover:text-primary transition-colors">Components</div>
      <UiSeparator orientation="vertical" />
      <div class="hover:text-primary transition-colors">Examples</div>
    </div>
  </div>
</template>
```
::


# Sheet

## Source code

Click :source-code-link{component="Sheet"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add sheet
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add sheet
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add sheet
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add sheet
```
::

## Usage

### Right side sheet (default)

::prose-show-case
:docs-sheet

#code
```vue [DocsSheet.vue]
<template>
  <div class="flex w-full justify-center">
    <UiSheet>
      <UiSheetTrigger as-child>
        <UiButton variant="outline">Open Sheet</UiButton>
      </UiSheetTrigger>

      <UiSheetContent
        class="sm:max-w-none md:w-[450px]"
        side="right"
        title="Edit profile"
        description="Make changes to your profile here. Click save when you're done."
      >
        <template #content>
          <div class="grid gap-4 p-4">
            <div class="grid grid-cols-4 items-center gap-4">
              <UiLabel for="name" class="text-right"> Name </UiLabel>
              <UiInput id="name" model-value="Pedro Duarte" class="col-span-3" />
            </div>
            <div class="grid grid-cols-4 items-center gap-4">
              <UiLabel for="username" class="text-right"> Username </UiLabel>
              <UiInput id="username" model-value="@peduarte" class="col-span-3" />
            </div>
          </div>
        </template>
        <template #footer>
          <UiSheetFooter>
            <UiSheetClose as-child>
              <UiButton variant="outline" type="button" class="mt-2 sm:mt-0">Cancel</UiButton>
            </UiSheetClose>
            <UiSheetClose as-child>
              <UiButton type="submit">Save</UiButton>
            </UiSheetClose>
          </UiSheetFooter>
        </template>
      </UiSheetContent>
    </UiSheet>
  </div>
</template>
```
::

### Left side sheet

::prose-show-case
:docs-sheet-left

#code
```vue [DocsSheetLeft.vue]
<template>
  <div class="flex w-full justify-center">
    <UiSheet>
      <UiSheetTrigger as-child>
        <UiButton variant="outline">Open Left Sheet</UiButton>
      </UiSheetTrigger>

      <UiSheetContent
        side="left"
        title="Navigation"
        description="Access additional navigation options"
        class="w-80"
      >
        <template #content>
          <div class="">
            <UiGradientDivider />
            <nav class="mt-4 flex flex-col gap-1 px-3">
              <template v-for="item in links" :key="item.name">
                <UiButton variant="ghost" class="w-full justify-start" :href="item.href">
                  <Icon :name="item.icon" class="text-muted-foreground/70 size-4" />
                  {{ item.name }}
                </UiButton>
              </template>
            </nav>
          </div>
        </template>
      </UiSheetContent>
    </UiSheet>
  </div>
</template>

<script lang="ts" setup>
  const links = [
    { name: "Home", href: "#", icon: "lucide:home" },
    { name: "Profile", href: "#", icon: "lucide:user" },
    { name: "Settings", href: "#", icon: "lucide:settings" },
    { name: "Help", href: "#", icon: "lucide:life-buoy" },
    { name: "Settings", href: "#", icon: "lucide:settings" },
    { name: "Logout", href: "#", icon: "lucide:log-out" },
  ];
</script>
```
::

### Bottom sheet

::prose-show-case
:docs-sheet-bottom

#code
```vue [DocsSheetBottom.vue]
<template>
  <div class="flex w-full justify-center">
    <UiSheet>
      <UiSheetTrigger as-child>
        <UiButton variant="outline">Open Bottom Sheet</UiButton>
      </UiSheetTrigger>

      <UiSheetContent side="bottom" title="Filters" description="Refine your search results">
        <template #content>
          <div class="space-y-4">
            <UiGradientDivider class="-mt-3" />
            <div class="space-y-3 px-4">
              <UiLabel for="categories"> Choose Categories </UiLabel>
              <UiToggleGroup id="categories" type="multiple" class="justify-start">
                <UiToggleGroupItem size="sm" value="all" variant="outline">All</UiToggleGroupItem>
                <UiToggleGroupItem size="sm" value="books" variant="outline"
                  >Books</UiToggleGroupItem
                >
                <UiToggleGroupItem size="sm" value="electronics" variant="outline"
                  >Electronics</UiToggleGroupItem
                >
                <UiToggleGroupItem size="sm" value="clothing" variant="outline"
                  >Clothing</UiToggleGroupItem
                >
              </UiToggleGroup>
            </div>
            <UiGradientDivider />
            <div class="max-w-md space-y-5 px-4">
              <UiLabel for="price">Price Range</UiLabel>
              <UiVeeVueFormSlider id="price" />
            </div>
          </div>
        </template>
        <template #footer>
          <UiSheetFooter class="sm:flex-row">
            <UiSheetClose as-child>
              <UiButton variant="outline">Reset</UiButton>
            </UiSheetClose>
            <UiSheetClose as-child>
              <UiButton>Apply Filters</UiButton>
            </UiSheetClose>
          </UiSheetFooter>
        </template>
      </UiSheetContent>
    </UiSheet>
  </div>
</template>
```
::

### Top sheet

::prose-show-case
:docs-sheet-top

#code
```vue [DocsSheetTop.vue]
<template>
  <div class="flex w-full justify-center">
    <UiSheet>
      <UiSheetTrigger as-child>
        <UiButton variant="outline">Open Top Sheet</UiButton>
      </UiSheetTrigger>

      <UiSheetContent
        side="top"
        title="Notifications"
        description="Recent notifications and alerts"
      >
        <template #content>
          <UiGradientDivider class="-mt-3" />
          <div class="max-w-3xl space-y-3 p-4">
            <UiAlert
              variant="info"
              icon="lucide:info"
              description="Your subscription will renew in 3 days."
            />
            <UiAlert
              title="Update Available"
              variant="success"
              icon="lucide:circle-check"
              description="A new version is ready to install"
            >
              <template #description>
                <UiAlertDescription class="flex items-center justify-between">
                  Click the update button to get the latest features and improvements.
                  <UiButton variant="ghost" size="xs" class="border border-green-500"
                    >Update Now</UiButton
                  >
                </UiAlertDescription>
              </template>
            </UiAlert>

            <UiAlert
              title="New Message"
              variant="default"
              icon="lucide:mail"
              description="You have a new message from admin"
            />
          </div>
        </template>
      </UiSheetContent>
    </UiSheet>
  </div>
</template>
```
::

### No blur overlay

::prose-show-case
:docs-sheet-no-blur

#code
```vue [DocsSheetNoBlur.vue]
<template>
  <div class="flex w-full justify-center">
    <UiSheet>
      <UiSheetTrigger as-child>
        <UiButton variant="outline">Open Without Blur</UiButton>
      </UiSheetTrigger>

      <UiSheetContent
        side="right"
        :is-blurred="false"
        title="Clear Overlay"
        description="This sheet has no blur effect on the overlay"
      >
        <template #content>
          <UiGradientDivider class="-my-2" />
          <div class="space-y-4 p-4">
            <p class="text-muted-foreground text-sm">
              Notice how the background content is clearly visible without any blur effect. This can
              be useful for maintaining full context visibility.
            </p>
            <div class="border-border bg-muted/50 rounded-lg border p-3">
              <p class="text-sm font-medium">Background Content Visible</p>
              <p class="text-muted-foreground text-xs">
                You can see the page clearly behind this sheet
              </p>
            </div>
          </div>
        </template>
        <template #footer>
          <UiSheetFooter>
            <UiSheetClose as-child>
              <UiButton>Close</UiButton>
            </UiSheetClose>
          </UiSheetFooter>
        </template>
      </UiSheetContent>
    </UiSheet>
  </div>
</template>
```
::

### Floating variant

::prose-show-case
:docs-sheet-floating

#code
```vue [DocsSheetFloating.vue]
<template>
  <div class="flex w-full justify-center">
    <UiSheet>
      <UiSheetTrigger as-child>
        <UiButton variant="outline">Open Floating Sheet</UiButton>
      </UiSheetTrigger>

      <UiSheetContent
        side="right"
        variant="floating"
        title="Floating Sheet"
        description="This sheet floats off the edge with spacing around it"
      >
        <template #content>
          <UiGradientDivider class="-my-2" />
          <div class="space-y-4 p-4">
            <p class="text-muted-foreground text-sm">
              The floating variant adds visual separation from the viewport edges, creating a more
              modern and less intrusive appearance.
            </p>
            <div class="space-y-2">
              <UiLabel for="email">Email</UiLabel>
              <UiInput id="email" type="email" placeholder="Enter your email" />
            </div>
            <div class="space-y-2">
              <UiLabel for="message">Message</UiLabel>
              <UiTextarea id="message" placeholder="Type your message..." :rows="4" />
            </div>
          </div>
        </template>
        <template #footer>
          <UiSheetFooter>
            <UiSheetClose as-child>
              <UiButton variant="outline">Cancel</UiButton>
            </UiSheetClose>
            <UiSheetClose as-child>
              <UiButton>Send</UiButton>
            </UiSheetClose>
          </UiSheetFooter>
        </template>
      </UiSheetContent>
    </UiSheet>
  </div>
</template>
```
::

### Interactive playground

::prose-show-case
:docs-sheet-interactive

#code
```vue [DocsSheetInteractive.vue]
<template>
  <div>
    <UiCard
      class="mx-auto max-w-md"
      title="Configure Sheet"
      description="Use the controls below to customize the sheet's behavior."
    >
      <template #content>
        <UiCardContent class="grid gap-4">
          <UiVeeSelect v-model="variant" label="Variant">
            <option value="" disabled>Select a variant</option>
            <option v-for="option in variantOptions" :key="option.value" :value="option.value">
              {{ option.label }}
            </option>
          </UiVeeSelect>
          <UiVeeSelect v-model="side" label="Side">
            <option value="" disabled>Select a side</option>
            <option v-for="option in sideOptions" :key="option.value" :value="option.value">
              {{ option.label }}
            </option>
          </UiVeeSelect>

          <div>
            <UiLabel for="blur-switch" class="mb-2 block">Blur Background</UiLabel>
            <UiSwitch id="blur-switch" v-model="isBlurred" />
          </div>
        </UiCardContent>
      </template>
    </UiCard>

    <div class="mt-6 flex w-full justify-center">
      <UiSheet>
        <UiSheetTrigger as-child>
          <UiButton variant="outline">Open Interactive Sheet</UiButton>
        </UiSheetTrigger>

        <UiSheetContent
          :side="side"
          :variant="variant"
          :is-blurred="isBlurred"
          title="Interactive Sheet"
          description="Configure the sheet using the controls above"
        >
          <template #content>
            <UiGradientDivider class="-my-2" />
            <div class="space-y-4 p-4">
              <div class="border-border bg-muted/30 rounded-lg border p-3">
                <h4 class="mb-2 text-sm font-medium">Current Settings</h4>
                <ul class="text-muted-foreground space-y-1 text-sm">
                  <li>
                    <span class="font-medium">Variant:</span>
                    {{ variantOptions.find((opt) => opt.value === variant)?.label || "Default" }}
                  </li>
                  <li>
                    <span class="font-medium">Side:</span>
                    {{ sideOptions.find((opt) => opt.value === side)?.label || "Right" }}
                  </li>
                  <li>
                    <span class="font-medium">Blur:</span>
                    {{ isBlurred ? "Yes" : "No" }}
                  </li>
                </ul>
              </div>
              <p class="text-muted-foreground text-sm">
                Try changing the controls above and reopening the sheet to see the different
                configurations in action.
              </p>
            </div>
          </template>
          <template #footer>
            <UiSheetFooter>
              <UiSheetClose as-child>
                <UiButton>Close</UiButton>
              </UiSheetClose>
            </UiSheetFooter>
          </template>
        </UiSheetContent>
      </UiSheet>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const variant = ref<"default" | "floating">("floating");
  const side = ref<"left" | "right" | "top" | "bottom">("right");
  const isBlurred = ref(true);

  const variantOptions = [
    { label: "Default", value: "default" },
    { label: "Floating", value: "floating" },
  ];

  const sideOptions = [
    { label: "Left", value: "left" },
    { label: "Right", value: "right" },
    { label: "Top", value: "top" },
    { label: "Bottom", value: "bottom" },
  ];
</script>
```
::

### Fullscreen control

::prose-show-case
:docs-sheet-fullscreen

#code
```vue [DocsSheetFullscreen.vue]
<template>
  <div class="space-y-4">
    <UiCard
      class="mx-auto max-w-md"
      title="Configure Sheet"
      description="Use the controls below to customize the sheet's behavior."
    >
      <template #content>
        <UiCardContent class="grid gap-4">
          <UiVeeSelect v-model="variant" label="Variant">
            <option value="" disabled>Select a variant</option>
            <option v-for="option in variantOptions" :key="option.value" :value="option.value">
              {{ option.label }}
            </option>
          </UiVeeSelect>
          <UiVeeSelect v-model="side" label="Side">
            <option value="" disabled>Select a side</option>
            <option v-for="option in sideOptions" :key="option.value" :value="option.value">
              {{ option.label }}
            </option>
          </UiVeeSelect>

          <div>
            <UiLabel for="blur-switch" class="mb-2 block">Blur Background</UiLabel>
            <UiSwitch id="blur-switch" v-model="isBlurred" />
          </div>

          <div>
            <UiLabel for="fullscreen-switch" class="mb-2 block">Fullscreen Background</UiLabel>
            <UiSwitch id="fullscreen-switch" v-model="fullscreen" />
          </div>
        </UiCardContent>
      </template>
    </UiCard>

    <div class="flex w-full justify-center gap-3">
      <UiSheet>
        <UiSheetTrigger as-child>
          <UiButton>Open Sheet</UiButton>
        </UiSheetTrigger>

        <UiSheetContent
          :side="side"
          :variant="variant"
          :is-blurred="isBlurred"
          :fullscreen="fullscreen"
          title="Fullscreen Sheet"
          :description="
            variant === 'floating'
              ? 'Floating fullscreen adds margin around edges'
              : 'Default fullscreen sits flush to the viewport'
          "
        >
          <template #content>
            <div class="space-y-4 p-4">
              <p class="text-muted-foreground text-sm">
                Toggle fullscreen to make the sheet occupy the screen. Choose the floating variant
                to keep a margin around the edges when fullscreen is on.
              </p>
              <div class="border-border bg-muted/40 rounded-lg border p-3 text-sm">
                <div class="font-medium">Current settings</div>
                <ul class="text-muted-foreground space-y-1">
                  <li>Variant: {{ variant }}</li>
                  <li>Side: {{ side }}</li>
                  <li>Blur: {{ isBlurred ? "Yes" : "No" }}</li>
                  <li>Fullscreen: {{ fullscreen ? "Yes" : "No" }}</li>
                </ul>
              </div>
            </div>
          </template>
          <template #footer>
            <UiSheetFooter>
              <UiSheetClose as-child>
                <UiButton>Close</UiButton>
              </UiSheetClose>
            </UiSheetFooter>
          </template>
        </UiSheetContent>
      </UiSheet>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const fullscreen = ref(true);
  const variant = ref<"default" | "floating">("default");
  const side = ref<"left" | "right" | "top" | "bottom">("left");
  const isBlurred = ref(true);

  const variantOptions = [
    { label: "Default", value: "default" },
    { label: "Floating", value: "floating" },
  ];

  const sideOptions = [
    { label: "Left", value: "left" },
    { label: "Right", value: "right" },
    { label: "Top", value: "top" },
    { label: "Bottom", value: "bottom" },
  ];
</script>
```
::


# Sidebar

## Source code

Click :source-code-link{component="Sidebar"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add sidebar
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add sidebar
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add sidebar
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add sidebar
```
::

## Usage

You should always ensure that you have all parts of the `Sidebar` components wrapped in a `UiSidebarProvider` component. This is to ensure that the sidebar can be toggled on and off.

```vue [app.vue]
<template>
  <UiSidebarProvider>
    <!-- Other Sidebar stuff -->
  </UiSidebarProvider>
</template>
```

### First Sidebar

Let's start with the most basic sidebar. A collapsible sidebar with a menu.

::block-showcase
---
block-path: Sidebar/BlockSidebarFirstSidebar
component: BlockSidebarFirstSidebar
container-class: h-screen
iframe-height: 600px
---
::

The code. Take note of the `UiSidebarTrigger` component. This is what toggles the sidebar.

Also, the `UiSidebarInset` component! When I just started using this component, I was confused as to where the page content should go.

```vue [BlockSidebarFirstSidebar.vue]
<template>
  <UiSidebarProvider>
    <UiSidebar>
      <UiSidebarContent>
        <UiSidebarGroup>
          <UiSidebarGroupLabel label="Application" />
          <UiSidebarGroupContent>
            <UiSidebarMenu>
              <UiSidebarMenuItem v-for="item in items" :key="item.title">
                <UiSidebarMenuButton as-child>
                  <a :href="item.url">
                    <Icon :name="item.icon" />
                    <span>{{ item.title }}</span>
                  </a>
                </UiSidebarMenuButton>
              </UiSidebarMenuItem>
            </UiSidebarMenu>
          </UiSidebarGroupContent>
        </UiSidebarGroup>
      </UiSidebarContent>
    </UiSidebar>
    <UiSidebarInset>
      <UiNavbar sticky>
        <UiContainer class="flex h-12 items-center">
          <UiSidebarTrigger />
        </UiContainer>
      </UiNavbar>
    </UiSidebarInset>
  </UiSidebarProvider>
</template>

<script lang="ts" setup>
  // Menu items.
  const items = [
    { title: "Home", url: "#", icon: "lucide:home" },
    { title: "Inbox", url: "#", icon: "lucide:inbox" },
    { title: "Calendar", url: "#", icon: "lucide:calendar" },
    { title: "Search", url: "#", icon: "lucide:search" },
    { title: "Settings", url: "#", icon: "lucide:settings" },
  ];
</script>
```

## SidebarHeader

Use the `UiSidebarHeader` component to add a sticky header to the sidebar.

The following example adds a `<UiDropdownMenu>` to the `UiSidebarHeader`.

::block-showcase
---
block-path: Sidebar/BlockSidebarHeader
component: BlockSidebarHeader
container-class: h-screen
iframe-height: 600px
---
::

## SidebarFooter

Use the `UiSidebarFooter` component to add a sticky footer to the sidebar.

The following example adds a `<UiDropdownMenu>` to the `UiSidebarFooter`.

::block-showcase
---
block-path: Sidebar/BlockSidebarFooter
component: BlockSidebarFooter
container-class: h-screen
iframe-height: 600px
---
::

## Collapsible SidebarGroup

To make a `UiSidebarGroup` collapsible, wrap it in a `UiCollapsible`.

::block-showcase
---
block-path: Sidebar/BlockSidebarCollapsibleSideGroup
component: BlockSidebarCollapsibleSideGroup
container-class: h-screen
iframe-height: 600px
---
::

We wrap the `UiCollapsibleTrigger` in a `UiSidebarGroupLabel` to render a button.

## SidebarGroupAction

Use the `UiSidebarGroupAction` component to add an action button to the `UiSidebarGroup`.

::block-showcase
---
block-path: Sidebar/BlockSidebarSidebarGroupAction
component: BlockSidebarSidebarGroupAction
container-class: h-screen
iframe-height: 600px
---
::

## SidebarMenuAction

The `UiSidebarMenuAction` component is used to render a menu action within a `UiSidebarMenuItem`.

This button works independently of the `UiSidebarMenuButton` i.e you can have the `<UiSidebarMenuButton />` as a clickable link and the `<UiSidebarMenuAction />` as a button.

::block-showcase
---
block-path: Sidebar/BlockSidebarSidebarMenuAction
component: BlockSidebarSidebarMenuAction
container-class: h-screen
iframe-height: 600px
---
::

## SidebarMenuSub

The `UiSidebarMenuSub` component is used to render a submenu within a `UiSidebarMenu`.

Use `<UiSidebarMenuSubItem />` and `<UiSidebarMenuSubButton />` to render a submenu item.

::block-showcase
---
block-path: Sidebar/BlockSidebarSidebarMenuSub
component: BlockSidebarSidebarMenuSub
container-class: h-screen
iframe-height: 600px
---
::

## Collapsible SidebarMenu

To make a `UiSidebarMenu` component collapsible, wrap it and the `UiSidebarMenuSub` components in a `UiCollapsible`.

::block-showcase
---
block-path: Sidebar/BlockSidebarSidebarMenuSubCollapsible
component: BlockSidebarSidebarMenuSubCollapsible
container-class: h-screen
iframe-height: 600px
---
::

## SidebarMenuBadge

The `UiSidebarMenuBadge` component is used to render a badge within a `UiSidebarMenuItem`.

::block-showcase
---
block-path: Sidebar/BlockSidebarSidebarMenuBadge
component: BlockSidebarSidebarMenuBadge
container-class: h-screen
iframe-height: 600px
---
::

## SidebarRail

The `UiSidebarRail` component is used to render a rail within a `UiSidebar`. This rail can be used to toggle the sidebar.

::block-showcase
---
block-path: Sidebar/BlockSidebarSidebarRail
component: BlockSidebarSidebarRail
container-class: h-screen
iframe-height: 600px
---
::

## Controlled Sidebar

Use the `v-model:open` directive to control the visibility of the sidebar.

This should be added to the `UiSidebarProvider` component.

You can even model this to local storage with the help of [useStorage](https://vueuse.org/core/useStorage/){rel="&#x22;nofollow&#x22;"} from VueUse.

You can even use Pinia to store the state of the sidebar & make it global.

::block-showcase
---
block-path: Sidebar/BlockSidebarControlled
component: BlockSidebarControlled
container-class: h-screen
iframe-height: 600px
---
::


# Skeleton

## Source code

Click :source-code-link{component="Skeleton.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add skeleton
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add skeleton
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add skeleton
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add skeleton
```
::

## Usage

### Profile skeleton

::prose-show-case
:docs-skeleton

#code
```vue [DocsSkeleton.vue]
<template>
  <div class="flex w-full justify-center">
    <div class="flex items-center space-x-4">
      <UiSkeleton class="h-12 w-12 rounded-full" />
      <div class="space-y-2">
        <UiSkeleton class="h-4 w-[250px]" />
        <UiSkeleton class="h-4 w-[200px]" />
      </div>
    </div>
  </div>
</template>
```
::

### Text skeleton

::prose-show-case
:docs-skeleton-text

#code
```vue [DocsSkeletonText.vue]
<template>
  <div class="flex w-full justify-center">
    <div class="w-full max-w-md space-y-3">
      <UiSkeleton class="h-4 w-full" />
      <UiSkeleton class="h-4 w-5/6" />
      <UiSkeleton class="h-4 w-4/5" />
    </div>
  </div>
</template>
```
::

### Card skeleton

::prose-show-case
:docs-skeleton-card

#code
```vue [DocsSkeletonCard.vue]
<template>
  <div class="flex w-full justify-center">
    <div class="border-border w-full max-w-md space-y-4 rounded-lg border p-4">
      <div class="space-y-3">
        <UiSkeleton class="h-4 w-3/4" />
        <UiSkeleton class="h-4 w-1/2" />
      </div>
      <UiSkeleton class="h-40 w-full" />
      <div class="flex gap-2">
        <UiSkeleton class="h-10 flex-1" />
        <UiSkeleton class="h-10 flex-1" />
      </div>
    </div>
  </div>
</template>
```
::

### List skeleton

::prose-show-case
:docs-skeleton-list

#code
```vue [DocsSkeletonList.vue]
<template>
  <div class="flex w-full justify-center">
    <div class="w-full max-w-md space-y-3">
      <div v-for="i in 4" :key="i" class="flex items-center space-x-3">
        <UiSkeleton class="h-12 w-12 shrink-0 rounded-full" />
        <div class="flex-1 space-y-2">
          <UiSkeleton class="h-4 w-3/4" />
          <UiSkeleton class="h-3 w-1/2" />
        </div>
      </div>
    </div>
  </div>
</template>
```
::

### Form skeleton

::prose-show-case
:docs-skeleton-form

#code
```vue [DocsSkeletonForm.vue]
<template>
  <div class="flex w-full justify-center">
    <div class="border-border w-full max-w-md space-y-4 rounded-lg border p-4">
      <div class="space-y-2">
        <UiSkeleton class="h-4 w-1/4" />
        <UiSkeleton class="h-10 w-full" />
      </div>
      <div class="space-y-2">
        <UiSkeleton class="h-4 w-1/4" />
        <UiSkeleton class="h-10 w-full" />
      </div>
      <div class="space-y-2">
        <UiSkeleton class="h-4 w-1/4" />
        <UiSkeleton class="h-24 w-full" />
      </div>
      <div class="flex gap-2">
        <UiSkeleton class="h-10 flex-1" />
        <UiSkeleton class="h-10 flex-1" />
      </div>
    </div>
  </div>
</template>
```
::

### Table skeleton

::prose-show-case
:docs-skeleton-table

#code
```vue [DocsSkeletonTable.vue]
<template>
  <div class="flex w-full justify-center">
    <div class="border-border w-full max-w-md space-y-3 overflow-hidden rounded-lg border">
      <table class="w-full">
        <thead>
          <tr class="border-border bg-muted/50 border-b">
            <th class="p-3 text-left">
              <UiSkeleton class="h-4 w-20" />
            </th>
            <th class="p-3 text-left">
              <UiSkeleton class="h-4 w-24" />
            </th>
            <th class="p-3 text-left">
              <UiSkeleton class="h-4 w-16" />
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="i in 3" :key="i" class="border-border border-b">
            <td class="p-3">
              <UiSkeleton class="h-4 w-20" />
            </td>
            <td class="p-3">
              <UiSkeleton class="h-4 w-24" />
            </td>
            <td class="p-3">
              <UiSkeleton class="h-4 w-16" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
```
::


# Slider

## Source code

Click :source-code-link{component="Slider"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add slider
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add slider
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add slider
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add slider
```
::

## Usage

### Basic example

::prose-show-case
:docs-slider

#code
```vue [DocsSlider.vue]
<template>
  <div class="mx-auto flex w-full max-w-xs flex-col gap-4">
    <p class="text-sm font-medium">Value {{ sliderValue }}</p>
    <UiSlider v-model="sliderValue" />
  </div>
</template>

<script lang="ts" setup>
  const sliderValue = ref([50]);
</script>
```
::

### Multiple thumbs

::prose-show-case
:docs-slider-multiple

#code
```vue [DocsSliderMultiple.vue]
<template>
  <div class="mx-auto flex w-full max-w-xs flex-col gap-4">
    <p class="text-sm font-medium">Range {{ rangeValue }}</p>
    <UiSlider v-model="rangeValue" :max="250" />
  </div>
</template>

<script lang="ts" setup>
  const rangeValue = ref([25, 75, 150]);
</script>
```
::

## Origin UI Examples

These are some examples that I found today over here [Origin UI](https://originui.com/sliders){rel="&#x22;nofollow&#x22;"}. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

### Square Thumb

::prose-show-case
:docs-slider-square-thumb

#code
```vue [DocsSliderSquareThumb.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-4">
      <UiLabel>Slider with square thumb</UiLabel>
      <UiSlider
        v-model="value"
        :step="10"
        :max="100"
        class="[&_[data-slot=slider-thumb]]:rounded"
        aria-label="Slider with square thumb"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  const value = ref([50]);
</script>
```
::

### Solid Thumb

::prose-show-case
:docs-slider-solid-thumb

#code
```vue [DocsSliderSolidThumb.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-4">
      <UiLabel>Slider with solid thumb</UiLabel>
      <UiSlider
        v-model="value"
        class="[&_[data-slot=slider-thumb]]:bg-primary [&>:first-child>span]:opacity-70"
        aria-label="Slider with solid thumb"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  const value = ref([50]);
</script>
```
::

### Tiny Thumb

::prose-show-case
:docs-slider-tiny-thumb

#code
```vue [DocsSliderTinyThumb.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-4">
      <UiLabel>Slider with tiny thumb</UiLabel>
      <UiSlider
        v-model="value"
        class="[&_[data-slot=slider-thumb]]:border-background [&_[data-slot=slider-thumb]]:bg-primary [&_[data-slot=slider-thumb]]:h-6 [&_[data-slot=slider-thumb]]:w-2.5 [&_[data-slot=slider-thumb]]:border-[3px] [&_[data-slot=slider-thumb]]:ring-offset-0"
        aria-label="Slider with tiny thumb"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  const value = ref([50]);
</script>
```
::

### Reference Labels

::prose-show-case
:docs-slider-reference-labels

#code
```vue [DocsSliderReferenceLabels.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-4">
      <UiLabel>Slider with reference labels</UiLabel>
      <div>
        <UiSlider v-model="value" :min="5" :max="35" aria-label="Slider with reference labels" />
        <div
          class="text-muted-foreground mt-4 flex w-full items-center justify-between gap-1 text-xs font-medium"
          aria-hidden="true"
        >
          <span v-for="size in [5, 20, 35]" :key="size">{{ size }} GB</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const value = ref([15]);
</script>
```
::

### Ticks

::prose-show-case
:docs-slider-ticks

#code
```vue [DocsSliderTicks.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-4">
      <UiLabel>Slider with ticks</UiLabel>
      <div>
        <UiSlider v-model="value" :max="max" aria-label="Slider with ticks" />
        <span
          class="text-muted-foreground mt-3 flex w-full items-center justify-between gap-1 px-2.5 text-xs font-medium"
          aria-hidden="true"
        >
          <span
            v-for="(_, i) in ticks"
            :key="i"
            class="flex w-0 flex-col items-center justify-center gap-2"
          >
            <span :class="['bg-muted-foreground/70 h-1 w-px', i % skipInterval !== 0 && 'h-0.5']" />
            <span :class="[i % skipInterval === 0 && 'opacity-0']">{{ i }}</span>
          </span>
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const max = 12;
  const skipInterval = 2; // Set to 1 to allow no text skipping
  const ticks = [...Array(max + 1)].map((_, i) => i);
  const value = ref([5]);
</script>
```
::

### Slider w/ Output

::prose-show-case
:docs-slider-output

#code
```vue [DocsSliderOutput.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-4">
      <div class="flex items-center justify-between gap-2">
        <UiLabel class="leading-6">Slider with output</UiLabel>
        <output class="text-sm font-medium tabular-nums">{{ value[0] }}</output>
      </div>
      <UiSlider v-model="value" aria-label="Slider with output" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  const value = ref([50]);
</script>
```
::

### Slider w/ Labels

::prose-show-case
:docs-slider-labels

#code
```vue [DocsSliderLabels.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-4">
      <UiLabel>Slider with labels</UiLabel>
      <div>
        <span
          class="text-muted-foreground mb-3 flex w-full items-center justify-between gap-2 text-xs font-medium"
          aria-hidden="true"
        >
          <span>Low</span>
          <span>High</span>
        </span>
        <UiSlider v-model="value" :step="10" aria-label="Slider with labels" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const value = ref([50]);
</script>
```
::

### Slider w/ Labels & Tooltip

::prose-show-case
:docs-slider-labels-tooltips

#code
```vue [DocsSliderLabelsTooltips.vue]
<template>
  <div class="mx-auto max-w-sm *:not-first:mt-4">
    <UiLabel>Slider with labels and tooltip</UiLabel>
    <div>
      <span
        class="text-muted-foreground mb-3 flex w-full items-center justify-between gap-2 text-xs font-medium"
        aria-hidden="true"
      >
        <span>Low</span>
        <span>High</span>
      </span>
      <UiSlider
        v-model="value"
        :step="10"
        show-tooltip
        aria-label="Slider with labels and tooltip"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  const value = ref([50]);
</script>
```
::

### Dual Range

::prose-show-case
:docs-slider-dual-range

#code
```vue [DocsSliderDualRange.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-4">
      <UiLabel>Dual range slider</UiLabel>
      <UiSlider v-model="value" :step="10" aria-label="Dual range slider" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  const value = ref([25, 75]);
</script>
```
::

### Dual Range w/ Output

::prose-show-case
:docs-slider-dual-range-output

#code
```vue [DocsSliderDualRangeOutput.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-4">
      <div class="flex items-center justify-between gap-2">
        <UiLabel class="leading-6">Dual range slider with output</UiLabel>
        <output class="text-sm font-medium tabular-nums"> {{ value[0] }} - {{ value[1] }} </output>
      </div>
      <UiSlider v-model="value" aria-label="Dual range slider with output" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  const value = ref([25, 75]);
</script>
```
::

### Volume

::prose-show-case
:docs-slider-volume

#code
```vue [DocsSliderVolume.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-3">
      <div class="flex items-center justify-between gap-2">
        <UiLabel class="leading-6">Volume</UiLabel>
        <output class="text-sm font-medium tabular-nums">{{ value[0] }}</output>
      </div>
      <div class="flex items-center gap-2">
        <Icon name="lucide:volume-x" class="size-4 shrink-0 opacity-60" aria-hidden="true" />
        <UiSlider v-model="value" aria-label="Volume slider" />
        <Icon name="lucide:volume-2" class="size-4 shrink-0 opacity-60" aria-hidden="true" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const value = ref([25]);
</script>
```
::

### Temperature

::prose-show-case
:docs-slider-temperature

#code
```vue [DocsSliderTemperature.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-3">
      <div class="flex items-center justify-between gap-2">
        <UiLabel>Temperature</UiLabel>
        <div class="flex items-center gap-1">
          <UiTooltip>
            <UiTooltipTrigger as-child>
              <UiButton
                size="icon"
                variant="ghost"
                class="size-7"
                aria-label="Reset"
                @click="value = defaultValue"
              >
                <Icon name="lucide:rotate-ccw" class="size-4" aria-hidden="true" />
              </UiButton>
            </UiTooltipTrigger>
            <UiTooltipContent align="center" class="px-2 py-1 text-xs"
              >Reset to default</UiTooltipContent
            >
          </UiTooltip>
          <UiInput
            v-model="value[0]"
            class="h-7 w-12 px-2 py-0"
            type="text"
            input-mode="decimal"
            aria-label="Enter value"
          />
        </div>
      </div>
      <div class="flex items-center gap-4">
        <UiSlider
          v-model="value"
          :min="minValue"
          :max="maxValue"
          :step="0.01"
          aria-label="Temperature"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const minValue = 0.0;
  const maxValue = 2;
  const defaultValue = [1];
  const value = ref([1.25]);

  watchEffect(() => {
    if (!value.value) return (value.value = defaultValue);
    if (!value.value[0]) return (value.value = defaultValue);
    if (value.value[0] < minValue) {
      value.value[0] = minValue;
    } else if (value.value[0] > maxValue) {
      value.value[0] = maxValue;
    }
  });
</script>
```
::

### Input

::prose-show-case
:docs-slider-input

#code
```vue [DocsSliderInput.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-3">
      <UiLabel>Slider with input</UiLabel>
      <div class="flex items-center gap-4">
        <UiSlider
          v-model="value"
          class="flex-grow"
          :min="minValue"
          :max="maxValue"
          aria-label="Slider with input"
        />
        <UiInput
          v-model="value[0]"
          class="h-8 w-12 px-2 py-1"
          type="text"
          input-mode="decimal"
          aria-label="Enter value"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const minValue = 0;
  const maxValue = 100;
  const initialValue = [25];
  const value = ref(initialValue);
</script>
```
::

### Rate your experience

::prose-show-case
:docs-slider-rate-exp1

#code
```vue [DocsSliderRateExp1.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-3">
      <div class="flex items-center justify-between gap-2">
        <UiLabel class="leading-6">Rate your experience</UiLabel>
        <span class="text-sm font-medium">{{
          value[0] !== undefined ? labels[value[0] - 1] : ""
        }}</span>
      </div>
      <div class="flex items-center gap-2">
        <span class="text-2xl">😡</span>
        <UiSlider v-model="value" :min="1" :max="5" aria-label="Rate your experience" />
        <span class="text-2xl">😍</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const labels = ["Awful", "Poor", "Okay", "Good", "Amazing"];
  const value = ref([3]);
</script>
```
::

### Rate your experience (tooltip)

::prose-show-case
:docs-slider-rate-exp-tooltip

#code
```vue [DocsSliderRateExpTooltip.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-3">
      <UiLabel>Rate your experience</UiLabel>
      <div class="flex items-center gap-2">
        <UiSlider v-model="value" :min="1" :max="5" aria-label="Rate your experience">
          <template #thumb>
            <UiTooltip v-for="(t, i) in value.length" :key="i" disable-closing-trigger>
              <UiTooltipTrigger as-child>
                <UiSliderThumb />
              </UiTooltipTrigger>
              <UiTooltipContent align="center">{{
                value[i] !== undefined ? labels[value[i] - 1] : ""
              }}</UiTooltipContent>
            </UiTooltip>
          </template>
        </UiSlider>
        <span v-if="value[0] !== undefined" class="text-2xl">{{ emojis[value[0] - 1] }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const emojis = ["😡", "🙁", "😐", "🙂", "😍"];
  const labels = ["Awful", "Poor", "Okay", "Good", "Amazing"];
  const value = ref([3]);
</script>
```
::

### Dual Range w/ Input

::prose-show-case
:docs-slider-dual-range-input

#code
```vue [DocsSliderDualRangeInput.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-3">
      <UiLabel>Dual range slider with input</UiLabel>
      <div class="flex items-center gap-4">
        <UiInput
          v-model="value[0]"
          class="h-8 w-12 px-2 py-1"
          type="text"
          inputmode="decimal"
          aria-label="Enter minimum value"
        />
        <UiSlider
          v-model="value"
          class="flex-grow"
          :min="minValue"
          :max="maxValue"
          aria-label="Dual range slider with input"
        />
        <UiInput
          v-model="value[1]"
          class="h-8 w-12 px-2 py-1"
          type="text"
          inputmode="decimal"
          aria-label="Enter maximum value"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const minValue = 0;
  const maxValue = 200;
  const initialValue = [50, 150];
  const value = ref(initialValue);
</script>
```
::

### Credits per Month

::prose-show-case
:docs-slider-credits-per-month

#code
```vue [DocsSliderCreditsPerMonth.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-3">
      <UiLabel class="tabular-nums">{{ value[0] }} credits/mo</UiLabel>
      <div class="flex items-center gap-4">
        <div>
          <UiButton
            variant="outline"
            size="icon"
            class="size-8"
            aria-label="Decrease value"
            :disabled="value[0] === 0"
            @click="decreaseValue"
          >
            <Icon name="lucide:minus" class="size-4" aria-hidden="true" />
          </UiButton>
        </div>
        <UiSlider
          v-model="value"
          class="flex-grow"
          :min="minValue"
          :max="maxValue"
          :step="steps"
          aria-label="Dual range slider with UiButtons"
        />
        <div>
          <UiButton
            variant="outline"
            size="icon"
            class="size-8"
            aria-label="Increase value"
            :disabled="value[0] === 200"
            @click="increaseValue"
          >
            <Icon name="lucide:plus" class="size-4" aria-hidden="true" />
          </UiButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const minValue = 0;
  const maxValue = 200;
  const steps = 5;
  const value = ref([100]);

  const decreaseValue = () => {
    if (value.value && value.value[0]) {
      value.value = [Math.max(minValue, value.value[0] - steps)];
    }
  };
  const increaseValue = () => {
    if (value.value && value.value[0]) {
      value.value = [Math.min(maxValue, value.value[0] + steps)];
    }
  };
</script>
```
::

### Money Range

::prose-show-case
:docs-slider-money-range

#code
```vue [DocsSliderMoneyRange.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-3">
      <UiLabel class="tabular-nums">
        From {{ formatPrice(value[0] ?? min_price) }} to {{ formatPrice(value[1] ?? max_price) }}
      </UiLabel>
      <div class="flex items-center gap-4">
        <UiSlider
          v-model="value"
          :min="min_price"
          :max="max_price"
          aria-label="Price range slider"
        />
        <UiButton variant="outline">Go</UiButton>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const min_price = 5;
  const max_price = 1240;
  const value = ref([min_price, max_price]);

  const formatPrice = (price: number) => {
    return price === max_price ? `$${price.toLocaleString()}+` : `$${price.toLocaleString()}`;
  };
</script>
```
::

### Vertical

::prose-show-case
:docs-slider-vertical

#code
```vue [DocsSliderVertical.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-4">
      <UiLabel class="justify-center">Vertical slider</UiLabel>
      <div class="flex h-40 justify-center">
        <UiSlider v-model="value" :max="10" orientation="vertical" aria-label="Vertical slider" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const value = ref([5]);
</script>
```
::

### Vertical Input

::prose-show-case
:docs-slider-vertical-input

#code
```vue [DocsSliderVerticalInput.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-4">
      <UiLabel class="justify-center">Vertical slider with input</UiLabel>
      <div class="flex h-40 flex-col items-center justify-center gap-4">
        <UiSlider
          v-model="value"
          class="data-[orientation=vertical]:min-h-0"
          :min="minValue"
          :max="maxValue"
          orientation="vertical"
          aria-label="Slider with input"
        />
        <UiInput
          v-model="value[0]"
          class="h-8 w-12 px-2 py-1"
          type="text"
          inputmode="decimal"
          aria-label="Enter value"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const minValue = 0;
  const maxValue = 100;
  const initialValue = [25];
  const value = ref(initialValue);
</script>
```
::

### Vertical Dual Range w/ Tooltip

::prose-show-case
:docs-slider-vertical-dual-tooltip

#code
```vue [DocsSliderVerticalDualTooltip.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="*:not-first:mt-4">
      <UiLabel>Vertical dual range slider and tooltip</UiLabel>
      <div class="flex h-40 justify-center">
        <UiSlider
          v-model="value"
          :max="10"
          orientation="vertical"
          aria-label="Vertical slider"
          show-tooltip
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const value = ref([2, 7]);
</script>
```
::

### Object Position

::prose-show-case
:docs-slider-object-position

#code
```vue [DocsSliderObjectPosition.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-4">
      <legend class="text-foreground text-sm font-medium">Object position</legend>
      <div class="space-y-2">
        <div class="flex items-center gap-2">
          <UiLabel class="text-muted-foreground text-xs">X</UiLabel>
          <UiSlider
            v-model="x"
            class="flex-grow [&>:last-child>div]:rounded"
            :min="minValue"
            :max="maxValue"
            aria-label="X"
          />
          <UiInput v-model="x[0]" class="h-8 w-12 px-2 py-1" type="text" aria-label="Enter value" />
        </div>
        <div class="flex items-center gap-2">
          <UiLabel class="text-muted-foreground text-xs">Y</UiLabel>
          <UiSlider
            v-model="y"
            class="flex-grow [&>:last-child>div]:rounded"
            :min="minValue"
            :max="maxValue"
            aria-label="Y"
          />
          <UiInput v-model="y[0]" class="h-8 w-12 px-2 py-1" type="text" aria-label="Enter value" />
        </div>
        <div class="flex items-center gap-2">
          <UiLabel class="text-muted-foreground text-xs">Z</UiLabel>
          <UiSlider
            v-model="z"
            class="flex-grow [&>:last-child>div]:rounded"
            :min="minValue"
            :max="maxValue"
            aria-label="Z"
          />
          <UiInput v-model="z[0]" class="h-8 w-12 px-2 py-1" type="text" aria-label="Enter value" />
        </div>
      </div>
      <UiButton class="w-full" variant="outline" @click="resetAll">
        <Icon name="lucide:rotate-ccw" class="-ms-1 me-2 size-4 opacity-60" aria-hidden="true" />
        Reset
      </UiButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const minValue = -10;
  const maxValue = 10;

  const x = ref([-2]);
  const y = ref([4]);
  const z = ref([2]);

  const resetAll = () => {
    x.value = [0];
    y.value = [0];
    z.value = [0];
  };
</script>
```
::

### Price

::prose-show-case
:docs-slider-price

#code
```vue [DocsSliderPrice.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-4">
      <UiLabel>Price slider</UiLabel>
      <div>
        <!-- Histogram bars  -->
        <div class="flex h-12 w-full items-end px-3" aria-hidden="true">
          <div
            v-for="(count, i) in itemCounts"
            :key="i"
            class="flex flex-1 justify-center"
            :style="{ height: `${(count / maxCount) * 100}%` }"
          >
            <span
              :data-selected="isBarInSelectedRange(i, minValue, priceStep, value)"
              class="bg-primary/20 h-full w-full data-[selected=true]:bg-emerald-500/70"
            />
          </div>
        </div>
        <UiSlider v-model="value" :min="minValue" :max="maxValue" aria-label="Price range" />
      </div>

      <!-- Inputs  -->
      <div class="flex items-center justify-between gap-4">
        <div class="space-y-1">
          <UiLabel for="min-price">Min price</UiLabel>
          <div class="relative">
            <UiInput
              id="min-price"
              v-model="value[0]"
              class="peer w-full ps-6"
              type="text"
              inputmode="decimal"
              aria-label="Enter minimum price"
            />
            <span
              class="text-muted-foreground pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm peer-disabled:opacity-50"
            >
              $
            </span>
          </div>
        </div>
        <div class="space-y-1">
          <UiLabel for="max-price">Max price</UiLabel>
          <div class="relative">
            <UiInput
              id="max-price"
              v-model="value[1]"
              class="peer w-full ps-6"
              type="text"
              inputmode="decimal"
              aria-label="Enter maximum price"
            />
            <span
              class="text-muted-foreground pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm peer-disabled:opacity-50"
            >
              $
            </span>
          </div>
        </div>
      </div>

      <!-- Button -->
      <UiButton class="w-full" variant="outline">
        Show {{ countItemsInRange(value[0] ?? 0, value[1] ?? 0) }} items
      </UiButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const items = [
    { id: 1, price: 80 },
    { id: 2, price: 95 },
    { id: 3, price: 110 },
    { id: 4, price: 125 },
    { id: 5, price: 130 },
    { id: 6, price: 140 },
    { id: 7, price: 145 },
    { id: 8, price: 150 },
    { id: 9, price: 155 },
    { id: 10, price: 165 },
    { id: 11, price: 175 },
    { id: 12, price: 185 },
    { id: 13, price: 195 },
    { id: 14, price: 205 },
    { id: 15, price: 215 },
    { id: 16, price: 225 },
    { id: 17, price: 235 },
    { id: 18, price: 245 },
    { id: 19, price: 255 },
    { id: 20, price: 260 },
    { id: 21, price: 265 },
    { id: 22, price: 270 },
    { id: 23, price: 275 },
    { id: 24, price: 280 },
    { id: 25, price: 285 },
    { id: 26, price: 290 },
    { id: 27, price: 290 },
    { id: 28, price: 295 },
    { id: 29, price: 295 },
    { id: 30, price: 295 },
    { id: 31, price: 298 },
    { id: 32, price: 299 },
    { id: 33, price: 300 },
    { id: 34, price: 305 },
    { id: 35, price: 310 },
    { id: 36, price: 315 },
    { id: 37, price: 320 },
    { id: 38, price: 325 },
    { id: 39, price: 330 },
    { id: 40, price: 335 },
    { id: 41, price: 340 },
    { id: 42, price: 345 },
    { id: 43, price: 350 },
    { id: 44, price: 355 },
    { id: 45, price: 360 },
    { id: 46, price: 365 },
    { id: 47, price: 365 },
    { id: 48, price: 375 },
    { id: 49, price: 380 },
    { id: 50, price: 385 },
    { id: 51, price: 390 },
    { id: 52, price: 395 },
    { id: 53, price: 400 },
    { id: 54, price: 405 },
    { id: 55, price: 410 },
    { id: 56, price: 415 },
    { id: 57, price: 420 },
    { id: 58, price: 425 },
    { id: 59, price: 430 },
    { id: 60, price: 435 },
    { id: 61, price: 440 },
    { id: 62, price: 445 },
    { id: 63, price: 450 },
    { id: 64, price: 455 },
    { id: 65, price: 460 },
    { id: 66, price: 465 },
    { id: 67, price: 470 },
    { id: 68, price: 475 },
    { id: 69, price: 480 },
    { id: 70, price: 485 },
    { id: 71, price: 490 },
    { id: 72, price: 495 },
    { id: 73, price: 495 },
    { id: 74, price: 498 },
    { id: 75, price: 499 },
    { id: 76, price: 500 },
    { id: 77, price: 500 },
    { id: 78, price: 500 },
    { id: 79, price: 515 },
    { id: 80, price: 530 },
    { id: 81, price: 545 },
    { id: 82, price: 560 },
    { id: 83, price: 575 },
    { id: 84, price: 590 },
    { id: 85, price: 605 },
    { id: 86, price: 620 },
    { id: 87, price: 635 },
    { id: 88, price: 650 },
    { id: 89, price: 655 },
    { id: 90, price: 660 },
    { id: 91, price: 665 },
    { id: 92, price: 670 },
    { id: 93, price: 675 },
    { id: 94, price: 680 },
    { id: 95, price: 685 },
    { id: 96, price: 690 },
    { id: 97, price: 695 },
    { id: 98, price: 700 },
    { id: 99, price: 700 },
    { id: 100, price: 700 },
    { id: 101, price: 700 },
    { id: 102, price: 700 },
    { id: 103, price: 700 },
    { id: 104, price: 725 },
    { id: 105, price: 750 },
    { id: 106, price: 775 },
    { id: 107, price: 800 },
    { id: 108, price: 815 },
    { id: 109, price: 830 },
    { id: 110, price: 845 },
    { id: 111, price: 845 },
    { id: 112, price: 845 },
    { id: 113, price: 870 },
    { id: 114, price: 875 },
    { id: 115, price: 880 },
    { id: 116, price: 885 },
    { id: 117, price: 890 },
    { id: 118, price: 895 },
    { id: 119, price: 898 },
    { id: 120, price: 900 },
  ];

  // Define the number of ticks
  const tick_count = 40;
  // Find the min and max values across all items
  const minValue = Math.min(...items.map((item) => item.price));
  const maxValue = Math.max(...items.map((item) => item.price));
  const value = ref([200, 780]);
  // Calculate the price step based on the min and max prices
  const priceStep = (maxValue - minValue) / tick_count;

  // Calculate item counts for each price range
  const itemCounts = Array(tick_count)
    .fill(0)
    .map((_, tick) => {
      const rangeMin = minValue + tick * priceStep;
      const rangeMax = minValue + (tick + 1) * priceStep;
      return items.filter((item) => item.price >= rangeMin && item.price < rangeMax).length;
    });

  // Find maximum count for scaling
  const maxCount = Math.max(...itemCounts);

  // Function to count items in the selected range
  const countItemsInRange = (min: number, max: number) => {
    return items.filter((item) => item.price >= min && item.price <= max).length;
  };

  const isBarInSelectedRange = (
    index: number,
    minValue: number,
    priceStep: number,
    sliderValue: number[]
  ) => {
    const rangeMin = minValue + index * priceStep;
    const rangeMax = minValue + (index + 1) * priceStep;
    return (
      countItemsInRange(sliderValue[0] ?? 0, sliderValue[1] ?? 0) > 0 &&
      rangeMin <= (sliderValue[1] ?? 0) &&
      rangeMax >= (sliderValue[0] ?? 0)
    );
  };
</script>
```
::

### Equalizer

::prose-show-case
:docs-slider-equalizer

#code
```vue [DocsSliderEqualizer.vue]
<template>
  <div class="mx-auto max-w-sm">
    <div class="space-y-4">
      <legend class="text-foreground text-center text-sm font-medium">Equalizer</legend>
      <div class="flex h-48 justify-center gap-8">
        <div class="flex flex-col items-center gap-2">
          <UiSlider
            v-model="v1"
            :min
            :max
            show-tooltip
            orientation="vertical"
            class="[&_[data-slot=slider-thumb]]:h-6 [&_[data-slot=slider-thumb]]:w-4 [&_[data-slot=slider-thumb]]:rounded"
            aria-label="60 Hz"
          />
          <UiLabel class="text-muted-foreground flex w-0 justify-center text-xs">60</UiLabel>
        </div>
        <div class="flex flex-col items-center gap-2">
          <UiSlider
            v-model="v2"
            :min
            :max
            show-tooltip
            orientation="vertical"
            class="[&_[data-slot=slider-thumb]]:h-6 [&_[data-slot=slider-thumb]]:w-4 [&_[data-slot=slider-thumb]]:rounded"
            aria-label="250 Hz"
          />
          <UiLabel class="text-muted-foreground flex w-0 justify-center text-xs">250</UiLabel>
        </div>
        <div class="flex flex-col items-center gap-2">
          <UiSlider
            v-model="v3"
            :min
            :max
            show-tooltip
            orientation="vertical"
            class="[&_[data-slot=slider-thumb]]:h-6 [&_[data-slot=slider-thumb]]:w-4 [&_[data-slot=slider-thumb]]:rounded"
            aria-label="1k"
          />
          <UiLabel class="text-muted-foreground flex w-0 justify-center text-xs">1k</UiLabel>
        </div>
        <div class="flex flex-col items-center gap-2">
          <UiSlider
            v-model="v4"
            :min
            :max
            show-tooltip
            orientation="vertical"
            class="[&_[data-slot=slider-thumb]]:h-6 [&_[data-slot=slider-thumb]]:w-4 [&_[data-slot=slider-thumb]]:rounded"
            aria-label="4k"
          />
          <UiLabel class="text-muted-foreground flex w-0 justify-center text-xs">4k</UiLabel>
        </div>
        <div class="flex flex-col items-center gap-2">
          <UiSlider
            v-model="v5"
            :min
            :max
            show-tooltip
            orientation="vertical"
            class="[&_[data-slot=slider-thumb]]:h-6 [&_[data-slot=slider-thumb]]:w-4 [&_[data-slot=slider-thumb]]:rounded"
            aria-label="16k"
          />
          <UiLabel class="text-muted-foreground flex w-0 justify-center text-xs">16K</UiLabel>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const min = -5;
  const max = 5;
  const v1 = ref([2]);
  const v2 = ref([1]);
  const v3 = ref([-1]);
  const v4 = ref([-3]);
  const v5 = ref([2]);
</script>
```
::


# Sonner

## Source code

Click :source-code-link{component="Sonner.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add sonner
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add sonner
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add sonner
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add sonner
```
::

Add the `<UiSonner />` component to your `app.vue` file:

```vue [app.vue] noFormat
<template>
  <div>
    <NuxtPage />
    <UiSonner />
  </div>
</template>
```

## Usage

### Full example

::prose-show-case
:docs-sonner

#code
```vue [DocsSonner.vue]
<template>
  <div class="flex flex-wrap items-center justify-center gap-3">
    <UiButton
      variant="outline"
      @click="
        useSonner('Default', {
          description: 'This is a description',
          duration: Infinity,
        })
      "
      >Show default</UiButton
    >
    <UiButton
      variant="outline"
      @click="
        useSonner('', {
          description: 'Send new notification to customer?',
          duration: Infinity,
          onDismiss() {
            useSonner.warning('', { description: 'Notification not sent' });
          },
          onAutoClose() {
            useSonner.warning('', { description: 'Notification not sent' });
          },
          action: {
            label: 'Send',
            onClick() {
              useSonner.success('', { description: 'Notification sent' });
            },
          },
        })
      "
      >Show action</UiButton
    >
    <UiButton
      v-for="(t, i) in types"
      :key="i"
      variant="outline"
      @click="
        (useSonner[t](t),
        {
          description: `This is a ${t} message`,
        })
      "
      >Show {{ t }}</UiButton
    >
    <UiButton
      variant="outline"
      @click="
        useSonner.promise(promise, {
          loading: 'Checking API for tools...',
          success: (d: any) => d,
          error: (d: any) => 'API returned error',
        })
      "
      >Show promise</UiButton
    >
    <UiButton
      variant="outline"
      @click="
        useSonner.custom(markRaw(Headless), {
          duration: Infinity,
        })
      "
      >Show custom</UiButton
    >
    <UiButton
      variant="outline"
      @click="
        useSonner.success('Rich Success', {
          description: 'This is a rich success message with custom colors',
          richColors: true,
          duration: Infinity,
        })
      "
      >Rich Success</UiButton
    >
  </div>
</template>

<script lang="ts" setup>
  import Headless from "./DocsSonnerHeadless.vue";

  const types = ["success", "info", "warning", "error"] as const;

  const promise = () =>
    new Promise<string>((resolve) =>
      setTimeout(() => resolve("There are 16 tools ready for use"), 2000)
    );
</script>
```
::

For the custom element, this is what the code looks like

```vue [DocsSonnerHeadless.vue]
<template>
  <div
    class="bg-background relative z-[999] box-border flex w-full gap-4 rounded-md border p-3 px-5 shadow-lg md:w-[360px]"
  >
    <UiAvatar
      class="ring-border ring-1"
      src="https://behonbaker.com/icon.png"
      fallback="BB"
      alt="Behon Baker"
    />
    <div>
      <p class="text-sm font-semibold">Add user</p>
      <p class="text-muted-foreground text-sm font-normal">
        Would you like to add this user to the list?
      </p>
      <div class="mt-2 flex items-center gap-2">
        <UiButton class="h-7 text-xs" @click="addUser">Yes</UiButton>
        <UiButton variant="outline" class="h-7 text-xs" @click="cancel">No</UiButton>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const emits = defineEmits<{
    closeToast: [];
  }>();

  const addUser = () => {
    useSonner.success("User Added", {
      description: "User was added successfully",
      richColors: true,
    });
    emits("closeToast");
  };
  const cancel = () => {
    useSonner.warning("", { description: "User not added" });
    emits("closeToast");
  };
</script>
```


# Splitter

## Source code

Click :source-code-link{component="Splitter"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add splitter
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add splitter
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add splitter
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add splitter
```
::

## Usage

### Basic

We can put the parts together to build a simple layout with a resizable sidebar.

::prose-show-case
:docs-splitter-basic

#code
```vue [DocsSplitterBasic.vue]
<template>
  <div class="flex items-center justify-center">
    <ClientOnly>
      <UiSplitter class="max-w-md rounded-lg border">
        <UiSplitterPanel :min-size="35" :default-size="50">
          <div class="flex h-[200px] items-center justify-center p-6">
            <span class="font-semibold">One</span>
          </div>
        </UiSplitterPanel>
        <UiSplitterHandle />
        <UiSplitterPanel :min-size="20" :default-size="50">
          <UiSplitter direction="vertical">
            <UiSplitterPanel>
              <div class="flex h-full items-center justify-center p-6">
                <span class="font-semibold">Two</span>
              </div>
            </UiSplitterPanel>
            <UiSplitterHandle />
            <UiSplitterPanel>
              <div class="flex h-full items-center justify-center p-6">
                <span class="font-semibold">Three</span>
              </div>
            </UiSplitterPanel>
          </UiSplitter>
        </UiSplitterPanel>
      </UiSplitter>
    </ClientOnly>
  </div>
</template>
```
::

### Handle

We can pass teh `withHandle` prop to the `UiSplitterHandle` component to show a handle.

We can even pass in a custom icon to display for the handle.

Do note that the handle will be rotated because of this class that is added to it `[&[data-orientation=vertical]>div]:rotate-90`.

::prose-show-case
:docs-splitter-handle

#code
```vue [DocsSplitterHandle.vue]
<template>
  <div class="flex items-center justify-center">
    <ClientOnly>
      <UiSplitter class="max-w-md rounded-lg border">
        <UiSplitterPanel :min-size="35" :default-size="50">
          <div class="flex h-[200px] items-center justify-center p-6">
            <span class="font-semibold">One</span>
          </div>
        </UiSplitterPanel>
        <UiSplitterHandle with-handle />
        <UiSplitterPanel :min-size="20" :default-size="50">
          <UiSplitter direction="vertical">
            <UiSplitterPanel>
              <div class="flex h-full items-center justify-center p-6">
                <span class="font-semibold">Two</span>
              </div>
            </UiSplitterPanel>
            <UiSplitterHandle with-handle icon="lucide:circle-dashed" />
            <UiSplitterPanel>
              <div class="flex h-full items-center justify-center p-6">
                <span class="font-semibold">Three</span>
              </div>
            </UiSplitterPanel>
          </UiSplitter>
        </UiSplitterPanel>
      </UiSplitter>
    </ClientOnly>
  </div>
</template>
```
::

### Collapsible

We can use the `collapsible` prop to make the panels go down to the `collapsedSize` when the `minSize` is reached.

::prose-show-case
:docs-splitter-collapsible

#code
```vue [DocsSplitterCollapsible.vue]
<template>
  <div class="flex items-center justify-center">
    <ClientOnly>
      <UiSplitter class="max-w-md rounded-lg border">
        <UiSplitterPanel collapsible :collapsed-size="10" :min-size="35" :default-size="50">
          <div class="flex h-[200px] items-center justify-center p-6">
            <span class="font-semibold">One</span>
          </div>
        </UiSplitterPanel>
        <UiSplitterHandle with-handle />
        <UiSplitterPanel :min-size="20" :default-size="50">
          <UiSplitter direction="vertical">
            <UiSplitterPanel>
              <div class="flex h-full items-center justify-center p-6">
                <span class="font-semibold">Two</span>
              </div>
            </UiSplitterPanel>
            <UiSplitterHandle with-handle />
            <UiSplitterPanel>
              <div class="flex h-full items-center justify-center p-6">
                <span class="font-semibold">Three</span>
              </div>
            </UiSplitterPanel>
          </UiSplitter>
        </UiSplitterPanel>
      </UiSplitter>
    </ClientOnly>
  </div>
</template>
```
::

### Persist Layout with SSR

We can use the `autoSaveId` prop to persist the layout data into the local storage.

Try changing the layout and then refresh the page to see the layout persist.

::prose-show-case
:docs-splitter-persist

#code
```vue [DocsSplitterPersist.vue]
<template>
  <div class="flex items-center justify-center">
    <ClientOnly>
      <template #fallback>
        <UiSkeleton class="max-w-md rounded-lg" />
      </template>

      <UiSplitter auto-save-id="splitter-persist-1" class="max-w-md rounded-lg border">
        <UiSplitterPanel
          v-slot="{ isCollapsed }"
          collapsible
          :collapsed-size="10"
          :min-size="30"
          :default-size="40"
        >
          <div class="flex h-[200px] items-center justify-center p-6">
            <UiButton
              variant="outline"
              :size="isCollapsed ? 'icon-sm' : 'sm'"
              class="shrink-0 whitespace-nowrap"
              @click="$router.go(0)"
            >
              <span v-if="!isCollapsed">Reload page</span>
              <Icon v-else name="lucide:rotate-ccw" class="size-4" />
            </UiButton>
          </div>
        </UiSplitterPanel>
        <UiSplitterHandle />
        <UiSplitterPanel :min-size="20" :default-size="50">
          <div class="flex h-full items-center justify-center p-6">
            <span class="font-semibold">Main</span>
          </div>
        </UiSplitterPanel>
      </UiSplitter>
    </ClientOnly>
  </div>
</template>
```
::


# Stepper

## Source code

Click :source-code-link{component="Stepper"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add stepper
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add stepper
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add stepper
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add stepper
```
::

### Origin UI

::prose-show-case
:docs-stepper-origin

#code
```vue [DocsStepperOrigin.vue]
<template>
  <div class="flex flex-col gap-10 gap-y-10 divide-y *:pb-10 *:last:pb-0">
    <div class="space-y-8 text-center">
      <UiStepper :default-value="2">
        <UiStepperItem
          v-for="step in steps"
          :key="step"
          :step="step"
          :class="step !== steps.length ? 'flex-1' : ''"
        >
          <UiStepperTrigger>
            <UiStepperIndicator>{{ step }}</UiStepperIndicator>
          </UiStepperTrigger>
          <UiStepperSeparator v-if="step < steps.length" />
        </UiStepperItem>
      </UiStepper>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Stepper with numbers only
      </p>
    </div>

    <div class="space-y-8 text-center">
      <UiStepper :default-value="2">
        <UiStepperItem
          v-for="step in steps"
          :key="step"
          :step="step"
          :class="step !== steps.length ? 'flex-1' : ''"
        >
          <UiStepperTrigger>
            <UiStepperIndicator />
          </UiStepperTrigger>
          <UiStepperSeparator v-if="step < steps.length" />
        </UiStepperItem>
      </UiStepper>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Stepper with numbers and checkmarks
      </p>
    </div>

    <div class="space-y-8 text-center">
      <UiStepper :default-value="2">
        <UiStepperItem
          v-for="step in steps"
          :key="step"
          :step="step"
          :class="step !== steps.length ? 'flex-1' : ''"
        >
          <UiStepperTrigger>
            <UiStepperIndicator
              class="group-data-[state=active]/step:border-primary size-4 group-data-[state=active]/step:border-2 group-data-[state=active]/step:bg-transparent [&_span]:sr-only [&_svg]:size-3"
            />
          </UiStepperTrigger>
          <UiStepperSeparator v-if="step < steps.length" />
        </UiStepperItem>
      </UiStepper>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Stepper with tiny buttons and checkmarks
      </p>
    </div>

    <div class="space-y-8 text-center">
      <UiStepper v-model="currentStep">
        <UiStepperItem
          v-for="step in steps"
          :key="step"
          :step="step"
          :class="step !== steps.length ? 'flex-1' : ''"
        >
          <UiStepperTrigger as-child>
            <UiStepperIndicator />
          </UiStepperTrigger>
          <UiStepperSeparator v-if="step < steps.length" />
        </UiStepperItem>
      </UiStepper>
      <div class="flex justify-center space-x-4">
        <UiButton
          variant="outline"
          class="w-32"
          :disabled="currentStep === 1"
          @click="currentStep = currentStep - 1"
        >
          Prev step
        </UiButton>
        <UiButton
          variant="outline"
          class="w-32"
          :disabled="currentStep >= steps.length"
          @click="currentStep = currentStep + 1"
        >
          Next step
        </UiButton>
      </div>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Controlled stepper with checkmarks
      </p>
    </div>

    <div class="space-y-8 text-center">
      <UiStepper v-model="currentStep">
        <UiStepperItem
          v-for="step in steps"
          :key="step"
          :step="step"
          :class="step !== steps.length ? 'flex-1' : ''"
          :data-loading="isLoading && step === currentStep ? 'true' : undefined"
        >
          <UiStepperTrigger as-child>
            <UiStepperIndicator :is-loading="isLoading" />
          </UiStepperTrigger>
          <UiStepperSeparator v-if="step < steps.length" />
        </UiStepperItem>
      </UiStepper>
      <div class="flex justify-center space-x-4">
        <UiButton
          variant="outline"
          class="w-32"
          :disabled="currentStep === 1"
          @click="currentStep = currentStep - 1"
        >
          Prev step
        </UiButton>
        <UiButton
          variant="outline"
          class="w-32"
          :disabled="currentStep >= steps.length"
          @click="handleNextStep"
        >
          Next step
        </UiButton>
      </div>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Controlled stepper with checkmarks and loading state
      </p>
    </div>

    <div class="space-y-8 text-center">
      <UiStepper :default-value="2">
        <UiStepperItem :step="1" class="not-last:flex-1">
          <UiStepperTrigger>
            <UiStepperIndicator as-child>
              <img
                class="rounded-full"
                src="https://i.pravatar.cc/300"
                width="32"
                height="32"
                alt="Mike Palmer"
              />
            </UiStepperIndicator>
          </UiStepperTrigger>
          <UiStepperSeparator />
        </UiStepperItem>
        <UiStepperItem :step="2" class="not-last:flex-1" data-loading>
          <UiStepperTrigger>
            <UiStepperIndicator :is-loading="true" />
          </UiStepperTrigger>
          <UiStepperSeparator />
        </UiStepperItem>
        <UiStepperItem :step="3">
          <UiStepperTrigger>
            <UiStepperIndicator as-child>
              <div>
                <Icon name="lucide:shuffle" aria-hidden="true" class="size-3.5" />
                <span class="sr-only">Shuffle</span>
              </div>
            </UiStepperIndicator>
          </UiStepperTrigger>
        </UiStepperItem>
      </UiStepper>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Stepper with mixed elements
      </p>
    </div>

    <div class="space-y-8 text-center">
      <UiStepper :default-value="2" class="items-start gap-4">
        <UiStepperItem v-for="{ step, title } in steps2" :key="step" :step="step" class="flex-1">
          <UiStepperTrigger class="w-full flex-col items-start gap-2 rounded">
            <UiStepperIndicator class="bg-border h-1 w-full">
              <span class="sr-only">{{ step }}</span>
            </UiStepperIndicator>
            <div class="space-y-0.5">
              <UiStepperTitle>{{ title }}</UiStepperTitle>
            </div>
          </UiStepperTrigger>
        </UiStepperItem>
      </UiStepper>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Stepper with labels
      </p>
    </div>

    <div class="space-y-8 text-center">
      <div class="flex items-center gap-2">
        <UiButton
          class="shrink-0"
          variant="ghost"
          size="icon"
          :disabled="currentStep === 1"
          aria-label="Prev step"
          @click="currentStep = currentStep - 1"
        >
          <Icon name="lucide:chevron-left" :size="16" aria-hidden="true" />
        </UiButton>
        <UiStepper v-model="currentStep" class="gap-1">
          <UiStepperItem v-for="step in steps" :key="step" :step="step" class="flex-1">
            <UiStepperTrigger class="w-full flex-col items-start gap-2" as-child>
              <UiStepperIndicator class="bg-border h-1 w-full">
                <span class="sr-only">{{ step }}</span>
              </UiStepperIndicator>
            </UiStepperTrigger>
          </UiStepperItem>
        </UiStepper>
        <UiButton
          class="shrink-0"
          variant="ghost"
          size="icon"
          aria-label="Next step"
          :disabled="currentStep === steps.length"
          @click="currentStep = currentStep + 1"
        >
          <Icon name="lucide:chevron-right" :size="16" aria-hidden="true" />
        </UiButton>
      </div>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Paginated stepper
      </p>
    </div>

    <div class="space-y-8 text-center">
      <div class="space-y-3">
        <UiStepper v-model="currentStep">
          <UiStepperItem v-for="step in steps" :key="step" :step="step" class="flex-1">
            <UiStepperTrigger class="w-full flex-col items-start gap-2" as-child>
              <UiStepperIndicator class="bg-border h-2 w-full rounded-none">
                <span class="sr-only">{{ step }}</span>
              </UiStepperIndicator>
            </UiStepperTrigger>
          </UiStepperItem>
        </UiStepper>
        <div class="text-muted-foreground text-sm font-medium tabular-nums">
          Step {{ currentStep }} of {{ steps.length }}
        </div>
      </div>
      <div class="flex justify-center space-x-4">
        <UiButton
          variant="outline"
          class="w-32"
          :disabled="currentStep === 1"
          @click="currentStep = currentStep - 1"
        >
          Prev step
        </UiButton>
        <UiButton
          variant="outline"
          class="w-32"
          :disabled="currentStep >= steps.length"
          @click="currentStep = currentStep + 1"
        >
          Next step
        </UiButton>
      </div>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Progress stepper
      </p>
    </div>

    <div class="space-y-8 text-center">
      <UiStepper :default-value="2">
        <UiStepperItem
          v-for="{ step, title, description } in steps3"
          :key="step"
          :step="step"
          class="relative flex-1 flex-col!"
        >
          <UiStepperTrigger class="flex-col gap-3 rounded">
            <UiStepperIndicator />
            <div class="space-y-0.5 px-2">
              <UiStepperTitle>{{ title }}</UiStepperTitle>
              <UiStepperDescription class="max-sm:hidden">
                {{ description }}
              </UiStepperDescription>
            </div>
          </UiStepperTrigger>
          <UiStepperSeparator
            v-if="step < steps3.length"
            class="absolute inset-x-0 top-3 left-[calc(50%+0.75rem+0.125rem)] -order-1 m-0 -translate-y-1/2 group-data-[orientation=horizontal]/stepper:w-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:flex-none"
          />
        </UiStepperItem>
      </UiStepper>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Stepper with titles and descriptions
      </p>
    </div>

    <div class="space-y-8 text-center">
      <UiStepper :default-value="2">
        <UiStepperItem
          v-for="{ step, title } in steps3"
          :key="step"
          :step="step"
          class="max-md:items-start"
          :class="step !== steps3.length ? 'flex-1' : ''"
        >
          <UiStepperTrigger class="rounded max-md:flex-col">
            <UiStepperIndicator />
            <div class="text-center md:text-left">
              <UiStepperTitle>{{ title }}</UiStepperTitle>
            </div>
          </UiStepperTrigger>
          <UiStepperSeparator v-if="step < steps3.length" class="max-md:mt-3.5 md:mx-4" />
        </UiStepperItem>
      </UiStepper>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Stepper with inline titles
      </p>
    </div>

    <div class="space-y-8 text-center">
      <UiStepper :default-value="2">
        <UiStepperItem
          v-for="{ step, title, description } in steps3"
          :key="step"
          :step="step"
          class="max-md:items-start"
          :class="step !== steps3.length ? 'flex-1' : ''"
        >
          <UiStepperTrigger class="rounded max-md:flex-col">
            <UiStepperIndicator />
            <div class="text-center text-[13px] md:text-left">
              <UiStepperTitle>{{ title }}</UiStepperTitle>
              <UiStepperDescription class="truncate text-xs max-sm:hidden">
                {{ description }}
              </UiStepperDescription>
            </div>
          </UiStepperTrigger>
          <UiStepperSeparator v-if="step < steps3.length" class="max-md:mt-3.5 md:mx-4" />
        </UiStepperItem>
      </UiStepper>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Stepper with inline titles and descriptions
      </p>
    </div>

    <div class="space-y-8 text-center">
      <UiStepper :default-value="2">
        <UiStepperItem
          v-for="{ step, title, description } in steps3"
          :key="step"
          :step="step"
          class="max-md:items-start"
          :class="step !== steps3.length ? 'flex-1' : ''"
        >
          <UiStepperTrigger class="gap-4 rounded max-md:flex-col">
            <UiStepperIndicator />
            <div class="text-center md:-order-1 md:text-left">
              <UiStepperTitle class="text-[13px]">{{ title }}</UiStepperTitle>
              <UiStepperDescription class="text-xs max-sm:hidden">
                {{ description }}
              </UiStepperDescription>
            </div>
          </UiStepperTrigger>
          <UiStepperSeparator v-if="step < steps3.length" class="max-md:mt-3.5 md:mx-4" />
        </UiStepperItem>
      </UiStepper>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Stepper with inline titles and descriptions
      </p>
    </div>

    <div class="space-y-8 text-center">
      <UiStepper :default-value="2" orientation="vertical">
        <UiStepperItem v-for="step in steps" :key="step" :step="step" class="not-last:flex-1">
          <UiStepperTrigger>
            <UiStepperIndicator />
          </UiStepperTrigger>
          <UiStepperSeparator v-if="step < steps.length" />
        </UiStepperItem>
      </UiStepper>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Vertical stepper with numbers and checkmarks
      </p>
    </div>

    <div class="space-y-8 text-center">
      <UiStepper v-model="currentStep" orientation="vertical">
        <UiStepperItem v-for="step in steps" :key="step" :step="step" class="not-last:flex-1">
          <UiStepperTrigger as-child>
            <UiStepperIndicator />
          </UiStepperTrigger>
          <UiStepperSeparator v-if="step < steps.length" />
        </UiStepperItem>
      </UiStepper>
      <div class="flex justify-center space-x-4">
        <UiButton
          variant="outline"
          class="w-32"
          :disabled="currentStep === 1"
          @click="currentStep = currentStep - 1"
        >
          Prev step
        </UiButton>
        <UiButton
          variant="outline"
          class="w-32"
          :disabled="currentStep > steps.length"
          @click="currentStep = currentStep + 1"
        >
          Next step
        </UiButton>
      </div>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Controlled vertical stepper with checkmarks
      </p>
    </div>

    <div class="space-y-8 text-center">
      <UiStepper :default-value="2" orientation="vertical">
        <UiStepperItem
          v-for="{ step, title } in steps2"
          :key="step"
          :step="step"
          class="relative items-start not-last:flex-1"
        >
          <UiStepperTrigger class="items-start rounded pb-12 last:pb-0">
            <UiStepperIndicator />
            <div class="mt-0.5 px-2 text-left">
              <UiStepperTitle>{{ title }}</UiStepperTitle>
            </div>
          </UiStepperTrigger>
          <UiStepperSeparator
            v-if="step < steps2.length"
            class="absolute inset-y-0 top-[calc(1.5rem+0.125rem)] left-3 -order-1 m-0 -translate-x-1/2 group-data-[orientation=horizontal]/stepper:w-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:flex-none group-data-[orientation=vertical]/stepper:h-[calc(100%-1.5rem-0.25rem)]"
          />
        </UiStepperItem>
      </UiStepper>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Vertical stepper with inline titles
      </p>
    </div>

    <div class="space-y-8 text-center">
      <UiStepper :default-value="2" orientation="vertical">
        <UiStepperItem
          v-for="{ step, title, description } in steps3"
          :key="step"
          :step="step"
          class="relative items-start not-last:flex-1"
        >
          <UiStepperTrigger class="items-start rounded pb-12 last:pb-0">
            <UiStepperIndicator />
            <div class="mt-0.5 space-y-0.5 px-2 text-left">
              <UiStepperTitle>{{ title }}</UiStepperTitle>
              <UiStepperDescription>{{ description }}</UiStepperDescription>
            </div>
          </UiStepperTrigger>
          <UiStepperSeparator
            v-if="step < steps3.length"
            class="absolute inset-y-0 top-[calc(1.5rem+0.125rem)] left-3 -order-1 m-0 -translate-x-1/2 group-data-[orientation=horizontal]/stepper:w-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:flex-none group-data-[orientation=vertical]/stepper:h-[calc(100%-1.5rem-0.25rem)]"
          />
        </UiStepperItem>
      </UiStepper>
      <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
        Vertical stepper with inline titles and descriptions
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const steps = [1, 2, 3, 4];
  const steps2 = [
    { step: 1, title: "Step One" },
    { step: 2, title: "Step Two" },
    { step: 3, title: "Step Three" },
    { step: 4, title: "Step Four" },
  ];
  const steps3 = [
    { step: 1, title: "Step One", description: "Desc for step one" },
    { step: 2, title: "Step Two", description: "Desc for step two" },
    { step: 3, title: "Step Three", description: "Desc for step three" },
  ];
  const currentStep = ref(2);
  const isLoading = ref(false);

  const handleNextStep = () => {
    isLoading.value = true;
    setTimeout(() => {
      currentStep.value = currentStep.value + 1;
      isLoading.value = false;
    }, 1000);
  };
</script>
```
::


# Switch

## Source code

Click :source-code-link{component="Switch"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add switch
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add switch
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add switch
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add switch
```
::

## Usage

### Basic example

::prose-show-case
:docs-switch

#code
```vue [DocsSwitch.vue]
<template>
  <div class="flex w-full justify-center">
    <div class="flex items-center space-x-2">
      <UiSwitch id="airplane-mode" />
      <UiLabel for="airplane-mode">Airplane Mode</UiLabel>
    </div>
  </div>
</template>
```
::

### Form

::prose-show-case
:docs-switch-form

#code
```vue [DocsSwitchForm.vue]
<template>
  <form @submit="onSubmit">
    <div class="mx-auto grid w-full max-w-xs">
      <Field v-slot="{ value, handleChange }" name="mode">
        <UiFormItem class="flex flex-col">
          <div class="flex items-center gap-3">
            <UiSwitch :model-value="value" @update:model-value="handleChange" />
            <UiFormLabel class="w-auto"> Airplane mode </UiFormLabel>
          </div>
        </UiFormItem>
      </Field>
      <div class="mt-4">
        <UiButton type="submit" size="sm"> Update </UiButton>
      </div>
    </div>
  </form>
</template>
<script lang="ts" setup>
  import { boolean, object } from "yup";

  const { handleSubmit } = useForm({
    validationSchema: toTypedSchema(
      object({
        mode: boolean().label("Airplane Mode"),
      })
    ),
  });

  const onSubmit = handleSubmit((data) => {
    useSonner.success("Mode changed", {
      description: `Airplane mode is ${data.mode ? "on" : "off"}`,
    });
  });
</script>
```
::

### Origin UI

::prose-show-case
:docs-switch-origin

#code
```vue [DocsSwitchOrigin.vue]
<template>
  <div class="@container">
    <div
      class="grid grid-cols-1 *:flex *:items-center *:justify-center *:p-10 @[450px]:grid-cols-2"
    >
      <div class="inline-flex items-center gap-2">
        <UiSwitch :id="`${id}-simple-switch`" />
        <UiLabel :for="`${id}-simple-switch`" class="sr-only">Simple switch</UiLabel>
      </div>

      <div class="inline-flex items-center gap-2">
        <UiSwitch
          :id="id + 'small-switch'"
          class="h-5 w-8 [&_span]:size-4 data-[state=checked]:[&_span]:translate-x-3 data-[state=checked]:[&_span]:rtl:-translate-x-3"
        />
        <UiLabel :for="id + 'small-switch'" class="sr-only">Small switch</UiLabel>
      </div>

      <div
        class="inline-flex items-center gap-2 [--primary:var(--color-indigo-500)] [--ring:var(--color-indigo-300)] dark:[--primary:var(--color-indigo-500)] dark:[--ring:var(--color-indigo-900)]"
      >
        <UiSwitch :id="id + 'colored-switch'" :default-value="true" />
        <UiLabel :for="id + 'colored-switch'" class="sr-only">Colored switch</UiLabel>
      </div>

      <div class="inline-flex items-center gap-2">
        <UiSwitch :id="id + 'square-switch'" class="rounded-sm [&_span]:rounded" />
        <UiLabel :for="id + 'square-switch'" class="sr-only">Square switch</UiLabel>
      </div>

      <div class="inline-flex items-center gap-2">
        <UiSwitch
          :id="id + 'm2-style-switch'"
          class="[&_span]:border-input h-3 w-9 border-none outline-offset-[6px] [&_span]:border"
        />
        <UiLabel :for="id + 'm2-style-switch'" class="sr-only">M2-style switch</UiLabel>
      </div>

      <div class="inline-flex items-center gap-2">
        <UiSwitch
          :id="id + 'm3-style-switch'"
          class="data-[state=unchecked]:border-input data-[state=unchecked]:[&_span]:bg-input data-[state=unchecked]:bg-transparent [&_span]:transition-all data-[state=unchecked]:[&_span]:size-4 data-[state=unchecked]:[&_span]:translate-x-0.5 data-[state=unchecked]:[&_span]:shadow-none data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5"
        />
        <UiLabel :for="id + 'm3-style-switch'" class="sr-only">M3-style switch</UiLabel>
      </div>

      <div class="inline-flex items-center gap-2">
        <UiSwitch :id="id + 'on-off-switch'" v-model="checked" aria-label="Toggle switch" />
        <UiLabel :for="id + 'on-off-switch'" class="text-sm font-medium">
          {{ checked ? "On" : "Off" }}
        </UiLabel>
      </div>

      <div
        class="group inline-flex items-center gap-2"
        :data-state="checked ? 'checked' : 'unchecked'"
      >
        <span
          :id="`${id}-off`"
          class="group-data-[state=checked]:text-muted-foreground/70 flex-1 cursor-pointer text-right text-sm font-medium"
          :aria-controls="id"
          @click="checked = false"
        >
          Off
        </span>
        <UiSwitch :id="id" v-model="checked" :aria-labelledby="`${id}-off ${id}-on`" />
        <span
          :id="`${id}-on`"
          class="group-data-[state=unchecked]:text-muted-foreground/70 flex-1 cursor-pointer text-left text-sm font-medium"
          :aria-controls="id"
          @click="checked = true"
        >
          On
        </span>
      </div>

      <div class="inline-flex items-center gap-2">
        <UiSwitch :id="id + 'sun-moon'" v-model="checked" aria-label="Toggle switch" />
        <UiLabel :for="id + 'sun-moon'">
          <span class="sr-only">Toggle switch</span>
          <Icon v-if="checked" name="lucide:sun" :size="16" aria-hidden="true" />
          <Icon v-else name="lucide:moon" :size="16" aria-hidden="true" />
        </UiLabel>
      </div>

      <div
        class="group mx-auto inline-flex w-fit items-center justify-center gap-2"
        :data-state="checked ? 'checked' : 'unchecked'"
      >
        <span
          :id="`${id}-off-2`"
          class="group-data-[state=checked]:text-muted-foreground/70 flex-1 cursor-pointer text-right text-sm font-medium"
          :aria-controls="id"
          @click="checked = false"
        >
          <Icon name="lucide:moon" :size="16" aria-hidden="true" />
        </span>
        <UiSwitch
          :id="id"
          v-model="checked"
          :aria-labelledby="`${id}-off ${id}-on`"
          aria-label="Toggle between dark and light mode"
        />
        <span
          :id="`${id}-on-2`"
          class="group-data-[state=unchecked]:text-muted-foreground/70 flex-1 cursor-pointer text-left text-sm font-medium"
          :aria-controls="id"
          @click="checked = true"
        >
          <Icon name="lucide:sun" :size="16" aria-hidden="true" />
        </span>
      </div>

      <div>
        <div class="relative inline-grid h-9 grid-cols-[1fr_1fr] items-center text-sm font-medium">
          <UiSwitch
            :id="id + 'label-inside-switch'"
            v-model="checked"
            class="peer data-[state=unchecked]:bg-input/50 absolute inset-0 h-[inherit] w-auto rounded-md [&_span]:z-10 [&_span]:h-full [&_span]:w-1/2 [&_span]:rounded-sm [&_span]:transition-transform [&_span]:duration-300 [&_span]:[transition-timing-function:cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-full [&_span]:data-[state=checked]:rtl:-translate-x-full"
          />
          <span
            class="pointer-events-none relative ms-0.5 flex items-center justify-center px-2 text-center transition-transform duration-300 [transition-timing-function:cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:invisible peer-data-[state=unchecked]:translate-x-full peer-data-[state=unchecked]:rtl:-translate-x-full"
          >
            <span class="text-[10px] font-medium uppercase">Off</span>
          </span>
          <span
            class="peer-data-[state=checked]:text-background pointer-events-none relative me-0.5 flex items-center justify-center px-2 text-center transition-transform duration-300 [transition-timing-function:cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:-translate-x-full peer-data-[state=unchecked]:invisible peer-data-[state=checked]:rtl:translate-x-full"
          >
            <span class="text-[10px] font-medium uppercase">On</span>
          </span>
        </div>
        <UiLabel :for="id + 'label-inside-switch'" class="sr-only">Labeled switch</UiLabel>
      </div>

      <div>
        <div
          class="border-input has-data-[state=checked]:border-primary/50 relative flex w-full items-start gap-2 rounded-md border p-4 shadow-xs outline-none"
        >
          <UiSwitch
            :id="id"
            class="order-1 h-4 w-6 after:absolute after:inset-0 [&_span]:size-3 data-[state=checked]:[&_span]:translate-x-2 data-[state=checked]:[&_span]:rtl:-translate-x-2"
            :aria-describedby="`${id}-description`"
          />
          <div class="grid grow gap-2">
            <UiLabel :for="id">
              Label
              <span class="text-muted-foreground text-xs leading-[inherit] font-normal">
                (Sublabel)
              </span>
            </UiLabel>
            <p :id="`${id}-description`" class="text-muted-foreground text-xs">
              A short description goes here.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const id = useId();
  const checked = ref(false);
</script>
```
::


# Table

## Source code

Click :source-code-link{component="Table"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add table
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add table
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add table
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add table
```
::

## Usage

### Basic example

::prose-show-case
:docs-table

#code
```vue [DocsTable.vue]
<template>
  <div class="grid overflow-x-auto rounded-md border pb-4">
    <UiTable>
      <UiTableCaption>A list of your recent invoices.</UiTableCaption>
      <UiTableHeader>
        <UiTableRow>
          <UiTableHead class="w-[100px]">Invoice</UiTableHead>
          <UiTableHead>Status</UiTableHead>
          <UiTableHead>Method</UiTableHead>
          <UiTableHead class="text-right">Amount</UiTableHead>
        </UiTableRow>
      </UiTableHeader>
      <UiTableBody class="last:border-b">
        <template v-for="invoice in invoices" :key="invoice.id">
          <UiTableRow>
            <UiTableCell class="font-medium">{{ invoice.invoice }} </UiTableCell>
            <UiTableCell>{{ invoice.paymentStatus }}</UiTableCell>
            <UiTableCell>{{ invoice.paymentMethod }}</UiTableCell>
            <UiTableCell class="text-right">{{ formatCurrency(invoice.totalAmount) }}</UiTableCell>
          </UiTableRow>
        </template>
      </UiTableBody>
      <UiTableFooter>
        <UiTableRow>
          <UiTableCell colspan="3">Total</UiTableCell>
          <UiTableCell class="text-right">{{ formatCurrency(total) }}</UiTableCell>
        </UiTableRow>
      </UiTableFooter>
    </UiTable>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data: invoices } = await useAsyncData(async () => {
    return Array.from({ length: 7 }, (item, index) => ({
      invoice: `INV00${index + 1}`,
      paymentStatus: faker.helpers.arrayElement(["Paid", "Pending", "Unpaid"]),
      totalAmount: faker.number.float({ fractionDigits: 2, min: 100, max: 1000 }),
      paymentMethod: faker.helpers.arrayElement(["Credit Card", "PayPal", "Bank Transfer"]),
    }));
  });

  const total = computed(() => {
    return invoices.value?.reduce((acc, invoice) => acc + invoice.totalAmount, 0);
  });

  const formatCurrency = (value: number = 0) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };
</script>
```
::

### Simple

::prose-show-case
:docs-table-simple

#code
```vue [DocsTableSimple.vue]
<template>
  <div>
    <div class="grid grid-cols-1 gap-5 md:flex md:items-center md:justify-between">
      <div class="flex flex-col">
        <h1 class="font-semibold">Users</h1>
        <p class="text-muted-foreground text-sm">
          A list of all the users in your account including their name, title, email and role.
        </p>
      </div>
      <div>
        <UiButton size="sm">Add user</UiButton>
      </div>
    </div>
    <div class="mt-10 grid overflow-x-auto">
      <UiTable class="w-full table-auto">
        <UiTableHeader>
          <UiTableRow>
            <UiTableHead class="text-foreground pl-0 font-semibold">Name</UiTableHead>
            <UiTableHead class="text-foreground pl-0 font-semibold">Title</UiTableHead>
            <UiTableHead class="text-foreground pl-0 font-semibold">Email</UiTableHead>
            <UiTableHead class="text-foreground pl-0 font-semibold">Role</UiTableHead>
            <UiTableHead class="pl-0">
              <span class="sr-only">Actions</span>
            </UiTableHead>
          </UiTableRow>
        </UiTableHeader>
        <UiTableBody>
          <template v-for="user in users" :key="user.id">
            <UiTableRow>
              <UiTableCell class="pl-0 font-medium">{{ user.name }} </UiTableCell>
              <UiTableCell class="text-muted-foreground pl-0">{{ user.title }}</UiTableCell>
              <UiTableCell class="text-muted-foreground pl-0">{{ user.email }}</UiTableCell>
              <UiTableCell class="text-muted-foreground pl-0">{{ user.role }}</UiTableCell>
              <UiTableCell class="pl-0 text-right">
                <UiButton size="sm" variant="linkHover2">Edit</UiButton>
              </UiTableCell>
            </UiTableRow>
          </template>
        </UiTableBody>
      </UiTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data: users } = useAsyncData(async () => {
    return Array.from({ length: 6 }, () => {
      const firstName = faker.person.firstName();
      const lastName = faker.person.lastName();
      const email = faker.internet.email({ firstName, lastName });
      return {
        id: faker.string.uuid(),
        name: `${firstName} ${lastName}`,
        title: faker.person.jobTitle(),
        email: email.toLowerCase(),
        role: faker.helpers.arrayElement(["Admin", "Member", "Viewer"]),
      };
    });
  });
</script>
```
::

### Stacked on mobile

::prose-show-case
:docs-table-stacked-mobile

#code
```vue [DocsTableStackedMobile.vue]
<template>
  <div>
    <div class="grid grid-cols-1 gap-5 md:flex md:items-center md:justify-between">
      <div class="flex flex-col">
        <h1 class="font-semibold">Users</h1>
        <p class="text-muted-foreground text-sm">
          A list of all the users in your account including their name, title, email and role.
        </p>
      </div>
      <div>
        <UiButton size="sm">Add user</UiButton>
      </div>
    </div>

    <div class="mt-10 grid overflow-x-auto">
      <UiTable>
        <UiTableHeader>
          <UiTableRow>
            <UiTableHead class="text-foreground pl-0 font-semibold">Name</UiTableHead>
            <UiTableHead class="text-foreground hidden pl-0 font-semibold lg:table-cell"
              >Title</UiTableHead
            >
            <UiTableHead class="text-foreground hidden pl-0 font-semibold md:table-cell"
              >Email</UiTableHead
            >
            <UiTableHead class="text-foreground pl-0 font-semibold">Role</UiTableHead>
            <UiTableHead class="pl-0">
              <span class="sr-only">Actions</span>
            </UiTableHead>
          </UiTableRow>
        </UiTableHeader>
        <UiTableBody>
          <template v-for="user in users" :key="user.id">
            <UiTableRow>
              <UiTableCell class="pl-0">
                <div class="flex flex-col">
                  <p class="font-medium">{{ user.name }}</p>
                  <p class="text-muted-foreground lg:hidden">{{ user.title }}</p>
                  <p class="text-muted-foreground md:hidden">{{ user.email }}</p>
                </div>
              </UiTableCell>
              <UiTableCell class="text-muted-foreground hidden pl-0 lg:table-cell">{{
                user.title
              }}</UiTableCell>
              <UiTableCell class="text-muted-foreground hidden pl-0 md:table-cell">{{
                user.email
              }}</UiTableCell>
              <UiTableCell class="text-muted-foreground pl-0">{{ user.role }}</UiTableCell>
              <UiTableCell class="pl-0 text-right">
                <UiButton size="sm" variant="linkHover2">Edit</UiButton>
              </UiTableCell>
            </UiTableRow>
          </template>
        </UiTableBody>
      </UiTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data: users } = useAsyncData(async () => {
    return Array.from({ length: 6 }, () => {
      const firstName = faker.person.firstName();
      const lastName = faker.person.lastName();
      const email = faker.internet.email({ firstName, lastName });
      return {
        id: faker.string.uuid(),
        name: `${firstName} ${lastName}`,
        title: faker.person.jobTitle(),
        email: email.toLowerCase(),
        role: faker.helpers.arrayElement(["Admin", "Member", "Viewer"]),
      };
    });
  });
</script>
```
::

### Sticky header

::prose-show-case
:docs-table-sticky-header

#code
```vue [DocsTableStickyHeader.vue]
<template>
  <div class="overflow-y-auto">
    <div class="grid grid-cols-1 gap-5 md:flex md:items-center md:justify-between">
      <div class="flex flex-col">
        <h1 class="font-semibold">Users</h1>
        <p class="text-muted-foreground text-sm">
          A list of all the users in your account including their name, title, email and role.
        </p>
      </div>
      <div>
        <UiButton size="sm">Add user</UiButton>
      </div>
    </div>

    <div class="mt-10 [&>div]:max-h-[500px]">
      <UiTable class="">
        <UiTableHeader class="bg-background/90 sticky top-0 z-10 backdrop-blur-sm">
          <UiTableRow>
            <UiTableHead class="text-foreground pl-0 font-semibold backdrop-blur">Name</UiTableHead>
            <UiTableHead
              class="bg-background/90 text-foreground hidden pl-0 font-semibold backdrop-blur lg:table-cell"
              >Title</UiTableHead
            >
            <UiTableHead
              class="bg-background/90 text-foreground hidden pl-0 font-semibold backdrop-blur md:table-cell"
              >Email</UiTableHead
            >
            <UiTableHead class="text-foreground pl-0 font-semibold backdrop-blur">Role</UiTableHead>
            <UiTableHead class="pl-0 backdrop-blur">
              <span class="sr-only">Actions</span>
            </UiTableHead>
          </UiTableRow>
        </UiTableHeader>
        <UiTableBody>
          <template v-for="user in users" :key="user.id">
            <UiTableRow>
              <UiTableCell class="pl-0">
                <div class="flex flex-col">
                  <p class="font-medium">{{ user.name }}</p>
                  <p class="text-muted-foreground lg:hidden">{{ user.title }}</p>
                  <p class="text-muted-foreground md:hidden">{{ user.email }}</p>
                </div>
              </UiTableCell>
              <UiTableCell class="text-muted-foreground hidden pl-0 lg:table-cell">{{
                user.title
              }}</UiTableCell>
              <UiTableCell class="text-muted-foreground hidden pl-0 md:table-cell">{{
                user.email
              }}</UiTableCell>
              <UiTableCell class="text-muted-foreground pl-0">{{ user.role }}</UiTableCell>
              <UiTableCell class="pl-0 text-right">
                <UiButton size="sm" variant="linkHover2">Edit</UiButton>
              </UiTableCell>
            </UiTableRow>
          </template>
        </UiTableBody>
      </UiTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data: users } = useAsyncData(async () => {
    return Array.from({ length: 20 }, () => {
      const firstName = faker.person.firstName();
      const lastName = faker.person.lastName();
      const email = faker.internet.email({ firstName, lastName });
      return {
        id: faker.string.uuid(),
        name: `${firstName} ${lastName}`,
        title: faker.person.jobTitle(),
        email: email.toLowerCase(),
        role: faker.helpers.arrayElement(["Admin", "Member", "Viewer"]),
      };
    });
  });
</script>
```
::

## Origin UI Examples

These are some examples that I found today over here [Origin UI](https://originui.com/tables){rel="&#x22;nofollow&#x22;"} ❤️. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

### Basic Table

::prose-show-case
:docs-table-basic

#code
```vue [DocsTableBasic.vue]
<template>
  <div>
    <UiTable>
      <UiTableHeader>
        <UiTableRow class="hover:bg-transparent">
          <UiTableHead>Name</UiTableHead>
          <UiTableHead>Email</UiTableHead>
          <UiTableHead>Location</UiTableHead>
          <UiTableHead>Status</UiTableHead>
          <UiTableHead class="text-right">Balance</UiTableHead>
        </UiTableRow>
      </UiTableHeader>
      <UiTableBody>
        <UiTableRow v-for="item in data" :key="item.id">
          <UiTableCell class="font-medium">{{ item.name }}</UiTableCell>
          <UiTableCell>{{ item.email }}</UiTableCell>
          <UiTableCell>{{ item.location }}</UiTableCell>
          <UiTableCell>{{ item.status }}</UiTableCell>
          <UiTableCell class="text-right">{{ formatCurrency(item.balance) }}</UiTableCell>
        </UiTableRow>
      </UiTableBody>
      <UiTableFooter class="bg-transparent">
        <UiTableRow class="hover:bg-transparent">
          <UiTableCell colspan="4">Total</UiTableCell>
          <UiTableCell class="text-right">{{ formatCurrency(total) }}</UiTableCell>
        </UiTableRow>
      </UiTableFooter>
    </UiTable>
    <p class="text-muted-foreground mt-4 text-center text-sm">Basic table</p>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 5 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      }));
    },
    { default: () => [] }
  );

  const total = computed(() => {
    return data.value?.reduce((acc, item) => acc + item.balance, 0);
  });

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };
</script>
```
::

### Table with Images

::prose-show-case
:docs-table-images

#code
```vue [DocsTableImages.vue]
<template>
  <div>
    <UiTable>
      <UiTableHeader>
        <UiTableRow class="hover:bg-transparent">
          <UiTableHead>Name</UiTableHead>
          <UiTableHead>Email</UiTableHead>
          <UiTableHead>Location</UiTableHead>
          <UiTableHead>Status</UiTableHead>
          <UiTableHead class="text-right">Balance</UiTableHead>
        </UiTableRow>
      </UiTableHeader>
      <UiTableBody>
        <UiTableRow v-for="item in data" :key="item.id">
          <UiTableCell>
            <div class="flex items-center gap-3">
              <UiAvatar class="size-8" :src="item.image" :alt="item.name" />
              <div class="leading-none">
                <div class="font-medium">{{ item.name }}</div>
                <span class="text-muted-foreground mt-1 inline-block text-xs"
                  >@{{ item.username }}</span
                >
              </div>
            </div>
          </UiTableCell>
          <UiTableCell>{{ item.email }}</UiTableCell>
          <UiTableCell>{{ item.location }}</UiTableCell>
          <UiTableCell>{{ item.status }}</UiTableCell>
          <UiTableCell class="text-right">{{ formatCurrency(item.balance) }}</UiTableCell>
        </UiTableRow>
      </UiTableBody>
    </UiTable>
    <p class="text-muted-foreground mt-4 text-center text-sm">Table with images</p>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 5 }, (item, index) => {
        return {
          id: index + 1,
          name: faker.person.fullName(),
          username: faker.internet.username().toLowerCase(),
          image: faker.image.avatar().toLowerCase(),
          email: faker.internet.email()?.toLowerCase(),
          location: faker.location.city(),
          status: faker.helpers.arrayElement(["Active", "Inactive"]),
          balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
        };
      });
    },
    { default: () => [] }
  );

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };
</script>
```
::

### Table No Horizontal Lines

::prose-show-case
:docs-table-no-horizontal-lines

#code
```vue [DocsTableNoHorizontalLines.vue]
<template>
  <div>
    <UiTable>
      <UiTableHeader>
        <UiTableRow class="hover:bg-transparent">
          <UiTableHead>Name</UiTableHead>
          <UiTableHead>Email</UiTableHead>
          <UiTableHead>Location</UiTableHead>
          <UiTableHead>Status</UiTableHead>
          <UiTableHead class="text-right">Balance</UiTableHead>
        </UiTableRow>
      </UiTableHeader>
      <tbody aria-hidden="true" class="table-row h-2" />
      <UiTableBody class="[&_td:first-child]:rounded-l-lg [&_td:last-child]:rounded-r-lg">
        <UiTableRow v-for="item in data" :key="item.id" class="border-none">
          <UiTableCell class="py-2.5 font-medium">{{ item.name }}</UiTableCell>
          <UiTableCell class="py-2.5">{{ item.email }}</UiTableCell>
          <UiTableCell class="py-2.5">{{ item.location }}</UiTableCell>
          <UiTableCell class="py-2.5">{{ item.status }}</UiTableCell>
          <UiTableCell class="py-2.5 text-right">{{ formatCurrency(item.balance) }}</UiTableCell>
        </UiTableRow>
      </UiTableBody>
      <tbody aria-hidden="true" class="table-row h-2" />
      <UiTableFooter class="border-t-0 bg-transparent">
        <UiTableRow class="hover:bg-transparent">
          <UiTableCell colspan="4">Total</UiTableCell>
          <UiTableCell class="text-right">{{ formatCurrency(total) }}</UiTableCell>
        </UiTableRow>
      </UiTableFooter>
    </UiTable>
    <p class="text-muted-foreground mt-4 text-center text-sm">Table without horizontal dividers</p>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 5 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      }));
    },
    { default: () => [] }
  );

  const total = computed(() => {
    return data.value?.reduce((acc, item) => acc + item.balance, 0);
  });

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };
</script>
```
::

### Striped Tabled

::prose-show-case
:docs-table-striped

#code
```vue [DocsTableStriped.vue]
<template>
  <div>
    <UiTable>
      <UiTableHeader>
        <UiTableRow class="hover:bg-transparent">
          <UiTableHead>Name</UiTableHead>
          <UiTableHead>Email</UiTableHead>
          <UiTableHead>Location</UiTableHead>
          <UiTableHead>Status</UiTableHead>
          <UiTableHead class="text-right">Balance</UiTableHead>
        </UiTableRow>
      </UiTableHeader>
      <tbody aria-hidden="true" class="table-row h-2" />
      <UiTableBody class="[&_td:first-child]:rounded-l-lg [&_td:last-child]:rounded-r-lg">
        <UiTableRow
          v-for="item in data"
          :key="item.id"
          class="odd:bg-muted/50 odd:hover:bg-muted/50 border-none hover:bg-transparent"
        >
          <UiTableCell class="py-2.5 font-medium">{{ item.name }}</UiTableCell>
          <UiTableCell class="py-2.5">{{ item.email }}</UiTableCell>
          <UiTableCell class="py-2.5">{{ item.location }}</UiTableCell>
          <UiTableCell class="py-2.5">{{ item.status }}</UiTableCell>
          <UiTableCell class="py-2.5 text-right">{{ formatCurrency(item.balance) }}</UiTableCell>
        </UiTableRow>
      </UiTableBody>
      <tbody aria-hidden="true" class="table-row h-2" />
      <UiTableFooter class="border-t-0 bg-transparent">
        <UiTableRow class="hover:bg-transparent">
          <UiTableCell colspan="4">Total</UiTableCell>
          <UiTableCell class="text-right">{{ formatCurrency(total) }}</UiTableCell>
        </UiTableRow>
      </UiTableFooter>
    </UiTable>
    <p class="text-muted-foreground mt-4 text-center text-sm">Striped table</p>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 5 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      }));
    },
    { default: () => [] }
  );

  const total = computed(() => {
    return data.value?.reduce((acc, item) => acc + item.balance, 0);
  });

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };
</script>
```
::

### Vertical Lines

::prose-show-case
:docs-table-vertical-lines

#code
```vue [DocsTableVerticalLines.vue]
<template>
  <div>
    <UiTable>
      <UiTableHeader>
        <UiTableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
          <UiTableHead>Name</UiTableHead>
          <UiTableHead>Email</UiTableHead>
          <UiTableHead>Location</UiTableHead>
          <UiTableHead>Status</UiTableHead>
          <UiTableHead class="text-right">Balance</UiTableHead>
        </UiTableRow>
      </UiTableHeader>
      <UiTableBody class="[&_td:first-child]:rounded-l-lg [&_td:last-child]:rounded-r-lg">
        <UiTableRow
          v-for="item in data"
          :key="item.id"
          class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r"
        >
          <UiTableCell class="font-medium">{{ item.name }}</UiTableCell>
          <UiTableCell>{{ item.email }}</UiTableCell>
          <UiTableCell>{{ item.location }}</UiTableCell>
          <UiTableCell>{{ item.status }}</UiTableCell>
          <UiTableCell class="text-right">{{ formatCurrency(item.balance) }}</UiTableCell>
        </UiTableRow>
      </UiTableBody>
      <UiTableFooter class="bg-transparent">
        <UiTableRow class="hover:bg-transparent">
          <UiTableCell colspan="4">Total</UiTableCell>
          <UiTableCell class="text-right">{{ formatCurrency(total) }}</UiTableCell>
        </UiTableRow>
      </UiTableFooter>
    </UiTable>
    <p class="text-muted-foreground mt-4 text-center text-sm">Table with vertical lines</p>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 5 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      }));
    },
    { default: () => [] }
  );

  const total = computed(() => {
    return data.value?.reduce((acc, item) => acc + item.balance, 0);
  });

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };
</script>
```
::

### Dense Table

::prose-show-case
:docs-table-dense

#code
```vue [DocsTableDense.vue]
<template>
  <div>
    <div class="border-border bg-background overflow-hidden rounded-lg border">
      <UiTable>
        <UiTableHeader>
          <UiTableRow class="bg-muted/50">
            <UiTableHead v-for="h in headers" :key="h" class="h-9 py-2 whitespace-nowrap">{{
              h
            }}</UiTableHead>
          </UiTableRow>
        </UiTableHeader>
        <UiTableBody>
          <UiTableRow v-for="language in programmingLanguages" :key="language.id">
            <UiTableCell class="py-2 font-medium">{{ language.name }}</UiTableCell>
            <UiTableCell class="py-2">{{ language.releaseYear }}</UiTableCell>
            <UiTableCell class="py-2">{{ language.developer }}</UiTableCell>
            <UiTableCell class="py-2">{{ language.typing }}</UiTableCell>
            <UiTableCell class="py-2">{{ language.paradigm }}</UiTableCell>
            <UiTableCell class="py-2">{{ language.extension }}</UiTableCell>
            <UiTableCell class="py-2">{{ language.latestVersion }}</UiTableCell>
            <UiTableCell class="py-2">{{ language.popularity }}</UiTableCell>
          </UiTableRow>
        </UiTableBody>
      </UiTable>
    </div>
    <p class="text-muted-foreground mt-4 text-center text-sm">Dense table</p>
  </div>
</template>

<script lang="ts" setup>
  const headers = [
    "Name",
    "Release Year",
    "Developer",
    "Typing",
    "Paradigm",
    "Extension",
    "Latest Version",
    "Popularity",
  ];
  const programmingLanguages = [
    {
      id: "1",
      name: "JavaScript",
      releaseYear: "1995",
      developer: "Brendan Eich",
      typing: "Dynamic",
      paradigm: "Multi-paradigm",
      extension: ".js",
      latestVersion: "ES2021",
      popularity: "High",
    },
    {
      id: "2",
      name: "Python",
      releaseYear: "1991",
      developer: "Guido van Rossum",
      typing: "Dynamic",
      paradigm: "Multi-paradigm",
      extension: ".py",
      latestVersion: "3.10",
      popularity: "High",
    },
    {
      id: "3",
      name: "Java",
      releaseYear: "1995",
      developer: "James Gosling",
      typing: "Static",
      paradigm: "Object-oriented",
      extension: ".java",
      latestVersion: "17",
      popularity: "High",
    },
    {
      id: "4",
      name: "C++",
      releaseYear: "1985",
      developer: "Bjarne Stroustrup",
      typing: "Static",
      paradigm: "Multi-paradigm",
      extension: ".cpp",
      latestVersion: "C++20",
      popularity: "High",
    },
    {
      id: "5",
      name: "Ruby",
      releaseYear: "1995",
      developer: "Yukihiro Matsumoto",
      typing: "Dynamic",
      paradigm: "Multi-paradigm",
      extension: ".rb",
      latestVersion: "3.0",
      popularity: "Low",
    },
  ];
</script>
```
::

### Row Selection

::prose-show-case
:docs-table-basic-row-selection

#code
```vue [DocsTableBasicRowSelection.vue]
<template>
  <div>
    <UiTable>
      <UiTableHeader>
        <UiTableRow class="hover:bg-transparent">
          <UiTableHead>
            <UiCheckbox />
          </UiTableHead>
          <UiTableHead>Name</UiTableHead>
          <UiTableHead>Email</UiTableHead>
          <UiTableHead>Location</UiTableHead>
          <UiTableHead>Status</UiTableHead>
          <UiTableHead class="text-right">Balance</UiTableHead>
        </UiTableRow>
      </UiTableHeader>
      <UiTableBody>
        <UiTableRow
          v-for="item in data"
          :key="item.id"
          class="has-[[data-state=checked]]:bg-muted/50"
        >
          <UiTableCell>
            <UiCheckbox />
          </UiTableCell>
          <UiTableCell class="font-medium">{{ item.name }}</UiTableCell>
          <UiTableCell>{{ item.email }}</UiTableCell>
          <UiTableCell>{{ item.location }}</UiTableCell>
          <UiTableCell>{{ item.status }}</UiTableCell>
          <UiTableCell class="text-right">{{ formatCurrency(item.balance) }}</UiTableCell>
        </UiTableRow>
      </UiTableBody>
      <UiTableFooter class="bg-transparent">
        <UiTableRow class="hover:bg-transparent">
          <UiTableCell colspan="5">Total</UiTableCell>
          <UiTableCell class="text-right">{{ formatCurrency(total) }}</UiTableCell>
        </UiTableRow>
      </UiTableFooter>
    </UiTable>
    <p class="text-muted-foreground mt-4 text-center text-sm">Table with row selection</p>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 5 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      }));
    },
    { default: () => [] }
  );

  const total = computed(() => {
    return data.value?.reduce((acc, item) => acc + item.balance, 0);
  });

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };
</script>
```
::

### Card Table

::prose-show-case
:docs-table-card-table

#code
```vue [DocsTableCardTable.vue]
<template>
  <div>
    <div class="border-border bg-background overflow-hidden rounded-lg border">
      <UiTable>
        <UiTableHeader>
          <UiTableRow class="hover:bg-transparent">
            <UiTableHead>
              <UiCheckbox />
            </UiTableHead>
            <UiTableHead>Name</UiTableHead>
            <UiTableHead>Email</UiTableHead>
            <UiTableHead>Location</UiTableHead>
            <UiTableHead>Status</UiTableHead>
            <UiTableHead class="text-right">Balance</UiTableHead>
          </UiTableRow>
        </UiTableHeader>
        <UiTableBody>
          <UiTableRow
            v-for="item in data"
            :key="item.id"
            class="has-[[data-state=checked]]:bg-muted/50"
          >
            <UiTableCell>
              <UiCheckbox />
            </UiTableCell>
            <UiTableCell class="font-medium">{{ item.name }}</UiTableCell>
            <UiTableCell>{{ item.email }}</UiTableCell>
            <UiTableCell>{{ item.location }}</UiTableCell>
            <UiTableCell>{{ item.status }}</UiTableCell>
            <UiTableCell class="text-right">{{ formatCurrency(item.balance) }}</UiTableCell>
          </UiTableRow>
        </UiTableBody>
        <UiTableFooter class="bg-transparent">
          <UiTableRow class="hover:bg-transparent">
            <UiTableCell colspan="5">Total</UiTableCell>
            <UiTableCell class="text-right">{{ formatCurrency(total) }}</UiTableCell>
          </UiTableRow>
        </UiTableFooter>
      </UiTable>
    </div>
    <p class="text-muted-foreground mt-4 text-center text-sm">Table with row selection</p>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 5 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      }));
    },
    { default: () => [] }
  );

  const total = computed(() => {
    return data.value?.reduce((acc, item) => acc + item.balance, 0);
  });

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };
</script>
```
::

### Vertical Table

::prose-show-case
:docs-table-vertical

#code
```vue [DocsTableVertical.vue]
<template>
  <div class="mx-auto max-w-lg">
    <div class="border-border bg-background overflow-hidden rounded-lg border">
      <UiTable>
        <UiTableBody>
          <UiTableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
            <UiTableCell class="bg-muted/50 py-2 font-medium">Name</UiTableCell>
            <UiTableCell class="py-2">David Kim</UiTableCell>
          </UiTableRow>
          <UiTableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
            <UiTableCell class="bg-muted/50 py-2 font-medium">Email</UiTableCell>
            <UiTableCell class="py-2">d.kim@company.com</UiTableCell>
          </UiTableRow>
          <UiTableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
            <UiTableCell class="bg-muted/50 py-2 font-medium">Location</UiTableCell>
            <UiTableCell class="py-2">Seoul, KR</UiTableCell>
          </UiTableRow>
          <UiTableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
            <UiTableCell class="bg-muted/50 py-2 font-medium">Status</UiTableCell>
            <UiTableCell class="py-2">Active</UiTableCell>
          </UiTableRow>
          <UiTableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
            <UiTableCell class="bg-muted/50 py-2 font-medium">Balance</UiTableCell>
            <UiTableCell class="py-2">$1,000.00</UiTableCell>
          </UiTableRow>
        </UiTableBody>
      </UiTable>
    </div>
    <p class="text-muted-foreground mt-4 text-center text-sm">Vertical table</p>
  </div>
</template>
```
::

### Sticky Header 2

::prose-show-case
:docs-table-sticky-header2

#code
```vue [DocsTableStickyHeader2.vue]
<template>
  <div>
    <div class="[&>div]:max-h-96">
      <UiTable
        class="[&_td]:border-border [&_th]:border-border border-separate border-spacing-0 [&_tfoot_td]:border-t [&_th]:border-b [&_tr]:border-none [&_tr:not(:last-child)_td]:border-b"
      >
        <UiTableHeader class="bg-background/90 sticky top-0 z-10 backdrop-blur-sm">
          <UiTableRow class="hover:bg-transparent">
            <UiTableHead>Name</UiTableHead>
            <UiTableHead>Email</UiTableHead>
            <UiTableHead>Location</UiTableHead>
            <UiTableHead>Status</UiTableHead>
            <UiTableHead class="text-right">Balance</UiTableHead>
          </UiTableRow>
        </UiTableHeader>
        <UiTableBody>
          <UiTableRow v-for="item in data" :key="item.id">
            <UiTableCell class="font-medium">{{ item.name }}</UiTableCell>
            <UiTableCell>{{ item.email }}</UiTableCell>
            <UiTableCell>{{ item.location }}</UiTableCell>
            <UiTableCell>{{ item.status }}</UiTableCell>
            <UiTableCell class="text-right">{{ formatCurrency(item.balance) }}</UiTableCell>
          </UiTableRow>
        </UiTableBody>
        <UiTableFooter class="bg-transparent">
          <UiTableRow class="hover:bg-transparent">
            <UiTableCell colspan="4">Total</UiTableCell>
            <UiTableCell class="text-right">{{ formatCurrency(total) }}</UiTableCell>
          </UiTableRow>
        </UiTableFooter>
      </UiTable>
    </div>
    <p class="text-muted-foreground mt-8 text-center text-sm">Table with sticky header</p>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";

  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 15 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      }));
    },
    { default: () => [] }
  );

  const total = computed(() => {
    return data.value?.reduce((acc, item) => acc + item.balance, 0);
  });

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };
</script>
```
::

### Browser Support

::prose-show-case
:docs-table-browser-support

#code
```vue [DocsTableBrowserSupport.vue]
<template>
  <UiTable>
    <UiTableHeader>
      <UiTableRow
        class="*:border-border border-y-0 hover:bg-transparent [&>:not(:last-child)]:border-r"
      >
        <UiTableCell />
        <UiTableHead class="border-border border-b text-center" colspan="5">
          <Icon name="lucide:monitor" class="inline-flex size-4" aria-hidden="true" />
          <span class="sr-only">Desktop browsers</span>
        </UiTableHead>
        <UiTableHead class="border-border border-b text-center" colspan="5">
          <Icon name="lucide:smartphone" class="inline-flex size-4" aria-hidden="true" />
          <span class="sr-only">Mobile browsers</span>
        </UiTableHead>
      </UiTableRow>
    </UiTableHeader>
    <UiTableHeader>
      <UiTableRow class="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
        <UiTableCell />

        <UiTableHead
          v-for="browser in items?.[0]?.desktop"
          :key="browser.name"
          class="text-foreground h-auto rotate-180 py-3 [writing-mode:vertical-lr]"
        >
          {{ browser.name }}
        </UiTableHead>
        <UiTableHead
          v-for="browser in items?.[0]?.mobile"
          :key="browser.name"
          class="text-foreground h-auto rotate-180 py-3 [writing-mode:vertical-lr]"
        >
          {{ browser.name }}
        </UiTableHead>
      </UiTableRow>
    </UiTableHeader>
    <UiTableBody>
      <UiTableRow
        v-for="item in items"
        :key="item.feature"
        class="*:border-border [&>:not(:last-child)]:border-r"
      >
        <UiTableHead class="text-foreground font-medium whitespace-nowrap">{{
          item.feature
        }}</UiTableHead>
        <UiTableCell
          v-for="(browser, index) in [...item.desktop, ...item.mobile]"
          :key="`${browser.name}-${index}`"
          class="space-y-1 text-center"
        >
          <Icon
            v-if="browser.supported"
            name="lucide:check"
            class="inline-flex size-4 text-emerald-600"
            aria-hidden="true"
          />
          <Icon
            v-else
            name="lucide:x"
            class="text-destructive inline-flex size-4"
            aria-hidden="true"
          />

          <span class="sr-only">{{ browser.supported ? "Supported" : "Not supported" }}</span>
          <div class="text-muted-foreground text-xs font-medium">{{ browser.version }}</div>
        </UiTableCell>
      </UiTableRow>
    </UiTableBody>
  </UiTable>
</template>

<script lang="ts" setup>
  const items = [
    {
      feature: "scroll-timeline",
      desktop: [
        { name: "Chrome", supported: true, version: "115" },
        { name: "Edge", supported: true, version: "115" },
        { name: "Firefox", supported: false, version: "111" },
        { name: "Opera", supported: true, version: "101" },
        { name: "Safari", supported: false, version: "No" },
      ],
      mobile: [
        { name: "Chrome Android", supported: true, version: "115" },
        { name: "Firefox Android", supported: false, version: "No" },
        { name: "Opera Android", supported: true, version: "77" },
        { name: "Safari iOS", supported: false, version: "No" },
        { name: "Samsung Internet", supported: true, version: "23" },
      ],
    },
    {
      feature: "view-timeline",
      desktop: [
        { name: "Chrome", supported: true, version: "115" },
        { name: "Edge", supported: true, version: "115" },
        { name: "Firefox", supported: false, version: "114" },
        { name: "Opera", supported: true, version: "101" },
        { name: "Safari", supported: false, version: "No" },
      ],
      mobile: [
        { name: "Chrome Android", supported: true, version: "115" },
        { name: "Firefox Android", supported: false, version: "No" },
        { name: "Opera Android", supported: true, version: "77" },
        { name: "Safari iOS", supported: false, version: "No" },
        { name: "Samsung Internet", supported: true, version: "23" },
      ],
    },
    {
      feature: "font-size-adjust",
      desktop: [
        { name: "Chrome", supported: true, version: "127" },
        { name: "Edge", supported: true, version: "127" },
        { name: "Firefox", supported: false, version: "3" },
        { name: "Opera", supported: true, version: "113" },
        { name: "Safari", supported: true, version: "16.4" },
      ],
      mobile: [
        { name: "Chrome Android", supported: true, version: "127" },
        { name: "Firefox Android", supported: true, version: "4" },
        { name: "Opera Android", supported: true, version: "84" },
        { name: "Safari iOS", supported: true, version: "16.4" },
        { name: "Samsung Internet", supported: false, version: "No" },
      ],
    },
  ];
</script>
```
::


# Tabs

## Source code

Click :source-code-link{component="Tabs"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add tabs
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add tabs
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add tabs
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add tabs
```
::

## Usage

### Basic example

::prose-show-case
:docs-tabs

#code
```vue [DocsTabs.vue]
<template>
  <div class="flex w-full justify-center">
    <UiTabs class="w-[400px]" default-value="account">
      <UiTabsList class="grid w-full grid-cols-2">
        <UiTabsTrigger value="account">Account</UiTabsTrigger>
        <UiTabsTrigger value="password">Password</UiTabsTrigger>
      </UiTabsList>
      <UiTabsContent value="account">
        <UiCard
          title="Account"
          description="Make changes to your account here. Click save when you're done."
        >
          <template #content>
            <UiCardContent class="space-y-2">
              <div class="space-y-1">
                <UiLabel for="name">Name</UiLabel>
                <UiInput id="name" value="Pedro Duarte" />
              </div>
              <div class="space-y-1">
                <UiLabel html-for="username">Username</UiLabel>
                <UiInput id="username" value="@peduarte" />
              </div>
            </UiCardContent>
          </template>
          <template #footer>
            <UiCardFooter>
              <UiButton>Save changes</UiButton>
            </UiCardFooter>
          </template>
        </UiCard>
      </UiTabsContent>
      <UiTabsContent value="password">
        <UiCard
          title="Password"
          description="Change your password here. After saving, you'll be logged out."
        >
          <template #content>
            <UiCardContent class="space-y-2">
              <div class="space-y-1">
                <UiLabel html-for="current">Current password</UiLabel>
                <UiInput id="current" type="password" />
              </div>
              <div class="space-y-1">
                <UiLabel html-for="new">New password</UiLabel>
                <UiInput id="new" type="password" />
              </div>
            </UiCardContent>
          </template>
          <template #footer>
            <UiCardFooter>
              <UiButton>Save password</UiButton>
            </UiCardFooter>
          </template>
        </UiCard>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### With Indicator

Passing `:pill="false"` to the List and Trigger components will remove the background color from both components. This allows us to use the Indicator component to create a custom indicator.

::prose-show-case
:docs-tabs-indicator

#code
```vue [DocsTabsIndicator.vue]
<template>
  <div class="flex w-full justify-center">
    <UiTabs class="w-[400px]" default-value="account">
      <UiTabsList :pill="false" class="relative grid w-full grid-cols-2">
        <UiTabsTrigger :pill="false" value="account">Account</UiTabsTrigger>
        <UiTabsTrigger :pill="false" value="password">Password</UiTabsTrigger>
        <UiTabsIndicator />
      </UiTabsList>
      <UiTabsContent value="account">
        <UiCard
          title="Account"
          description="Make changes to your account here. Click save when you're done."
        >
          <template #content>
            <UiCardContent class="space-y-2">
              <div class="space-y-1">
                <UiLabel for="name">Name</UiLabel>
                <UiInput id="name" model-value="Pedro Duarte" />
              </div>
              <div class="space-y-1">
                <UiLabel html-for="username">Username</UiLabel>
                <UiInput id="username" model-value="@peduarte" />
              </div>
            </UiCardContent>
          </template>
          <template #footer>
            <UiCardFooter>
              <UiButton>Save changes</UiButton>
            </UiCardFooter>
          </template>
        </UiCard>
      </UiTabsContent>
      <UiTabsContent value="password">
        <UiCard
          title="Password"
          description="Change your password here. After saving, you'll be logged out."
        >
          <template #content>
            <UiCardContent class="space-y-2">
              <div class="space-y-1">
                <UiLabel html-for="current">Current password</UiLabel>
                <UiInput id="current" type="password" />
              </div>
              <div class="space-y-1">
                <UiLabel html-for="new">New password</UiLabel>
                <UiInput id="new" type="password" />
              </div>
            </UiCardContent>
          </template>
          <template #footer>
            <UiCardFooter>
              <UiButton>Save password</UiButton>
            </UiCardFooter>
          </template>
        </UiCard>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

## Origin UI Examples

These are some examples that I found today over here [Origin UI](https://originui.com/tabs){rel="&#x22;nofollow&#x22;"}. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

### One

::prose-show-case
:docs-tabs1

#code
```vue [DocsTabs1.vue]
<template>
  <div>
    <UiTabs default-value="tab-1">
      <div class="flex justify-center">
        <UiTabsList>
          <UiTabsTrigger v-for="t in 3" :key="t" :value="`tab-${t}`">Tab {{ t }}</UiTabsTrigger>
        </UiTabsList>
      </div>
      <UiTabsContent v-for="t in 3" :key="t" :value="`tab-${t}`">
        <p class="text-muted-foreground p-4 text-center text-sm">Content for Tab {{ t }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### Two

::prose-show-case
:docs-tabs2

#code
```vue [DocsTabs2.vue]
<template>
  <div>
    <UiTabs default-value="tab-1">
      <div class="flex justify-center">
        <UiTabsList class="bg-transparent">
          <UiTabsTrigger
            v-for="t in 3"
            :key="t"
            :value="`tab-${t}`"
            class="data-[state=active]:bg-muted data-[state=active]:shadow-none"
            >Tab {{ t }}</UiTabsTrigger
          >
        </UiTabsList>
      </div>
      <UiTabsContent v-for="t in 3" :key="t" :value="`tab-${t}`">
        <p class="text-muted-foreground p-4 text-center text-sm">Content for Tab {{ t }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### Three

::prose-show-case
:docs-tabs3

#code
```vue [DocsTabs3.vue]
<template>
  <div>
    <UiTabs default-value="tab-1">
      <div class="flex justify-center">
        <UiTabsList class="bg-transparent">
          <UiTabsTrigger
            v-for="t in 3"
            :key="t"
            :value="`tab-${t}`"
            class="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-full data-[state=active]:shadow-none"
            >Tab {{ t }}</UiTabsTrigger
          >
        </UiTabsList>
      </div>
      <UiTabsContent v-for="t in 3" :key="t" :value="`tab-${t}`">
        <p class="text-muted-foreground p-4 text-center text-sm">Content for Tab {{ t }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### Four

::prose-show-case
:docs-tabs4

#code
```vue [DocsTabs4.vue]
<template>
  <div>
    <UiTabs default-value="tab-1">
      <div class="flex justify-center">
        <UiTabsList :pill="false" class="relative bg-transparent">
          <UiTabsTrigger
            v-for="t in 3"
            :key="t"
            :pill="false"
            :value="`tab-${t}`"
            class="relative rounded-none py-2 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
            >Tab {{ t }}</UiTabsTrigger
          >
          <UiTabsIndicator />
        </UiTabsList>
      </div>
      <UiTabsContent v-for="t in 3" :key="t" :value="`tab-${t}`">
        <p class="text-muted-foreground p-4 text-center text-sm">Content for Tab {{ t }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### Five

::prose-show-case
:docs-tabs5

#code
```vue [DocsTabs5.vue]
<template>
  <div>
    <UiTabs default-value="tab-1">
      <div class="flex justify-center">
        <UiTabsList :pill="false" class="relative bg-transparent">
          <UiTabsTrigger
            v-for="t in 3"
            :key="t"
            :pill="false"
            :value="`tab-${t}`"
            class="hover:bg-accent hover:text-foreground data-[state=active]:hover:bg-accent relative data-[state=active]:bg-transparent data-[state=active]:shadow-none"
            >Tab {{ t }}</UiTabsTrigger
          >
          <UiTabsIndicator />
        </UiTabsList>
      </div>
      <UiTabsContent v-for="t in 3" :key="t" :value="`tab-${t}`">
        <p class="text-muted-foreground p-4 text-center text-sm">Content for Tab {{ t }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### Six

::prose-show-case
:docs-tabs6

#code
```vue [DocsTabs6.vue]
<template>
  <div>
    <UiTabs default-value="tab-1">
      <div class="flex justify-center">
        <UiTabsList
          :pill="false"
          class="bg-background relative h-auto -space-x-px p-0 shadow-xs shadow-black/5 rtl:space-x-reverse"
        >
          <UiTabsTrigger
            v-for="t in 3"
            :key="t"
            :pill="false"
            :value="`tab-${t}`"
            class="data-[state=active]:bg-muted rounded-none border first:rounded-s [&:nth-child(3n)]:rounded-e"
            >Tab {{ t }}</UiTabsTrigger
          >
          <UiTabsIndicator />
        </UiTabsList>
      </div>
      <UiTabsContent v-for="t in 3" :key="t" :value="`tab-${t}`">
        <p class="text-muted-foreground p-4 text-center text-sm">Content for Tab {{ t }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### Seven

::prose-show-case
:docs-tabs7

#code
```vue [DocsTabs7.vue]
<template>
  <div>
    <UiTabs default-value="tab-1" class="flex flex-col justify-center">
      <UiTabsList
        :pill="false"
        class="before:bg-border relative h-auto w-full gap-0.5 bg-transparent p-0 before:absolute before:inset-x-0 before:bottom-0 before:h-px"
      >
        <UiTabsTrigger
          v-for="t in 3"
          :key="t"
          :pill="false"
          :value="`tab-${t}`"
          class="border-border bg-muted overflow-hidden rounded-b-none border-x border-t py-2 data-[state=active]:z-10 data-[state=active]:shadow-none"
          >Tab {{ t }}</UiTabsTrigger
        >
      </UiTabsList>

      <UiTabsContent v-for="t in 3" :key="t" :value="`tab-${t}`">
        <p class="text-muted-foreground p-4 text-center text-sm">Content for Tab {{ t }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### Eight

::prose-show-case
:docs-tabs8

#code
```vue [DocsTabs8.vue]
<template>
  <div>
    <UiTabs default-value="Projects">
      <div class="flex justify-center">
        <UiTabsList>
          <UiTabsTrigger
            v-for="t in tabs"
            :key="t.title"
            :value="t.title"
            class="flex items-center gap-2"
          >
            <Icon :name="t.icon" class="-ms-0.5 me-1.5 size-4 shrink-0 opacity-60" />
            {{ t.title }}
            <UiBadge v-if="t.badge" class="px-2">{{ t.badge }}</UiBadge>
          </UiTabsTrigger>
        </UiTabsList>
      </div>
      <UiTabsContent v-for="t in tabs" :key="t.title" :value="t.title">
        <p class="text-muted-foreground p-4 text-center text-sm">{{ t.content }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>

<script lang="ts" setup>
  const tabs = [
    {
      title: "Overview",
      icon: "lucide:home",
      content: "This is the overview. Here you can see the overview of the project.",
    },
    {
      title: "Projects",
      badge: 3,
      icon: "lucide:panels-top-left",
      content: "These are the number of outstanding projects.",
    },
    {
      title: "Packages",
      icon: "lucide:box",
      badge: "New",
      content: "You have a few new packages awaiting your approval.",
    },
  ];
</script>
```
::

### Nine

::prose-show-case
:docs-tabs9

#code
```vue [DocsTabs9.vue]
<template>
  <div>
    <UiTabs default-value="Projects">
      <div class="flex justify-center">
        <UiTabsList class="bg-transparent">
          <UiTabsTrigger
            v-for="t in tabs"
            :key="t.title"
            :value="t.title"
            class="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground flex items-center gap-2 rounded-full data-[state=active]:shadow-none"
          >
            <Icon :name="t.icon" class="-ms-0.5 me-1.5 size-4 shrink-0 opacity-60" />
            {{ t.title }}
          </UiTabsTrigger>
        </UiTabsList>
      </div>
      <UiTabsContent v-for="t in tabs" :key="t.title" :value="t.title">
        <p class="text-muted-foreground p-4 text-center text-sm">{{ t.content }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>

<script lang="ts" setup>
  const tabs = [
    {
      title: "Overview",
      icon: "lucide:home",
      content: "This is the overview. Here you can see the overview of the project.",
    },
    {
      title: "Projects",
      badge: 3,
      icon: "lucide:panels-top-left",
      content: "These are the number of outstanding projects.",
    },
    {
      title: "Packages",
      icon: "lucide:box",
      badge: "New",
      content: "You have a few new packages awaiting your approval.",
    },
  ];
</script>
```
::

### Ten

::prose-show-case
:docs-tabs10

#code
```vue [DocsTabs10.vue]
<template>
  <div>
    <UiTabs default-value="Projects">
      <div class="relative mb-3 flex justify-center">
        <UiTabsList
          class="bg-background h-auto -space-x-px p-0 shadow-xs shadow-black/5 rtl:space-x-reverse"
        >
          <UiTabsTrigger
            v-for="t in tabs"
            :key="t.title"
            :value="t.title"
            class="border-border data-[state=active]:bg-muted relative flex items-center gap-2 overflow-hidden rounded-none border py-2 first:rounded-s last:rounded-e"
          >
            <Icon :name="t.icon" class="-ms-0.5 me-1.5 size-4 shrink-0 opacity-60" />
            {{ t.title }}
          </UiTabsTrigger>
        </UiTabsList>
        <UiTabsIndicator />
      </div>
      <UiTabsContent v-for="t in tabs" :key="t.title" :value="t.title">
        <p class="text-muted-foreground p-4 text-center text-sm">{{ t.content }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>

<script lang="ts" setup>
  const tabs = [
    {
      title: "Overview",
      icon: "lucide:home",
      content: "This is the overview. Here you can see the overview of the project.",
    },
    {
      title: "Projects",
      badge: 3,
      icon: "lucide:panels-top-left",
      content: "These are the number of outstanding projects.",
    },
    {
      title: "Packages",
      icon: "lucide:box",
      badge: "New",
      content: "You have a few new packages awaiting your approval.",
    },
  ];
</script>
```
::

### Eleven

::prose-show-case
:docs-tabs11

#code
```vue [DocsTabs11.vue]
<template>
  <div>
    <UiTabs default-value="Projects">
      <div class="relative flex justify-center">
        <UiTabsList
          class="before:bg-border relative mb-3 h-auto w-full gap-0.5 bg-transparent p-0 before:absolute before:inset-x-0 before:bottom-0 before:h-px"
        >
          <UiTabsTrigger
            v-for="t in tabs"
            :key="t.title"
            :value="t.title"
            class="border-border bg-muted relative flex items-center gap-2 overflow-hidden rounded-b-none border-x border-t py-2 data-[state=active]:z-10 data-[state=active]:shadow-none"
          >
            <Icon :name="t.icon" class="-ms-0.5 me-1.5 size-4 shrink-0 opacity-60" />
            {{ t.title }}
          </UiTabsTrigger>
        </UiTabsList>
      </div>
      <UiTabsContent v-for="t in tabs" :key="t.title" :value="t.title">
        <p class="text-muted-foreground p-4 text-center text-sm">{{ t.content }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>

<script lang="ts" setup>
  const tabs = [
    {
      title: "Overview",
      icon: "lucide:home",
      content: "This is the overview. Here you can see the overview of the project.",
    },
    {
      title: "Projects",
      badge: 3,
      icon: "lucide:panels-top-left",
      content: "These are the number of outstanding projects.",
    },
    {
      title: "Packages",
      icon: "lucide:box",
      badge: "New",
      content: "You have a few new packages awaiting your approval.",
    },
  ];
</script>
```
::

### Twelve

::prose-show-case
:docs-tabs12

#code
```vue [DocsTabs12.vue]
<template>
  <div class="flex justify-center">
    <UiTabs default-value="Projects">
      <UiScrollArea orientation="horizontal" class="w-full max-w-lg">
        <UiTabsList
          class="border-border text-foreground relative mb-3 h-auto gap-2 rounded-none border-b bg-transparent px-0 py-1"
        >
          <UiTabsTrigger
            v-for="t in tabs"
            :key="t.title"
            :value="t.title"
            class="hover:bg-accent hover:text-foreground data-[state=active]:hover:bg-accent relative data-[state=active]:bg-transparent data-[state=active]:shadow-none"
          >
            <Icon :name="t.icon" class="-ms-0.5 me-1.5 size-4 shrink-0 opacity-60" />
            {{ t.title }}
          </UiTabsTrigger>
          <UiTabsIndicator />
        </UiTabsList>
      </UiScrollArea>
      <UiTabsContent v-for="t in tabs" :key="t.title" :value="t.title">
        <p class="text-muted-foreground p-4 text-center text-sm">{{ t.content }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>

<script lang="ts" setup>
  const tabs = [
    {
      title: "Overview",
      icon: "lucide:home",
      content: "This is the overview. Here you can see the overview of the project.",
    },
    {
      title: "Projects",
      icon: "lucide:panels-top-left",
      content: "These are the number of outstanding projects.",
    },
    {
      title: "Packages",
      icon: "lucide:box",
      content: "You have a few new packages awaiting your approval.",
    },
    {
      title: "Team",
      icon: "lucide:users",
      content: "This is the team section. Here you can see the team members.",
    },
    {
      title: "Settings",
      icon: "lucide:settings",
      content: "This is the settings section. Here you can change the settings.",
    },
    {
      title: "Reports",
      icon: "lucide:chart-area",
      content: "This is the reports section. Here you can see the reports.",
    },
  ];
</script>
```
::

### Thirteen

::prose-show-case
:docs-tabs13

#code
```vue [DocsTabs13.vue]
<template>
  <div class="flex justify-center">
    <UiTabs default-value="Projects" class="items-center">
      <UiTabsList
        class="border-border flex h-auto justify-center rounded-none border-b bg-transparent p-0"
      >
        <UiTabsTrigger
          v-for="t in tabs"
          :key="t.title"
          :value="t.title"
          class="data-[state=active]:after:bg-primary relative flex-col rounded-none px-4 py-2 text-xs after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
        >
          <Icon :name="t.icon" class="mb-1.5 size-4 shrink-0 opacity-60" />
          {{ t.title }}
        </UiTabsTrigger>
      </UiTabsList>
      <UiTabsContent v-for="t in tabs" :key="t.title" :value="t.title">
        <p class="text-muted-foreground mx-auto max-w-sm p-4 text-center text-sm text-pretty">
          {{ t.content }}
        </p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>

<script lang="ts" setup>
  const tabs = [
    {
      title: "Overview",
      icon: "lucide:home",
      content: "This is the overview. Here you can see the overview of the project.",
    },
    {
      title: "Projects",
      icon: "lucide:panels-top-left",
      content: "These are the number of outstanding projects.",
    },
    {
      title: "Packages",
      icon: "lucide:box",
      content: "You have a few new packages awaiting your approval.",
    },
  ];
</script>
```
::

### Fourteen

::prose-show-case
:docs-tabs14

#code
```vue [DocsTabs14.vue]
<template>
  <div class="flex justify-center">
    <UiTabs default-value="Projects">
      <UiTabsList class="mx-auto flex w-full max-w-xs bg-transparent">
        <UiTabsTrigger
          v-for="t in tabs"
          :key="t.title"
          :value="t.title"
          :pill="false"
          class="group data-[state=active]:bg-muted flex-1 flex-col p-3 text-xs data-[state=active]:shadow-none"
        >
          <UiBadge
            class="mb-1.5 flex min-w-5 items-center justify-center px-1 transition-opacity group-data-[state=inactive]:opacity-50"
            >{{ t.badge }}</UiBadge
          >
          {{ t.title }}
        </UiTabsTrigger>
      </UiTabsList>
      <UiTabsContent v-for="t in tabs" :key="t.title" :value="t.title">
        <p class="text-muted-foreground mx-auto max-w-sm p-4 text-center text-sm text-pretty">
          {{ t.content }}
        </p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>

<script lang="ts" setup>
  const tabs = [
    {
      title: "Overview",
      icon: "lucide:home",
      badge: 3,
      content: "This is the overview. Here you can see the overview of the project.",
    },
    {
      title: "Projects",
      icon: "lucide:panels-top-left",
      badge: 0,
      content: "These are the number of outstanding projects.",
    },
    {
      title: "Packages",
      icon: "lucide:box",
      badge: 7,
      content: "You have a few new packages awaiting your approval.",
    },
  ];
</script>
```
::

### Fifteen

::prose-show-case
:docs-tabs15

#code
```vue [DocsTabs15.vue]
<template>
  <div class="flex justify-center">
    <UiTabs default-value="Projects">
      <div class="flex justify-center">
        <UiTabsList class="h-12 p-0.5">
          <UiTooltip v-for="t in tabs" :key="t.title">
            <UiTooltipTrigger as-child>
              <span class="h-full">
                <UiTabsTrigger :value="t.title" class="h-full">
                  <UiChip
                    v-if="t.badge"
                    class="bg-primary text-primary-foreground"
                    :text="t.badge?.toString()"
                    size="xl"
                  >
                    <Icon :name="t.icon" class="size-5 shrink-0" />
                  </UiChip>
                  <Icon v-else :name="t.icon" class="size-5 shrink-0" />
                </UiTabsTrigger>
              </span>
            </UiTooltipTrigger>
            <UiTooltipContent class="px-2 py-1 text-xs">{{ t.title }}</UiTooltipContent>
          </UiTooltip>
        </UiTabsList>
      </div>
      <UiTabsContent v-for="t in tabs" :key="t.title" :value="t.title">
        <p class="text-muted-foreground mx-auto p-4 text-center text-sm text-pretty">
          {{ t.content }}
        </p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>

<script lang="ts" setup>
  const tabs = [
    {
      title: "Overview",
      icon: "lucide:home",
      content: "This is the overview. Here you can see the overview of the project.",
    },
    {
      title: "Projects",
      icon: "lucide:panels-top-left",
      badge: 2,
      content: "These are the number of outstanding projects.",
    },
    {
      title: "Packages",
      icon: "lucide:box",
      content: "You have a few new packages awaiting your approval.",
    },
  ];
</script>
```
::

### Sixteen

::prose-show-case
:docs-tabs16

#code
```vue [DocsTabs16.vue]
<template>
  <div class="mx-auto w-full max-w-lg">
    <UiTabs default-value="Projects" orientation="vertical" class="w-full flex-row">
      <UiTabsList class="flex-col">
        <UiTooltip v-for="t in tabs" :key="t.title">
          <UiTooltipTrigger as-child>
            <span class="h-full">
              <UiTabsTrigger :value="t.title" class="py-3">
                <UiChip
                  v-if="t.badge"
                  class="bg-primary text-primary-foreground"
                  :text="t.badge?.toString()"
                  size="lg"
                >
                  <Icon :name="t.icon" class="size-4 shrink-0" />
                </UiChip>
                <Icon v-else :name="t.icon" class="size-4 shrink-0" />
              </UiTabsTrigger>
            </span>
          </UiTooltipTrigger>
          <UiTooltipContent side="right" class="px-2 py-1 text-xs">{{ t.title }}</UiTooltipContent>
        </UiTooltip>
      </UiTabsList>
      <div class="grow rounded-md border text-start">
        <UiTabsContent v-for="t in tabs" :key="t.title" :value="t.title">
          <p class="text-muted-foreground px-4 py-3 text-xs">
            {{ t.content }}
          </p>
        </UiTabsContent>
      </div>
    </UiTabs>
  </div>
</template>

<script lang="ts" setup>
  const tabs = [
    {
      title: "Overview",
      icon: "lucide:home",
      content: "This is the overview. Here you can see the overview of the project.",
    },
    {
      title: "Projects",
      icon: "lucide:panels-top-left",
      badge: 2,
      content: "These are the number of outstanding projects.",
    },
    {
      title: "Packages",
      icon: "lucide:box",
      content: "You have a few new packages awaiting your approval.",
    },
  ];
</script>
```
::

### Seventeen

::prose-show-case
:docs-tabs17

#code
```vue [DocsTabs17.vue]
<template>
  <UiTabs default-value="Projects" orientation="vertical" class="mx-auto w-full max-w-lg flex-row">
    <UiTabsList class="flex-col">
      <UiTabsTrigger v-for="t in tabs" :key="t.title" :value="t.title" class="w-full">
        {{ t.title }}
      </UiTabsTrigger>
    </UiTabsList>

    <div class="grow rounded-md border text-start">
      <UiTabsContent v-for="t in tabs" :key="t.title" :value="t.title">
        <p class="text-muted-foreground px-4 py-3 text-xs">
          {{ t.content }}
        </p>
      </UiTabsContent>
    </div>
  </UiTabs>
</template>

<script lang="ts" setup>
  const tabs = [
    {
      title: "Overview",
      icon: "lucide:home",
      content: "This is the overview. Here you can see the overview of the project.",
    },
    {
      title: "Projects",
      icon: "lucide:panels-top-left",
      badge: 2,
      content: "These are the number of outstanding projects.",
    },
    {
      title: "Packages",
      icon: "lucide:box",
      content: "You have a few new packages awaiting your approval.",
    },
  ];
</script>
```
::

### Eighteen

::prose-show-case
:docs-tabs18

#code
```vue [DocsTabs18.vue]
<template>
  <UiTabs default-value="Projects" orientation="vertical" class="mx-auto w-full max-w-lg flex-row">
    <UiTabsList :pill="false" class="relative flex-col rounded-none border-l bg-transparent p-0">
      <UiTabsTrigger
        v-for="t in tabs"
        :key="t.title"
        :pill="false"
        :value="t.title"
        class="data-[state=active]:after:bg-primary relative w-full justify-start rounded-none after:absolute after:inset-y-0 after:start-0 after:w-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
      >
        {{ t.title }}
      </UiTabsTrigger>
    </UiTabsList>

    <div class="grow rounded-md border text-start">
      <UiTabsContent v-for="t in tabs" :key="t.title" :value="t.title">
        <p class="text-muted-foreground px-4 py-3 text-xs">
          {{ t.content }}
        </p>
      </UiTabsContent>
    </div>
  </UiTabs>
</template>

<script lang="ts" setup>
  const tabs = [
    {
      title: "Overview",
      icon: "lucide:home",
      content: "This is the overview. Here you can see the overview of the project.",
    },
    {
      title: "Projects",
      icon: "lucide:panels-top-left",
      badge: 2,
      content: "These are the number of outstanding projects.",
    },
    {
      title: "Packages",
      icon: "lucide:box",
      content: "You have a few new packages awaiting your approval.",
    },
  ];
</script>
```
::

### Nineteen

::prose-show-case
:docs-tabs19

#code
```vue [DocsTabs19.vue]
<template>
  <UiTabs default-value="Projects" orientation="vertical" class="mx-auto w-full max-w-lg flex-row">
    <UiTabsList
      :pill="false"
      class="text-foreground flex-col gap-1 rounded-none bg-transparent px-1 py-0"
    >
      <UiTabsTrigger
        v-for="t in tabs"
        :key="t.title"
        :pill="false"
        :value="t.title"
        class="hover:bg-accent hover:text-foreground data-[state=active]:after:bg-primary data-[state=active]:hover:bg-accent relative w-full justify-start after:absolute after:inset-y-0 after:start-0 after:-ms-1 after:w-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
      >
        <Icon :name="t.icon" class="-ms-0.5 me-1.5 size-4 opacity-60" />
        {{ t.title }}
      </UiTabsTrigger>
    </UiTabsList>

    <div class="grow rounded-md border text-start">
      <UiTabsContent v-for="t in tabs" :key="t.title" :value="t.title">
        <p class="text-muted-foreground px-4 py-3 text-xs">
          {{ t.content }}
        </p>
      </UiTabsContent>
    </div>
  </UiTabs>
</template>

<script lang="ts" setup>
  const tabs = [
    {
      title: "Overview",
      icon: "lucide:home",
      content: "This is the overview. Here you can see the overview of the project.",
    },
    {
      title: "Projects",
      icon: "lucide:panels-top-left",
      content: "These are the number of outstanding projects.",
    },
    {
      title: "Packages",
      icon: "lucide:box",
      content: "You have a few new packages awaiting your approval.",
    },
  ];
</script>
```
::

### Twenty

::prose-show-case
:docs-tabs20

#code
```vue [DocsTabs20.vue]
<template>
  <UiTabs default-value="Projects" orientation="vertical" class="mx-auto w-full max-w-lg flex-row">
    <UiTabsList :pill="false" class="flex-col gap-1 bg-transparent py-0">
      <UiTabsTrigger
        v-for="t in tabs"
        :key="t.title"
        :pill="false"
        :value="t.title"
        class="data-[state=active]:bg-muted w-full justify-start data-[state=active]:shadow-none"
      >
        {{ t.title }}
      </UiTabsTrigger>
    </UiTabsList>

    <div class="grow rounded-md border text-start">
      <UiTabsContent v-for="t in tabs" :key="t.title" :value="t.title">
        <p class="text-muted-foreground px-4 py-3 text-xs">
          {{ t.content }}
        </p>
      </UiTabsContent>
    </div>
  </UiTabs>
</template>

<script lang="ts" setup>
  const tabs = [
    {
      title: "Overview",
      icon: "lucide:home",
      content: "This is the overview. Here you can see the overview of the project.",
    },
    {
      title: "Projects",
      icon: "lucide:panels-top-left",
      content: "These are the number of outstanding projects.",
    },
    {
      title: "Packages",
      icon: "lucide:box",
      content: "You have a few new packages awaiting your approval.",
    },
  ];
</script>
```
::


# Tags Input

## Source code

Click :source-code-link{component="TagsInput"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add tags-input
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add tags-input
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add tags-input
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add tags-input
```
::

## Usage

### Basic example

::prose-show-case
:docs-tags-input

#code
```vue [DocsTagsInput.vue]
<template>
  <div class="mx-auto grid max-w-sm grid-cols-1 gap-10 divide-y *:pb-10 *:last:pb-0">
    <div class="*:not-first:mt-2">
      <UiLabel :for="id">Input with tags</UiLabel>
      <!-- Take note of raw tags input usage -->
      <TagsInputRoot v-model="tags" class="flex flex-col gap-2">
        <!-- Take note of raw tags input usage -->
        <TagsInputInput :id="id" placeholder="Add a tag" as-child type="text">
          <UiInput />
        </TagsInputInput>
        <div class="flex flex-wrap gap-1">
          <UiTagsInputItem v-for="tag in tags" :key="tag" :value="tag" />
        </div>
      </TagsInputRoot>
    </div>

    <div class="*:not-first:mt-2">
      <UiLabel :for="id + 'some-other'">Input with inner tags</UiLabel>
      <UiTagsInput
        v-model="tags2"
        class="focus-within:border-ring focus-within:ring-ring/50 h-auto p-1 shadow-xs outline-none focus-within:ring-[3px]"
      >
        <UiTagsInputItem v-for="tag in tags2" :key="tag" :value="tag" />

        <UiTagsInputInput
          :id="id + 'some-other'"
          placeholder="Add a tag"
          class="h-7 min-w-[80px] px-2 dark:bg-transparent"
          type="text"
        />
      </UiTagsInput>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const tags = ref(["Cars", "House", "Dogs"]);
  const tags2 = ref(["Cars", "House", "Dogs"]);
  const id = useId();
</script>
```
::


# Tanstack Table

## Source code

Click :source-code-link{component="TanStackTable.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add tanstacktable
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add tanstacktable
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add tanstacktable
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add tanstacktable
```
::

## Usage

### Regular

::prose-show-case
:docs-tan-stack-table

#code
```vue [DocsTanStackTable.vue]
<template>
  <div>
    <div class="flex flex-col justify-between gap-5 md:flex-row md:items-center">
      <UiInput
        v-if="tableRef"
        v-model="tableRef!.globalFilter"
        type="search"
        placeholder="Search"
        class="w-full md:w-96"
      />
      <div class="flex flex-col gap-x-3 gap-y-5 md:flex-row">
        <UiDropdownMenu>
          <UiDropdownMenuTrigger as-child>
            <UiButton variant="outline">
              <span>Download</span>
              <Icon name="lucide:cloud-download" class="size-4" />
            </UiButton>
          </UiDropdownMenuTrigger>
          <UiDropdownMenuContent :side-offset="10" align="start">
            <UiDropdownMenuLabel> Export Data </UiDropdownMenuLabel>
            <UiDropdownMenuSeparator />
            <UiDropdownMenuItem
              title="Export All"
              icon="lucide:file-spreadsheet"
              @select="exportCsv('all')"
            />
            <UiDropdownMenuItem
              title="Export Current Page"
              icon="lucide:file-spreadsheet"
              @select="exportCsv('page')"
            />
          </UiDropdownMenuContent>
        </UiDropdownMenu>
        <UiDropdownMenu>
          <UiDropdownMenuTrigger as-child>
            <UiButton variant="outline">
              <span>View</span>
              <Icon name="lucide:chevron-down" class="size-4" />
            </UiButton>
          </UiDropdownMenuTrigger>
          <UiDropdownMenuContent :side-offset="10" align="start" class="w-[300px] md:w-[200px]">
            <UiDropdownMenuLabel> Toggle Columns </UiDropdownMenuLabel>
            <UiDropdownMenuSeparator />
            <UiDropdownMenuGroup>
              <UiDropdownMenuCheckboxItem
                v-for="column in table?.getAllColumns().filter((column) => column.getCanHide())"
                :key="column.id"
                :model-value="column.getIsVisible()"
                @update:model-value="column.toggleVisibility()"
              >
                <span class="text-sm capitalize">{{ column?.id }}</span>
              </UiDropdownMenuCheckboxItem>
            </UiDropdownMenuGroup>
          </UiDropdownMenuContent>
        </UiDropdownMenu>
      </div>
    </div>

    <div class="mt-5 overflow-hidden rounded-lg border">
      <UiTanStackTable
        ref="tableRef"
        :data="data"
        :loading="pending"
        :columns="columns"
        :initial-page-size="5"
        :page-size-options="[5, 10, 20, 50, 100]"
        @ready="table = $event"
      >
        <template #empty>
          <div class="flex w-full flex-col items-center justify-center gap-5 py-5">
            <Icon name="lucide:database" class="text-muted-foreground h-12 w-12" />
            <span class="mt-2">No data available.</span>
          </div>
        </template>
        <template #actions-cell="{ row }">
          <UiDropdownMenu>
            <UiDropdownMenuTrigger as-child>
              <UiButton variant="ghost" size="icon-sm">
                <Icon name="lucide:ellipsis-vertical" class="size-4" />
              </UiButton>
            </UiDropdownMenuTrigger>
            <UiDropdownMenuContent side="bottom" align="end">
              <UiDropdownMenuGroup>
                <UiDropdownMenuItem
                  title="View Details"
                  icon="lucide:square-arrow-out-up-right"
                  @select="
                    selectedPayment = row.original;
                    showDetails = true;
                  "
                />
                <UiDropdownMenuItem
                  title="Refund Payment"
                  icon="lucide:banknote-arrow-down"
                  @select="
                    useSonner.info('Initiate Refund', {
                      description: `Would you like to refund payment ID: ${row.original.id}?`,
                      action: {
                        label: 'Refund Now',
                        onClick: () => {
                          useSonner.success('Refunded!', {
                            description: `Payment ID: ${row.original.id} has been refunded.`,
                          });
                        },
                      },
                    })
                  "
                />
                <UiDropdownMenuSeparator />
                <UiDropdownMenuItem
                  title="Delete Payment"
                  icon="lucide:trash"
                  variant="destructive"
                  @select="
                    useSonner.error('Initiate Deletion', {
                      description: `Are you sure you want to delete payment ID: ${row.original.id}?`,
                      action: {
                        label: 'Delete Now',
                        onClick: () => {
                          useSonner.success('Deleted!', {
                            description: `Payment ID: ${row.original.id} has been deleted.`,
                            richColors: true,
                          });
                        },
                      },
                    })
                  "
                />
              </UiDropdownMenuGroup>
            </UiDropdownMenuContent>
          </UiDropdownMenu>
        </template>
      </UiTanStackTable>
    </div>

    <UiSheet v-model:open="showDetails">
      <UiSheetContent class="w-full sm:w-[500px]" side="right">
        <UiSheetHeader>
          <UiSheetTitle>Payment Details</UiSheetTitle>
          <UiSheetDescription> View and manage payment information </UiSheetDescription>
        </UiSheetHeader>

        <div v-if="selectedPayment" class="space-y-6 p-6">
          <UiVeeInput label="Payment ID" disabled :model-value="selectedPayment.id" readonly />
          <UiVeeInput v-model="selectedPayment.email" label="Email" readonly type="email" />
          <UiVeeCurrencyInput label="Amount" :model-value="`${selectedPayment.amount}`" readonly />

          <div class="space-y-2">
            <label class="text-sm font-medium">Status</label>
            <div class="flex items-center gap-2">
              <UiBadge :variant="getStatusVariant(selectedPayment.status)" class="capitalize">
                {{ selectedPayment.status }}
              </UiBadge>
            </div>
          </div>
        </div>

        <UiSheetFooter>
          <UiButton variant="outline" @click="showDetails = false">Close</UiButton>
          <UiButton @click="showDetails = false">Done</UiButton>
        </UiSheetFooter>
      </UiSheetContent>
    </UiSheet>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ColumnDef, Table } from "@tanstack/vue-table";
  import { promiseTimeout } from "@vueuse/core";

  import type { UiTanStackTable } from "#components";
  import type { TanStackTableFeatures } from "~/components/Ui/TanStackTable.vue";

  const tableRef = useTemplateRef("tableRef");
  const table = ref<Table<TanStackTableFeatures, Payment> | null>(null);
  const showDetails = ref(false);
  const selectedPayment = ref<Payment | null>(null);

  type Payment = {
    id: string;
    amount: number;
    status: "pending" | "processing" | "success" | "failed";
    email: string;
  };

  const { data, pending } = await useAsyncData<Payment[]>(
    async () => {
      // Simulate fetching data
      await promiseTimeout(1000);
      // create 100 fake payment records
      return Array.from({ length: 100 }, () => ({
        id: faker.string.alphanumeric(10),
        amount: faker.number.int({ min: 10, max: 1000 }),
        status: faker.helpers.arrayElement(["pending", "processing", "success", "failed"]) as
          | "pending"
          | "processing"
          | "success"
          | "failed",
        email: faker.internet.email().toLowerCase(),
      }));
    },
    { default: () => [] }
  );

  const columns: ColumnDef<TanStackTableFeatures, Payment>[] = [
    { accessorKey: "id", header: "ID", enableHiding: true },
    {
      accessorKey: "amount",
      header: "Amount",
      enableHiding: true,
      enableSorting: true,
      cell: ({ row }) => {
        return new Intl.NumberFormat("en-US", {
          style: "currency",
          currency: "USD",
        }).format(row.original.amount);
      },
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row }) => {
        return h(resolveComponent("UiBadge"), { variant: "outline", class: "capitalize" }, () => [
          row.original.status,
        ]);
      },
      enableHiding: true,
    },
    { accessorKey: "email", header: "Email", enableHiding: true },
    {
      accessorKey: "actions",
      header: "",
      enableSorting: false,
      enableHiding: false,
    },
  ];

  function exportCsv(mode: "all" | "page") {
    if (!table.value) return;

    // Get rows based on mode
    const rows =
      mode === "all" ? table.value.getFilteredRowModel().rows : table.value.getRowModel().rows;

    if (!rows.length) {
      useSonner.info("No data to export", {
        description: "Please ensure there is data to export.",
      });
      return;
    }

    // Get visible columns, excluding actions
    const columns = table.value.getVisibleLeafColumns().filter((col) => col.id !== "actions");

    // Build header row
    const header = columns.map((col) => {
      const headerText = typeof col.columnDef.header === "string" ? col.columnDef.header : col.id;
      return escapeCsvValue(String(headerText));
    });

    // Build data rows
    const dataRows = rows.map((row) =>
      columns.map((col) => {
        const value = row.getValue(col.id);
        return escapeCsvValue(value);
      })
    );

    // Combine and create CSV
    const csv = [header, ...dataRows].map((r) => r.join(",")).join("\n");

    // Create blob and trigger download
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = `payments-${mode === "all" ? "all" : "page"}-${new Date().toISOString().split("T")[0]}.csv`;
    link.click();
    URL.revokeObjectURL(url);

    useSonner.success("Export successful", {
      description: `${rows.length} row(s) exported to CSV.`,
    });
  }

  function escapeCsvValue(value: any): string {
    if (value == null) return '""';
    const str = String(value);
    // Escape quotes and wrap in quotes if contains comma, quote, or newline
    if (str.includes(",") || str.includes('"') || str.includes("\n")) {
      return `"${str.replace(/"/g, '""')}"`;
    }
    return `"${str}"`;
  }

  function getStatusVariant(
    status: "pending" | "processing" | "success" | "failed"
  ): "default" | "secondary" | "destructive" | "outline" {
    switch (status) {
      case "success":
        return "default";
      case "processing":
        return "secondary";
      case "failed":
        return "destructive";
      case "pending":
        return "outline";
      default:
        return "default";
    }
  }
</script>
```
::

### Basic

::prose-show-case
:docs-tan-stack-basic

#code
```vue [DocsTanStackBasic.vue]
<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  //1. Import the stuff you want from TanStack
  import {
    columnVisibilityFeature,
    createColumnHelper,
    FlexRender,
    rowSelectionFeature,
    tableFeatures,
    useTable,
  } from "@tanstack/vue-table";
  // Import any type that you may need
  import type { RowSelectionState } from "@tanstack/vue-table";
  import type { CheckboxRootProps } from "reka-ui";

  //2. Import the components you want to use
  import { UiBadge, UiCheckbox } from "#components";

  // 1a. Register only the features this table actually uses.
  // `columnVisibilityFeature` is required even though this example doesn't
  // toggle columns: `row.getVisibleCells()` (used below) is implemented by
  // that feature, not by core.
  const features = tableFeatures({
    columnVisibilityFeature,
    rowSelectionFeature,
  });

  //3. Fetch your data
  const { data } = await useAsyncData(
    async () => {
      return Array.from({ length: 5 }, (item, index) => ({
        id: index + 1,
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        location: faker.location.city(),
        status: faker.helpers.arrayElement(["Active", "Inactive"]),
        balance: faker.number.float({ fractionDigits: 2, min: 0, max: 1200 }),
      }));
    },
    { default: () => [] }
  );

  // 4. Optionally define the type of the columns
  type Item = (typeof data.value)[number] & {
    select: boolean;
  };
  //5. Create a column helper based on the type of the item
  const columnHelper = createColumnHelper<typeof features, Item>();

  const total = computed(() => {
    return data.value?.reduce((acc: number, item) => acc + item.balance, 0);
  });

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(value);
  };

  //6. Create the columns
  const columns = [
    columnHelper.accessor("select", {
      header({ table }) {
        return h(UiCheckbox, {
          modelValue: table.getIsAllRowsSelected()
            ? true
            : table.getIsSomeRowsSelected()
              ? "indeterminate"
              : false,
          "onUpdate:modelValue": (v: CheckboxRootProps["modelValue"]) =>
            table.getToggleAllRowsSelectedHandler()({ target: { checked: v } }),
        });
      },
      cell({ row }) {
        return h(UiCheckbox, {
          modelValue: row.getIsSelected(),
          disabled: !row.getCanSelect(),
          "onUpdate:modelValue": (v: CheckboxRootProps["modelValue"]) =>
            row.getToggleSelectedHandler()({ target: { checked: v } }),
        });
      },
    }),
    columnHelper.accessor("name", {
      header: "Name",
      cell: ({ getValue }) => h("span", { class: tw`font-medium` }, getValue()),
    }),
    columnHelper.accessor("email", {
      header: "Email",
      cell: (item) => h("a", { href: `mailto:${item.getValue()}` }, item.getValue()),
    }),
    columnHelper.accessor("location", {
      header: "Location",
      cell: (item) => item.getValue(),
    }),
    columnHelper.accessor("status", {
      header: "Status",
      cell: ({ getValue }) =>
        h(
          UiBadge,
          {
            variant: getValue() === "Inactive" ? "outline" : "default",
          },
          () => getValue()
        ),
    }),
    columnHelper.accessor("balance", {
      header: "Balance",
      cell: ({ getValue }) => h("span", { class: tw`text-right` }, formatCurrency(getValue())),
    }),
  ];

  //7. optionally set the state you want to control
  // create state for row selection so we can emit it back to the parent if needed
  const rowSelection = ref<RowSelectionState>({});

  //8. Create the table
  const table = useTable({
    features,
    // @ts-expect-error - the types are correct
    data,
    columns,
    enableRowSelection: true,
    state: {
      //9. Set the state you want to control
      get rowSelection() {
        return rowSelection.value;
      },
    },
    //10. Optionally set the actions you want to control
    onRowSelectionChange: (newRowSelection) => {
      rowSelection.value =
        typeof newRowSelection === "function"
          ? newRowSelection(rowSelection.value)
          : newRowSelection;
      // optionally do something else with the row selection
      // emit('row-selection-change', rowSelection.value)
      console.log(rowSelection.value);
    },
  });
</script>

<template>
  <div>
    <!-- 10. Render the table -->
    <UiTable>
      <UiTableHeader>
        <!-- For rows, we loop over the tables `getHeaderGroups` function -->
        <UiTableRow
          v-for="headerGroup in table.getHeaderGroups()"
          :key="headerGroup.id"
          class="hover:bg-transparent"
        >
          <!-- For each header, we loop over the headers in the headerGroup -->
          <UiTableHead
            v-for="header in headerGroup.headers"
            :key="header.id"
            :colspan="header.colSpan"
          >
            <!-- Render the header cell -->
            <FlexRender v-if="!header.isPlaceholder" :header="header" />
          </UiTableHead>
        </UiTableRow>
      </UiTableHeader>
      <UiTableBody>
        <!-- If there are rows, loop over them -->
        <template v-if="table.getRowModel().rows?.length">
          <!-- For each row, loop over the tables `getRowModel().rows` -->
          <UiTableRow
            v-for="row in table.getRowModel().rows"
            :key="row.id"
            :data-state="row.getIsSelected() && 'selected'"
          >
            <!-- For each cell in the row, loop over the visible cells -->
            <UiTableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
              <!-- Render the cell -->
              <FlexRender :cell="cell" />
            </UiTableCell>
          </UiTableRow>
        </template>
        <!-- If there are no rows, show a message -->
        <template v-else>
          <UiTableRow>
            <UiTableCell :colspan="columns.length" class="h-24 text-center">
              No results.
            </UiTableCell>
          </UiTableRow>
        </template>
      </UiTableBody>
      <UiTableFooter class="bg-transparent">
        <UiTableRow class="hover:bg-transparent">
          <UiTableCell colspan="5">Total</UiTableCell>
          <UiTableCell class="text-right">
            {{ formatCurrency(total) }}
          </UiTableCell>
        </UiTableRow>
      </UiTableFooter>
    </UiTable>
    <p class="text-muted-foreground mt-4 text-center text-sm">
      Basic data table made with
      <a
        class="hover:text-foreground underline"
        href="https://tanstack.com/table"
        target="_blank"
        rel="noopener noreferrer"
      >
        TanStack Table
      </a>
    </p>
  </div>
</template>
```
::

### Filters

::prose-show-case
:docs-tan-stack-filters

#code
```vue [DocsTanStackFilters.vue]
<script lang="ts" setup>
  import {
    columnFacetingFeature,
    columnFilteringFeature,
    columnVisibilityFeature,
    createColumnHelper,
    createFacetedRowModel,
    createFacetedUniqueValues,
    createFilteredRowModel,
    createSortedRowModel,
    filterFn_arrIncludes,
    filterFn_inNumberRange,
    FlexRender,
    globalFilteringFeature,
    rowSelectionFeature,
    rowSortingFeature,
    sortFn_text,
    tableFeatures,
    useTable,
  } from "@tanstack/vue-table";
  import type {
    ColumnFiltersState,
    RowData,
    RowSelectionState,
    SortingState,
    TableFeatures,
  } from "@tanstack/vue-table";

  import { Icon, UiCheckbox } from "#components";

  // Register only the features this table actually uses.
  // `columnVisibilityFeature` is required even though this example doesn't
  // toggle columns: `row.getVisibleCells()` (used below) is implemented by
  // that feature, not by core.
  const features = tableFeatures({
    columnFilteringFeature,
    globalFilteringFeature,
    columnFacetingFeature,
    columnVisibilityFeature,
    rowSelectionFeature,
    rowSortingFeature,
    filteredRowModel: createFilteredRowModel(),
    facetedRowModel: createFacetedRowModel(),
    facetedUniqueValues: createFacetedUniqueValues(),
    sortedRowModel: createSortedRowModel(),
    filterFns: { arrIncludes: filterFn_arrIncludes, inNumberRange: filterFn_inNumberRange },
    sortFns: { text: sortFn_text },
  });

  declare module "@tanstack/vue-table" {
    //allows us to define custom properties for our columns
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    interface ColumnMeta<TFeatures extends TableFeatures, TData extends RowData, TValue> {
      filterVariant?: "select";
    }
  }

  type Item = {
    id: string;
    keyword: string;
    intents: Array<"Informational" | "Navigational" | "Commercial" | "Transactional">;
    volume: number;
    cpc: number;
    traffic: number;
    link: string;
  };

  const items: Item[] = [
    {
      id: "1",
      keyword: "react components",
      intents: ["Informational", "Navigational"],
      volume: 2507,
      cpc: 2.5,
      traffic: 88,
      link: "https://www.originui.com",
    },
    {
      id: "2",
      keyword: "buy react templates",
      intents: ["Commercial", "Transactional"],
      volume: 1850,
      cpc: 4.75,
      traffic: 65,
      link: "https://www.originui.com/templates",
    },
    {
      id: "3",
      keyword: "react ui library",
      intents: ["Informational", "Commercial"],
      volume: 3200,
      cpc: 3.25,
      traffic: 112,
      link: "https://www.originui.com/docs",
    },
    {
      id: "4",
      keyword: "tailwind components download",
      intents: ["Transactional"],
      volume: 890,
      cpc: 1.95,
      traffic: 45,
      link: "https://www.originui.com/download",
    },
    {
      id: "5",
      keyword: "react dashboard template free",
      intents: ["Commercial", "Transactional"],
      volume: 4100,
      cpc: 5.5,
      traffic: 156,
      link: "https://www.originui.com/templates/dashboard",
    },
    {
      id: "6",
      keyword: "how to use react components",
      intents: ["Informational"],
      volume: 1200,
      cpc: 1.25,
      traffic: 42,
      link: "https://www.originui.com/tutorials",
    },
    {
      id: "7",
      keyword: "react ui kit premium",
      intents: ["Commercial", "Transactional"],
      volume: 760,
      cpc: 6.8,
      traffic: 28,
      link: "https://www.originui.com/pricing",
    },
    {
      id: "8",
      keyword: "react component documentation",
      intents: ["Informational", "Navigational"],
      volume: 950,
      cpc: 1.8,
      traffic: 35,
      link: "https://www.originui.com/docs/components",
    },
  ];

  const columnHelper = createColumnHelper<typeof features, Item>();

  const columns = [
    columnHelper.accessor("id", {
      enableSorting: false,
      enableGlobalFilter: false,
      header({ table }) {
        return h(UiCheckbox, {
          modelValue: table.getIsAllRowsSelected()
            ? true
            : table.getIsSomeRowsSelected()
              ? "indeterminate"
              : false,
          "onUpdate:modelValue": (v: boolean | "indeterminate") =>
            table.getToggleAllRowsSelectedHandler()({ target: { checked: v } }),
        });
      },
      cell({ row }) {
        return h(UiCheckbox, {
          modelValue: row.getIsSelected(),
          disabled: !row.getCanSelect(),
          "onUpdate:modelValue": (v: boolean | "indeterminate") =>
            row.getToggleSelectedHandler()({ target: { checked: v } }),
        });
      },
    }),
    columnHelper.accessor("keyword", {
      header: "Keyword",
      sortFn: "text",
      cell: ({ getValue }) => h("span", { class: tw`font-medium` }, getValue()),
    }),
    columnHelper.accessor("intents", {
      header: "Intents",
      enableSorting: false,
      meta: {
        filterVariant: "select",
      },
      filterFn: "arrIncludes",
      cell: ({ getValue }) => {
        const styles = {
          Informational: "bg-indigo-400/20 text-indigo-500",
          Navigational: "bg-emerald-400/20 text-emerald-500",
          Commercial: "bg-amber-400/20 text-amber-500",
          Transactional: "bg-rose-400/20 text-rose-500",
        } as const;
        return h(
          "div",
          { class: tw`flex items-center gap-1` },
          getValue().map((intent) => {
            const intentStyle = styles[intent];
            return h(
              "div",
              {
                class:
                  tw`flex size-5 items-center justify-center rounded text-xs font-medium` +
                  intentStyle,
              },
              intent.charAt(0)
            );
          })
        );
      },
    }),
    columnHelper.accessor("volume", {
      header: "Volume",
      filterFn: "inNumberRange",
      cell: ({ getValue }) => {
        return new Intl.NumberFormat("en-US", {
          notation: "compact",
          maximumFractionDigits: 1,
        }).format(getValue());
      },
    }),
    columnHelper.accessor("cpc", {
      header: "CPC",
      cell: ({ getValue }) => getValue(),
    }),

    columnHelper.accessor("traffic", {
      header: "Traffic",
      cell: ({ getValue }) => {
        return new Intl.NumberFormat("en-US", {
          notation: "compact",
          maximumFractionDigits: 1,
        }).format(getValue());
      },
    }),
    columnHelper.accessor("link", {
      header: "Link",
      enableSorting: false,
      enableGlobalFilter: false,
      cell: ({ getValue }) =>
        h(
          "a",
          {
            href: getValue(),
            target: "_blank",
            class: tw`inline-flex items-center gap-1 transition-all hover:text-sky-500 hover:underline`,
          },
          [
            getValue(),
            h(Icon, { name: "lucide:external-link", class: tw`size-3`, ariaHidden: true }),
          ]
        ),
    }),
  ];

  const rowSelection = ref<RowSelectionState>({});
  const columnFilters = ref<ColumnFiltersState>([]);
  const sorting = ref<SortingState>([]);
  const search = ref("");
  const globalFilter = refDebounced(search, 300);
  const table = useTable({
    features,
    columns,
    data: items,
    enableRowSelection: true,
    state: {
      get rowSelection() {
        return rowSelection.value;
      },
      get sorting() {
        return sorting.value;
      },
      get globalFilter() {
        return globalFilter.value;
      },
      get columnFilters() {
        return columnFilters.value;
      },
    },
    onRowSelectionChange: (newRowSelection) => {
      rowSelection.value =
        typeof newRowSelection === "function"
          ? newRowSelection(rowSelection.value)
          : newRowSelection;
      // optionally do something else with the row selection
      // emit('row-selection-change', rowSelection.value)
    },
    onSortingChange: (updaterOrValue) => {
      sorting.value =
        typeof updaterOrValue === "function" ? updaterOrValue(sorting.value) : updaterOrValue;
    },
    onGlobalFilterChange: (updaterOrValue) => {
      search.value =
        typeof updaterOrValue === "function" ? updaterOrValue(globalFilter.value) : updaterOrValue;
    },
    onColumnFiltersChange: (updaterOrValue) => {
      columnFilters.value =
        typeof updaterOrValue === "function" ? updaterOrValue(columnFilters.value) : updaterOrValue;
    },
  });
</script>
<template>
  <div>
    <div class="md:w-1/2 lg:max-w-[300px]">
      <UiVeeInput
        v-model="search"
        placeholder="Search keyword"
        icon="lucide:search"
        label="Keywords"
      />
    </div>
    <!-- Render the table -->
    <UiTable class="mt-8">
      <UiTableHeader>
        <!-- For rows, we loop over the tables `getHeaderGroups` function -->
        <UiTableRow
          v-for="headerGroup in table.getHeaderGroups()"
          :key="headerGroup.id"
          class="bg-muted/50"
        >
          <!-- For each header, we loop over the headers in the headerGroup -->
          <UiTableHead
            v-for="header in headerGroup.headers"
            :key="header.id"
            :colspan="header.colSpan"
            :class="header.column.getCanSort() ? 'cursor-pointer select-none' : ''"
            class="relative h-10 border-t select-none"
            @click="header.column.getToggleSortingHandler()?.($event)"
          >
            <div class="flex w-full items-center gap-3 whitespace-nowrap">
              <!-- Render the header cell -->
              <FlexRender v-if="!header.isPlaceholder" :header="header" />
              <Icon
                v-if="header.column.getIsSorted() == 'asc'"
                name="lucide:chevron-up"
                class="text-muted-foreground size-4 shrink-0"
              />
              <Icon
                v-else-if="header.column.getIsSorted() == 'desc'"
                name="lucide:chevron-down"
                class="text-muted-foreground size-4 shrink-0"
              />
              <Icon
                v-else-if="header.column.getCanSort()"
                name="lucide:chevrons-up-down"
                class="text-muted-foreground/30 size-4 shrink-0"
              />
              <div
                v-if="
                  header.column.getCanFilter() &&
                  header.column.columnDef?.meta?.filterVariant &&
                  header.column.columnDef?.meta?.filterVariant == 'select'
                "
              >
                <UiDropdownMenu>
                  <UiDropdownMenuTrigger as-child>
                    <UiButton variant="ghost" class="size-7" size="xs">
                      <Icon name="lucide:list-filter" class="size-4" />
                    </UiButton>
                  </UiDropdownMenuTrigger>
                  <UiDropdownMenuContent class="w-48">
                    <UiDropdownMenuRadioGroup
                      :model-value="
                        (header.column.getFilterValue() as string[] | undefined)?.[0] ?? 'All'
                      "
                      @update:model-value="
                        (e) => header.column.setFilterValue(e == 'All' ? undefined : [e])
                      "
                    >
                      <UiDropdownMenuRadioItem
                        v-for="item in [
                          'All',
                          'Informational',
                          'Navigational',
                          'Commercial',
                          'Transactional',
                        ]"
                        :key="item"
                        :value="item"
                        :title="item"
                        :text-value="item"
                        @select="(e) => e.preventDefault()"
                      />
                    </UiDropdownMenuRadioGroup>
                  </UiDropdownMenuContent>
                </UiDropdownMenu>
              </div>
            </div>
          </UiTableHead>
        </UiTableRow>
      </UiTableHeader>
      <UiTableBody>
        <!-- If there are rows, loop over them -->
        <template v-if="table.getRowModel().rows?.length">
          <!-- For each row, loop over the tables `getRowModel().rows` -->
          <UiTableRow
            v-for="row in table.getRowModel().rows"
            :key="row.id"
            :data-state="row.getIsSelected() && 'selected'"
          >
            <!-- For each cell in the row, loop over the visible cells -->
            <UiTableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
              <!-- Render the cell -->
              <FlexRender :cell="cell" />
            </UiTableCell>
          </UiTableRow>
        </template>
        <!-- If there are no rows, show a message -->
        <template v-else>
          <UiTableRow>
            <UiTableCell :colspan="columns.length" class="h-24 text-center">
              No results.
            </UiTableCell>
          </UiTableRow>
        </template>
      </UiTableBody>
    </UiTable>
    <p class="text-muted-foreground mt-4 text-center text-sm">
      Data table with filters made with
      <a
        class="hover:text-foreground underline"
        href="https://tanstack.com/table"
        target="_blank"
        rel="noopener noreferrer"
      >
        TanStack Table
      </a>
    </p>
  </div>
</template>
```
::

### Simple (Auto-Generated Columns)

Shows zero-config usage with automatic column generation from data keys.

::prose-show-case
:docs-tan-stack-simple

#code
```vue [DocsTanStackSimple.vue]
<template>
  <div class="w-full">
    <UiTanStackTable :data="payments" />
  </div>
</template>

<script lang="ts" setup>
  const payments = [
    {
      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,
    },
  ];
</script>
```
::

### Custom Columns

Custom column definitions with formatted cells and styled badges.

::prose-show-case
:docs-tan-stack-custom-columns

#code
```vue [DocsTanStackCustomColumns.vue]
<template>
  <div class="w-full">
    <UiTanStackTable :data="payments" :columns="columns" />
  </div>
</template>

<script lang="ts" setup>
  import type { ColumnDef } from "@tanstack/vue-table";

  import type { TanStackTableFeatures } from "~/components/Ui/TanStackTable.vue";

  interface Payment {
    id: string;
    date: string;
    status: "paid" | "failed" | "refunded";
    email: string;
    amount: number;
  }

  const payments: 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,
    },
  ];

  const columns: ColumnDef<TanStackTableFeatures, Payment>[] = [
    {
      accessorKey: "id",
      header: "#",
      cell: ({ row }) => `#${row.getValue("id")}`,
    },
    {
      accessorKey: "date",
      header: "Date",
      cell: ({ row }) => {
        return new Date(row.getValue("date")).toLocaleString("en-US", {
          day: "numeric",
          month: "short",
          hour: "2-digit",
          minute: "2-digit",
          hour12: false,
        });
      },
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row }) => {
        const status = row.getValue("status") as string;
        return h(
          "span",
          {
            class: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
              status === "paid"
                ? "bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400"
                : status === "failed"
                  ? "bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400"
                  : "bg-yellow-50 text-yellow-700 dark:bg-yellow-500/10 dark:text-yellow-400"
            }`,
          },
          status.charAt(0).toUpperCase() + status.slice(1)
        );
      },
    },
    {
      accessorKey: "email",
      header: "Email",
    },
    {
      accessorKey: "amount",
      header: () => h("div", { class: "text-right" }, "Amount"),
      cell: ({ row }) => {
        const amount = Number.parseFloat(row.getValue("amount"));
        const formatted = new Intl.NumberFormat("en-US", {
          style: "currency",
          currency: "USD",
        }).format(amount);
        return h("div", { class: "text-right font-medium" }, formatted);
      },
    },
  ];
</script>
```
::

### With Slots

Using slots to customize cell rendering with avatars and dropdowns.

::prose-show-case
:docs-tan-stack-slots

#code
```vue [DocsTanStackSlots.vue]
<template>
  <div class="w-full">
    <UiTanStackTable :data="users" :columns="columns">
      <template #name-cell="{ row }">
        <div class="flex items-center gap-3">
          <UiAvatar
            :src="`https://i.pravatar.cc/120?img=${row.original.id}`"
            class="size-10"
            :alt="`${row.original.name} avatar`"
          />
          <div>
            <p class="font-medium">{{ row.original.name }}</p>
            <p class="text-muted-foreground text-sm">@{{ row.original.username }}</p>
          </div>
        </div>
      </template>

      <template #actions-cell="{}">
        <UiDropdownMenu>
          <UiDropdownMenuTrigger as-child>
            <UiButton variant="ghost" size="icon-sm">
              <Icon name="lucide:more-horizontal" class="size-4" />
            </UiButton>
          </UiDropdownMenuTrigger>
          <UiDropdownMenuContent class="min-w-40" align="end">
            <UiDropdownMenuItem>
              <Icon name="lucide:edit" class="size-4" />
              Edit
            </UiDropdownMenuItem>
            <UiDropdownMenuItem>
              <Icon name="lucide:copy" class="size-4" />
              Copy ID
            </UiDropdownMenuItem>
            <UiDropdownMenuSeparator />
            <UiDropdownMenuItem variant="destructive">
              <Icon name="lucide:trash" class="size-4" />
              Delete
            </UiDropdownMenuItem>
          </UiDropdownMenuContent>
        </UiDropdownMenu>
      </template>
    </UiTanStackTable>
  </div>
</template>

<script lang="ts" setup>
  import type { ColumnDef } from "@tanstack/vue-table";

  import type { TanStackTableFeatures } from "~/components/Ui/TanStackTable.vue";

  interface User {
    id: number;
    name: string;
    username: string;
    email: string;
    role: string;
  }

  const users: User[] = [
    {
      id: 1,
      name: "Lindsay Walton",
      username: "lindsayw",
      email: "lindsay.walton@example.com",
      role: "Member",
    },
    {
      id: 2,
      name: "Courtney Henry",
      username: "courtneyh",
      email: "courtney.henry@example.com",
      role: "Admin",
    },
    {
      id: 3,
      name: "Tom Cook",
      username: "tomc",
      email: "tom.cook@example.com",
      role: "Member",
    },
    {
      id: 4,
      name: "Whitney Francis",
      username: "whitneyf",
      email: "whitney.francis@example.com",
      role: "Admin",
    },
  ];

  const columns: ColumnDef<TanStackTableFeatures, User>[] = [
    {
      id: "name",
      accessorKey: "name",
      header: "User",
    },
    {
      accessorKey: "email",
      header: "Email",
    },
    {
      accessorKey: "role",
      header: "Role",
    },
    {
      id: "actions",
      header: "",
    },
  ];
</script>
```
::

### With Footer

Table footer with column totals using aggregation functions.

::prose-show-case
:docs-tan-stack-footer

#code
```vue [DocsTanStackFooter.vue]
<template>
  <div class="w-full">
    <UiTanStackTable :data="payments" :columns="columns" />
  </div>
</template>

<script lang="ts" setup>
  import type { ColumnDef, Row } from "@tanstack/vue-table";

  import type { TanStackTableFeatures } from "~/components/Ui/TanStackTable.vue";

  interface Payment {
    id: string;
    description: string;
    amount: number;
    quantity: number;
  }

  const payments: Payment[] = [
    {
      id: "1",
      description: "Web Design",
      amount: 1200,
      quantity: 3,
    },
    {
      id: "2",
      description: "Development",
      amount: 2400,
      quantity: 5,
    },
    {
      id: "3",
      description: "Consulting",
      amount: 800,
      quantity: 2,
    },
    {
      id: "4",
      description: "Support",
      amount: 600,
      quantity: 4,
    },
  ];

  const columns: ColumnDef<TanStackTableFeatures, Payment>[] = [
    {
      accessorKey: "id",
      header: "#",
      footer: () => h("div", { class: "font-semibold" }, "Total"),
    },
    {
      accessorKey: "description",
      header: "Description",
      footer: () => "",
    },
    {
      accessorKey: "quantity",
      header: () => h("div", { class: "text-center" }, "Qty"),
      cell: ({ row }) => h("div", { class: "text-center" }, row.getValue("quantity")),
      footer: ({ column }) => {
        const total = column
          .getFacetedRowModel()
          .rows.reduce(
            (sum: number, row: Row<TanStackTableFeatures, Payment>) =>
              sum + row.getValue<number>("quantity"),
            0
          );
        return h("div", { class: "text-center font-semibold" }, total);
      },
    },
    {
      accessorKey: "amount",
      header: () => h("div", { class: "text-right justify-end w-full" }, "Amount"),
      cell: ({ row }) => {
        const amount = row.getValue<number>("amount");
        const formatted = new Intl.NumberFormat("en-US", {
          style: "currency",
          currency: "USD",
        }).format(amount);
        return h("div", { class: "text-right font-medium" }, formatted);
      },
      footer: ({ column }) => {
        const total = column
          .getFacetedRowModel()
          .rows.reduce(
            (sum: number, row: Row<TanStackTableFeatures, Payment>) =>
              sum + row.getValue<number>("amount"),
            0
          );
        const formatted = new Intl.NumberFormat("en-US", {
          style: "currency",
          currency: "USD",
        }).format(total);
        return h("div", { class: "text-right font-semibold" }, formatted);
      },
    },
  ];
</script>
```
::

### Minimal (No Footer)

Clean table without footer controls for simple layouts.

::prose-show-case
:docs-tan-stack-minimal

#code
```vue [DocsTanStackMinimal.vue]
<template>
  <div class="w-full">
    <UiTanStackTable :data="users" :columns="columns" :show-footer="false" :initial-page-size="5" />
  </div>
</template>

<script lang="ts" setup>
  import type { ColumnDef } from "@tanstack/vue-table";

  import type { TanStackTableFeatures } from "~/components/Ui/TanStackTable.vue";

  interface User {
    name: string;
    email: string;
    status: string;
  }

  const users: User[] = [
    { name: "John Doe", email: "john@example.com", status: "Active" },
    { name: "Jane Smith", email: "jane@example.com", status: "Active" },
    { name: "Bob Johnson", email: "bob@example.com", status: "Inactive" },
  ];

  const columns: ColumnDef<TanStackTableFeatures, User>[] = [
    { accessorKey: "name", header: "Name" },
    { accessorKey: "email", header: "Email" },
    { accessorKey: "status", header: "Status" },
  ];
</script>
```
::

### Loading State

Table with loading indicator - includes custom loader slot support.

::prose-show-case
:docs-tan-stack-loading

#code
```vue [DocsTanStackLoading.vue]
<template>
  <div class="w-full space-y-4">
    <div class="flex items-center gap-2">
      <UiButton :disabled="pending" @click="refreshData">
        <Icon name="lucide:refresh-cw" class="size-4" :class="{ 'animate-spin': pending }" />
        Refresh Data
      </UiButton>
    </div>

    <UiTanStackTable
      :data="data"
      :columns="columns"
      :loading="pending"
      :initial-page-size="5"
      :page-size-options="[5, 10, 50, 100]"
    >
      <template #loading="{ loading }">
        <div v-if="loading" class="text-primary flex items-center gap-2 px-4 py-2 text-sm">
          <Icon name="lucide:loader-2" class="size-4 animate-spin" />
          <span>Fetching data...</span>
        </div>
      </template>
    </UiTanStackTable>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ColumnDef } from "@tanstack/vue-table";

  import type { TanStackTableFeatures } from "~/components/Ui/TanStackTable.vue";

  interface Product {
    id: number;
    name: string;
    category: string;
    price: number;
    stock: number;
  }

  const refreshTrigger = ref(0);

  const fetchProducts = async (): Promise<Product[]> => {
    // Simulate network delay (1.5 seconds)
    await new Promise((resolve) => setTimeout(resolve, 1500));

    return Array.from({ length: 12 }, () => ({
      id: faker.number.int({ min: 1000, max: 9999 }),
      name: faker.commerce.productName(),
      category: faker.commerce.department(),
      price: faker.number.float({ min: 10, max: 500, fractionDigits: 2 }),
      stock: faker.number.int({ min: 0, max: 100 }),
    }));
  };

  const { data, pending } = await useAsyncData("products", () => fetchProducts(), {
    watch: [refreshTrigger],
    default: () => [],
  });

  const refreshData = () => {
    refreshTrigger.value++;
  };

  const columns: ColumnDef<TanStackTableFeatures, Product>[] = [
    {
      accessorKey: "id",
      header: "ID",
    },
    {
      accessorKey: "name",
      header: "Product",
      cell: ({ getValue }) => h("span", { class: "font-medium" }, getValue() as string),
    },
    {
      accessorKey: "category",
      header: "Category",
      cell: ({ getValue }) => {
        const category = getValue() as string;
        // assign a random color based on the category string
        const color = faker.color.rgb({ format: "hex" });
        const colorLight = `${color}33`; // add opacity for light bg

        return h(
          "span",
          {
            class: `inline-flex items-center rounded-md px-2 py-1 text-xs font-medium`,
            style: {
              backgroundColor: colorLight,
              color: color,
            },
          },
          category
        );
      },
    },
    {
      accessorKey: "price",
      header: () => h("div", { class: "text-right" }, "Price"),
      cell: ({ getValue }) => {
        const price = getValue() as number;
        return h(
          "div",
          { class: "text-right font-medium" },
          new Intl.NumberFormat("en-US", {
            style: "currency",
            currency: "USD",
          }).format(price)
        );
      },
    },
    {
      accessorKey: "stock",
      header: () => h("div", { class: "text-right" }, "Stock"),
      cell: ({ getValue }) => {
        const stock = getValue() as number;
        return h(
          "div",
          {
            class: `text-right font-medium ${stock < 20 ? "text-red-600 dark:text-red-400" : ""}`,
          },
          stock
        );
      },
    },
  ];
</script>
```
::

### Server-Side Pagination

Manual pagination with server-side data fetching and search. Enable `manual-pagination` prop and listen to the `@update:pagination` event.

::prose-show-case
:docs-tan-stack-server-pagination

#code
```vue [DocsTanStackServerPagination.vue]
<template>
  <div class="w-full space-y-4">
    <div class="flex items-start justify-between">
      <UiInput
        v-model="searchQuery"
        type="search"
        placeholder="Search users..."
        class="w-full max-w-sm"
      />
      <UiBadge variant="outline" size="md"> {{ totalRows }} total users </UiBadge>
    </div>

    <div class="overflow-hidden rounded-lg border">
      <UiTanStackTable
        :data="data"
        :columns="columns"
        :loading="pending"
        :manual-pagination="true"
        :manual-sorting="true"
        :manual-filtering="true"
        :page-count="pageCount"
        :initial-page-size="pageSize"
        @update:pagination="onPaginationChange"
        @update:sorting="onSortingChange"
        @update:column-filters="onColumnFiltersChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ColumnDef, ColumnFiltersState, SortingState } from "@tanstack/vue-table";

  import type { TanStackTableFeatures } from "~/components/Ui/TanStackTable.vue";

  interface User {
    id: string;
    name: string;
    email: string;
    role: string;
    department: string;
    status: "active" | "inactive";
  }

  interface ApiResponse {
    data: User[];
    total: number;
    page: number;
    pageSize: number;
    pageCount: number;
  }

  const pageIndex = ref(0);
  const pageSize = ref(10);
  const sorting = ref<SortingState>([]);
  const columnFilters = ref<ColumnFiltersState>([]);
  const searchQuery = ref("");
  const debouncedSearch = refDebounced(searchQuery, 500);

  // Simulate API call with delay
  const fetchUsers = async (
    page: number,
    size: number,
    search: string,
    sortBy: SortingState,
    filters: ColumnFiltersState
  ): Promise<ApiResponse> => {
    // Simulate network delay
    await new Promise((resolve) => setTimeout(resolve, 2000));

    // Generate mock data
    const allUsers: User[] = Array.from({ length: 95 }, (_, i) => ({
      id: faker.string.nanoid(5).toUpperCase(),
      name: faker.person.fullName(),
      email: faker.internet.email().toLowerCase(),
      role: ["Admin", "Member", "Viewer"][i % 3] || "Viewer",
      department: ["Engineering", "Sales", "Marketing", "Support"][i % 4] || "Support",
      status: i % 5 === 0 ? "inactive" : "active",
    }));

    // Filter by search
    let filtered = search
      ? allUsers.filter(
          (user) =>
            user.name.toLowerCase().includes(search.toLowerCase()) ||
            user.email.toLowerCase().includes(search.toLowerCase())
        )
      : allUsers;

    // Apply column filters
    if (filters.length > 0) {
      filtered = filtered.filter((user) => {
        return filters.every((filter) => {
          const value = user[filter.id as keyof User];
          const filterValue = filter.value;

          if (typeof filterValue === "string") {
            return String(value).toLowerCase().includes(filterValue.toLowerCase());
          }

          return value === filterValue;
        });
      });
    }

    // Apply sorting
    const sorted = [...filtered];
    if (sortBy.length > 0 && sortBy[0]) {
      const { id, desc } = sortBy[0];
      sorted.sort((a, b) => {
        const aValue = a[id as keyof User];
        const bValue = b[id as keyof User];

        if (aValue < bValue) return desc ? 1 : -1;
        if (aValue > bValue) return desc ? -1 : 1;
        return 0;
      });
    }

    // Paginate
    const start = page * size;
    const end = start + size;
    const paginatedData = sorted.slice(start, end);

    return {
      data: paginatedData,
      total: sorted.length,
      page,
      pageSize: size,
      pageCount: Math.ceil(sorted.length / size),
    };
  };

  const { data: apiData, pending } = await useAsyncData(
    () =>
      fetchUsers(
        pageIndex.value,
        pageSize.value,
        debouncedSearch.value,
        sorting.value,
        columnFilters.value
      ),
    {
      watch: [pageIndex, pageSize, debouncedSearch, sorting, columnFilters],
      default: () => ({
        data: [],
        total: 0,
        page: 0,
        pageSize: 10,
        pageCount: 0,
      }),
    }
  );

  const data = computed(() => apiData.value.data);
  const totalRows = computed(() => apiData.value.total);
  const pageCount = computed(() => apiData.value.pageCount);

  const onPaginationChange = (pagination: { pageIndex: number; pageSize: number }) => {
    pageIndex.value = pagination.pageIndex;
    pageSize.value = pagination.pageSize;
  };

  const onSortingChange = (newSorting: SortingState) => {
    sorting.value = newSorting;
    // Reset to first page when sorting changes
    pageIndex.value = 0;
  };

  const onColumnFiltersChange = (newFilters: ColumnFiltersState) => {
    columnFilters.value = newFilters;
    // Reset to first page when filters change
    pageIndex.value = 0;
  };

  const columns: ColumnDef<TanStackTableFeatures, User>[] = [
    {
      accessorKey: "id",
      header: "ID",
      cell: ({ row }) => `#${row.getValue("id")}`,
      enableSorting: true,
    },
    {
      accessorKey: "name",
      header: "Name",
      cell: ({ getValue }) => h("span", { class: "font-medium" }, getValue() as string),
      enableSorting: true,
    },
    {
      accessorKey: "email",
      header: "Email",
      enableSorting: true,
    },
    {
      accessorKey: "role",
      header: "Role",
      enableSorting: true,
      cell: ({ getValue }) => {
        const role = getValue() as string;
        return h(
          "span",
          {
            class: `inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ${
              role === "Admin"
                ? "bg-purple-50 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400"
                : role === "Member"
                  ? "bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400"
                  : "bg-gray-50 text-gray-700 dark:bg-gray-500/10 dark:text-gray-400"
            }`,
          },
          role
        );
      },
    },
    {
      accessorKey: "department",
      header: "Department",
      enableSorting: true,
    },
    {
      accessorKey: "status",
      header: "Status",
      enableSorting: true,
      cell: ({ getValue }) => {
        const status = getValue() as string;
        return h(
          "span",
          {
            class: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
              status === "active"
                ? "bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400"
                : "bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400"
            }`,
          },
          status.charAt(0).toUpperCase() + status.slice(1)
        );
      },
    },
  ];
</script>
```
::

### Expansion

Expandable rows to display additional details using the expansion feature.

::prose-show-case
:docs-tan-stack-expansion

#code
```vue [DocsTanStackExpansion.vue]
<template>
  <div>
    <div class="overflow-hidden rounded-lg border">
      <UiTanStackTable ref="tableRef" :data="data" :columns="columns" :loading="pending">
        <!-- No #expand-cell slot needed: the expand button is rendered automatically. -->
        <template #expanded-row="{ row }">
          <UiDescriptionList class="p-5 sm:grid-cols-[140px_auto]">
            <UiDescriptionListTerm>User ID</UiDescriptionListTerm>
            <UiDescriptionListDetails>{{ row.original.id }}</UiDescriptionListDetails>
            <UiDescriptionListTerm>Email</UiDescriptionListTerm>
            <UiDescriptionListDetails>{{ row.original.email }}</UiDescriptionListDetails>
            <UiDescriptionListTerm>Role</UiDescriptionListTerm>
            <UiDescriptionListDetails>{{ row.original.role }}</UiDescriptionListDetails>
            <UiDescriptionListTerm>Department</UiDescriptionListTerm>
            <UiDescriptionListDetails>{{ row.original.department }}</UiDescriptionListDetails>
            <UiDescriptionListTerm>Status</UiDescriptionListTerm>
            <UiDescriptionListDetails>
              <UiBadge
                :variant="row.original.status === 'active' ? 'default' : 'destructive'"
                class="capitalize"
              >
                {{ row.original.status }}
              </UiBadge>
            </UiDescriptionListDetails>
            <UiDescriptionListTerm>Join Date</UiDescriptionListTerm>
            <UiDescriptionListDetails>{{ row.original.joinDate }}</UiDescriptionListDetails>
            <UiDescriptionListTerm v-if="row.original.bio">Bio</UiDescriptionListTerm>
            <UiDescriptionListDetails v-if="row.original.bio" class="whitespace-break-spaces">
              {{ row.original.bio }}
            </UiDescriptionListDetails>
          </UiDescriptionList>
        </template>
      </UiTanStackTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ColumnDef } from "@tanstack/vue-table";
  import { promiseTimeout } from "@vueuse/core";

  import type { TanStackTableFeatures } from "~/components/Ui/TanStackTable.vue";

  interface User {
    id: string;
    name: string;
    email: string;
    role: string;
    department: string;
    status: "active" | "inactive";
    joinDate: string;
    bio: string;
  }

  const { data, pending } = await useAsyncData<User[]>(
    async () => {
      // Simulate fetching data
      await promiseTimeout(1000);
      // create 20 fake user records
      return Array.from({ length: 20 }, () => ({
        id: faker.string.nanoid(8).toUpperCase(),
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        role: faker.helpers.arrayElement(["Admin", "Member", "Viewer"]),
        department: faker.helpers.arrayElement(["Engineering", "Sales", "Marketing", "Support"]),
        status: faker.helpers.arrayElement(["active", "inactive"]) as "active" | "inactive",
        joinDate: faker.date.past().toLocaleDateString(),
        bio: faker.lorem.paragraph(),
      }));
    },
    { default: () => [] }
  );

  const columns: ColumnDef<TanStackTableFeatures, User>[] = [
    {
      id: "expand",
      header: () => null,
      cell: () => null,
      enableHiding: false,
      enableSorting: false,
      size: 50,
    },
    {
      accessorKey: "name",
      header: "Name",
      cell: ({ getValue }) => h("span", { class: "font-medium" }, getValue() as string),
    },
    {
      accessorKey: "email",
      header: "Email",
    },
    {
      accessorKey: "role",
      header: "Role",
      cell: ({ getValue }) => {
        const role = getValue() as string;
        return h(
          "span",
          {
            class: `inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ${
              role === "Admin"
                ? "bg-purple-50 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400"
                : role === "Member"
                  ? "bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400"
                  : "bg-gray-50 text-gray-700 dark:bg-gray-500/10 dark:text-gray-400"
            }`,
          },
          role
        );
      },
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ getValue }) => {
        const status = getValue() as string;
        return h(
          "span",
          {
            class: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
              status === "active"
                ? "bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400"
                : "bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400"
            }`,
          },
          status.charAt(0).toUpperCase() + status.slice(1)
        );
      },
    },
  ];
</script>
```
::

### Row Pinning

Pin rows to the top or bottom. The table emits `update:rowPinning` and `row-pin` so parents can sync state.

::prose-show-case
:docs-tan-stack-pinning

#code
```vue [DocsTanStackPinning.vue]
<template>
  <div class="space-y-4">
    <div class="text-muted-foreground flex items-center gap-2 text-sm">
      <Icon name="lucide:info" class="size-4" />
      Use the pin menu to choose top, bottom, or unpin.
    </div>

    <div class="overflow-x-hidden rounded-lg border">
      <UiTanStackTable :data="data" :columns="columns" :loading="pending" @row-pin="onRowPin">
        <template #pin-header>
          <span class="sr-only">Pin</span>
        </template>
      </UiTanStackTable>
    </div>

    <div v-if="pinnedTop.length || pinnedBottom.length" class="bg-muted/50 rounded-lg border p-4">
      <div class="font-semibold">Pinned rows</div>
      <div class="text-muted-foreground mt-2 space-y-1 text-sm">
        <div v-if="pinnedTop.length">Top: {{ pinnedTop.map((r) => r.name).join(", ") }}</div>
        <div v-if="pinnedBottom.length">
          Bottom: {{ pinnedBottom.map((r) => r.name).join(", ") }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ColumnDef, RowPinningState } from "@tanstack/vue-table";
  import { promiseTimeout } from "@vueuse/core";

  import type { TanStackTableFeatures } from "~/components/Ui/TanStackTable.vue";

  const rowPinning = ref<RowPinningState>({ top: [], bottom: [] });

  interface User {
    id: string;
    name: string;
    email: string;
    status: "active" | "inactive";
    department: string;
  }

  const { data, pending } = await useAsyncData<User[]>(
    async () => {
      await promiseTimeout(800);
      return Array.from({ length: 12 }, () => ({
        id: faker.string.nanoid(6).toUpperCase(),
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        status: faker.helpers.arrayElement(["active", "inactive"]) as "active" | "inactive",
        department: faker.helpers.arrayElement(["Engineering", "Sales", "Marketing", "Support"]),
      }));
    },
    { default: () => [] }
  );

  const onRowPin = ({ row, pin }: { row: any; pin: "top" | "bottom" | false }) => {
    rowPinning.value = rowPinning.value || {};
    if (pin === false) {
      if (rowPinning.value.top) {
        rowPinning.value.top = rowPinning.value.top.filter((id) => id !== row.id);
      }
      if (rowPinning.value.bottom) {
        rowPinning.value.bottom = rowPinning.value.bottom.filter((id) => id !== row.id);
      }
    } else {
      const section = pin === "top" ? "top" : "bottom";
      const other = pin === "top" ? "bottom" : "top";
      rowPinning.value[section] = [
        ...(rowPinning.value[section] || []).filter((id) => id !== row.id),
        row.id,
      ];
      rowPinning.value[other] = (rowPinning.value[other] || []).filter((id) => id !== row.id);
    }
  };

  const pinnedTop = computed(() => {
    const ids = rowPinning.value.top || [];
    return data.value.filter((user) => ids.includes(user.id));
  });

  const pinnedBottom = computed(() => {
    const ids = rowPinning.value.bottom || [];
    return data.value.filter((user) => ids.includes(user.id));
  });

  const columns: ColumnDef<TanStackTableFeatures, User>[] = [
    {
      id: "pin",
      header: () => null,
      cell: () => null,
      enableSorting: false,
      enableHiding: false,
      size: 50,
    },
    {
      accessorKey: "name",
      header: "Name",
      cell: ({ getValue }) => h("span", { class: "font-medium" }, getValue() as string),
    },
    {
      accessorKey: "email",
      header: "Email",
    },
    {
      accessorKey: "department",
      header: "Department",
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ getValue }) => {
        const status = getValue() as string;
        return h(
          "span",
          {
            class: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
              status === "active"
                ? "bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400"
                : "bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400"
            }`,
          },
          status.charAt(0).toUpperCase() + status.slice(1)
        );
      },
    },
  ];
</script>
```
::

### Column Pinning

Opt-in header pin buttons let you pin columns left or right. Pinned columns are sticky to the table edges; override `--ui-table-pinned-bg` in CSS if you need a different background. Use `enable-column-pinning` and `show-column-pin-buttons` to render the controls, and listen to `update:columnPinning` / `column-pin` if you need to sync state.

::prose-show-case
:docs-tan-stack-column-pinning

#code
```vue [DocsTanStackColumnPinning.vue]
<template>
  <div class="space-y-4">
    <div class="text-muted-foreground flex items-center gap-2 text-sm">
      <Icon name="lucide:info" class="size-4" />
      Pin columns with the header menu: choose start, end, or unpin.
    </div>

    <div class="overflow-hidden rounded-lg border">
      <UiTanStackTable
        :data="data"
        :columns="columns"
        :loading="pending"
        :enable-column-pinning="true"
        :show-column-pin-buttons="true"
        @ready="onReady"
        @update:column-pinning="columnPinning = $event"
      />
    </div>

    <div class="bg-muted/50 text-muted-foreground rounded-lg border p-4 text-sm">
      <div class="text-foreground font-semibold">Pinned columns</div>
      <div class="mt-2 space-y-1">
        <div v-if="columnPinning.start?.length">Start: {{ columnPinning.start.join(", ") }}</div>
        <div v-if="columnPinning.end?.length">End: {{ columnPinning.end.join(", ") }}</div>
        <div v-if="!columnPinning.start?.length && !columnPinning.end?.length">None</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ColumnDef, ColumnPinningState, Table } from "@tanstack/vue-table";

  import type { TanStackTableFeatures } from "~/components/Ui/TanStackTable.vue";

  interface User {
    id: string;
    firstName: string;
    lastName: string;
    phone: string;
    email: string;
    department: string;
    status: "active" | "inactive";
  }

  const columnPinning = ref<ColumnPinningState>({ start: [], end: [] });

  const { data, pending } = await useAsyncData<User[]>(
    async () => {
      return Array.from({ length: 8 }, () => {
        const firstName = faker.person.firstName();
        const lastName = faker.person.lastName();
        return {
          id: faker.string.nanoid(6).toUpperCase(),
          firstName,
          lastName,
          phone: faker.phone.number({ style: "national" }),
          address: faker.location.streetAddress({ useFullAddress: true }),
          email: faker.internet.email({ firstName, lastName }).toLowerCase(),
          department: faker.helpers.arrayElement(["Engineering", "Sales", "Marketing", "Support"]),
          status: faker.helpers.arrayElement(["active", "inactive"]) as "active" | "inactive",
        };
      });
    },
    { default: () => [] }
  );

  const onReady = (table: Table<TanStackTableFeatures, User>) => {
    // Set an initial pin for demonstration
    table.getColumn("firstName")?.pin("start");
    columnPinning.value = table.atoms.columnPinning.get();
  };

  const columns: ColumnDef<TanStackTableFeatures, User>[] = [
    {
      accessorKey: "id",
      header: "ID",
      enablePinning: false,
      meta: { class: { th: "whitespace-nowrap" } },
    },
    {
      accessorKey: "firstName",
      header: "First Name",
      cell: ({ getValue }) => h("span", { class: "font-medium" }, getValue() as string),
    },
    {
      accessorKey: "lastName",
      header: "Last Name",
      cell: ({ getValue }) => h("span", { class: "font-medium" }, getValue() as string),
    },
    {
      accessorKey: "email",
      header: "Email",
      size: 220,
    },
    {
      accessorKey: "phone",
      header: "Phone",
    },
    {
      accessorKey: "address",
      header: "Address",
    },
    {
      accessorKey: "department",
      header: "Department",
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ getValue }) => {
        const status = getValue() as string;
        const classes =
          status === "active"
            ? "bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400"
            : "bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400";
        return h(
          "span",
          {
            class: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${classes}`,
          },
          status.charAt(0).toUpperCase() + status.slice(1)
        );
      },
    },
  ];
</script>
```
::

### Context Menu

::prose-show-case
:docs-tan-stack-context-menu

#code
```vue [DocsTanStackContextMenu.vue]
<template>
  <div>
    <UiContextMenu>
      <UiContextMenuTrigger as-child>
        <div class="overflow-hidden rounded-lg border">
          <UiTanStackTable
            ref="tableRef"
            :data="data"
            :columns="columns"
            :loading="pending"
            @row-contextmenu="handleRowContextMenu"
          />
        </div>
      </UiContextMenuTrigger>
      <UiContextMenuContent class="w-64">
        <UiContextMenuLabel v-if="selectedUser">
          {{ selectedUser.name }}
        </UiContextMenuLabel>
        <UiContextMenuSeparator />
        <UiContextMenuGroup>
          <UiContextMenuItem
            icon="lucide:mail"
            @select="
              useSonner('Email Sent', {
                description: `Sending email to ${selectedUser?.email}`,
              })
            "
          >
            Send Email
          </UiContextMenuItem>
          <UiContextMenuItem
            icon="lucide:user"
            @select="
              useSonner('View Profile', {
                description: `Opening profile for ${selectedUser?.name}`,
              })
            "
          >
            View Profile
          </UiContextMenuItem>
          <UiContextMenuItem
            icon="lucide:pencil"
            @select="
              useSonner('Edit User', {
                description: `Editing ${selectedUser?.name}`,
              })
            "
          >
            Edit User
          </UiContextMenuItem>
        </UiContextMenuGroup>
        <UiContextMenuSeparator />
        <UiContextMenuGroup>
          <UiContextMenuItem
            v-if="selectedUser?.status === 'active'"
            icon="lucide:ban"
            @select="
              useSonner.warning('Deactivate User', {
                description: `Are you sure you want to deactivate ${selectedUser?.name}?`,
                action: {
                  label: 'Deactivate',
                  onClick: () => {
                    useSonner.success('User Deactivated', {
                      description: `${selectedUser?.name} has been deactivated.`,
                    });
                  },
                },
              })
            "
          >
            Deactivate
          </UiContextMenuItem>
          <UiContextMenuItem
            v-else
            icon="lucide:check-circle"
            @select="
              useSonner.success('User Activated', {
                description: `${selectedUser?.name} has been activated.`,
              })
            "
          >
            Activate
          </UiContextMenuItem>
        </UiContextMenuGroup>
        <UiContextMenuSeparator />
        <UiContextMenuItem
          icon="lucide:trash"
          variant="destructive"
          @select="
            useSonner.error('Delete User', {
              description: `Are you sure you want to delete ${selectedUser?.name}?`,
              action: {
                label: 'Delete',
                onClick: () => {
                  useSonner.success('User Deleted', {
                    description: `${selectedUser?.name} has been removed.`,
                  });
                },
              },
            })
          "
        >
          Delete User
        </UiContextMenuItem>
      </UiContextMenuContent>
    </UiContextMenu>

    <div v-if="selectedUser" class="bg-muted/50 mt-4 rounded-lg border p-4">
      <p class="text-muted-foreground text-sm">
        <span class="font-semibold">Last Selected:</span> {{ selectedUser.name }} ({{
          selectedUser.email
        }})
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ColumnDef } from "@tanstack/vue-table";
  import { promiseTimeout } from "@vueuse/core";

  import type { TanStackTableFeatures } from "~/components/Ui/TanStackTable.vue";

  const selectedUser = ref<User | null>(null);

  interface User {
    id: string;
    name: string;
    email: string;
    role: string;
    department: string;
    status: "active" | "inactive";
  }

  const { data, pending } = await useAsyncData<User[]>(
    async () => {
      // Simulate fetching data
      await promiseTimeout(1000);
      // create 15 fake user records
      return Array.from({ length: 15 }, () => ({
        id: faker.string.nanoid(8).toUpperCase(),
        name: faker.person.fullName(),
        email: faker.internet.email().toLowerCase(),
        role: faker.helpers.arrayElement(["Admin", "Member", "Viewer"]),
        department: faker.helpers.arrayElement(["Engineering", "Sales", "Marketing", "Support"]),
        status: faker.helpers.arrayElement(["active", "inactive"]) as "active" | "inactive",
      }));
    },
    { default: () => [] }
  );

  const handleRowContextMenu = ({ row }: { event: MouseEvent; row: { original: User } }) => {
    selectedUser.value = row.original;
  };

  const columns: ColumnDef<TanStackTableFeatures, User>[] = [
    {
      accessorKey: "name",
      header: "Name",
      cell: ({ getValue }) => h("span", { class: "font-medium" }, getValue() as string),
    },
    {
      accessorKey: "email",
      header: "Email",
    },
    {
      accessorKey: "role",
      header: "Role",
      cell: ({ getValue }) => {
        const role = getValue() as string;
        return h(
          "span",
          {
            class: `inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ${
              role === "Admin"
                ? "bg-purple-50 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400"
                : role === "Member"
                  ? "bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400"
                  : "bg-gray-50 text-gray-700 dark:bg-gray-500/10 dark:text-gray-400"
            }`,
          },
          role
        );
      },
    },
    {
      accessorKey: "department",
      header: "Department",
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ getValue }) => {
        const status = getValue() as string;
        return h(
          "span",
          {
            class: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
              status === "active"
                ? "bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400"
                : "bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400"
            }`,
          },
          status.charAt(0).toUpperCase() + status.slice(1)
        );
      },
    },
  ];
</script>
```
::


# Textarea

## Source code

Click :source-code-link{component="Textarea.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add textarea
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add textarea
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add textarea
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add textarea
```
::

## Usage

### Basic example

::prose-show-case
:docs-textarea

#code
```vue [DocsTextarea.vue]
<template>
  <div class="mx-auto max-w-xs">
    <UiTextarea placeholder="Bio" />
  </div>
</template>
```
::

### Label

::prose-show-case
:docs-textarea-label

#code
```vue [DocsTextareaLabel.vue]
<template>
  <div class="mx-auto max-w-xs">
    <div class="mt-7 grid w-full items-center gap-2.5">
      <UiLabel for="contact-message">Why are you here today?</UiLabel>
      <UiTextarea id="contact-message" />
    </div>
  </div>
</template>
```
::

### Form

::prose-show-case
:docs-textarea-form

#code
```vue [DocsTextareaForm.vue]
<template>
  <form class="mx-auto max-w-xs" @submit="onSubmit">
    <Field v-slot="{ componentField }" name="bio">
      <UiFormItem label="Tell us about yourself" description="Feel free to @mention others">
        <UiTextarea v-bind="componentField" />
      </UiFormItem>
    </Field>
    <div class="mt-5">
      <UiButton type="submit">Submit</UiButton>
    </div>
  </form>
</template>

<script lang="ts" setup>
  import { object, string } from "yup";

  const { handleSubmit } = useForm({
    validationSchema: toTypedSchema(
      object({
        bio: string().label("Bio").required().min(10).max(1000).trim(),
      })
    ),
  });

  const onSubmit = handleSubmit(() => {
    useSonner.success("Bio Updated", {
      description: "Your bio has been successfully updated.",
    });
  });
</script>
```
::

### Max Length

Restrict the number of characters that can be entered into the textarea.

::prose-show-case
:docs-textarea-max-length

#code
```vue [DocsTextareaMaxLength.vue]
<template>
  <div class="mx-auto flex max-w-xs flex-col gap-3">
    <UiTextarea :maxlength="5" placeholder="Quick chat..." />
    <p class="text-muted-foreground text-sm">No more than 5 letters</p>
  </div>
</template>
```
::

### Pattern

Restrict the type of characters that can be entered into the textarea.

You don't need to use `/` at the beginning and end of the pattern as the RegExp is being created internally with the `new RegExp()` constructor.

::prose-show-case
:docs-textarea-pattern

#code
```vue [DocsTextareaPattern.vue]
<template>
  <div class="mx-auto flex max-w-xs flex-col gap-3">
    <UiTextarea pattern="^[a-z\s]" placeholder="Say something" />
    <p class="text-muted-foreground text-sm">Only lower case letters</p>
  </div>
</template>
```
::


# Timeline

## Credits

Thanks to the team at [Origin UI](https://originui.com/timeline){rel="&#x22;nofollow&#x22;"} for creating this component ❤️. I just made a vue version of it.

## Source code

Click :source-code-link{component="Timeline"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add timeline
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add timeline
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add timeline
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add timeline
```
::

## Usage

### Basic

::prose-show-case
:docs-timeline

#code
```vue [DocsTimeline.vue]
<template>
  <div class="flex justify-center">
    <UiTimeline :model-value="3">
      <UiTimelineItem v-for="item in items" :key="item.id" :step="item.id">
        <UiTimelineHeader>
          <UiTimelineSeparator />
          <UiTimelineTitle class="-mt-0.5">{{ item.title }}</UiTimelineTitle>
          <UiTimelineIndicator />
        </UiTimelineHeader>
      </UiTimelineItem>
    </UiTimeline>
  </div>
</template>

<script lang="ts" setup>
  const items = [
    {
      id: 1,
      date: "Mar 15, 2024",
      title: "Project Kickoff",
      description:
        "Initial team meeting and project scope definition. Established key milestones and resource allocation.",
    },
    {
      id: 2,
      date: "Mar 22, 2024",
      title: "Design Phase",
      description:
        "Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.",
    },
    {
      id: 3,
      date: "Apr 5, 2024",
      title: "Development Sprint",
      description: "Backend API implementation and frontend component development in progress.",
    },
    {
      id: 4,
      date: "Apr 19, 2024",
      title: "Testing & Deployment",
      description:
        "Quality assurance testing, performance optimization, and production deployment preparation.",
    },
  ];
</script>
```
::

### Date Left

::prose-show-case
:docs-timeline-date-left

#code
```vue [DocsTimelineDateLeft.vue]
<template>
  <div>
    <UiTimeline :model-value="3">
      <UiTimelineItem
        v-for="item in items"
        :key="item.id"
        :step="item.id"
        class="group-data-[orientation=vertical]/timeline:sm:ms-32"
      >
        <UiTimelineHeader>
          <UiTimelineSeparator />
          <UiTimelineDate
            class="group-data-[orientation=vertical]/timeline:sm:absolute group-data-[orientation=vertical]/timeline:sm:-left-32 group-data-[orientation=vertical]/timeline:sm:w-20 group-data-[orientation=vertical]/timeline:sm:text-right"
          >
            {{ item.date }}
          </UiTimelineDate>
          <UiTimelineTitle class="sm:-mt-0.5">{{ item.title }}</UiTimelineTitle>
          <UiTimelineIndicator />
        </UiTimelineHeader>
        <UiTimelineContent>{{ item.description }}</UiTimelineContent>
      </UiTimelineItem>
    </UiTimeline>
  </div>
</template>

<script lang="ts" setup>
  const items = [
    {
      id: 1,
      date: "Mar 15, 2024",
      title: "Project Kickoff",
      description:
        "Initial team meeting and project scope definition. Established key milestones and resource allocation.",
    },
    {
      id: 2,
      date: "Mar 22, 2024",
      title: "Design Phase",
      description:
        "Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.",
    },
    {
      id: 3,
      date: "Apr 5, 2024",
      title: "Development Sprint",
      description: "Backend API implementation and frontend component development in progress.",
    },
    {
      id: 4,
      date: "Apr 19, 2024",
      title: "Testing & Deployment",
      description:
        "Quality assurance testing, performance optimization, and production deployment preparation.",
    },
  ];
</script>
```
::

### Date Top

::prose-show-case
:docs-timeline-date-top

#code
```vue [DocsTimelineDateTop.vue]
<template>
  <UiTimeline :model-value="3">
    <UiTimelineItem v-for="item in items" :key="item.id" :step="item.id">
      <UiTimelineHeader>
        <UiTimelineSeparator />
        <UiTimelineDate>{{ item.date }}</UiTimelineDate>
        <UiTimelineTitle>{{ item.title }}</UiTimelineTitle>
        <UiTimelineIndicator />
      </UiTimelineHeader>
      <UiTimelineContent>{{ item.description }}</UiTimelineContent>
    </UiTimelineItem>
  </UiTimeline>
</template>

<script lang="ts" setup>
  const items = [
    {
      id: 1,
      date: "Mar 15, 2024",
      title: "Project Kickoff",
      description:
        "Initial team meeting and project scope definition. Established key milestones and resource allocation.",
    },
    {
      id: 2,
      date: "Mar 22, 2024",
      title: "Design Phase",
      description:
        "Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.",
    },
    {
      id: 3,
      date: "Apr 5, 2024",
      title: "Development Sprint",
      description: "Backend API implementation and frontend component development in progress.",
    },
    {
      id: 4,
      date: "Apr 19, 2024",
      title: "Testing & Deployment",
      description:
        "Quality assurance testing, performance optimization, and production deployment preparation.",
    },
  ];
</script>
```
::

### Time Bottom

::prose-show-case
:docs-timeline-time-bottom

#code
```vue [DocsTimelineTimeBottom.vue]
<template>
  <UiTimeline :model-value="2">
    <UiTimelineItem v-for="item in items" :key="item.id" :step="item.id">
      <UiTimelineHeader>
        <UiTimelineSeparator />
        <UiTimelineTitle class="-mt-0.5">{{ item.title }}</UiTimelineTitle>
        <UiTimelineIndicator />
      </UiTimelineHeader>
      <UiTimelineContent>
        {{ item.description }}
        <UiTimelineDate v-if="item.date" class="mt-2 mb-0">
          {{ item.date }}
        </UiTimelineDate>
      </UiTimelineContent>
    </UiTimelineItem>
  </UiTimeline>
</template>

<script lang="ts" setup>
  const items = [
    {
      id: 1,
      date: "15 minutes ago",
      title: "Pull Request Submitted",
      description:
        "Submitted PR #342 with new feature implementation. Waiting for code review from team leads.",
    },
    {
      id: 2,
      date: "10 minutes ago",
      title: "CI Pipeline Started",
      description:
        "Automated tests and build process initiated. Running unit tests and code quality checks.",
    },
    {
      id: 3,
      date: "5 minutes ago",
      title: "Code Review Feedback",
      description:
        "Received comments on PR. Minor adjustments needed in error handling and documentation.",
    },
    {
      id: 4,
      title: "Changes Pushed",
      description:
        "Implemented requested changes and pushed updates to feature branch. Awaiting final approval.",
    },
  ];
</script>
```
::

### Check Icon

::prose-show-case
:docs-timeline-check-icon

#code
```vue [DocsTimelineCheckIcon.vue]
<template>
  <UiTimeline :model-value="2">
    <UiTimelineItem
      v-for="item in items"
      :key="item.id"
      :step="item.id"
      class="group-data-[orientation=vertical]/timeline:ms-10"
    >
      <UiTimelineHeader>
        <UiTimelineSeparator
          class="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5"
        />
        <UiTimelineDate>{{ item.date }}</UiTimelineDate>
        <UiTimelineTitle>{{ item.title }}</UiTimelineTitle>
        <UiTimelineIndicator
          class="group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 items-center justify-center group-data-completed/timeline-item:border-none group-data-[orientation=vertical]/timeline:-left-7"
        >
          <Icon
            name="lucide:check"
            :size="16"
            class="group-not-data-completed/timeline-item:hidden"
          />
        </UiTimelineIndicator>
      </UiTimelineHeader>
      <UiTimelineContent>{{ item.description }}</UiTimelineContent>
    </UiTimelineItem>
  </UiTimeline>
</template>

<script lang="ts" setup>
  const items = [
    {
      id: 1,
      date: "Mar 15, 2024",
      title: "Project Kickoff",
      description:
        "Initial team meeting and project scope definition. Established key milestones and resource allocation.",
    },
    {
      id: 2,
      date: "Mar 22, 2024",
      title: "Design Phase",
      description:
        "Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.",
    },
    {
      id: 3,
      date: "Apr 5, 2024",
      title: "Development Sprint",
      description: "Backend API implementation and frontend component development in progress.",
    },
    {
      id: 4,
      date: "Apr 19, 2024",
      title: "Testing & Deployment",
      description:
        "Quality assurance testing, performance optimization, and production deployment preparation.",
    },
  ];
</script>
```
::

### Git

::prose-show-case
:docs-timeline-git

#code
```vue [DocsTimelineGit.vue]
<template>
  <UiTimeline :model-value="3">
    <UiTimelineItem
      v-for="item in items"
      :key="item.id"
      :step="item.id"
      class="group-data-[orientation=vertical]/timeline:ms-10"
    >
      <UiTimelineHeader>
        <UiTimelineSeparator
          class="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5"
        />
        <UiTimelineTitle class="mt-0.5">{{ item.title }}</UiTimelineTitle>
        <UiTimelineIndicator
          class="bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 items-center justify-center border-none group-data-[orientation=vertical]/timeline:-left-7"
        >
          <Icon :name="item.icon" :size="14" />
        </UiTimelineIndicator>
      </UiTimelineHeader>
      <UiTimelineContent>
        {{ item.description }}
        <UiTimelineDate v-if="item.date" class="mt-2 mb-0">
          {{ item.date }}
        </UiTimelineDate>
      </UiTimelineContent>
    </UiTimelineItem>
  </UiTimeline>
</template>

<script lang="ts" setup>
  const items = [
    {
      id: 1,
      date: "15 minutes ago",
      title: "Forked Repository",
      description: "Forked the repository to create a new branch for development.",
      icon: "lucide:git-fork",
    },
    {
      id: 2,
      date: "10 minutes ago",
      title: "Pull Request Submitted",
      description:
        "Submitted PR #342 with new feature implementation. Waiting for code review from team leads.",
      icon: "lucide:git-pull-request",
    },
    {
      id: 3,
      date: "5 minutes ago",
      title: "Comparing Branches",
      description:
        "Received comments on PR. Minor adjustments needed in error handling and documentation.",
      icon: "lucide:git-compare",
    },
    {
      id: 4,
      title: "Merged Branch",
      description: "Merged the feature branch into the main branch. Ready for deployment.",
      icon: "lucide:git-merge",
    },
  ];
</script>
```
::

### Card Content

::prose-show-case
:docs-timeline-card-content

#code
```vue [DocsTimelineCardContent.vue]
<template>
  <UiTimeline>
    <UiTimelineItem
      v-for="item in items"
      :key="item.id"
      :step="item.id"
      class="group-data-[orientation=vertical]/timeline:ms-10 group-data-[orientation=vertical]/timeline:not-last:pb-8"
    >
      <UiTimelineHeader>
        <UiTimelineSeparator
          class="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5"
        />
        <UiTimelineTitle class="mt-0.5">
          {{ item.title }}
          <span class="text-muted-foreground text-sm font-normal">
            {{ item.action }}
          </span>
        </UiTimelineTitle>
        <UiTimelineIndicator
          class="bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 items-center justify-center border-none group-data-[orientation=vertical]/timeline:-left-7"
        >
          <img :src="item.image" :alt="item.title" class="size-6 rounded-full" />
        </UiTimelineIndicator>
      </UiTimelineHeader>
      <UiTimelineContent class="text-foreground mt-2 rounded-lg border px-4 py-3">
        {{ item.description }}
        <UiTimelineDate class="mt-1 mb-0">{{ item.date }}</UiTimelineDate>
      </UiTimelineContent>
    </UiTimelineItem>
  </UiTimeline>
</template>

<script lang="ts" setup>
  const items = [
    {
      id: 1,
      date: "15 minutes ago",
      title: "Hannah Kandell",
      action: "opened a new issue",
      description:
        "I'm having trouble with the new component library. It's not rendering properly.",
      image: "https://randomuser.me/api/portraits/med/women/75.jpg",
    },
    {
      id: 2,
      date: "10 minutes ago",
      title: "Chris Tompson",
      action: "commented on",
      description:
        "Hey Hannah, I'm having trouble with the new component library. It's not rendering properly.",
      image: "https://randomuser.me/api/portraits/med/men/75.jpg",
    },
    {
      id: 3,
      date: "5 minutes ago",
      title: "Emma Davis",
      action: "assigned you to",
      description: "The new component library is not rendering properly. Can you take a look?",
      image: "https://randomuser.me/api/portraits/med/women/15.jpg",
    },
    {
      id: 4,
      date: "2 minutes ago",
      title: "Alex Morgan",
      action: "closed the issue",
      description: "The issue has been fixed. Please review the changes.",
      image: "https://randomuser.me/api/portraits/med/men/50.jpg",
    },
  ];
</script>
```
::

### Left & Right

::prose-show-case
:docs-timeline-left-right

#code
```vue [DocsTimelineLeftRight.vue]
<template>
  <UiTimeline :model-value="4">
    <UiTimelineItem
      v-for="item in items"
      :key="item.id"
      :step="item.id"
      class="w-[calc(50%-1.5rem)] odd:ms-auto even:text-right even:group-data-[orientation=vertical]/timeline:ms-0 even:group-data-[orientation=vertical]/timeline:me-8 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:-right-6 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:left-auto even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:translate-x-1/2 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:-right-6 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:left-auto even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:translate-x-1/2"
    >
      <UiTimelineHeader>
        <UiTimelineSeparator />
        <UiTimelineDate>{{ item.date }}</UiTimelineDate>
        <UiTimelineTitle>{{ item.title }}</UiTimelineTitle>
        <UiTimelineIndicator />
      </UiTimelineHeader>
    </UiTimelineItem>
  </UiTimeline>
</template>

<script lang="ts" setup>
  const items = [
    { id: 1, date: "Mar 15, 2024", title: "Project Kickoff" },
    { id: 2, date: "Mar 22, 2024", title: "Design Phase" },
    { id: 3, date: "Apr 5, 2024", title: "Development Sprint" },
    { id: 4, date: "Apr 19, 2024", title: "Testing & Deployment" },
    { id: 5, date: "May 3, 2024", title: "User Training" },
    { id: 6, date: "May 17, 2024", title: "Project Handover" },
  ];
</script>
```
::

### Card

::prose-show-case
:docs-timeline-card

#code
```vue [DocsTimelineCard.vue]
<template>
  <div class="mx-auto max-w-lg">
    <UiTimeline class="divide-y rounded-lg border">
      <UiTimelineItem v-for="item in items" :key="item.id" :step="item.id" class="!m-0 !px-4 !py-3">
        <UiTimelineContent class="text-foreground">
          {{ item.description }}
          <UiTimelineDate class="mt-1">
            {{ item.date }}
          </UiTimelineDate>
        </UiTimelineContent>
      </UiTimelineItem>
    </UiTimeline>
  </div>
</template>

<script lang="ts" setup>
  import dayjs from "dayjs";

  const format = "MMMM DD YYYY [at] hh:mm A";
  const items = [
    {
      id: 1,
      date: dayjs().format(format),
      description: "System backup completed successfully.",
    },
    {
      id: 2,
      date: dayjs().subtract(11, "minutes").format(format),
      description: "User authentication service restarted due to configuration update.",
    },
    {
      id: 3,
      date: dayjs().subtract(23, "minutes").format(format),
      description: "Warning: High CPU usage detected on worker node-03.",
    },
    {
      id: 4,
      date: dayjs().subtract(44, "minutes").format(format),
      description: "New deployment initiated for api-service v2.1.0.",
    },
  ];
</script>
```
::

### Activity

::prose-show-case
:docs-timeline-activity

#code
```vue [DocsTimelineActivity.vue]
<template>
  <div class="flex justify-center">
    <div class="space-y-3">
      <div class="text-muted-foreground text-xs font-medium">Activity</div>
      <UiTimeline>
        <UiTimelineItem
          v-for="item in items"
          :key="item.id"
          :step="item.id"
          class="!m-0 flex-row items-center gap-3 !py-2.5"
        >
          <Icon :name="getActionIcon(item.action)" class="text-muted-foreground/80 size-4" />
          <UiAvatar :src="item.image" :alt="item.user" class="size-6" />
          <UiTimelineContent class="text-foreground flex items-center gap-2">
            <a class="font-medium hover:underline" href="#">
              {{ item.user }}
            </a>
            <span class="font-normal">
              {{ getActionText(item.action) }}
              <a class="hover:underline" href="#">
                {{ useTimeAgo(item.date).value }}
              </a>
            </span>
          </UiTimelineContent>
        </UiTimelineItem>
      </UiTimeline>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const items: { id: number; user: string; image: string; action: ActionType; date: Date }[] = [
    {
      id: 1,
      user: "Matt",
      image: "https://randomuser.me/api/portraits/med/men/75.jpg",
      action: "post",
      date: new Date(Date.now() - 59000), // 59 seconds ago
    },
    {
      id: 2,
      user: "Matt",
      image: "https://randomuser.me/api/portraits/med/men/75.jpg",
      action: "reply",
      date: new Date(Date.now() - 180000), // 3 minutes ago
    },
    {
      id: 3,
      user: "Matt",
      image: "https://randomuser.me/api/portraits/med/men/75.jpg",
      action: "edit",
      date: new Date(Date.now() - 300000), // 5 minutes ago
    },
    {
      id: 4,
      user: "Matt",
      image: "https://randomuser.me/api/portraits/med/men/75.jpg",
      action: "create",
      date: new Date(Date.now() - 600000), // 10 minutes ago
    },
  ];

  type ActionType = "post" | "reply" | "edit" | "create";

  function getActionIcon(action: ActionType): string {
    const icons: Record<ActionType, string> = {
      post: "lucide:book-open",
      reply: "lucide:message-circle",
      edit: "lucide:pencil",
      create: "lucide:plus",
    };
    return icons[action];
  }

  function getActionText(action: ActionType): string {
    const texts: Record<ActionType, string> = {
      post: "wrote a new post",
      reply: "replied to a comment",
      edit: "edited a post",
      create: "created a new project",
    };
    return texts[action];
  }
</script>
```
::

### Horizontal

::prose-show-case
:docs-timeline-horizontal

#code
```vue [DocsTimelineHorizontal.vue]
<template>
  <div class="overflow-x-auto">
    <UiTimeline :model-value="3" orientation="horizontal">
      <UiTimelineItem v-for="item in items" :key="item.id" :step="item.id">
        <UiTimelineHeader>
          <UiTimelineSeparator />
          <UiTimelineDate>{{ item.date }}</UiTimelineDate>
          <UiTimelineTitle>{{ item.title }}</UiTimelineTitle>
          <UiTimelineIndicator />
        </UiTimelineHeader>
        <UiTimelineContent>{{ item.description }}</UiTimelineContent>
      </UiTimelineItem>
    </UiTimeline>
  </div>
</template>

<script lang="ts" setup>
  const items = [
    {
      id: 1,
      date: "Mar 15, 2024",
      title: "Project Kickoff",
      description: "Initial team meeting.",
    },
    {
      id: 2,
      date: "Mar 22, 2024",
      title: "Design Phase",
      description: "Completed wireframes.",
    },
    {
      id: 3,
      date: "Apr 5, 2024",
      title: "Development Sprint",
      description: "Backend development.",
    },
    {
      id: 4,
      date: "Apr 19, 2024",
      title: "Testing & Deployment",
      description: "Performance optimization.",
    },
  ];
</script>
```
::

### Horizontal - Date Top

::prose-show-case
:docs-timeline-horizontal-date-top

#code
```vue [DocsTimelineHorizontalDateTop.vue]
<template>
  <div class="overflow-x-auto">
    <UiTimeline :model-value="3" orientation="horizontal">
      <UiTimelineItem
        v-for="item in items"
        :key="item.id"
        :step="item.id"
        class="group-data-[orientation=horizontal]/timeline:mt-0"
      >
        <UiTimelineHeader>
          <UiTimelineSeparator class="group-data-[orientation=horizontal]/timeline:top-8" />
          <UiTimelineDate class="mb-10">{{ item.date }}</UiTimelineDate>
          <UiTimelineTitle>{{ item.title }}</UiTimelineTitle>
          <UiTimelineIndicator class="group-data-[orientation=horizontal]/timeline:top-8" />
        </UiTimelineHeader>
        <UiTimelineContent>{{ item.description }}</UiTimelineContent>
      </UiTimelineItem>
    </UiTimeline>
  </div>
</template>

<script lang="ts" setup>
  const items = [
    {
      id: 1,
      date: "Mar 15, 2024",
      title: "Project Kickoff",
      description: "Initial team meeting.",
    },
    {
      id: 2,
      date: "Mar 22, 2024",
      title: "Design Phase",
      description: "Completed wireframes.",
    },
    {
      id: 3,
      date: "Apr 5, 2024",
      title: "Development Sprint",
      description: "Backend development.",
    },
    {
      id: 4,
      date: "Apr 19, 2024",
      title: "Testing & Deployment",
      description: "Performance optimization.",
    },
  ];
</script>
```
::


# Toggle

## Source code

Click :source-code-link{component="Toggle.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add toggle
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add toggle
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add toggle
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add toggle
```
::

## Usage

### Basic example

::prose-show-case
:docs-toggle

#code
```vue [DocsToggle.vue]
<template>
  <div class="flex w-full items-center justify-center">
    <UiToggle aria-label="Toggle italic">
      <Icon name="lucide:bold" class="size-4" />
    </UiToggle>
  </div>
</template>
```
::


# Toggle Group

## Source code

Click :source-code-link{component="ToggleGroup"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add toggle-group
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add toggle-group
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add toggle-group
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add toggle-group
```
::

## Usage

### Basic

::prose-show-case
:docs-toggle-group-basic

#code
```vue [DocsToggleGroupBasic.vue]
<template>
  <div>
    <UiToggleGroup>
      <UiToggleGroupItem value="bold" icon="lucide:bold" />
      <UiToggleGroupItem value="italic" icon="lucide:italic" />
      <UiToggleGroupItem value="underline" icon="lucide:underline" />
    </UiToggleGroup>
  </div>
</template>
```
::

### Outline

::prose-show-case
:docs-toggle-group-outline

#code
```vue [DocsToggleGroupOutline.vue]
<template>
  <div>
    <UiToggleGroup>
      <UiToggleGroupItem variant="outline" value="bold" icon="lucide:bold" />
      <UiToggleGroupItem variant="outline" value="italic" icon="lucide:italic" />
      <UiToggleGroupItem variant="outline" value="underline" icon="lucide:underline" />
    </UiToggleGroup>
  </div>
</template>
```
::

### Multiple

::prose-show-case
:docs-toggle-group-multiple

#code
```vue [DocsToggleGroupMultiple.vue]
<template>
  <div>
    <UiToggleGroup type="multiple">
      <UiToggleGroupItem value="bold" icon="lucide:bold" />
      <UiToggleGroupItem value="italic" icon="lucide:italic" />
      <UiToggleGroupItem value="underline" icon="lucide:underline" />
    </UiToggleGroup>
  </div>
</template>
```
::

### Sizes

::prose-show-case
:docs-toggle-group-size

#code
```vue [DocsToggleGroupSize.vue]
<template>
  <div class="flex flex-col gap-8">
    <UiToggleGroup type="multiple">
      <UiToggleGroupItem size="sm" value="bold" icon="lucide:bold" />
      <UiToggleGroupItem size="sm" value="italic" icon="lucide:italic" />
      <UiToggleGroupItem size="sm" value="underline" icon="lucide:underline" />
    </UiToggleGroup>
    <UiToggleGroup type="multiple">
      <UiToggleGroupItem size="lg" value="bold" icon="lucide:bold" />
      <UiToggleGroupItem size="lg" value="italic" icon="lucide:italic" />
      <UiToggleGroupItem size="lg" value="underline" icon="lucide:underline" />
    </UiToggleGroup>
  </div>
</template>
```
::


# Tooltip

## Source code

Click :source-code-link{component="Tooltip"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add tooltip
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add tooltip
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add tooltip
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add tooltip
```
::

## Usage

### Basic example

::prose-show-case
:docs-tooltip

#code
```vue [DocsTooltip.vue]
<template>
  <div class="flex w-full justify-center">
    <UiTooltip disable-closing-trigger>
      <template #trigger>
        <UiTooltipTrigger as-child>
          <UiButton variant="outline">Hover me</UiButton>
        </UiTooltipTrigger>
      </template>
      <template #content>
        <UiTooltipContent>
          <p>Add to library</p>
        </UiTooltipContent>
      </template>
    </UiTooltip>
  </div>
</template>
```
::

### Origin UI

::prose-show-case
:docs-tooltip-origin

#code
```vue [DocsTooltipOrigin.vue]
<template>
  <div class="@container">
    <div
      class="grid grid-cols-1 *:flex *:items-center *:justify-center *:p-10 @[400px]:grid-cols-2"
    >
      <div>
        <UiTooltip>
          <UiTooltipTrigger as-child>
            <UiButton variant="outline" size="sm">Tiny</UiButton>
          </UiTooltipTrigger>
          <UiTooltipContent class="px-2 py-1 text-xs"> This is a simple tooltip </UiTooltipContent>
        </UiTooltip>
      </div>

      <div>
        <UiTooltip>
          <UiTooltipTrigger as-child>
            <UiButton variant="outline" size="sm">Dark</UiButton>
          </UiTooltipTrigger>
          <UiTooltipContent class="dark px-2 py-1 text-xs">
            This tooltip will be always dark
          </UiTooltipContent>
        </UiTooltip>
      </div>

      <div>
        <UiTooltip>
          <UiTooltipTrigger as-child>
            <UiButton variant="outline" size="sm">W/ arrow</UiButton>
          </UiTooltipTrigger>
          <UiTooltipContent class="dark px-2 py-1 text-xs" :show-arrow="true">
            This tooltip has an arrow
          </UiTooltipContent>
        </UiTooltip>
      </div>

      <div>
        <UiTooltip>
          <UiTooltipTrigger as-child>
            <UiButton variant="outline" size="sm">W/ title</UiButton>
          </UiTooltipTrigger>
          <UiTooltipContent class="py-3">
            <div class="space-y-1">
              <p class="text-[13px] font-medium">Tooltip with title</p>
              <p class="text-muted-foreground text-xs">
                Tooltips are made to be highly customizable, with features like dynamic placement,
                rich content, and a robust API. You can even use them as a full-featured dropdown
                menu by setting the
                <code>trigger</code>
                prop to
                <code>click</code>
                .
              </p>
            </div>
          </UiTooltipContent>
        </UiTooltip>
      </div>

      <div>
        <UiTooltip>
          <UiTooltipTrigger as-child>
            <UiButton variant="outline" size="sm">W/ icon</UiButton>
          </UiTooltipTrigger>
          <UiTooltipContent class="dark py-3">
            <div class="flex gap-3">
              <Icon
                name="lucide:globe"
                class="mt-0.5 size-4 shrink-0 opacity-60"
                aria-hidden="true"
              />
              <div class="space-y-1">
                <p class="text-[13px] font-medium">Tooltip with title and icon</p>
                <p class="text-muted-foreground text-xs">
                  Tooltips are made to be highly customizable, with features like dynamic placement,
                  rich content, and a robust API.
                </p>
              </div>
            </div>
          </UiTooltipContent>
        </UiTooltip>
      </div>

      <div>
        <UiTooltip>
          <UiTooltipTrigger as-child>
            <UiButton variant="outline" size="sm">W/ image</UiButton>
          </UiTooltipTrigger>
          <UiTooltipContent class="py-3">
            <div class="space-y-2">
              <img
                class="w-full rounded"
                src="https://images.unsplash.com/photo-1515865404355-ddb5b0910878?q=50&w=400&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                width="382"
                height="216"
                alt="I should have bought you flowers 😘"
              />
              <div class="space-y-1">
                <p class="text-[13px] font-medium">Tooltip with title and icon</p>
                <p class="text-muted-foreground text-xs">
                  Tooltips are made to be highly customizable, with features like dynamic placement,
                  rich content, and a robust API.
                </p>
              </div>
            </div>
          </UiTooltipContent>
        </UiTooltip>
      </div>

      <div>
        <UiTooltip>
          <UiTooltipTrigger as-child>
            <UiButton variant="outline" size="sm">Stats</UiButton>
          </UiTooltipTrigger>
          <UiTooltipContent class="py-3">
            <ul class="grid gap-3 text-xs">
              <li class="grid gap-0.5">
                <span class="text-muted-foreground">Status</span>
                <span class="font-medium">Completed</span>
              </li>
              <li class="grid gap-0.5">
                <span class="text-muted-foreground">Code Coverage</span>
                <span class="font-medium">94.3%</span>
              </li>
              <li class="grid gap-0.5">
                <span class="text-muted-foreground">Last Deploy</span>
                <span class="font-medium">Today at 15:42</span>
              </li>
              <li class="grid gap-0.5">
                <span class="text-muted-foreground">Performance Score</span>
                <span class="font-medium">98/100</span>
              </li>
            </ul>
          </UiTooltipContent>
        </UiTooltip>
      </div>

      <div>
        <UiTooltip>
          <UiTooltipTrigger as-child>
            <UiButton variant="outline" size="sm">Chart</UiButton>
          </UiTooltipTrigger>
          <UiTooltipContent class="py-2">
            <div class="space-y-2">
              <div class="text-[13px] font-medium">Tuesday, Aug 13</div>
              <div class="flex items-center gap-2 text-xs">
                <svg
                  width="8"
                  height="8"
                  fill="currentColor"
                  viewBox="0 0 8 8"
                  xmlns="http://www.w3.org/2000/svg"
                  class="shrink-0 text-indigo-500"
                  aria-hidden="true"
                >
                  <circle cx="4" cy="4" r="4" />
                </svg>
                <span class="flex grow gap-2">
                  Sales
                  <span class="ml-auto">$40</span>
                </span>
              </div>
              <div class="flex items-center gap-2 text-xs">
                <svg
                  width="8"
                  height="8"
                  fill="currentColor"
                  viewBox="0 0 8 8"
                  xmlns="http://www.w3.org/2000/svg"
                  class="shrink-0 text-purple-500"
                  aria-hidden="true"
                >
                  <circle cx="4" cy="4" r="4" />
                </svg>
                <span class="flex grow gap-2">
                  Revenue
                  <span class="ml-auto">$74</span>
                </span>
              </div>
              <div class="flex items-center gap-2 text-xs">
                <svg
                  width="8"
                  height="8"
                  fill="currentColor"
                  viewBox="0 0 8 8"
                  xmlns="http://www.w3.org/2000/svg"
                  class="shrink-0 text-rose-500"
                  aria-hidden="true"
                >
                  <circle cx="4" cy="4" r="4" />
                </svg>
                <span class="flex grow gap-2">
                  Costs
                  <span class="ml-auto">$410</span>
                </span>
              </div>
            </div>
          </UiTooltipContent>
        </UiTooltip>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup></script>
```
::


# Tree

## Source code

Click :source-code-link{component="Tree"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add tree
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add tree
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add tree
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add tree
```
::

## Usage

### Basic

The `Tree` component can be styled to look like anything you want. For that reason, I decided to not style the tree component at all. Instead, I provide a basic example of how to use the tree component.

::prose-show-case
:docs-tree

#code
```vue [DocsTree.vue]
<template>
  <div class="flex justify-center">
    <UiScrollArea class="bg-background max-h-[500px] w-[250px] rounded-md border">
      <UiTree
        v-slot="{ flattenItems }"
        :default-expanded="['app', 'server']"
        :items="structure"
        :get-key="(i) => i.title"
        class="p-2 pr-3"
      >
        <p class="mb-3 text-sm font-semibold">Nuxt 4 directory structure</p>
        <template v-for="item in flattenItems" :key="item._id">
          <TreeItem
            v-slot="{ isExpanded }"
            v-bind="item.bind"
            :style="{ 'padding-left': `${item.level - 0.5}rem` }"
            class="focus-visible:ring-border flex cursor-pointer items-center gap-2 rounded px-2 py-1 text-sm font-medium focus-visible:ring-2 focus-visible:outline-none"
          >
            <template v-if="item.hasChildren">
              <Icon v-if="isExpanded" :name="item.value.openIcon" class="size-3.5" />
              <Icon v-else :name="item.value.icon" class="size-3.5" />
            </template>
            <Icon v-else :name="item.value.icon || 'lucide:file'" class="size-3.5" />
            <div class="">{{ item.value.title }}</div>
          </TreeItem>
        </template>
      </UiTree>
    </UiScrollArea>
  </div>
</template>

<script lang="ts" setup>
  const structure = [
    {
      title: ".output",
      openIcon: "vscode-icons:default-folder-opened",
      icon: "vscode-icons:default-folder",
      children: [],
    },
    {
      title: ".nuxt",
      openIcon: "vscode-icons:folder-type-nuxt-opened",
      icon: "vscode-icons:folder-type-nuxt",
      children: [],
    },
    {
      title: "app",
      openIcon: "vscode-icons:default-folder-opened",
      icon: "vscode-icons:default-folder",
      children: [
        {
          title: "assets",
          openIcon: "vscode-icons:default-folder-opened",
          icon: "vscode-icons:default-folder",
          children: [
            {
              title: "css",
              openIcon: "vscode-icons:default-folder-opened",
              icon: "vscode-icons:default-folder",
              children: [
                {
                  title: "tailwind.css",
                  icon: "vscode-icons:file-type-css",
                },
              ],
            },
          ],
        },
        {
          title: "components",
          openIcon: "vscode-icons:default-folder-opened",
          icon: "vscode-icons:default-folder",
          children: [],
        },
        {
          title: "composables",
          openIcon: "vscode-icons:default-folder-opened",
          icon: "vscode-icons:default-folder",
          children: [
            {
              title: "useUser.ts",
              icon: "vscode-icons:file-type-typescript-official",
            },
          ],
        },
        {
          title: "layouts",
          openIcon: "vscode-icons:default-folder-opened",
          icon: "vscode-icons:default-folder",
          children: [
            {
              title: "default.vue",
              icon: "vscode-icons:file-type-vue",
            },
          ],
        },
        {
          title: "middleware",
          openIcon: "vscode-icons:default-folder-opened",
          icon: "vscode-icons:default-folder",
          children: [
            {
              title: "auth.ts",
              icon: "vscode-icons:file-type-typescript-official",
            },
          ],
        },
        {
          title: "pages",
          openIcon: "vscode-icons:default-folder-opened",
          icon: "vscode-icons:default-folder",
          children: [
            {
              title: "auth",
              openIcon: "vscode-icons:default-folder-opened",
              icon: "vscode-icons:default-folder",
              children: [
                {
                  title: "login",
                  openIcon: "vscode-icons:default-folder-opened",
                  icon: "vscode-icons:default-folder",
                  children: [
                    {
                      title: "index.vue",
                      icon: "vscode-icons:file-type-vue",
                    },
                  ],
                },
              ],
            },
            {
              title: "index.vue",
              icon: "vscode-icons:file-type-vue",
            },
          ],
        },
        {
          title: "plugins",
          openIcon: "vscode-icons:default-folder-opened",
          icon: "vscode-icons:default-folder",
          children: [
            {
              title: "fetch-user.ts",
              icon: "vscode-icons:file-type-typescript-official",
            },
          ],
        },
        {
          title: "utils",
          openIcon: "vscode-icons:default-folder-opened",
          icon: "vscode-icons:default-folder",
          children: [
            {
              title: "validation.ts",
              icon: "vscode-icons:file-type-typescript-official",
            },
          ],
        },
        {
          title: "app.config.ts",
          icon: "vscode-icons:file-type-typescript-official",
        },
        {
          title: "app.vue",
          icon: "vscode-icons:file-type-vue",
        },
        {
          title: "router.options.ts",
          icon: "vscode-icons:file-type-typescript-official",
        },
      ],
    },
    {
      title: "layers",
      openIcon: "vscode-icons:folder-type-nuxt-opened",
      icon: "vscode-icons:folder-type-nuxt",
      children: [],
    },
    {
      title: "modules",
      openIcon: "vscode-icons:folder-type-nuxt-opened",
      icon: "vscode-icons:folder-type-nuxt",
      children: [],
    },
    {
      title: "node_modules",
      openIcon: "vscode-icons:default-folder-opened",
      icon: "vscode-icons:default-folder",
      children: [],
    },
    {
      title: "public",
      openIcon: "vscode-icons:default-folder-opened",
      icon: "vscode-icons:default-folder",
      children: [],
    },
    {
      title: "server",
      openIcon: "vscode-icons:default-folder-opened",
      icon: "vscode-icons:default-folder",
      children: [
        {
          title: "api",
          openIcon: "vscode-icons:folder-type-nuxt-opened",
          icon: "vscode-icons:folder-type-nuxt",
          children: [],
        },
        {
          title: "middleware",
          openIcon: "vscode-icons:folder-type-nuxt-opened",
          icon: "vscode-icons:folder-type-nuxt",
          children: [],
        },
        {
          title: "plugins",
          openIcon: "vscode-icons:folder-type-nuxt-opened",
          icon: "vscode-icons:folder-type-nuxt",
          children: [],
        },
        {
          title: "routes",
          openIcon: "vscode-icons:folder-type-nuxt-opened",
          icon: "vscode-icons:folder-type-nuxt",
          children: [],
        },
        {
          title: "utils",
          openIcon: "vscode-icons:folder-type-nuxt-opened",
          icon: "vscode-icons:folder-type-nuxt",
          children: [],
        },
      ],
    },
    {
      title: "nuxt.config.ts",
      icon: "vscode-icons:file-type-typescript-official",
    },
  ];
</script>
```
::

### Virtualizer

We can render a large number of items using the `Virtualizer` component.

Click on one of the items to see the details.

::prose-show-case
:docs-tree-virtualizer

#code
```vue [DocsTreeVirtualizer.vue]
<template>
  <div class="flex justify-center">
    <UiScrollArea class="bg-background max-h-[500px] w-[300px] rounded-md border">
      <UiTree multiple :items="data" :get-key="(i) => i.email" class="p-2 pr-3">
        <p class="mb-3 font-semibold">Contact List</p>
        <UiTreeVirtualizer v-slot="{ item }" :text-content="(o) => o.email">
          <TreeItem
            v-slot="{ isSelected }"
            v-bind="item.bind"
            :style="{ 'padding-left': item.level > 1 ? `${item.level * 8}px` : '0px' }"
            class="group focus-visible:ring-border rounded px-2 py-1 text-sm focus-visible:ring-1 focus-visible:outline-none"
          >
            <div
              class="line-clamp-1 flex w-full cursor-pointer items-center gap-2 px-2 select-none"
            >
              <UiAvatar class="size-6" :src="item.value.picture.thumbnail" />
              {{ item.value.name?.first }} {{ item.value.name?.last }}
            </div>
            <TransitionExpand>
              <div
                v-if="isSelected"
                class="mt-1 ml-[18px] flex flex-col gap-1 border-l p-2 pl-2 text-xs"
              >
                <p class="flex items-center gap-3">
                  <span>Email</span>
                  <span class="text-muted-foreground">{{ item.value.email }}</span>
                </p>
                <p class="flex items-center gap-3">
                  <span>Phone</span>
                  <span class="text-muted-foreground">{{ item.value.phone }}</span>
                </p>
              </div>
            </TransitionExpand>
          </TreeItem>
        </UiTreeVirtualizer>
      </UiTree>
    </UiScrollArea>
  </div>
</template>

<script lang="ts" setup>
  const { data } = await useAsyncData(
    "random-users",
    () =>
      $fetch<{ results: Array<any>; info: Record<string, any> }>(
        "https://randomuser.me/api/?results=100"
      ),
    {
      transform: (data) => data.results,
      default: () => [],
    }
  );
</script>
```
::

### Origin UI

::prose-show-case
:docs-tree-origin

#code
```vue [DocsTreeOrigin.vue]
<template>
  <div class="grid grid-cols-1 gap-10">
    <div class="mx-auto w-full max-w-xs">
      <UiTree
        v-slot="{ flattenItems }"
        :default-expanded="['Design System', 'Frontend', 'Engineering']"
        :items="items"
        :get-key="(v) => v.name"
        class="flex flex-col"
      >
        <template v-for="item in flattenItems" :key="item._id">
          <UiTreeItem
            v-slot="{ isExpanded, isSelected }"
            :data-folder="item.hasChildren == true || undefined"
            :data-level="item.level"
            v-bind="item.bind"
            :style="{ 'padding-left': `${item.level * 20}px` }"
            class="z-10 outline-hidden select-none not-last:pb-0.5 focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
          >
            <div
              :class="[isSelected ? 'bg-accent' : 'bg-background']"
              class="hover:bg-accent focus-visible:ring-ring/50 flex items-center gap-1 rounded-sm px-2 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-7 focus-visible:ring-[3px] [&_svg]:pointer-events-none [&_svg]:shrink-0"
            >
              <template v-if="item.hasChildren">
                <Icon
                  name="lucide:chevron-right"
                  class="text-muted-foreground size-3.5"
                  :class="[
                    isExpanded ? 'rotate-90' : '',
                    'transition-transform duration-200 ease-in-out',
                  ]"
                />
              </template>
              <span class="capitalize">{{ item.value.name }}</span>
            </div>
          </UiTreeItem>
        </template>
      </UiTree>
    </div>

    <div class="mx-auto w-full max-w-xs">
      <UiTree
        v-slot="{ flattenItems }"
        :default-expanded="['Design System', 'Frontend', 'Engineering']"
        :items="items"
        :get-key="(v) => v.name"
        class="flex flex-col"
      >
        <template v-for="item in flattenItems" :key="item._id">
          <UiTreeItem
            v-slot="{ isExpanded, isSelected }"
            :data-folder="item.hasChildren == true || undefined"
            :data-level="item.level"
            v-bind="item.bind"
            :style="{ 'padding-left': `${item.level * 20}px` }"
            class="z-10 outline-hidden select-none not-last:pb-0.5 focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
          >
            <div
              :class="[isSelected ? 'bg-accent' : 'bg-background']"
              class="hover:bg-accent focus-visible:ring-ring/50 flex items-center gap-1 rounded-sm px-2 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-7 focus-visible:ring-[3px] [&_svg]:pointer-events-none [&_svg]:shrink-0"
            >
              <template v-if="item.hasChildren">
                <Icon
                  name="lucide:chevron-right"
                  class="text-muted-foreground size-3.5"
                  :class="[
                    isExpanded ? 'rotate-90' : '',
                    'transition-transform duration-200 ease-in-out',
                  ]"
                />
              </template>
              <template v-if="item.hasChildren">
                <Icon v-if="isExpanded" class="text-muted-foreground" name="lucide:folder-open" />
                <Icon v-if="!isExpanded" class="text-muted-foreground" name="lucide:folder" />
              </template>
              <template v-else>
                <Icon class="text-muted-foreground" name="lucide:file" />
              </template>
              <span class="capitalize">{{ item.value.name }}</span>
            </div>
          </UiTreeItem>
        </template>
      </UiTree>
    </div>

    <div class="mx-auto w-full max-w-xs">
      <UiTree
        v-slot="{ flattenItems }"
        :default-expanded="['Design System', 'Frontend', 'Engineering']"
        :items="items"
        :get-key="(v) => v.name"
        class="flex flex-col"
      >
        <template v-for="item in flattenItems" :key="item._id">
          <UiTreeItem
            v-slot="{ isExpanded, isSelected }"
            :data-folder="item.hasChildren == true || undefined"
            :data-level="item.level"
            v-bind="item.bind"
            :style="{ 'padding-left': `${item.level * 20}px` }"
            class="z-10 outline-hidden select-none not-last:pb-0.5 focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
          >
            <div
              :class="[isSelected ? 'bg-accent' : 'bg-background']"
              class="hover:bg-accent focus-visible:ring-ring/50 flex items-center gap-1 rounded-sm px-2 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-7 focus-visible:ring-[3px] [&_svg]:pointer-events-none [&_svg]:shrink-0"
            >
              <template v-if="item.hasChildren">
                <Icon v-if="isExpanded" class="text-muted-foreground" name="lucide:folder-open" />
                <Icon v-if="!isExpanded" class="text-muted-foreground" name="lucide:folder" />
              </template>
              <template v-else>
                <Icon class="text-muted-foreground" name="lucide:file" />
              </template>
              <span class="capitalize">{{ item.value.name }}</span>

              <template v-if="item.hasChildren">
                <Icon
                  name="lucide:chevron-right"
                  class="text-muted-foreground ml-auto size-3.5"
                  :class="[
                    isExpanded ? 'rotate-90' : '',
                    'transition-transform duration-200 ease-in-out',
                  ]"
                />
              </template>
            </div>
          </UiTreeItem>
        </template>
      </UiTree>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const designId = useId();
  type Item = {
    id: string;
    name: string;
    children?: Item[];
  };
  const items: Item[] = [
    {
      id: useId(),
      name: "Engineering",
      children: [
        {
          id: useId(),
          name: "Frontend",
          children: [
            {
              id: designId,
              name: "Design System",
              children: [
                { id: useId(), name: "Components" },
                { id: useId(), name: "Tokens" },
                { id: useId(), name: "Guidelines" },
              ],
            },
            { id: useId(), name: "Web Platform" },
          ],
        },
        {
          id: useId(),
          name: "Backend",
          children: [
            { id: useId(), name: "APIs" },
            { id: useId(), name: "Infrastructure" },
          ],
        },
        { id: useId(), name: "Platform Team" },
      ],
    },
    {
      id: useId(),
      name: "Marketing",
      children: [
        { id: useId(), name: "Content" },
        { id: useId(), name: "SEO" },
      ],
    },
    {
      id: useId(),
      name: "Operations",
      children: [
        { id: useId(), name: "HR" },
        { id: useId(), name: "Finance" },
      ],
    },
  ];
</script>
```
::


# Border Beam

## Credits

Shout out to [Magic UI](https://magicui.design/docs/components/border-beam){rel="&#x22;nofollow&#x22;"} for the inspiration. I actually discovered this package while browsing their website.

## Source code

Click :source-code-link{component="BorderBeam.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add border-beam
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add border-beam
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add border-beam
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add border-beam
```
::

## Usage

### Basic

Just place the border beam component inside a div with relative positioning, width, and height. You will notice the beam automatically moves around the perimeter of it's container.

::prose-show-case
:docs-border-beam

#code
```vue [DocsBorderBeam.vue]
<template>
  <UiCard class="relative mx-auto w-[350px] overflow-hidden">
    <UiCardHeader>
      <UiCardTitle>Login</UiCardTitle>
      <UiCardDescription> Enter your credentials to access your account. </UiCardDescription>
    </UiCardHeader>
    <UiCardContent>
      <form>
        <div class="grid w-full items-center gap-4">
          <div class="flex flex-col space-y-1.5">
            <UiLabel for="email">Email</UiLabel>
            <UiInput id="email" type="email" placeholder="Enter your email" />
          </div>
          <div class="flex flex-col space-y-1.5">
            <UiLabel for="password">Password</UiLabel>
            <UiInput id="password" type="password" placeholder="Enter your password" />
          </div>
        </div>
      </form>
    </UiCardContent>
    <UiCardFooter class="flex justify-between">
      <UiButton variant="outline">Register</UiButton>
      <UiButton>Login</UiButton>
    </UiCardFooter>
    <UiBorderBeam :duration="8" :size="100" />
  </UiCard>
</template>
```
::

### 2 Border Beams

::prose-show-case
:docs-border-beam-two

#code
```vue [DocsBorderBeamTwo.vue]
<template>
  <UiCard class="relative mx-auto w-[350px] overflow-hidden border-0">
    <UiCardHeader>
      <UiCardTitle>Now Playing</UiCardTitle>
      <UiCardDescription>Stairway to Heaven - Led Zeppelin</UiCardDescription>
    </UiCardHeader>
    <UiCardContent>
      <div class="flex flex-col items-center gap-4">
        <div class="size-48 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 shadow-xs" />
        <UiProgress :model-value="26.5" class="h-1" />
        <div class="text-muted-foreground flex w-full justify-between text-sm">
          <span>2:45</span>
          <span>8:02</span>
        </div>
      </div>
    </UiCardContent>
    <UiCardFooter class="flex justify-center gap-4">
      <UiButton variant="outline" size="icon" class="rounded-full">
        <Icon name="lucide:skip-back" class="size-4" />
      </UiButton>
      <UiButton size="icon" class="rounded-full">
        <Icon name="lucide:play" class="size-4" />
      </UiButton>
      <UiButton variant="outline" size="icon" class="rounded-full">
        <Icon name="lucide:skip-forward" class="size-4" />
      </UiButton>
    </UiCardFooter>
    <UiBorderBeam :duration="6" :size="400" class="from-transparent via-red-500 to-transparent" />
    <UiBorderBeam
      :size="400"
      :delay="3"
      :duration="6"
      class="from-transparent via-blue-500 to-transparent"
    />
  </UiCard>
</template>
```
::

### Reverse

::prose-show-case
:docs-border-beam-reverse

#code
```vue [DocsBorderBeamReverse.vue]
<template>
  <UiCard class="border-border/30 relative mx-auto w-[350px] overflow-hidden">
    <UiCardHeader>
      <UiCardTitle>Login</UiCardTitle>
      <UiCardDescription> Enter your credentials to access your account. </UiCardDescription>
    </UiCardHeader>
    <UiCardContent>
      <form>
        <div class="grid w-full items-center gap-4">
          <div class="flex flex-col space-y-1.5">
            <UiLabel :for="emailId">Email</UiLabel>
            <UiInput :id="emailId" type="email" placeholder="Enter your email" />
          </div>
          <div class="flex flex-col space-y-1.5">
            <UiLabel :for="passwordId">Password</UiLabel>
            <UiInput :id="passwordId" type="password" placeholder="Enter your password" />
          </div>
        </div>
      </form>
    </UiCardContent>
    <UiCardFooter class="flex justify-between">
      <UiButton variant="outline">Register</UiButton>
      <UiButton>Login</UiButton>
    </UiCardFooter>
    <UiBorderBeam
      :duration="4"
      :size="300"
      reverse
      class="from-transparent via-green-500 to-transparent"
    />
  </UiCard>
</template>

<script lang="ts" setup>
  const emailId = useId();
  const passwordId = useId();
</script>
```
::

### Spring Animation

::prose-show-case
:docs-border-beam-spring

#code
```vue [DocsBorderBeamSpring.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButton class="relative overflow-hidden" size="lg" variant="outline">
      Buy Now
      <UiBorderBeam
        :size="40"
        :initial-offset="20"
        class="from-transparent via-yellow-500 to-transparent"
        :transition="{
          type: 'spring',
          stiffness: 60,
          damping: 20,
        }"
      />
    </UiButton>
  </div>
</template>
```
::


# Confetti

## Credits

Shout out to [Magic UI](https://magicui.design/docs/components/confetti){rel="&#x22;nofollow&#x22;"} for the inspiration. I actually discovered this package while browsing their website.

## Getting Started

::prose-steps
  :::prose-step
  ### Installation

  To get started, you will need to install the package. You can visit the [Canvas Confetti](https://github.com/catdad/canvas-confetti){rel=""nofollow""} page for more details... All the details 🙂.

    ::::prose-code-group{sync="_pm"}
    ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
    npm i canvas-confetti
    ```

    ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
    pnpm i canvas-confetti
    ```

    ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
    bun add canvas-confetti
    ```

    ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
    yarn add canvas-confetti
    ```
    ::::
  :::

  :::prose-step
  ### Create Composable

  Create a composable in your `composables` directory. You can name it `useConfetti.ts`.

  Add this to the file:

    ::::prose-code-snippet
    ---
    file: /composables/useConfetti.ts
    language: ts
    meta: noFormat
    title: useConfetti Composable
    ---
    ::::
  :::
::

## Usage

### Basic

We can just call the `useConfetti` method to trigger the confetti.

::prose-show-case
:docs-confetti

#code
```vue [DocsConfetti.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButton @click="triggerConfetti()">Trigger Basic Cannon</UiButton>
  </div>
</template>

<script lang="ts" setup>
  const triggerConfetti = () => {
    useConfetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
  };
</script>
```
::

### Random Direction

This is how you can shoot confetti off in a random direction.

::prose-show-case
:docs-confetti-random-direction

#code
```vue [DocsConfettiRandomDirection.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButton @click="triggerConfetti()">Random Direction</UiButton>
  </div>
</template>

<script lang="ts" setup>
  function randomInRange(min: number, max: number) {
    return Math.random() * (max - min) + min;
  }
  const triggerConfetti = () => {
    useConfetti({
      angle: randomInRange(55, 360),
      spread: randomInRange(50, 360),
      particleCount: randomInRange(50, 360),
      origin: { y: 0.6 },
    });
  };
</script>
```
::

### Fireworks

::prose-show-case
:docs-confetti-fireworks

#code
```vue [DocsConfettiFireworks.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButton @click="triggerConfetti()">Fireworks</UiButton>
  </div>
</template>

<script lang="ts" setup>
  function randomInRange(min: number, max: number) {
    return Math.random() * (max - min) + min;
  }
  const triggerConfetti = () => {
    const duration = 5 * 1000;
    const animationEnd = Date.now() + duration;
    const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
    const interval: NodeJS.Timeout = setInterval(function () {
      const timeLeft = animationEnd - Date.now();

      if (timeLeft <= 0) {
        return clearInterval(interval);
      }

      const particleCount = 50 * (timeLeft / duration);
      // since particles fall down, start a bit higher than random
      useConfetti({
        ...defaults,
        particleCount,
        origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
      });
      useConfetti({
        ...defaults,
        particleCount,
        origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
      });
    }, 250);
  };
</script>
```
::

### Stars

::prose-show-case
:docs-confetti-stars

#code
```vue [DocsConfettiStars.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButton @click="triggerConfetti()">Trigger Stars</UiButton>
  </div>
</template>

<script lang="ts" setup>
  const triggerConfetti = () => {
    const defaults = {
      spread: 360,
      ticks: 50,
      gravity: 0,
      decay: 0.94,
      startVelocity: 30,
      colors: ["FFE400", "FFBD00", "E89400", "FFCA6C", "FDFFB8"],
    };

    function shoot() {
      useConfetti({
        ...defaults,
        particleCount: 40,
        scalar: 1.2,
        shapes: ["star"],
      });

      useConfetti({
        ...defaults,
        particleCount: 10,
        scalar: 0.75,
        shapes: ["circle"],
      });
    }

    setTimeout(shoot, 0);
    setTimeout(shoot, 100);
    setTimeout(shoot, 200);
  };
</script>
```
::

### Snow

::prose-show-case
:docs-confetti-snow

#code
```vue [DocsConfettiSnow.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButton @click="triggerConfetti()">Trigger Snow</UiButton>
  </div>
</template>

<script lang="ts" setup>
  const triggerConfetti = () => {
    const duration = 5000;
    const animationEnd = Date.now() + duration;
    let skew = 1;

    function randomInRange(min: number, max: number) {
      return Math.random() * (max - min) + min;
    }

    function frame() {
      const timeLeft = animationEnd - Date.now();
      const ticks = Math.max(200, 500 * (timeLeft / duration));
      skew = Math.max(0.8, skew - 0.001);

      useConfetti({
        particleCount: 1,
        startVelocity: 0,
        ticks: ticks,
        origin: {
          x: Math.random(),
          // since particles fall down, skew start toward the top
          y: Math.random() * skew - 0.2,
        },
        colors: useColorMode().value === "dark" ? ["#ffffff"] : ["#000000"],
        shapes: ["circle"],
        gravity: randomInRange(0.4, 0.6),
        scalar: randomInRange(0.4, 1),
        drift: randomInRange(-0.4, 0.4),
      });

      if (timeLeft > 0) {
        requestAnimationFrame(frame);
      }
    }

    requestAnimationFrame(frame);
  };
</script>
```
::

### Side Cannon

::prose-show-case
:docs-confetti-side-cannon

#code
```vue [DocsConfettiSideCannon.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButton @click="triggerConfetti()">Side Cannon</UiButton>
  </div>
</template>

<script lang="ts" setup>
  const triggerConfetti = () => {
    const colors = ["#bb0000", "#0000ee"];
    const end = Date.now() + 5 * 1000;
    function frame() {
      useConfetti({
        particleCount: 2,
        angle: 60,
        spread: 55,
        origin: { x: 0 },
        colors: colors,
      });
      useConfetti({
        particleCount: 2,
        angle: 120,
        spread: 55,
        origin: { x: 1 },
        colors: colors,
      });

      if (Date.now() < end) {
        requestAnimationFrame(frame);
      }
    }
    requestAnimationFrame(frame);
  };
</script>
```
::

### Emoji

::prose-show-case
:docs-confetti-emoji

#code
```vue [DocsConfettiEmoji.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButton @click="triggerConfetti()">Trigger Emojis</UiButton>
  </div>
</template>

<script lang="ts" setup>
  const triggerConfetti = () => {
    const scalar = 2;
    const unicorn = useConfetti.shapeFromText({ text: "🦄", scalar });
    const stars = useConfetti.shapeFromText({ text: "✨", scalar });
    const sparkles = useConfetti.shapeFromText({ text: "🌟", scalar });

    const defaults = {
      spread: 360,
      ticks: 60,
      gravity: 0,
      decay: 0.96,
      startVelocity: 20,
      shapes: [unicorn, stars, sparkles],
      scalar,
    };

    function shoot() {
      useConfetti({
        ...defaults,
        particleCount: 30,
      });

      useConfetti({
        ...defaults,
        particleCount: 5,
      });

      useConfetti({
        ...defaults,
        particleCount: 15,
        scalar: scalar / 2,
        shapes: ["circle"],
      });
    }

    setTimeout(shoot, 0);
    setTimeout(shoot, 100);
    setTimeout(shoot, 200);
  };
</script>
```
::


# File Upload

## Credits

- [ReUI](https://reui.io/docs/file-upload){rel="&#x22;nofollow&#x22;"}
- [Origin UI Vue](https://www.originui-vue.com/file-upload){rel="&#x22;nofollow&#x22;"}

## Getting Started

::prose-steps
  :::prose-step
  ### Installation

  Add the following packages to your project

    ::::prose-code-group{sync="_pm"}
    ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
    npm i @vueuse/core
    ```

    ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
    pnpm i @vueuse/core
    ```

    ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
    bun add @vueuse/core
    ```

    ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
    yarn add @vueuse/core
    ```
    ::::
  :::

  :::prose-step
  ### Add Composable

  Add the following composable to your `composables` directory

    ::::prose-code-snippet
    ---
    file: /composables/useFileUpload.ts
    language: ts
    meta: noFormat
    title: useFileUpload Composable
    ---
    ::::
  :::
::

## Usage

### Avatar Upload 1

::prose-show-case
:docs-file-upload-avatar-upload1

#code
```vue [DocsFileUploadAvatarUpload1.vue]
<template>
  <div class="flex flex-col items-center">
    <div class="inline-flex items-center gap-2 align-top">
      <div
        class="border-input relative flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-md border"
        :aria-label="previewUrl ? 'Preview of uploaded image' : 'Default user avatar'"
      >
        <img
          v-if="previewUrl"
          class="size-full cursor-pointer object-cover"
          :src="previewUrl"
          alt="Preview of uploaded image"
          width="32"
          height="32"
          @click="showImageDialog = true"
        />
        <div v-else aria-hidden="true" class="flex items-center justify-center">
          <Icon name="lucide:circle-user-round" class="opacity-60" :size="16" />
        </div>
      </div>
      <div class="relative inline-block">
        <UiButton aria-haspopup="dialog" @click="openFileDialog()">
          {{ file && file.file?.name ? "Change image" : "Upload image" }}
        </UiButton>
        <input ref="inputRef" hidden type="file" />
      </div>
    </div>
    <div v-if="file" class="mt-2">
      <div class="inline-flex gap-2 text-xs">
        <p class="text-muted-foreground truncate" aria-live="polite">
          {{ file?.file?.name }}
        </p>
        <button
          class="font-medium text-red-500 hover:underline"
          :aria-label="`Remove ${file.file?.name}`"
          @click="() => removeFile(file?.id)"
        >
          Remove
        </button>
      </div>
    </div>
    <div class="sr-only" aria-live="polite" role="status">
      {{ previewUrl ? "Image uploaded and preview available" : "No image uploaded" }}
    </div>

    <AnimatePresence mode="wait">
      <Motion
        v-if="showImageDialog"
        role="dialog"
        :initial="{ opacity: 0, scale: 0.95 }"
        :animate="{ opacity: 1, scale: 1, transition: { duration: 0.2 } }"
        :exit="{ opacity: 0, y: 20, transition: { duration: 0.15 } }"
        class="bg-background/50 fixed inset-0 z-50 flex items-center justify-center backdrop-blur-md"
      >
        <div class="relative">
          <div class="absolute -top-4 -right-4">
            <UiButton class="rounded-full" size="icon-sm" @click="showImageDialog = false">
              <Icon name="lucide:x" :size="16" />
              <span class="sr-only">Close</span>
            </UiButton>
          </div>
          <img
            v-if="previewUrl"
            ref="imageDialog"
            class="border-input bg-background max-h-full max-w-full rounded-lg border"
            :src="previewUrl"
            alt="Preview of uploaded image"
            width="300"
            height="300"
          />
        </div>
      </Motion>
    </AnimatePresence>
  </div>
</template>

<script lang="ts" setup>
  const { files, inputRef, openFileDialog, removeFile } = useFileUpload({
    multiple: false,
    accept: "image/*",
  });
  const file = computed(() => {
    if (files.value && files.value.length > 0) {
      return files.value[0] || null;
    }
    return null;
  });
  const previewUrl = computed(() => file.value?.preview || null);

  const showImageDialog = ref(false);
  const imageDialog = useTemplateRef<HTMLDivElement>("imageDialog");
  onClickOutside(
    imageDialog,
    () => {
      showImageDialog.value = false;
    },
    {}
  );
</script>
```
::

### Avatar Upload 2

::prose-show-case
:docs-file-upload-avatar-upload2

#code
```vue [DocsFileUploadAvatarUpload2.vue]
<template>
  <div class="flex flex-col items-center gap-2">
    <div class="relative inline-flex">
      <!-- Drop area -->
      <div
        ref="dropzoneRef"
        role="button"
        class="border-input hover:bg-accent/50 has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50 relative flex size-26 items-center justify-center overflow-hidden rounded-full border border-dashed transition-colors has-disabled:pointer-events-none has-disabled:opacity-50 has-[img]:border-none has-[input:focus]:ring-[3px]"
        @click="openFileDialog"
      >
        <input ref="inputRef" hidden aria-label="Upload image file" />
        <img
          v-if="currentFile"
          :src="currentFile.preview"
          :alt="currentFile.file.name"
          class="size-full object-cover"
          width="64"
          height="64"
          style="object-fit: cover"
        />
        <div v-else aria-hidden="true">
          <Icon name="lucide:user" class="size-6 opacity-60" />
        </div>
      </div>
      <UiButton
        v-if="currentFile"
        size="icon"
        class="border-background focus-visible:border-background absolute -top-1 -right-1 size-6 rounded-full border-2 shadow-none"
        aria-label="Remove image"
        @click="removeFile(currentFile.id)"
      >
        <Icon name="lucide:x" class="size-3.5" />
      </UiButton>
    </div>
    <p class="text-sm font-bold">Upload Avatar</p>
    <p aria-live="polite" role="region" class="text-muted-foreground text-xs">
      Avatar uploader with droppable area
    </p>
  </div>
</template>

<script lang="ts" setup>
  const { files, removeFile, openFileDialog, dropzoneRef, inputRef } = useFileUpload({
    accept: "image/*",
    multiple: false,
    maxSize: 2 * 1024 * 1024, // 2MB
  });

  const currentFile = computed(() => files.value?.[0]);
</script>
```
::

### Single Image Uploader

::prose-show-case
:docs-file-upload-single-image-uploader

#code
```vue [DocsFileUploadSingleImageUploader.vue]
<template>
  <div class="flex flex-col gap-2">
    <div class="relative">
      <!-- Drop area -->
      <div
        ref="dropzoneRef"
        role="button"
        class="border-input hover:bg-accent/50 has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50 relative flex min-h-52 flex-col items-center justify-center overflow-hidden rounded-xl border border-dashed p-4 transition-colors has-disabled:pointer-events-none has-disabled:opacity-50 has-[img]:border-none has-[input:focus]:ring-[3px] lg:min-h-72"
        @click="openFileDialog"
      >
        <input ref="inputRef" hidden aria-label="Upload file" />
        <div v-if="currentFile" class="absolute inset-0">
          <img
            :src="currentFile.preview"
            :alt="currentFile.file.name"
            class="size-full object-cover"
          />
        </div>
        <div v-else class="flex flex-col items-center justify-center px-4 py-3 text-center">
          <div
            class="bg-background mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border"
            aria-hidden="true"
          >
            <Icon name="lucide:image-up" class="size-4 opacity-60" />
          </div>
          <p class="mb-1.5 text-sm font-medium">Drop your image here or click to browse</p>
          <p class="text-muted-foreground text-xs">Max size: {{ maxSizeMB }}MB</p>
        </div>
      </div>
      <div v-if="currentFile" class="absolute top-3 right-3">
        <button
          type="button"
          class="focus-visible:border-ring focus-visible:ring-ring/50 z-50 flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white transition-[color,box-shadow] outline-none hover:bg-black/80 focus-visible:ring-[3px]"
          aria-label="Remove image"
          @click="removeFile(currentFile.id)"
        >
          <Icon name="lucide:x" class="size-4" aria-hidden="true" />
        </button>
      </div>
    </div>

    <div
      v-if="errors.length > 0"
      class="text-destructive flex items-center gap-1 text-xs"
      role="alert"
    >
      <Icon name="lucide:circle-alert" class="size-3 shrink-0" />
      <span>{{ errors[0] }}</span>
    </div>

    <p aria-live="polite" role="region" class="text-muted-foreground mt-2 text-center text-xs">
      Single image uploader w/ max size
    </p>
  </div>
</template>

<script lang="ts" setup>
  const maxSizeMB = 5;
  const maxSize = maxSizeMB * 1024 * 1024; // 5MB default

  const { files, errors, openFileDialog, removeFile, dropzoneRef, inputRef } = useFileUpload({
    accept: "image/*",
    maxSize,
  });

  const currentFile = computed(() => files.value?.[0]);
</script>
```
::

### Single Image Uploader w/ Button

::prose-show-case
:docs-file-upload-single-image-uploader-button

#code
```vue [DocsFileUploadSingleImageUploaderButton.vue]
<template>
  <div class="flex flex-col gap-2">
    <div class="relative">
      <!-- Drop area -->
      <div
        ref="dropzoneRef"
        class="border-input has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50 relative flex min-h-52 flex-col items-center justify-center overflow-hidden rounded-xl border border-dashed p-4 transition-colors has-[input:focus]:ring-[3px] lg:min-h-64"
      >
        <input ref="inputRef" hidden aria-label="Upload image file" />
        <div v-if="currentFile" class="absolute inset-0 flex items-center justify-center p-4">
          <img
            :src="currentFile.preview"
            :alt="currentFile.file.name"
            class="mx-auto max-h-full rounded object-contain"
          />
        </div>
        <div v-else class="flex flex-col items-center justify-center px-4 py-3 text-center">
          <div
            class="bg-background mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border"
            aria-hidden="true"
          >
            <Icon name="lucide:image" class="size-4 opacity-60" />
          </div>
          <p class="mb-1.5 text-sm font-medium">Drop your image here</p>
          <p class="text-muted-foreground text-xs">SVG, PNG, JPG or GIF (max. {{ maxSizeMB }}MB)</p>
          <UiButton variant="outline" class="mt-4" @click="openFileDialog">
            <Icon name="lucide:upload" class="-ms-1 size-4 opacity-60" aria-hidden="true" />
            Select image
          </UiButton>
        </div>
      </div>

      <div v-if="currentFile" class="absolute top-3 right-3">
        <button
          type="button"
          class="focus-visible:border-ring focus-visible:ring-ring/50 z-50 flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white transition-[color,box-shadow] outline-none hover:bg-black/80 focus-visible:ring-[3px]"
          aria-label="Remove image"
          @click="removeFile(currentFile.id)"
        >
          <Icon name="lucide:x" class="size-4" aria-hidden="true" />
        </button>
      </div>
    </div>

    <div
      v-if="errors.length > 0"
      class="text-destructive flex items-center gap-1 text-xs"
      role="alert"
    >
      <Icon name="lucide:circle-alert" class="size-3 shrink-0" />
      <span>{{ errors[0] }}</span>
    </div>

    <p aria-live="polite" role="region" class="text-muted-foreground mt-2 text-center text-xs">
      Single image uploader w/ max size (drop area + button)
    </p>
  </div>
</template>

<script lang="ts" setup>
  const maxSizeMB = 2;
  const maxSize = maxSizeMB * 1024 * 1024; // 2MB default

  const { files, errors, openFileDialog, removeFile, dropzoneRef, inputRef } = useFileUpload({
    accept: "image/svg+xml,image/png,image/jpeg,image/jpg,image/gif",
    maxSize,
  });

  const currentFile = computed(() => files.value?.[0]);
</script>
```
::

### Multiple Image Uploader w/ Grid

::prose-show-case
:docs-file-upload-multiple-image-uploader-grid

#code
```vue [DocsFileUploadMultipleImageUploaderGrid.vue]
<template>
  <div class="flex flex-col gap-2">
    <!-- Drop area -->
    <div
      ref="dropzoneRef"
      :data-files="files.length > 0 || undefined"
      class="border-input has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50 relative flex min-h-52 flex-col items-center overflow-hidden rounded-xl border border-dashed p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:ring-[3px]"
    >
      <input ref="inputRef" hidden aria-label="Upload image file" />
      <div v-if="files.length > 0" class="flex w-full flex-col gap-3">
        <div class="flex items-center justify-between gap-2">
          <h3 class="truncate text-sm font-medium">Uploaded Files ({{ files.length }})</h3>
          <UiButton variant="outline" :disabled="files.length >= maxFiles" @click="openFileDialog">
            <Icon name="lucide:upload" class="-ms-0.5 size-3.5 opacity-60" aria-hidden="true" />
            Add more
          </UiButton>
        </div>

        <div class="grid grid-cols-2 gap-4 md:grid-cols-3">
          <div
            v-for="file in files"
            :key="file.id"
            class="bg-accent relative aspect-square rounded-md"
          >
            <img
              :src="file.preview"
              :alt="file.file.name"
              class="size-full rounded-[inherit] object-cover"
            />
            <UiButton
              size="icon"
              class="border-background focus-visible:border-background absolute -top-2 -right-2 size-6 rounded-full border-2 shadow-none"
              aria-label="Remove image"
              @click="removeFile(file.id)"
            >
              <Icon name="lucide:x" class="size-3.5" />
            </UiButton>
          </div>
        </div>
      </div>
      <div v-else class="flex flex-col items-center justify-center px-4 py-3 text-center">
        <div
          class="bg-background mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border"
          aria-hidden="true"
        >
          <Icon name="lucide:image" class="size-4 opacity-60" />
        </div>
        <p class="mb-1.5 text-sm font-medium">Drop your images here</p>
        <p class="text-muted-foreground text-xs">SVG, PNG, JPG or GIF (max. {{ maxSizeMB }}MB)</p>
        <UiButton variant="outline" class="mt-4" @click="openFileDialog">
          <Icon name="lucide:upload" class="-ms-1 size-4 opacity-60" aria-hidden="true" />
          Select images
        </UiButton>
      </div>
    </div>

    <div
      v-if="errors.length > 0"
      class="text-destructive flex items-center gap-1 text-xs"
      role="alert"
    >
      <Icon name="lucide:circle-alert" class="size-3 shrink-0" />
      <span>{{ errors[0] }}</span>
    </div>

    <p aria-live="polite" role="region" class="text-muted-foreground mt-2 text-center text-xs">
      Multiple image uploader w/ image grid
    </p>
  </div>
</template>

<script lang="ts" setup>
  // Create a dummy image file
  const initialFiles = [
    {
      name: "image-01.jpg",
      size: 1528737,
      type: "image/jpeg",
      url: "https://picsum.photos/1000/800?grayscale&random=1",
      id: useId(),
    },
    {
      name: "image-02.jpg",
      size: 1528737,
      type: "image/jpeg",
      url: "https://picsum.photos/1000/800?grayscale&random=2",
      id: useId(),
    },
    {
      name: "image-03.jpg",
      size: 1528737,
      type: "image/jpeg",
      url: "https://picsum.photos/1000/800?grayscale&random=3",
      id: useId(),
    },
    {
      name: "image-04.jpg",
      size: 1528737,
      type: "image/jpeg",
      url: "https://picsum.photos/1000/800?grayscale&random=4",
      id: useId(),
    },
  ];

  const maxSizeMB = 5;
  const maxSize = maxSizeMB * 1024 * 1024; // 5MB default
  const maxFiles = 6;

  const { files, errors, openFileDialog, removeFile, dropzoneRef, inputRef } = useFileUpload({
    accept: "image/svg+xml,image/png,image/jpeg,image/jpg,image/gif",
    maxSize,
    multiple: true,
    maxFiles,
    initialFiles,
  });
</script>
```
::

### Multiple Image Uploader w/ List + Button

::prose-show-case
:docs-file-upload-multiple-image-uploader-list-button

#code
```vue [DocsFileUploadMultipleImageUploaderListButton.vue]
<template>
  <div class="flex flex-col gap-2">
    <!-- Drop area -->
    <div
      ref="dropzoneRef"
      :data-files="files.length > 0 || undefined"
      class="border-input has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50 relative flex min-h-52 flex-col items-center overflow-hidden rounded-xl border border-dashed p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:ring-[3px]"
    >
      <input ref="inputRef" hidden aria-label="Upload image file" />
      <div class="flex flex-col items-center justify-center px-4 py-3 text-center">
        <div
          class="bg-background mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border"
          aria-hidden="true"
        >
          <Icon name="lucide:image" class="size-4 opacity-60" />
        </div>
        <p class="mb-1.5 text-sm font-medium">Drop your images here</p>
        <p class="text-muted-foreground text-xs">SVG, PNG, JPG or GIF (max. {{ maxSizeMB }}MB)</p>
        <UiButton variant="outline" class="mt-4" @click="openFileDialog">
          <Icon name="lucide:upload" class="-ms-1 size-4 opacity-60" aria-hidden="true" />
          Select images
        </UiButton>
      </div>
    </div>

    <div
      v-if="errors.length > 0"
      class="text-destructive flex items-center gap-1 text-xs"
      role="alert"
    >
      <Icon name="lucide:circle-alert" class="size-3 shrink-0" />
      <span>{{ errors[0] }}</span>
    </div>

    <!-- File list -->
    <div v-if="files.length > 0" class="space-y-2">
      <div
        v-for="file in files"
        :key="file.id"
        class="bg-background flex items-center justify-between gap-2 rounded-lg border p-2 pe-3"
      >
        <div class="flex items-center gap-3 overflow-hidden">
          <div class="bg-accent aspect-square shrink-0 rounded">
            <img
              :src="file.preview"
              :alt="file.file.name"
              class="size-10 rounded-[inherit] object-cover"
            />
          </div>
          <div class="flex min-w-0 flex-col gap-0.5">
            <p class="truncate text-[13px] font-medium">
              {{ file.file.name }}
            </p>
            <p class="text-muted-foreground text-xs">
              {{ formatBytes(file.file.size) }}
            </p>
          </div>
        </div>

        <UiButton
          size="icon"
          variant="ghost"
          class="text-muted-foreground/80 hover:text-foreground -me-2 size-8 hover:bg-transparent"
          aria-label="Remove file"
          @click="removeFile(file.id)"
        >
          <Icon name="lucide:x" aria-hidden="true" />
        </UiButton>
      </div>

      <!-- Remove all files button -->
      <div v-if="files.length > 1">
        <UiButton size="sm" variant="outline" @click="clearFiles"> Remove all files </UiButton>
      </div>
    </div>

    <p aria-live="polite" role="region" class="text-muted-foreground mt-2 text-center text-xs">
      Multiple image uploader w/ image list
    </p>
  </div>
</template>

<script lang="ts" setup>
  // Create a dummy image file

  const initialFiles = [
    {
      name: "image-01.jpg",
      size: 1528737,
      type: "image/jpeg",
      url: "https://picsum.photos/1000/800?grayscale&random=1",
      id: useId(),
    },
    {
      name: "image-02.jpg",
      size: 2345678,
      type: "image/jpeg",
      url: "https://picsum.photos/1000/800?grayscale&random=2",
      id: useId(),
    },
    {
      name: "image-03.jpg",
      size: 3456789,
      type: "image/jpeg",
      url: "https://picsum.photos/1000/800?grayscale&random=3",
      id: useId(),
    },
  ];

  const maxSizeMB = 5;
  const maxSize = maxSizeMB * 1024 * 1024; // 5MB default
  const maxFiles = 6;

  const {
    files,

    errors,
    openFileDialog,
    removeFile,
    clearFiles,
    dropzoneRef,
    inputRef,
  } = useFileUpload({
    accept: "image/svg+xml,image/png,image/jpeg,image/jpg,image/gif",
    maxSize,
    multiple: true,
    maxFiles,
    initialFiles,
  });
</script>
```
::

### Single File Uploader

::prose-show-case
:docs-file-upload-single-file-uploader

#code
```vue [DocsFileUploadSingleFileUploader.vue]
<template>
  <LayoutGroup>
    <Motion
      :variants="sequenceContainer"
      initial="hidden"
      while-in-view="visible"
      exit="exit"
      layout="position"
      class="mx-auto flex max-w-md flex-col gap-2"
    >
      <!-- Drop area -->
      <Motion as-child :variants="dropAreaContainer">
        <div
          ref="dropzoneRef"
          role="button"
          class="border-input hover:bg-accent/50 has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50 flex min-h-40 flex-col items-center justify-center rounded-xl border border-dashed p-4 transition-colors has-disabled:pointer-events-none has-disabled:opacity-50 has-[input:focus]:ring-[3px]"
          @click="openFileDialog"
        >
          <input ref="inputRef" hidden aria-label="Upload file" :disabled="Boolean(currentFile)" />

          <div class="flex flex-col items-center justify-center text-center">
            <Motion
              :variants="dropAreaContainerItem"
              class="bg-background mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border"
              aria-hidden="true"
            >
              <Icon name="lucide:upload" class="size-4 opacity-60" />
            </Motion>
            <Motion as="p" :variants="dropAreaContainerItem" class="mb-1.5 text-sm font-medium"
              >Upload file</Motion
            >
            <Motion as="p" :variants="dropAreaContainerItem" class="text-muted-foreground text-xs">
              Drag & drop or click to browse (max. {{ formatBytes(maxSize) }})
            </Motion>
            <AnimatePresence>
              <Motion
                v-if="currentFile"
                key="message"
                layout="position"
                :variants="dropAreaContainerItem"
                as="p"
                class="mt-1 text-center text-xs text-sky-500"
              >
                Remove the current file to upload a new one.
              </Motion>
            </AnimatePresence>
          </div>
        </div>
      </Motion>

      <Motion
        v-if="errors.length > 0"
        key="errors"
        layout="position"
        initial="hidden"
        animate="visible"
        :variants="fileListItem"
        class="text-destructive flex items-center gap-1 text-xs"
        role="alert"
      >
        <Icon name="lucide:circle-alert" class="size-3 shrink-0" />
        <span>{{ errors[0] }}</span>
      </Motion>

      <Motion
        v-if="currentFile"
        key="file-list"
        layout="position"
        initial="hidden"
        animate="visible"
        :variants="fileListItem"
        class="space-y-2"
      >
        <div class="flex items-center justify-between gap-2 rounded-lg border px-4 py-2">
          <div class="flex items-center gap-3 overflow-hidden">
            <Icon name="lucide:paperclip" class="size-4 shrink-0 opacity-60" aria-hidden="true" />
            <div class="min-w-0">
              <p class="truncate text-[13px] font-medium">
                {{ currentFile.file.name }}
              </p>
            </div>
          </div>

          <UiButton
            size="icon"
            variant="ghost"
            class="text-muted-foreground/80 hover:text-foreground -me-2 size-8 hover:bg-transparent"
            aria-label="Remove file"
            @click="removeFile(currentFile.id)"
          >
            <Icon name="lucide:x" class="size-4" aria-hidden="true" />
          </UiButton>
        </div>
      </Motion>

      <Motion
        as="p"
        layout="position"
        :variants="fileListItem"
        aria-live="polite"
        role="region"
        class="text-muted-foreground mt-2 text-center text-xs"
      >
        Single file uploader w/ max size
      </Motion>
    </Motion>
  </LayoutGroup>
</template>

<script lang="ts" setup>
  import type { MotionProps } from "motion-v";

  const maxSize = 10 * 1024 * 1024; // 10MB default

  const initialFiles = [
    {
      name: "Behon Baker - Software Developer.png",
      size: 1528737,
      type: "image/png",
      url: "https://behonbaker.com/icon.png",
      id: useId(),
    },
  ];

  const { files, errors, openFileDialog, removeFile } = useFileUpload({
    maxSize,
    initialFiles,
  });

  const currentFile = computed(() => files.value[0]);

  // Overall sequence container - controls the main timing
  const sequenceContainer: MotionProps["variants"] = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.4, when: "beforeChildren" },
    },
  };

  // Drop area container - handles internal stagger of upload elements
  const dropAreaContainer: MotionProps["variants"] = {
    hidden: { opacity: 0, y: 10, scale: 0.95 },
    visible: {
      opacity: 1,
      y: 0,
      scale: 1,
      transition: { staggerChildren: 0.1, when: "beforeChildren" },
    },
  };

  // Individual upload elements (icon, text, description)
  const dropAreaContainerItem: MotionProps["variants"] = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        type: "spring",
        stiffness: 100,
      },
    },
  };

  // File list and other elements that come after drop area
  const fileListItem: MotionProps["variants"] = {
    hidden: { opacity: 0, y: 10 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { type: "spring", stiffness: 80, damping: 15 },
    },
    // Add exit animation that matches hidden state
    exit: {
      opacity: 0,
      y: 10,
      transition: {
        duration: 0.2,
        ease: "easeInOut",
      },
    },
  };
</script>
```
::

### Multiple File Uploader

::prose-show-case
:docs-file-upload-multiple-file-uploader

#code
```vue [DocsFileUploadMultipleFileUploader.vue]
<template>
  <LayoutGroup>
    <Motion
      layout="position"
      :variants="parentVariants"
      while-in-view="visible"
      initial="hidden"
      exit="exit"
      :in-view-options="{ once: true }"
      class="mx-auto flex max-w-md flex-col gap-2"
    >
      <!-- Drop area -->
      <Motion layout="position" as-child :variants="dropAreaContainer">
        <div
          ref="dropzoneRef"
          role="button"
          class="border-input hover:bg-accent/50 has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50 flex min-h-40 flex-col items-center justify-center rounded-xl border border-dashed p-4 transition-colors has-disabled:pointer-events-none has-disabled:opacity-50 has-[input:focus]:ring-[3px]"
          @click="openFileDialog"
        >
          <input ref="inputRef" hidden aria-label="Upload files" />

          <div class="flex flex-col items-center justify-center text-center">
            <Motion
              :variants="dropAreaItem"
              class="bg-background mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border"
              aria-hidden="true"
            >
              <Icon name="lucide:file-up" class="size-4 opacity-60" />
            </Motion>
            <Motion :variants="dropAreaItem" as="p" class="mb-1.5 text-sm font-medium"
              >Upload files</Motion
            >
            <Motion :variants="dropAreaItem" as="p" class="text-muted-foreground mb-2 text-xs"
              >Drag & drop or click to browse</Motion
            >
            <Motion
              :variants="dropAreaItem"
              class="text-muted-foreground/70 flex flex-wrap justify-center gap-1 text-xs"
            >
              <span>All files</span>
              <span>∙</span>
              <span>Max {{ maxFiles }} files</span>
              <span>∙</span>
              <span>Up to {{ formatBytes(maxSize) }}</span>
            </Motion>
          </div>
        </div>
      </Motion>

      <div
        v-if="errors.length > 0"
        class="text-destructive flex items-center gap-1 text-xs"
        role="alert"
      >
        <Icon name="lucide:circle-alert" class="size-3 shrink-0" />
        <span>{{ errors[0] }}</span>
      </div>

      <!-- File list -->
      <LayoutGroup id="file-list">
        <AnimatePresence>
          <Motion
            v-if="files.length > 0"
            layout="position"
            :variants="fileListContainer"
            initial="hidden"
            animate="visible"
            class="space-y-2"
          >
            <AnimatePresence>
              <Motion
                v-for="file in files"
                :key="file.id"
                layout="position"
                :variants="fileListItem"
                class="bg-background flex items-center justify-between gap-2 rounded-lg border p-2 pe-3"
              >
                <div class="flex items-center gap-3 overflow-hidden">
                  <div
                    class="flex aspect-square size-10 shrink-0 items-center justify-center rounded border"
                  >
                    <Icon :name="getFileIcon(file)" class="size-4 opacity-60" />
                  </div>
                  <div class="flex min-w-0 flex-col gap-0.5">
                    <p class="truncate text-[13px] font-medium">
                      {{ file.file.name }}
                    </p>
                    <p class="text-muted-foreground text-xs">
                      {{ formatBytes(file.file.size) }}
                    </p>
                  </div>
                </div>

                <UiButton
                  size="icon"
                  variant="ghost"
                  class="text-muted-foreground/80 hover:text-foreground -me-2 size-8 hover:bg-transparent"
                  aria-label="Remove file"
                  @click="removeFile(file.id)"
                >
                  <Icon name="lucide:x" class="size-4" aria-hidden="true" />
                </UiButton>
              </Motion>
            </AnimatePresence>

            <!-- Remove all files button -->
            <AnimatePresence>
              <Motion v-if="files.length > 1" layout="position" :variants="fileListItem">
                <UiButton size="sm" variant="outline" @click="clearFiles">
                  Remove all files
                </UiButton>
              </Motion>
            </AnimatePresence>
          </Motion>
        </AnimatePresence>
      </LayoutGroup>

      <Motion
        as="p"
        layout="position"
        :variants="dropAreaItem"
        aria-live="polite"
        role="region"
        class="text-muted-foreground mt-2 text-center text-xs"
      >
        Multiple files uploader w/ list
      </Motion>
    </Motion>
  </LayoutGroup>
</template>

<script lang="ts" setup>
  import type { MotionProps } from "motion-v";

  const initialFiles = [
    {
      name: "document.pdf",
      size: 528737,
      type: "application/pdf",
      url: "https://example.com/document.pdf",
      id: "document.pdf-1744638436563-8u5xuls",
    },
    {
      name: "intro.zip",
      size: 252873,
      type: "application/zip",
      url: "https://example.com/intro.zip",
      id: "intro.zip-1744638436563-8u5xuls",
    },
    {
      name: "conclusion.xlsx",
      size: 352873,
      type: "application/xlsx",
      url: "https://example.com/conclusion.xlsx",
      id: "conclusion.xlsx-1744638436563-8u5xuls",
    },
  ];

  const getFileIcon = (file: { file: File | { type: string; name: string } }) => {
    const fileType = file.file instanceof File ? file.file.type : file.file.type;
    const fileName = file.file instanceof File ? file.file.name : file.file.name;

    if (
      fileType.includes("pdf") ||
      fileName.endsWith(".pdf") ||
      fileType.includes("word") ||
      fileName.endsWith(".doc") ||
      fileName.endsWith(".docx")
    ) {
      return "lucide:file-text";
    } else if (
      fileType.includes("zip") ||
      fileType.includes("archive") ||
      fileName.endsWith(".zip") ||
      fileName.endsWith(".rar")
    ) {
      return "lucide:file-archive";
    } else if (
      fileType.includes("excel") ||
      fileName.endsWith(".xls") ||
      fileName.endsWith(".xlsx")
    ) {
      return "lucide:file-spreadsheet";
    } else if (fileType.includes("video/")) {
      return "lucide:video";
    } else if (fileType.includes("audio/")) {
      return "lucide:headphones";
    } else if (fileType.startsWith("image/")) {
      return "lucide:image";
    }
    return "lucide:file";
  };

  const maxSize = 100 * 1024 * 1024; // 100MB default
  const maxFiles = 10;

  const { files, errors, openFileDialog, removeFile, clearFiles, dropzoneRef, inputRef } =
    useFileUpload({
      multiple: true,
      maxFiles,
      maxSize,
      initialFiles,
    });

  const parentVariants: MotionProps["variants"] = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.4, when: "beforeChildren" },
    },
  };

  const dropAreaContainer: MotionProps["variants"] = {
    hidden: { opacity: 0, y: 10 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { staggerChildren: 0.2, when: "beforeChildren" },
    },
  };

  const dropAreaItem: MotionProps["variants"] = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { type: "spring", stiffness: 100 },
    },
  };

  const fileListContainer: MotionProps["variants"] = {
    hidden: { opacity: 0, y: 10 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { staggerChildren: 0.1, when: "beforeChildren" },
    },
  };

  const fileListItem: MotionProps["variants"] = {
    hidden: { opacity: 0, y: 10 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { type: "spring", stiffness: 100 },
    },
    exit: { opacity: 0, y: 5, transition: { duration: 0.2, ease: "easeInOut" } },
  };
</script>
```
::

### Multiple File Uploader w/ List Inside

::prose-show-case
:docs-file-upload-multiple-file-uploader-list-inside

#code
```vue [DocsFileUploadMultipleFileUploaderListInside.vue]
<template>
  <LayoutGroup>
    <Motion
      layout="position"
      :variants="parentVariants"
      initial="hidden"
      while-in-view="visible"
      exit="exit"
      class="mx-auto flex max-w-md flex-col gap-2"
    >
      <!-- Drop area -->
      <Motion as-child layout="position" :variants="dropZoneContainer">
        <div
          ref="dropzoneRef"
          :data-files="files.length > 0 || undefined"
          class="border-input has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50 flex min-h-56 flex-col items-center rounded-xl border border-dashed p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:ring-[3px]"
        >
          <input ref="inputRef" hidden aria-label="Upload files" />

          <AnimatePresence mode="wait">
            <Motion
              v-if="files.length > 0"
              key="file-list"
              :variants="fileListContainer"
              initial="hidden"
              animate="visible"
              layout="position"
              class="flex w-full flex-col gap-3"
            >
              <div class="flex items-center justify-between gap-2">
                <Motion as="h3" :variants="fileListItem" class="truncate text-sm font-medium"
                  >Uploaded Files ({{ files.length }})</Motion
                >
                <Motion :variants="fileListItem">
                  <UiButton size="sm" variant="outline" @click="clearFiles">
                    <Icon
                      name="lucide:trash-2"
                      class="-ms-0.5 size-3.5 opacity-60"
                      aria-hidden="true"
                    />
                    Remove all
                  </UiButton>
                </Motion>
              </div>
              <Motion :variants="fileListItem" class="w-full space-y-2">
                <AnimatePresence>
                  <Motion
                    v-for="file in files"
                    :key="file.id"
                    layout="position"
                    :variants="fileListItemChild"
                    class="bg-background flex items-center justify-between gap-2 rounded-lg border p-2 pe-3"
                  >
                    <div class="flex items-center gap-3 overflow-hidden">
                      <div
                        class="flex aspect-square size-10 shrink-0 items-center justify-center rounded border"
                      >
                        <Icon :name="getFileIcon(file)" class="size-4 opacity-60" />
                      </div>
                      <div class="flex min-w-0 flex-col gap-0.5">
                        <p class="truncate text-[13px] font-medium">
                          {{ file.file.name }}
                        </p>
                        <p class="text-muted-foreground text-xs">
                          {{ formatBytes(file.file.size) }}
                        </p>
                      </div>
                    </div>

                    <UiButton
                      size="icon"
                      variant="ghost"
                      class="text-muted-foreground/80 hover:text-foreground -me-2 size-8 hover:bg-transparent"
                      aria-label="Remove file"
                      @click="removeFile(file.id)"
                    >
                      <Icon name="lucide:x" class="size-4" aria-hidden="true" />
                    </UiButton>
                  </Motion>
                </AnimatePresence>

                <UiButton
                  v-if="files.length < maxFiles"
                  size="sm"
                  variant="outline"
                  @click="openFileDialog"
                >
                  <Icon name="lucide:file-up" class="-ms-1 opacity-60" aria-hidden="true" />
                  Add more
                </UiButton>
              </Motion>
            </Motion>

            <Motion
              v-else
              key="empty-state"
              layout="position"
              :variants="emptyContainer"
              initial="hidden"
              animate="visible"
              class="flex flex-col items-center justify-center text-center"
            >
              <Motion
                layout="position"
                :variants="emptyItem"
                class="bg-background mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border"
                aria-hidden="true"
              >
                <Icon name="lucide:file" class="size-4 opacity-60" />
              </Motion>
              <Motion as="p" :variants="emptyItem" class="mb-1.5 text-sm font-medium"
                >Upload files</Motion
              >
              <Motion as="p" :variants="emptyItem" class="text-muted-foreground text-xs">
                Max {{ maxFiles }} files ∙ Up to {{ formatBytes(maxSize) }}
              </Motion>
              <Motion :variants="emptyItem">
                <UiButton size="sm" variant="outline" class="mt-4" @click="openFileDialog">
                  <Icon name="lucide:file-up" class="-ms-1 opacity-60" aria-hidden="true" />
                  Select files
                </UiButton>
              </Motion>
            </Motion>
          </AnimatePresence>
        </div>
      </Motion>

      <AnimatePresence>
        <Motion
          v-if="errors.length > 0"
          initial="hidden"
          animate="visible"
          :variants="fileListItem"
          class="text-destructive flex items-center gap-1 text-xs"
          role="alert"
        >
          <Icon name="lucide:circle-alert" class="size-3 shrink-0" />
          <span>{{ errors[0] }}</span>
        </Motion>
      </AnimatePresence>

      <Motion
        as="p"
        aria-live="polite"
        role="region"
        class="text-muted-foreground mt-2 text-center text-xs"
      >
        Multiple files uploader w/ list inside
      </Motion>
    </Motion>
  </LayoutGroup>
</template>

<script lang="ts" setup>
  import type { MotionProps } from "motion-v";

  const initialFiles = [
    {
      name: "document.pdf",
      size: 528737,
      type: "application/pdf",
      url: "https://example.com/document.pdf",
      id: "document.pdf-1744638436563-8u5xuls",
    },
    {
      name: "intro.zip",
      size: 252873,
      type: "application/zip",
      url: "https://example.com/intro.zip",
      id: "intro.zip-1744638436563-8u5xuls",
    },
    {
      name: "conclusion.xlsx",
      size: 352873,
      type: "application/xlsx",
      url: "https://example.com/conclusion.xlsx",
      id: "conclusion.xlsx-1744638436563-8u5xuls",
    },
  ];
  const getFileIcon = (file: { file: File | { type: string; name: string } }) => {
    const fileType = file.file instanceof File ? file.file.type : file.file.type;
    const fileName = file.file instanceof File ? file.file.name : file.file.name;

    if (
      fileType.includes("pdf") ||
      fileName.endsWith(".pdf") ||
      fileType.includes("word") ||
      fileName.endsWith(".doc") ||
      fileName.endsWith(".docx")
    ) {
      return "lucide:file-text";
    } else if (
      fileType.includes("zip") ||
      fileType.includes("archive") ||
      fileName.endsWith(".zip") ||
      fileName.endsWith(".rar")
    ) {
      return "lucide:file-archive";
    } else if (
      fileType.includes("excel") ||
      fileName.endsWith(".xls") ||
      fileName.endsWith(".xlsx")
    ) {
      return "lucide:file-spreadsheet";
    } else if (fileType.includes("video/")) {
      return "lucide:video";
    } else if (fileType.includes("audio/")) {
      return "lucide:headphones";
    } else if (fileType.startsWith("image/")) {
      return "lucide:image";
    }
    return "lucide:file";
  };

  const maxSize = 7 * 1024 * 1024; // 10MB default
  const maxFiles = 7;

  const { files, errors, openFileDialog, removeFile, clearFiles, dropzoneRef, inputRef } =
    useFileUpload({
      multiple: true,
      maxFiles,
      maxSize,
      initialFiles,
    });

  const parentVariants: MotionProps["variants"] = {
    hidden: { opacity: 0, scale: 0.95 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: { staggerChildren: 0.2, when: "beforeChildren" },
    },
  };

  const dropZoneContainer: MotionProps["variants"] = {
    hidden: { opacity: 0, y: 10, scale: 0.95 },
    visible: {
      opacity: 1,
      y: 0,
      scale: 1,
      transition: { staggerChildren: 0.1, when: "beforeChildren" },
    },
  };

  const emptyContainer: MotionProps["variants"] = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1, when: "beforeChildren" },
    },
    exit: {
      opacity: 0,
      transition: {
        duration: 0.15,
        when: "afterChildren",
        staggerChildren: 0.05,
        staggerDirection: -1, // Reverse stagger for exit
      },
    },
  };

  const emptyItem: MotionProps["variants"] = {
    hidden: { opacity: 0, y: 15 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        type: "spring",
        stiffness: 100,
      },
    },
    exit: {
      opacity: 0,
      y: -10, // Exit upward (opposite of enter)
      transition: {
        duration: 0.15,
        ease: "easeInOut",
      },
    },
  };

  const fileListContainer: MotionProps["variants"] = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        type: "spring",
        stiffness: 80,
        damping: 15,
        staggerChildren: 0.1,
        delayChildren: 0.1, // Small delay to let empty state exit first
      },
    },
    exit: {
      opacity: 0,
      transition: {
        duration: 0.2,
        ease: "easeInOut",
        staggerChildren: 0.05,
        when: "afterChildren",
      },
    },
  };

  const fileListItem: MotionProps["variants"] = {
    hidden: { opacity: 0, y: 10 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { type: "spring", stiffness: 80, damping: 15 },
    },
    // Add exit animation that matches hidden state
    exit: {
      opacity: 0,
      y: 10,
      transition: {
        duration: 0.2,
        ease: "easeInOut",
        when: "afterChildren",
      },
    },
  };
  const fileListItemChild: MotionProps["variants"] = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        type: "spring",
        stiffness: 100,
      },
    },
    exit: {
      opacity: 0,
      y: 20,
      transition: {
        duration: 0.2,
        ease: "easeInOut",
      },
    },
  };
</script>
```
::

### Multiple File Uploader w/ Table

::prose-show-case
:docs-file-upload-multiple-file-uploader-table

#code
```vue [DocsFileUploadMultipleFileUploaderTable.vue]
<template>
  <Motion
    :variants="lvl1Variants"
    initial="hidden"
    while-in-view="visible"
    exit="exit"
    :in-view-options="{ once: true }"
    class="mx-auto flex max-w-md flex-col gap-2"
  >
    <!-- Drop area -->
    <AnimatePresence mode="wait">
      <Motion
        v-if="files.length > 0"
        :variants="lvl2Variants"
        initial="hidden"
        animate="visible"
        class="flex flex-col gap-2"
      >
        <!-- Table header with actions -->
        <div class="flex items-center justify-between gap-2">
          <h3 class="text-sm font-medium">Files ({{ files.length }})</h3>
          <div class="flex gap-2">
            <UiButton size="sm" variant="outline" @click="openFileDialog">
              <Icon name="lucide:file-up" class="-ms-0.5 size-3.5 opacity-60" aria-hidden="true" />
              Add files
            </UiButton>
            <UiButton size="sm" variant="outline" @click="clearFiles">
              <Icon name="lucide:trash-2" class="-ms-0.5 size-3.5 opacity-60" aria-hidden="true" />
              Remove all
            </UiButton>
          </div>
        </div>

        <!-- Table -->
        <div class="bg-background overflow-hidden rounded-md border">
          <UiTable class="w-full">
            <UiTableHeader class="text-xs">
              <UiTableRow class="bg-muted/50">
                <UiTableHead class="h-9 py-2 text-left">Name</UiTableHead>
                <UiTableHead class="h-9 py-2 text-left">Type</UiTableHead>
                <UiTableHead class="h-9 py-2 text-left">Size</UiTableHead>
                <UiTableHead class="h-9 w-0 py-2 text-right">Actions</UiTableHead>
              </UiTableRow>
            </UiTableHeader>
            <UiTableBody class="text-[13px]">
              <UiTableRow v-for="file in files" :key="file.id">
                <UiTableCell class="max-w-48 py-2 font-medium">
                  <span class="flex items-center gap-2">
                    <span class="shrink-0">
                      <component :is="getFileIcon(file)" class="size-4 opacity-60" />
                    </span>
                    <span class="truncate">{{ file.file.name }}</span>
                  </span>
                </UiTableCell>
                <UiTableCell class="text-muted-foreground py-2">
                  {{ file.file.type.split("/")[1]?.toUpperCase() || "UNKNOWN" }}
                </UiTableCell>
                <UiTableCell class="text-muted-foreground py-2">
                  {{ formatBytes(file.file.size) }}
                </UiTableCell>
                <UiTableCell class="py-2 text-right whitespace-nowrap">
                  <UiButton
                    size="icon"
                    variant="ghost"
                    class="text-muted-foreground/80 hover:text-foreground size-8 hover:bg-transparent"
                    aria-label="Download file"
                  >
                    <Icon name="lucide:download" class="size-4" />
                  </UiButton>
                  <UiButton
                    size="icon"
                    variant="ghost"
                    class="text-muted-foreground/80 hover:text-foreground size-8 hover:bg-transparent"
                    aria-label="Remove file"
                    @click="removeFile(file.id)"
                  >
                    <Icon name="lucide:trash-2" class="size-4" />
                  </UiButton>
                </UiTableCell>
              </UiTableRow>
            </UiTableBody>
          </UiTable>
        </div>
      </Motion>

      <Motion v-else :variants="lvl2Variants" initial="hidden" animate="visible">
        <div
          ref="dropzoneRef"
          :data-files="files.length > 0 || undefined"
          class="border-input has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50 flex min-h-56 flex-col items-center rounded-xl border border-dashed p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:ring-[3px] data-[files]:hidden"
        >
          <div class="flex flex-col items-center justify-center text-center">
            <Motion
              :variants="lvl2EmptyItemVariants"
              class="bg-background mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border"
              aria-hidden="true"
            >
              <Icon name="lucide:file" class="size-4 opacity-60" />
            </Motion>
            <Motion as="p" :variants="lvl2EmptyItemVariants" class="mb-1.5 text-sm font-medium"
              >Upload files</Motion
            >
            <Motion as="p" :variants="lvl2EmptyItemVariants" class="text-muted-foreground text-xs">
              Max {{ maxFiles }} files ∙ Up to {{ formatBytes(maxSize) }}
            </Motion>
            <Motion :variants="lvl2EmptyItemVariants">
              <UiButton size="sm" variant="outline" class="mt-4" @click="openFileDialog">
                <Icon name="lucide:file-up" class="-ms-1 opacity-60" aria-hidden="true" />
                Select files
              </UiButton>
            </Motion>
          </div>
        </div>
      </Motion>
    </AnimatePresence>

    <Motion
      v-if="errors.length > 0"
      :variants="lvl2Variants"
      initial="hidden"
      animate="visible"
      class="text-destructive flex items-center gap-1 text-xs"
      role="alert"
    >
      <Icon name="lucide:circle-alert" class="size-3 shrink-0" />
      <span>{{ errors[0] }}</span>
    </Motion>

    <Motion
      :variants="lvl2Variants"
      as="p"
      aria-live="polite"
      role="region"
      class="text-muted-foreground mt-2 text-center text-xs"
    >
      Multiple files uploader w/ table
    </Motion>

    <input ref="inputRef" hidden aria-label="Upload files" />
  </Motion>
</template>

<script lang="ts" setup>
  import { stagger } from "motion-v";
  import type { MotionProps } from "motion-v";

  const initialFiles = [
    {
      name: "document.pdf",
      size: 528737,
      type: "application/pdf",
      url: "https://example.com/document.pdf",
      id: useId(),
    },
    {
      name: "intro.zip",
      size: 252873,
      type: "application/zip",
      url: "https://example.com/intro.zip",
      id: useId(),
    },
    {
      name: "conclusion.xlsx",
      size: 352873,
      type: "application/xlsx",
      url: "https://example.com/conclusion.xlsx",
      id: useId(),
    },
  ];
  const getFileIcon = (file: { file: File | { type: string; name: string } }) => {
    const fileType = file.file instanceof File ? file.file.type : file.file.type;
    const fileName = file.file instanceof File ? file.file.name : file.file.name;

    if (
      fileType.includes("pdf") ||
      fileName.endsWith(".pdf") ||
      fileType.includes("word") ||
      fileName.endsWith(".doc") ||
      fileName.endsWith(".docx")
    ) {
      return "lucide:file-text";
    } else if (
      fileType.includes("zip") ||
      fileType.includes("archive") ||
      fileName.endsWith(".zip") ||
      fileName.endsWith(".rar")
    ) {
      return "lucide:file-archive";
    } else if (
      fileType.includes("excel") ||
      fileName.endsWith(".xls") ||
      fileName.endsWith(".xlsx")
    ) {
      return "lucide:file-spreadsheet";
    } else if (fileType.includes("video/")) {
      return "lucide:video";
    } else if (fileType.includes("audio/")) {
      return "lucide:headphones";
    } else if (fileType.startsWith("image/")) {
      return "lucide:image";
    }
    return "lucide:file";
  };

  const maxSize = 7 * 1024 * 1024; // 10MB default
  const maxFiles = 7;

  const { files, errors, openFileDialog, removeFile, clearFiles, dropzoneRef, inputRef } =
    useFileUpload({
      multiple: true,
      maxFiles,
      maxSize,
      initialFiles,
    });

  const lvl1Variants: MotionProps["variants"] = {
    hidden: { opacity: 0, y: 10 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { delayChildren: stagger(0.2), when: "beforeChildren" },
    },
  };

  const lvl2Variants: MotionProps["variants"] = {
    hidden: { opacity: 0, y: 5, scale: 0.95 },
    visible: {
      opacity: 1,
      y: 0,
      scale: 1,
      transition: { staggerChildren: 0.1, when: "beforeChildren" },
    },
    exit: { opacity: 0, y: 5, scale: 0.95, transition: { duration: 0.2 } },
  };

  const lvl2EmptyItemVariants: MotionProps["variants"] = {
    hidden: { opacity: 0, y: 10 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { type: "spring", stiffness: 100 },
    },
  };
</script>
```
::

### Mixed Content w/ Card

::prose-show-case
:docs-file-upload-mixed-content-card

#code
```vue [DocsFileUploadMixedContentCard.vue]
<template>
  <div class="flex flex-col gap-2">
    <input ref="inputRef" hidden aria-label="Upload image file" />
    <!-- Drop area -->
    <div
      ref="dropzoneRef"
      :data-files="files.length > 0 || undefined"
      class="border-input has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50 relative flex min-h-52 flex-col items-center overflow-hidden rounded-xl border border-dashed p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:ring-[3px]"
    >
      <div v-if="files.length > 0" class="flex w-full flex-col gap-3">
        <div class="flex items-center justify-between gap-2">
          <h3 class="truncate text-sm font-medium">Files ({{ files.length }})</h3>
          <div class="flex gap-2">
            <UiButton size="sm" variant="outline" @click="openFileDialog">
              <Icon name="lucide:file-up" class="-ms-0.5 size-3.5 opacity-60" aria-hidden="true" />
              Add files
            </UiButton>
            <UiButton size="sm" variant="outline" @click="clearFiles">
              <Icon name="lucide:trash-2" class="-ms-0.5 size-3.5 opacity-60" aria-hidden="true" />
              Remove all
            </UiButton>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4 md:grid-cols-3">
          <div v-for="file in files" :key="file.id" class="relative">
            <div class="bg-background relative flex flex-col overflow-hidden rounded-md border">
              <div class="bg-accent flex aspect-square items-center justify-center overflow-hidden">
                <img
                  v-if="getFilePreview(file).type === 'image'"
                  :src="getFilePreview(file).url"
                  :alt="getFilePreview(file).alt"
                  class="size-full object-cover"
                />
                <Icon v-else :name="getFilePreview(file).component!" class="size-5 opacity-60" />
              </div>
              <div class="flex min-w-0 flex-col gap-0.5 border-t p-3">
                <p class="truncate text-[13px] font-medium">
                  {{ file.file.name }}
                </p>
                <p class="text-muted-foreground truncate text-xs">
                  {{ formatBytes(file.file.size) }}
                </p>
              </div>
            </div>
            <UiButton
              size="icon"
              class="border-background focus-visible:border-background absolute -top-2 -right-2 size-6 rounded-full border-2 shadow-none"
              aria-label="Remove file"
              @click="removeFile(file.id)"
            >
              <Icon name="lucide:x" class="size-3.5" />
            </UiButton>
          </div>
        </div>
      </div>

      <div v-else class="flex flex-col items-center justify-center px-4 py-3 text-center">
        <div
          class="bg-background mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border"
          aria-hidden="true"
        >
          <Icon name="lucide:image" class="size-4 opacity-60" />
        </div>
        <p class="mb-1.5 text-sm font-medium">Drop your files here</p>
        <p class="text-muted-foreground text-xs">
          Max {{ maxFiles }} files ∙ Up to {{ maxSizeMB }}MB
        </p>
        <UiButton size="sm" variant="outline" class="mt-4" @click="openFileDialog">
          <Icon name="lucide:file-up" class="-ms-1 opacity-60" aria-hidden="true" />
          Select images
        </UiButton>
      </div>
    </div>

    <div
      v-if="errors.length > 0"
      class="text-destructive flex items-center gap-1 text-xs"
      role="alert"
    >
      <Icon name="lucide:circle-alert" class="size-3 shrink-0" />
      <span>{{ errors[0] }}</span>
    </div>

    <p aria-live="polite" role="region" class="text-muted-foreground mt-2 text-center text-xs">
      Mixed content w/ card
    </p>
  </div>
</template>

<script setup lang="ts">
  const initialFiles = [
    {
      name: "intro.zip",
      size: 252873,
      type: "application/zip",
      url: "https://example.com/intro.zip",
      id: "intro.zip-1744638436563-8u5xuls",
    },
    {
      name: "image-01.jpg",
      size: 1528737,
      type: "image/jpeg",
      url: "https://picsum.photos/1000/800?grayscale&random=1",
      id: "image-01-123456789",
    },
    {
      name: "audio.mp3",
      size: 1528737,
      type: "audio/mpeg",
      url: "https://example.com/audio.mp3",
      id: "audio-123456789",
    },
  ];

  const getFileIcon = (file: { file: File | { type: string; name: string } }) => {
    const fileType = file.file instanceof File ? file.file.type : file.file.type;
    const fileName = file.file instanceof File ? file.file.name : file.file.name;

    const iconMap = {
      pdf: {
        icon: "lucide:file-text",
        conditions: (type: string, name: string) =>
          type.includes("pdf") ||
          name.endsWith(".pdf") ||
          type.includes("word") ||
          name.endsWith(".doc") ||
          name.endsWith(".docx"),
      },
      archive: {
        icon: "lucide:file-archive",
        conditions: (type: string, name: string) =>
          type.includes("zip") ||
          type.includes("archive") ||
          name.endsWith(".zip") ||
          name.endsWith(".rar"),
      },
      excel: {
        icon: "lucide:file-spreadsheet",
        conditions: (type: string, name: string) =>
          type.includes("excel") || name.endsWith(".xls") || name.endsWith(".xlsx"),
      },
      video: {
        icon: "lucide:video",
        conditions: (type: string) => type.includes("video/"),
      },
      audio: {
        icon: "lucide:headphones",
        conditions: (type: string) => type.includes("audio/"),
      },
      image: {
        icon: "lucide:image",
        conditions: (type: string) => type.startsWith("image/"),
      },
    };

    for (const { icon, conditions } of Object.values(iconMap)) {
      if (conditions(fileType, fileName)) {
        return icon;
      }
    }

    return "lucide:file";
  };

  const getFilePreview = (file: { file: File | { type: string; name: string; url?: string } }) => {
    const fileType = file.file instanceof File ? file.file.type : file.file.type;
    const fileName = file.file instanceof File ? file.file.name : file.file.name;

    if (fileType.startsWith("image/")) {
      if (file.file instanceof File) {
        return {
          type: "image",
          url: URL.createObjectURL(file.file),
          alt: fileName,
        };
      } else if (file.file.url) {
        return {
          type: "image",
          url: file.file.url,
          alt: fileName,
        };
      }
    }
    return {
      type: "icon",
      component: getFileIcon(file),
    };
  };

  const maxSizeMB = 5;
  const maxSize = maxSizeMB * 1024 * 1024; // 5MB default
  const maxFiles = 6;

  const { files, errors, dropzoneRef, openFileDialog, removeFile, clearFiles, inputRef } =
    useFileUpload({
      multiple: true,
      maxFiles,
      maxSize,
      initialFiles,
    });
</script>
```
::


# Full Calendar

## Getting Started

::prose-steps
  :::prose-step
  ### Installation

  To get started, you can install the package with the following command:

    ::::prose-code-group{sync="_pm"}
    ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
    npm i @fullcalendar/core@6 @fullcalendar/vue3@6
    ```

    ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
    pnpm i @fullcalendar/core@6 @fullcalendar/vue3@6
    ```

    ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
    bun add @fullcalendar/core@6 @fullcalendar/vue3@6
    ```

    ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
    yarn add @fullcalendar/core@6 @fullcalendar/vue3@6
    ```
    ::::
  :::

  :::prose-step
  ### Add Plugins

  You can also install the plugins for Full Calendar:

    ::::prose-code-group{sync="_pm"}
    ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
    npm i @fullcalendar/daygrid@6 @fullcalendar/interaction@6 @fullcalendar/timegrid@6 @fullcalendar/list@6 @fullcalendar/multimonth@6 @fullcalendar/scrollgrid@6
    ```

    ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
    pnpm i @fullcalendar/daygrid@6 @fullcalendar/interaction@6 @fullcalendar/timegrid@6 @fullcalendar/list@6 @fullcalendar/multimonth@6 @fullcalendar/scrollgrid@6
    ```

    ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
    bun add @fullcalendar/daygrid@6 @fullcalendar/interaction@6 @fullcalendar/timegrid@6 @fullcalendar/list@6 @fullcalendar/multimonth@6 @fullcalendar/scrollgrid@6
    ```

    ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
    yarn add @fullcalendar/daygrid@6 @fullcalendar/interaction@6 @fullcalendar/timegrid@6 @fullcalendar/list@6 @fullcalendar/multimonth@6 @fullcalendar/scrollgrid@6
    ```
    ::::
  :::

  :::prose-step
  ### Update CSS

  In order to make the calendar match the UI Thing theme, I had to create the `full-calendar.css` file and import it in the `nuxt.config.ts` file.

  :prose-code-snippet{file="/assets/css/full-calendar.css" language="css" title="Full Calendar"}
  :::
::

## Usage

### Month View

::prose-show-case
:docs-full-calendar

#code
```vue [DocsFullCalendar.vue]
<template>
  <FullCalendar :options="calendarOptions" />
</template>

<script lang="ts" setup>
  import type { CalendarOptions } from "@fullcalendar/core";
  import dayGridPlugin from "@fullcalendar/daygrid";
  import interactionPlugin from "@fullcalendar/interaction";
  import FullCalendar from "@fullcalendar/vue3";
  import dayjs from "dayjs";

  const calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin, interactionPlugin],
    initialView: "dayGridMonth",
    dateClick: (info) => {
      console.log(info.dateStr);
    },
    stickyHeaderDates: true,
    editable: true,
    headerToolbar: {
      left: "prevYear,prev,today,next,nextYear",
      center: "title",
      right: "dayGridDay,dayGridWeek,dayGridMonth,dayGridYear",
    },
    footerToolbar: {
      left: "prevYear,prev,today,next,nextYear",
      center: "",
      right: "dayGridDay,dayGridWeek,dayGridMonth,dayGridYear",
    },
    events: [
      {
        title: "Attend Data Protection Act Webinar",
        date: dayjs().toDate().toISOString(),
        url: "https://ui-thing.behonbaker.com/",
      },
      {
        title: "Travel to Kingston for Manager's Meeting",
        date: dayjs().add(1, "day").format("YYYY-MM-DD"),
      },
    ],
  };
</script>

<style>
  /* Because the doc's navbar is blocking it 🙄 */
  .fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky > * {
    top: 55px;
  }
</style>
```
::

### List View

::prose-show-case
:docs-full-calendar-list

#code
```vue [DocsFullCalendarList.vue]
<template>
  <FullCalendar :options="calendarOptions" />
</template>

<script lang="ts" setup>
  import type { CalendarOptions } from "@fullcalendar/core";
  import listPlugin from "@fullcalendar/list";
  import FullCalendar from "@fullcalendar/vue3";
  import dayjs from "dayjs";

  const calendarOptions: CalendarOptions = {
    plugins: [listPlugin],
    initialView: "listMonth",
    headerToolbar: {
      left: "prevYear,prev,today,next,nextYear",
      center: "title",
      right: "listDay,listWeek,listMonth",
    },
    footerToolbar: {
      left: "prevYear,prev,today,next,nextYear",
      center: "",
      right: "listWeek,listDay,listMonth",
    },
    buttonText: { listWeek: "List Week", listDay: "List Day", listMonth: "List Month" },
    events: [
      {
        title: "Attend Data Protection Act Webinar",
        date: dayjs().add(1, "day").hour(9).toDate(),
        url: "https://ui-thing.behonbaker.com/",
      },
      {
        title: "Travel to Kingston for Manager's Meeting",
        date: dayjs().add(3, "day").hour(10).toDate(),
      },
      {
        title: "Vacation in Montego Bay",
        allDay: true,
        color: "green",
        date: dayjs().add(1, "week").toDate(),
        end: dayjs().add(2, "week").toDate(),
      },
    ],
  };
</script>
```
::

### TimeGrid View

::prose-show-case
:docs-full-calendar-time-grid

#code
```vue [DocsFullCalendarTimeGrid.vue]
<template>
  <FullCalendar :options="calendarOptions" />
</template>

<script lang="ts" setup>
  import type { CalendarOptions } from "@fullcalendar/core";
  import interactionPlugin from "@fullcalendar/interaction";
  import timeGridPlugin from "@fullcalendar/timegrid";
  import FullCalendar from "@fullcalendar/vue3";
  import dayjs from "dayjs";

  const calendarOptions: CalendarOptions = {
    plugins: [timeGridPlugin, interactionPlugin],
    initialView: "timeGridWeek",
    editable: true,
    nowIndicator: true,
    dateClick(arg) {
      useSonner("Date clicked", {
        description: dayjs(arg.dateStr).format("dddd, MMMM D, YYYY h:mm A"),
      });
    },
    eventClick(arg) {
      useSonner("Event clicked", {
        description: arg.event.title,
      });
    },
    stickyHeaderDates: true,
    headerToolbar: {
      left: "prevYear,prev,today,next,nextYear",
      center: "title",
      right: "timeGridWeek,timeGridDay",
    },
    footerToolbar: {
      left: "prevYear,prev,today,next,nextYear",
      center: "",
      right: "timeGridWeek,timeGridDay",
    },
    events: [
      {
        title: "Attend Data Protection Act Webinar",
        date: dayjs().add(1, "day").hour(9).toDate(),
        url: "https://ui-thing.behonbaker.com/",
      },
      {
        title: "Travel to Kingston for Manager's Meeting",
        date: dayjs().add(3, "day").hour(10).toDate(),
      },
      {
        title: "Vacation in Montego Bay",
        allDay: true,
        color: "green",
        date: dayjs().add(1, "week").toDate(),
        end: dayjs().add(2, "week").toDate(),
      },
    ],
  };
</script>
```
::

### MultiMonth View

::prose-show-case
:docs-full-calendar-multi-month

#code
```vue [DocsFullCalendarMultiMonth.vue]
<template>
  <FullCalendar :options="calendarOptions" />
</template>

<script lang="ts" setup>
  import type { CalendarOptions } from "@fullcalendar/core";
  import interactionPlugin from "@fullcalendar/interaction";
  import multiMonthPlugin from "@fullcalendar/multimonth";
  import FullCalendar from "@fullcalendar/vue3";
  import dayjs from "dayjs";

  const calendarOptions: CalendarOptions = {
    plugins: [multiMonthPlugin, interactionPlugin],
    initialView: "multiMonthYear",
    editable: true,
    dateClick(arg) {
      useSonner("Date clicked", {
        description: dayjs(arg.dateStr).format("dddd, MMMM D, YYYY h:mm A"),
      });
    },
    eventClick(arg) {
      useSonner("Event clicked", {
        description: arg.event.title,
      });
    },
    stickyHeaderDates: true,

    headerToolbar: {
      left: "title",
      center: "",
      right: "prevYear,prev,today,next,nextYear",
    },
    footerToolbar: {
      left: "title",
      center: "",
      right: "prevYear,prev,today,next,nextYear",
    },
    events: [
      {
        title: "Attend Data Protection Act Webinar",
        date: dayjs().add(1, "day").hour(9).toDate(),
        url: "https://ui-thing.behonbaker.com/",
      },
      {
        title: "Travel to Kingston for Manager's Meeting",
        date: dayjs().add(3, "day").hour(10).toDate(),
      },
      {
        title: "Vacation in Montego Bay",
        allDay: true,
        color: "green",
        date: dayjs().add(1, "week").toDate(),
        end: dayjs().add(2, "week").toDate(),
      },
    ],
  };
</script>
```
::


# Gooey Menu

## Credits

Shout out to [Julien Thibeaut](https://ibelick.com/){rel="&#x22;nofollow&#x22;"} for the source code. I discovered this gooey menu while browsing his website.

## Usage

### Basic

This may not be a component that can be reused across multiple projects, but it's a fun one to have in your back pocket.

::prose-show-case
:docs-gooey-menu

#code
```vue [DocsGooeyMenu.vue]
<template>
  <div>
    <div class="relative h-[300px] w-full">
      <nav
        class="menu"
        :style="{
          filter: 'url(#gooey)',
          width: '100%',
          height: '100%',
          '--spring-easing':
            'linear(0, 0.88117 15.492%, 1.09261 23.232%, 1.10421 28.713%, 0.99031 49.585%,0.99995)',
        }"
      >
        <input id="menu" type="checkbox" class="peer hidden" name="menu" />
        <label
          class="bg-primary text-primary-foreground absolute right-10 bottom-10 z-10 flex size-14 scale-125 cursor-pointer items-center justify-center rounded-full transition-all duration-1000 [transition-timing-function:var(--spring-easing)] peer-checked:scale-100 peer-checked:rotate-[135deg]"
          for="menu"
        >
          <Icon name="lucide:plus" class="size-5" />
        </label>
        <button
          class="bg-primary text-primary-foreground absolute right-10 bottom-10 flex size-14 items-center justify-center rounded-full transition-transform duration-300 ease-in peer-checked:translate-y-[-80px] peer-checked:duration-1000 peer-checked:[transition-timing-function:var(--spring-easing)]"
        >
          <Icon name="lucide:settings-2" class="size-5" />
        </button>
        <button
          class="bg-primary text-primary-foreground absolute right-10 bottom-10 flex size-14 items-center justify-center rounded-full transition-transform duration-300 ease-in peer-checked:translate-y-[-162px] peer-checked:duration-1000 peer-checked:[transition-timing-function:var(--spring-easing)]"
        >
          <Icon name="lucide:heart" class="size-5" />
        </button>
      </nav>
      <svg
        class="absolute hidden"
        width="0"
        height="0"
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
      >
        <defs>
          <filter id="gooey">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10"
              result="gooey"
            />
            <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
          </filter>
        </defs>
      </svg>
    </div>
  </div>
</template>
```
::


# Meteors

## Credits

Shout out to [Magic UI](https://magicui.design/docs/components/meteors){rel="&#x22;nofollow&#x22;"} for the inspiration. I actually discovered this package while browsing their website.

## Getting Started

::prose-steps
  :::prose-step
  ### Add Animation

  You will need to add this to your `tailwind.css` file.

  ```css
  @theme inline {
    --animate-meteor: meteor 5s linear infinite;

    @keyframes meteor {
      0% {
        transform: rotate(var(--angle)) translateX(0);
        opacity: 1;
      }
      70% {
        opacity: 1;
      }
      100% {
        transform: rotate(var(--angle)) translateX(-500px);
        opacity: 0;
      }
    }
  }
  ```
  :::

  :::prose-step
  ### Create Component

  Create the component `Meteors.client.vue` in the `components` directory.

  :prose-code-snippet{file="/components/Ui/Meteors.client.vue" language="vue" title="Meteors Component"}
  :::
::

## Usage

### Basic

We can add the `UiMeteors` component to trigger the meteors.

::prose-show-case
:docs-meteors

#code
```vue [DocsMeteors.vue]
<template>
  <div
    class="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border"
  >
    <UiMeteors :number="30" />
    <span
      class="pointer-events-none bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl leading-none font-semibold whitespace-pre-wrap text-transparent dark:from-white dark:to-slate-900/10"
    >
      Meteors
    </span>
  </div>
</template>
```
::


# Neon Gradient Card

## Credits

Shout out to [Magic UI](https://magicui.design/docs/components/neon-gradient-card){rel="&#x22;nofollow&#x22;"} for the implementation. I actually discovered this component while browsing their website.

## Getting Started

::prose-steps
  :::prose-step
  ### Create the Component

  Create the the `NeonGradientCard` component in the `components` directory.

  ```vue [NeonGradientCard.vue]
  <template>
    <div
      ref="containerRef"
      :style="
        {
          '--border-size': `${borderSize}px`,
          '--border-radius': `${borderRadius}px`,
          '--neon-first-color': neonColors.firstColor,
          '--neon-second-color': neonColors.secondColor,
          '--card-width': `${dimensions.width}px`,
          '--card-height': `${dimensions.height}px`,
          '--card-content-radius': `${borderRadius - borderSize}px`,
          '--pseudo-element-background-image': `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor})`,
          '--pseudo-element-width': `${dimensions.width + borderSize * 2}px`,
          '--pseudo-element-height': `${dimensions.height + borderSize * 2}px`,
          '--after-blur': `${dimensions.width / 3}px`,
        } as CSSProperties
      "
      :class="neonGradientCardStyles().wrapper({ class: normalizeClass(props.class) || undefined })"
    >
      <div :class="neonGradientCardStyles().inner()">
        <slot />
      </div>
    </div>
  </template>

  <script lang="ts">
    import type { PrimitiveProps } from "reka-ui";
    import { normalizeClass } from "vue";
    import type { CSSProperties, HTMLAttributes } from "vue";

    export interface NeonColorsProps {
      firstColor: string;
      secondColor: string;
    }

    export interface NeonGradientCardProps extends PrimitiveProps {
      /**
       * The className of the card.
       *
       * @default ""
       * @type string
       */
      class?: HTMLAttributes["class"];

      /**
       * The size of the border in pixels.
       *
       * @default 5
       * @type number
       */
      borderSize?: number;

      /**
       * The size of the radius in pixels.
       *
       * @default 20
       * @type number
       */
      borderRadius?: number;

      /**
       * The colors of the neon gradient.
       *
       * @default "{ firstColor: '#ff00aa', secondColor: '#00FFF1' }"
       * @type string
       */
      neonColors?: NeonColorsProps;

      [key: string]: any;
    }

    export const neonGradientCardStyles = tv({
      slots: {
        wrapper: "relative z-10 size-full rounded-(--border-radius)",
        inner: [
          "relative size-full min-h-[inherit] rounded-(--card-content-radius) bg-gray-100 p-6",
          "before:absolute before:-top-(--border-size) before:-left-(--border-size) before:-z-10 before:block",
          "before:h-(--pseudo-element-height) before:w-(--pseudo-element-width) before:rounded-(--border-radius) before:content-['']",
          "before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-size-[100%_200%]",
          "before:animate-background-position-spin",
          "after:absolute after:-top-(--border-size) after:-left-(--border-size) after:-z-10 after:block",
          "after:h-(--pseudo-element-height) after:w-(--pseudo-element-width) after:rounded-(--border-radius) after:blur-(--after-blur) after:content-['']",
          "after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-size-[100%_200%] after:opacity-80",
          "after:animate-background-position-spin",
          "dark:bg-neutral-900",
        ],
      },
    });
  </script>

  <script lang="ts" setup>
    const props = withDefaults(defineProps<NeonGradientCardProps>(), {
      borderSize: 2,
      borderRadius: 20,
      neonColors: () => ({
        firstColor: "#ff00aa",
        secondColor: "#00FFF1",
      }),
    });

    const containerRef = useTemplateRef("containerRef");
    const dimensions = ref({ width: 0, height: 0 });

    const updateDimensions = () => {
      if (containerRef.value) {
        const { offsetWidth, offsetHeight } = containerRef.value;
        dimensions.value = { width: offsetWidth, height: offsetHeight };
      }
    };

    useEventListener("resize", updateDimensions);

    onMounted(() => {
      updateDimensions();
    });
    watchEffect(updateDimensions);
  </script>
  ```
  :::

  :::prose-step
  ### Add animation to `tailwind.css` file

  ```css
  @theme inline {
    --animate-background-position-spin: background-position-spin 3000ms infinite alternate;

    @keyframes background-position-spin {
      0% {
        background-position: top center;
      }
      100% {
        background-position: bottom center;
      }
    }
  }
  ```
  :::
::

## Usage

::prose-show-case
:docs-neon-gradient-card

#code
```vue [DocsNeonGradientCard.vue]
<template>
  <div>
    <UiNeonGradientCard class="mx-auto max-w-sm items-center justify-center text-center">
      <span
        class="pointer-events-none z-10 h-full bg-gradient-to-br from-[#ff2975] from-35% to-[#00FFF1] bg-clip-text text-center text-6xl leading-none font-bold tracking-tighter whitespace-pre-wrap text-transparent dark:drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]"
      >
        Neon Gradient Card
      </span>
    </UiNeonGradientCard>
  </div>
</template>
```
::


# Quill

## Getting Started

::prose-steps
  :::prose-step
  ### Installation

  To get started, you can install the package with the following command:

    ::::prose-code-group{sync="_pm"}
    ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
    npm i @vueup/vue-quill
    ```

    ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
    pnpm i @vueup/vue-quill
    ```

    ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
    bun add @vueup/vue-quill
    ```

    ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
    yarn add @vueup/vue-quill
    ```
    ::::
  :::

  :::prose-step
  ### Create CSS File

  In order to make the editor match the design of this website (and the whole shadcn/ui theme), I had to add this css file: You should copy this and add it to your project.

  :prose-code-snippet{file="/assets/css/quill.css" language="css" title="Quill CSS Overrides"}
  :::
::

## Usage

### Basic

Here is a basic example of how to use the Quill component. We are using a technique called `Slot Forwarding` so that if the developer wants to create a component and pass through the `toolbar` slot, they can do so.

::prose-show-case
:docs-quill

#code
```vue [DocsQuill.vue]
<template>
  <ClientOnly>
    <QuillEditor theme="snow" placeholder="Write something...">
      <template v-for="(_, name) of $slots" #[name]="slotData">
        <slot :name="name" v-bind="slotData" />
      </template>
    </QuillEditor>
  </ClientOnly>
</template>

<script lang="ts" setup>
  import { QuillEditor } from "@vueup/vue-quill";
</script>
```
::

### Toolbar

We can add our custom toolbar configuration by using the `toolbar` prop.

::prose-show-case
:docs-quill-toolbar

#code
```vue [DocsQuillToolbar.vue]
<template>
  <ClientOnly>
    <QuillEditor
      v-model:content="model"
      :toolbar="toolbarOptions"
      theme="snow"
      placeholder="Write something..."
      content-type="html"
    />
  </ClientOnly>
</template>

<script lang="ts" setup>
  import { QuillEditor } from "@vueup/vue-quill";

  const toolbarOptions = [
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    ["bold", "italic", "underline", "strike", { align: [] }],
    [{ align: [] }, { list: "ordered" }, { list: "bullet" }],
    ["blockquote", "code-block"],
    [{ script: "sub" }, { script: "super" }],
    [{ indent: "-1" }, { indent: "+1" }],
    [{ size: ["small", false, "large", "huge"] }],
    [{ color: [] }, { background: [] }],
    [{ font: [] }],
    ["link", "image", "video"],
    ["clean"],
  ];

  const model = ref(
    `<h3><b>Quill Editor</b></h3>
<p>Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.</p>
`
  );
</script>
```
::

### Slot - Toolbar

Another way of customizing the toolbar is by using the `toolbar` slot. This way, we can create a custom toolbar with our own components.

::prose-show-case
:docs-quill-toolbar2

#code
```vue [DocsQuillToolbar2.vue]
<template>
  <ClientOnly>
    <QuillEditor
      v-model:content="model"
      toolbar="#my-toolbar"
      theme="snow"
      placeholder="Write something..."
      content-type="html"
    >
      <template #toolbar>
        <div id="my-toolbar">
          <!-- Add buttons as you would before -->
          <button class="ql-bold" />
          <button class="ql-header" value="1" aria-label="header: 1" />
          <button class="ql-header" value="2" aria-label="header: 2" />
          <button class="ql-italic" />
        </div>
      </template>
    </QuillEditor>
  </ClientOnly>
</template>

<script lang="ts" setup>
  import { QuillEditor } from "@vueup/vue-quill";

  const model = ref(
    `<h3><b>Quill Editor</b></h3>
<p>Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.</p>
`
  );
</script>
```
::

### Bubble Theme

We can pass the `bubble` value to the `theme` prop to use the snow theme.

You have to select something in the editor to see the toolbar.

::prose-show-case
:docs-quill-bubble

#code
```vue [DocsQuillBubble.vue]
<template>
  <ClientOnly>
    <QuillEditor
      v-model:content="model"
      theme="bubble"
      toolbar="full"
      placeholder="Write something..."
      content-type="html"
    />
  </ClientOnly>
</template>

<script lang="ts" setup>
  import { QuillEditor } from "@vueup/vue-quill";

  const model = ref(
    `<h3><b>Quill Editor</b></h3>
<p>Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.</p>
`
  );
</script>
```
::

### Module

We can pass an object or an array of objects to the `module` prop to use any Quill module.

Something like this:

```vue
<script lang="ts" setup>
  import { QuillEditor } from "@vueup/vue-quill";

  type SingleModule = {
    name: string;
    module: any;
    options?: any;
  };
  type ModuleObject = SingleModule | SingleModule[];

  const modules = ref<ModuleObject | null>(null);

  onMounted(async () => {
    const BlotFormatter = (await import("quill-blot-formatter")).default;
    modules.value = {
      name: "blotFormatter",
      module: BlotFormatter,
      options: {
        /* options */
      },
    };
  });
</script>
```

Upload an image to see the module in action.

::prose-show-case
:docs-quill-module

#code
```vue [DocsQuillModule.vue]
<template>
  <ClientOnly>
    <QuillEditor
      v-if="modules"
      toolbar="full"
      :modules
      theme="snow"
      placeholder="Write something..."
    />
  </ClientOnly>
</template>

<script lang="ts" setup>
  import { QuillEditor } from "@vueup/vue-quill";

  type SingleModule = {
    name: string;
    module: any;
    options?: any;
  };
  type ModuleObject = SingleModule | SingleModule[];

  const modules = ref<ModuleObject | null>(null);

  onMounted(async () => {
    const BlotFormatter = (await import("quill-blot-formatter")).default;
    modules.value = {
      name: "blotFormatter",
      module: BlotFormatter,
      options: {/* options */},
    };
  });
</script>
```
::


# Retro Grid

## Credits

Shout out to [Magic UI](https://magicui.design/docs/components/retro-grid){rel="&#x22;nofollow&#x22;"} for the inspiration. I actually discovered this package while browsing their website.

## Getting Started

::prose-steps
  :::prose-step
  ### Add Animation

  You will need to add this to your `tailwind.css` file.

  ```css
  --animate-grid: grid 15s linear infinite;

  @keyframes grid {
    0% {
      transform: translateY(-50%);
    }
    100% {
      transform: translateY(0);
    }
  }
  ```
  :::

  :::prose-step
  ### Create Component

  Create the component `RetroGrid.vue` in the `components` directory.

  ```vue [RetroGrid.vue]
  <template>
    <Primitive
      :as
      :as-child
      :class="styles({ class: normalizeClass(props.class) || undefined })"
      :style="{
        '--grid-angle': `${angle}deg`,
        '--cell-size': `${cellSize}px`,
        '--opacity': opacity,
        '--light-line': lightLineColor,
        '--dark-line': darkLineColor,
      }"
    >
      <div class="absolute inset-0 transform-[rotateX(var(--grid-angle))]">
        <div
          class="animate-grid inset-[0%_0px] -ml-[200%] h-[300vh] w-[600vw] origin-[100%_0_0] bg-[linear-gradient(to_right,var(--light-line)_1px,transparent_0),linear-gradient(to_bottom,var(--light-line)_1px,transparent_0)] bg-size-[var(--cell-size)_var(--cell-size)] bg-repeat dark:bg-[linear-gradient(to_right,var(--dark-line)_1px,transparent_0),linear-gradient(to_bottom,var(--dark-line)_1px,transparent_0)]"
        />
      </div>

      <div class="absolute inset-0 bg-linear-to-t from-white to-transparent to-90% dark:from-black" />
    </Primitive>
  </template>

  <script lang="ts">
    import { Primitive } from "reka-ui";
    import type { PrimitiveProps } from "reka-ui";
    import { normalizeClass } from "vue";
    import type { HTMLAttributes } from "vue";

    export type RetroGridProps = PrimitiveProps & {
      /** Additional CSS classes to apply to the grid container. */
      class?: HTMLAttributes["class"];
      /**
       * Rotation angle of the grid in degrees.
       *
       * @default 65
       */
      angle?: number;
      /**
       * Grid cell size in pixels.
       *
       * @default 60
       */
      cellSize?: number;
      /**
       * Grid opacity value between 0 and 1.
       *
       * @default 0.5
       */
      opacity?: number;
      /**
       * Grid line color in light mode.
       *
       * @default "gray"
       */
      lightLineColor?: string;
      /**
       * Grid line color in dark mode.
       *
       * @default "gray"
       */
      darkLineColor?: string;
    };
  </script>

  <script lang="ts" setup>
    const props = withDefaults(defineProps<RetroGridProps>(), {
      angle: 65,
      cellSize: 60,
      opacity: 0.5,
      lightLineColor: "gray",
      darkLineColor: "gray",
    });
    const styles = tv({
      base: [
        "pointer-events-none absolute size-full overflow-hidden perspective-[200px]",
        "opacity-(--opacity)",
      ],
    });
  </script>
  ```
  :::
::

## Usage

### Basic

::prose-show-case
:docs-retro-grid

#code
```vue [DocsRetroGrid.vue]
<template>
  <div
    class="bg-background relative mx-auto flex h-full w-full max-w-[32rem] items-center justify-center overflow-hidden rounded-lg border p-20"
  >
    <span
      class="pointer-events-none z-10 bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl leading-none font-bold tracking-tighter whitespace-pre-wrap text-transparent"
    >
      Retro Grid
    </span>

    <UiRetroGrid />
  </div>
</template>
```
::


# Terminal

## Credits

Shout out to [Magic UI](https://magicui.design/docs/components/terminal){rel="&#x22;nofollow&#x22;"} for the inspiration. I actually discovered this component while browsing their website.

## Getting Started

::prose-steps
  :::prose-step
  ### Add Components

  This consists of four(4) components

  #### Terminal

  ```vue [Terminal.vue]
  <template>
    <div ref="containerRef" :class="styles({ class: normalizeClass(props.class) || undefined })">
      <div
        class="border-border bg-background sticky top-0 left-0 z-10 flex flex-col gap-y-2 border-b p-4"
      >
        <div class="flex flex-row gap-x-2">
          <div
            v-for="(item, i) in buttonColors"
            :key="i"
            class="size-2 rounded-full"
            :class="[item]"
          />
        </div>
      </div>
      <pre class="p-4"><code class="grid! gap-y-1"><slot /></code></pre>
    </div>
  </template>
  <script lang="ts">
    import type { PrimitiveProps } from "reka-ui";
    import { normalizeClass } from "vue";
    import type { HTMLAttributes } from "vue";

    export type SequenceContextValue = {
      /** Marks the item at the given index as complete in the sequence. */
      completeItem: (index: number) => void;
      /** The currently active index in the sequence. */
      activeIndex: number;
      /** Whether the sequence has started. */
      sequenceStarted: boolean;
    };

    /** Injection key for the sequence context. */
    export const SequenceKey = Symbol("sequence") as InjectionKey<
      ComputedRef<SequenceContextValue | null>
    >;
    /** Injection key for the item index within the sequence. */
    export const ItemIndexKey = Symbol("itemIndex") as InjectionKey<number | null>;

    const styles = tv({
      base: "border-border bg-background relative z-0 size-full max-w-lg overflow-auto rounded-lg border",
    });
  </script>

  <script lang="ts" setup>
    const props = withDefaults(
      defineProps<
        PrimitiveProps & {
          /** Additional classes for the terminal container. */
          class?: HTMLAttributes["class"];
          /** Colors for the terminal control buttons. */
          buttonColors?: string[];
          /** Whether to enable sequence mode. */
          sequence?: boolean;
          /** Whether to start the terminal animation when it comes into view. */
          startOnView?: boolean;
        }
      >(),
      {
        buttonColors: () => ["bg-red-500", "bg-yellow-500", "bg-green-500"],
        sequence: true,
        startOnView: true,
      }
    );

    const containerRef = useTemplateRef("containerRef");
    const activeIndex = ref(0);
    const isInView = ref(false);

    const slots = useSlots();

    // Observe container for startOnView
    if (props.startOnView) {
      useIntersectionObserver(
        containerRef,
        ([entry], observer) => {
          if (entry?.isIntersecting) {
            isInView.value = true;
            observer.disconnect();
          }
        },
        { threshold: 0.3 }
      );
    }

    const sequenceStarted = computed(() =>
      props.sequence ? !props.startOnView || isInView.value : false
    );

    const contextValue = computed<SequenceContextValue | null>(() => {
      if (!props.sequence) return null;
      return {
        completeItem: (index: number) => {
          if (index === activeIndex.value) {
            activeIndex.value++;
          }
        },
        activeIndex: activeIndex.value,
        sequenceStarted: sequenceStarted.value,
      };
    });

    // Provide context if sequence mode is enabled
    if (props.sequence) {
      provide(SequenceKey, contextValue);

      // Provide item index for each child
      if (slots.default) {
        const children = slots.default();
        children.forEach((child, index) => {
          // We'll provide the index in the child components instead
        });
      }
    }
  </script>
  ```

  #### TerminalItem

  ```vue [TerminalItem.vue]
  <template>
    <slot />
  </template>
  <script lang="ts" setup>
    import { ItemIndexKey } from "./Terminal.vue";

    const props = defineProps<{
      index: number;
    }>();

    provide(ItemIndexKey, props.index);
  </script>
  ```

  #### AnimatedSpan

  ```vue [AnimatedSpan.vue]
  <template>
    <motion.div
      ref="elementRef"
      :initial="{ opacity: 0, y: -5 }"
      :animate="shouldAnimate ? { opacity: 1, y: 0 } : { opacity: 0, y: -5 }"
      :transition="{ duration: 0.3, delay: sequence ? 0 : delay / 1000 }"
      :class="styles({ class: normalizeClass(props.class) || undefined })"
      @animation-complete="onAnimationComplete"
    >
      <slot>{{ text }}</slot>
    </motion.div>
  </template>
  <script lang="ts">
    import { motion } from "motion-v";
    import type { MotionProps } from "motion-v";
    import type { PrimitiveProps } from "reka-ui";
    import { normalizeClass } from "vue";
    import type { HTMLAttributes } from "vue";

    import type { SequenceContextValue } from "./Terminal.vue";
    import { ItemIndexKey, SequenceKey } from "./Terminal.vue";

    export interface AnimatedSpanProps extends Omit<MotionProps, "as" | "asChild">, PrimitiveProps {
      /** Additional classes for the animated span. */
      class?: HTMLAttributes["class"];
      /** Delay before the animation starts (in milliseconds). */
      delay?: number;
      /** Whether to start the animation when the element comes into view. */
      startOnView?: boolean;
      /** Optional item index for sequence mode. */
      itemIndex?: number;
      /** Text content to display if no slot is provided. */
      text?: string;
    }

    const styles = tv({ base: "grid text-sm font-normal tracking-tight" });
  </script>

  <script lang="ts" setup>
    const props = withDefaults(defineProps<AnimatedSpanProps>(), {
      delay: 0,
      startOnView: false,
      as: "div",
    });

    const elementRef = ref<HTMLDivElement | null>(null);
    const isInView = ref(false);
    const hasStarted = ref(false);

    const sequence = inject<ComputedRef<SequenceContextValue | null>>(SequenceKey);
    const providedItemIndex = inject(ItemIndexKey, null);
    const itemIndex = props.itemIndex ?? providedItemIndex;

    // Observe element for startOnView
    if (props.startOnView) {
      useIntersectionObserver(
        elementRef,
        ([entry], observer) => {
          if (entry?.isIntersecting) {
            isInView.value = true;
            observer.disconnect();
          }
        },
        { threshold: 0.3 }
      );
    }

    // Handle sequence-based starting
    watch(
      () => ({
        activeIndex: sequence?.value?.activeIndex,
        sequenceStarted: sequence?.value?.sequenceStarted,
      }),
      ({ activeIndex, sequenceStarted }) => {
        if (!sequence || itemIndex === null) return;
        if (!sequenceStarted) return;
        if (hasStarted.value) return;
        if (activeIndex === itemIndex) {
          hasStarted.value = true;
        }
      },
      { deep: true }
    );

    const shouldAnimate = computed(() => {
      if (sequence?.value) {
        return hasStarted.value;
      }
      return props.startOnView ? isInView.value : true;
    });

    const onAnimationComplete = () => {
      if (!sequence?.value) return;
      if (itemIndex === null) return;
      sequence.value.completeItem(itemIndex);
    };
  </script>
  ```

  #### TypingAnimation

  ```vue [TypingAnimation.vue]
  <template>
    <component
      :is="Component"
      ref="elementRef"
      :class="styles({ class: normalizeClass(props.class) || undefined })"
    >
      {{ displayedText }}
    </component>
  </template>
  <script lang="ts">
    import type { MotionProps } from "motion-v";
    import type { PrimitiveProps } from "reka-ui";
    import { normalizeClass } from "vue";
    import type { HTMLAttributes } from "vue";

    import type { SequenceContextValue } from "./Terminal.vue";
    import { ItemIndexKey, SequenceKey } from "./Terminal.vue";

    export interface TypingAnimationProps
      extends Omit<MotionProps, "as" | "asChild">, PrimitiveProps {
      /** Text to be typed out in the animation. */
      text?: string;
      /** Additional classes for the typing animation component. */
      class?: HTMLAttributes["class"];
      /** Duration of typing for each character (in milliseconds). */
      duration?: number;
      /** Delay before the typing starts (in milliseconds). */
      delay?: number;
      /** Whether to start the typing animation when the element comes into view. */
      startOnView?: boolean;
      /** Optional item index for sequence mode. */
      itemIndex?: number;
    }

    const styles = tv({
      base: "block text-sm font-normal tracking-tight",
    });
  </script>

  <script lang="ts" setup>
    const props = withDefaults(defineProps<TypingAnimationProps>(), {
      duration: 60,
      delay: 0,
      startOnView: true,
      as: "div",
    });

    if (!props.text) {
      console.error("[Terminal - TypingAnimation]: Text prop is required");
    }

    const Component = props.as;
    const elementRef = useTemplateRef<HTMLElement | null>("elementRef");
    const displayedText = ref("");
    const started = ref(false);
    const isInView = ref(false);

    const sequence = inject<ComputedRef<SequenceContextValue | null>>(SequenceKey);
    const providedItemIndex = inject(ItemIndexKey, null);
    const itemIndex = props.itemIndex ?? providedItemIndex;

    let typingInterval: ReturnType<typeof setInterval> | null = null;
    let startTimeout: ReturnType<typeof setTimeout> | null = null;

    // Observe element for startOnView
    if (props.startOnView) {
      useIntersectionObserver(
        elementRef,
        ([entry], observer) => {
          if (entry?.isIntersecting) {
            isInView.value = true;
            observer.disconnect();
          }
        },
        { threshold: 0.3 }
      );
    }

    // Handle starting the typing animation
    watch(
      [
        () => sequence?.value?.activeIndex,
        () => sequence?.value?.sequenceStarted,
        () => isInView.value,
      ],
      () => {
        if (started.value) return;

        // Sequence mode
        if (sequence?.value && itemIndex !== null) {
          if (!sequence.value.sequenceStarted) return;
          if (sequence.value.activeIndex === itemIndex) {
            started.value = true;
          }
          return;
        }

        // Non-sequence mode
        if (!props.startOnView) {
          startTimeout = setTimeout(() => {
            started.value = true;
          }, props.delay);
          return;
        }

        if (!isInView.value) return;

        startTimeout = setTimeout(() => {
          started.value = true;
        }, props.delay);
      },
      { immediate: true, deep: true }
    );

    // Handle typing effect
    watch(
      () => started.value,
      (value) => {
        if (!value) return;

        let i = 0;
        typingInterval = setInterval(() => {
          const text = props.text ?? "";
          if (i < text.length) {
            displayedText.value = text.substring(0, i + 1);
            i++;
          } else {
            if (typingInterval) clearInterval(typingInterval);
            // Complete sequence item
            if (sequence?.value && itemIndex !== null) {
              sequence.value.completeItem(itemIndex);
            }
          }
        }, props.duration);
      }
    );

    onUnmounted(() => {
      if (startTimeout) clearTimeout(startTimeout);
      if (typingInterval) clearInterval(typingInterval);
    });
  </script>
  ```
  :::
::

## Usage

::prose-show-case
:docs-terminal

#code
```vue [DocsTerminal.vue]
<template>
  <UiTerminal class="mx-auto">
    <UiTerminalItem :index="0">
      <UiTerminalTypingAnimation text="> npx ui-thing@latest init" />
    </UiTerminalItem>

    <UiTerminalItem v-for="(text, i) in texts" :key="i" :index="i + 1">
      <UiTerminalAnimatedSpan class="text-green-500">
        <span>{{ text }}</span>
      </UiTerminalAnimatedSpan>
    </UiTerminalItem>

    <UiTerminalItem :index="texts.length + 1">
      <UiTerminalTypingAnimation
        text="Success! Project initialization completed."
        class="text-muted-foreground"
      />
    </UiTerminalItem>

    <UiTerminalItem :index="texts.length + 2">
      <UiTerminalTypingAnimation text="You may now add components." class="text-muted-foreground" />
    </UiTerminalItem>
  </UiTerminal>
</template>

<script lang="ts" setup>
  const texts = [
    "✔ Which Nuxt version are you using? > Nuxt 4",
    "✔ Which theme do you want to start with? > Zinc",
    "✔ Where is your tailwind.css file located? ... app/assets/css/tailwind.css",
    "✔ Where is your tailwind.config file located? ... tailwind.config.js",
    "✔ Where should your components be stored? ... app/components/Ui",
    "✔ Where should your composables be stored? ... app/composables",
    "✔ Where should your plugins be stored? ... app/plugins",
    "✔ Where should your utils be stored? ... app/utils",
    "✔ Should we just replace component files if they already exist? ... yes",
    "✔ Would you like to use the default filename when adding components? ... yes",
    "✔ Which package manager do you use? > NPM",
  ];
</script>
```
::


# Tiptap

## Getting Started

::prose-steps
  :::prose-step
  ### Installation

  First wee need to install basic packages that we need. To make a great editor, you will need to install a whole lot more extensions. But for now, we will just install the basic packages.

    ::::prose-code-group{sync="_pm"}
    ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
    npm i @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit
    ```

    ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
    pnpm i @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit
    ```

    ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
    bun add @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit
    ```

    ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
    yarn add @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit
    ```
    ::::
  :::

  :::prose-step
  ### Create Editor Component

  Create the component `Tiptap.vue` in the `components` directory. The component has to be a client only component.

  The one used here looks like this. Like I said earlier, you have to install a lot of packages to get the functionality you want.

  :prose-code-snippet{file="/components/Ui/Tiptap.vue" language="vue" title="TipTap"}
  :::
::

## Usage

### Basic

In this example, we are just passing the model to the editor. We are also customizing the look and feel of this single instance of the editor. Feel free to customize it to your liking.

::prose-show-case
:docs-tiptap

#code
```vue [DocsTiptap.vue]
<template>
  <UiTiptap v-model="model" />
</template>

<script lang="ts" setup>
  const model = ref(`
<div>
  <h1>This is an H1 tag</h1>
  <h2>This is an H2 tag</h2>
  <h3>This is an H3 tag</h3>
  <h4>This is an H4 tag</h4>
  <h5>This is an H5 tag</h5>
  <h6>This is an H6 tag</h6>

  <p>This is a paragraph with some <strong>bold text</strong> and some <em>italic text</em>. Here is some <u>underlined text</u> and some <s>strikethrough text</s>.</p>

  <blockquote>
    This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </blockquote>

  <code>This is a code block.</code>

  <pre><code>This is a preformatted text block.</code></pre>

  <ul>
    <li>Unordered list item 1</li>
    <li>Unordered list item 2</li>
    <li>Unordered list item 3</li>
  </ul>

  <ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2</li>
    <li>Ordered list item 3</li>
  </ol>

  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
      </tr>
    </tbody>
  </table>

  <a href="https://www.example.com">This is a link</a>

  <img src="https://via.placeholder.com/150" alt="Placeholder image">

  <hr />

  <p>Here's a <mark>highlighted text</mark> example.</p>

  <p>Here's an example with <sub>subscript</sub> and <sup>superscript</sup> text.</p>
</div>
  `);
</script>

<style scoped>
  :deep(.tiptap) {
    :first-child {
      margin-top: 0;
    }
    /* List styles */
    ul,
    ol {
      margin-inline: calc(var(--spacing) * 3);
      margin-block: calc(var(--spacing) * 5);
      list-style-position: inside;
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 0);

      li p {
        margin-block: calc(var(--spacing) * 0);
        display: inline-block;
      }
    }
    ul {
      list-style-type: disc;
    }
    ol {
      list-style-type: decimal;
    }

    a {
      cursor: pointer;
      color: var(--color-violet-500);
      text-decoration-line: underline;
      text-underline-offset: 2px;
    }

    /* Heading styles */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-top: calc(var(--spacing) * 9);
      line-height: 1.25;
      font-weight: var(--font-weight-bold);
      text-wrap: pretty;
    }

    h1,
    h2 {
      margin-top: calc(var(--spacing) * 14);
      margin-bottom: calc(var(--spacing) * 6);
    }

    h1 {
      font-size: 1.4rem;
    }

    h2 {
      font-size: 1.2rem;
    }

    h3 {
      font-size: 1.1rem;
    }

    h4,
    h5,
    h6 {
      font-size: 1rem;
    }

    /* Code and preformatted text styles */
    code {
      border-radius: var(--radius-sm);
      background-color: var(--color-muted);
      padding-inline: calc(var(--spacing) * 1);
      color: var(--color-foreground);
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      font-weight: var(--font-weight-medium);
    }

    pre {
      margin-block: calc(var(--spacing) * 6);
      border-radius: var(--radius-md);
      background-color: var(--color-muted);
      padding: calc(var(--spacing) * 4);
      color: var(--color-foreground);
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);

      code {
        background-image: none;
        padding: calc(var(--spacing) * 0);
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        color: inherit;
      }
    }
    blockquote {
      margin-inline: calc(var(--spacing) * 0);
      margin-block: calc(var(--spacing) * 5);
      border-left-style: solid;
      border-left-width: 4px;
      border-color: var(--color-border);
      padding-block: calc(var(--spacing) * 2);
      padding-left: calc(var(--spacing) * 4);
    }
    hr {
      margin-block: calc(var(--spacing) * 6);
      border-width: 0;
      border-top-style: solid;
      border-top-width: 1px;
      border-color: var(--color-border);
    }
    table {
      margin: calc(var(--spacing) * 0);
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      overflow: hidden;

      td,
      th {
        position: relative;
        box-sizing: border-box;
        min-width: calc(var(--spacing) * 4);
        border-style: solid;
        border-width: 1px;
        border-color: var(--color-border);
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 2);
        vertical-align: top;

        > * {
          margin-bottom: 0;
        }
      }

      th {
        background-color: var(--gray-1);
        font-weight: bold;
        text-align: left;
      }
    }
    mark {
      border-radius: var(--radius-sm);
      background-color: color-mix(in oklab, var(--color-sky-400) 40%, transparent);
      box-decoration-break: clone;
      padding: calc(var(--spacing) * 1);
      color: var(--color-accent-foreground);

      &:is(.dark *) {
        background-color: color-mix(in oklab, var(--color-sky-500) 70%, transparent);
        color: var(--color-white);
      }
    }
  }
</style>
```
::


# Typeset

You render markdown and get back plain unstyled HTML: headings, paragraphs, lists, and tables. So you style the elements one by one: font sizes, line heights, spacing.

You do it for your blog. Then you do it again for the docs. Then again for the chat app. Every time you're fighting the same thing: sizing and spacing.

Typeset is one CSS file that styles everything inside a `typeset` container. The file lives in your project, so you can change it directly when you need to.

```css
.typeset-docs {
  --typeset-font-body: var(--font-geist-sans);
  --typeset-font-heading: var(--font-geist-sans);
  --typeset-font-mono: var(--font-geist-mono);
  --typeset-size: 15px;
  --typeset-leading: 1.75;
  --typeset-flow: 1.25em;
}
```

[Build your typeset](https://uithing.com/typeset)

## Principles

There's a lot to type: scale ratios, tracking, kerning, optical sizing, measure, leading, the space above and below every element. Exposing all of it is too much — nobody wants to set a dozen variables to make markdown look right.

So it's condensed into three controls: size, leading, and flow. Everything else — heading sizes, list indents, the gap under a heading, the space around a rule — derives from them. Three controls. Call it rhythm.

## Features

- **It fits its container.** Put it in a chat bubble and it follows the smaller type around it. Put it in an article and it scales up with the page. On smaller screens, it gets a small bump for readability.
- **It uses your theme.** Colors, fonts, and radius come from your app. Dark mode follows the same tokens.
- **It's easy to tune.** Three values control the base size, line height, and space between blocks. Change them in a preset and the whole document follows.
- **It works well with streaming.** When a new block arrives, Typeset doesn't make earlier blocks switch margins, borders, or styles.

## Building Your Typeset

Create your typeset in the [typeset builder](https://uithing.com/typeset). Pick your fonts and rhythm, then preview them on docs, chat, articles, and other real content.

The panel gives you the `typeset.css` file, the font setup for Nuxt, a preset class with your choices, and the wrapper to add around your content.

Copy `typeset.css` next to your main CSS file and import it after Tailwind:

```css
@import "tailwindcss";
@import "./typeset.css";
```

Then wrap your rendered markdown with `typeset` and your preset class:

```vue
<template>
  <div class="typeset typeset-docs">
    <ContentRenderer :value="page" />
  </div>
</template>
```

`typeset` turns the styles on. `typeset-docs` is the preset you created in the builder.

## Custom Typesets

The file includes defaults, so you can use `typeset` by itself. Most of the reading rhythm comes from three values:

```css
.typeset {
  --typeset-font-body: inherit;
  --typeset-font-heading: var(--font-heading);
  --typeset-font-mono: var(--font-mono);

  --typeset-size: 1em; /* body font-size */
  --typeset-leading: 1.75; /* line-height */
  --typeset-flow: 1.25em; /* space between blocks */
}
```

- **`--typeset-size`** sets the base text size. `1em` follows the surrounding layout. On smaller screens, Typeset bumps it up a little.
- **`--typeset-leading`** sets the space between lines.
- **`--typeset-flow`** sets the space between blocks. Headings and other elements derive their spacing from it.

The font variables tell Typeset which families to use. Leave them alone and it follows your app. Colors and radius come from your theme too.

Typeset doesn't set a maximum width. Your layout owns that. The Measure control in the builder adds a `max-width` to the wrapper instead of hiding it in the stylesheet.

You can keep more than one preset in the same app. Here is a tighter one for chat and a roomier one for docs:

```css
.typeset-chat {
  --typeset-flow: 1em;
  --typeset-leading: 1.6;
}

.typeset-docs {
  --typeset-size: 15px;
  --typeset-flow: 1.5em;
}
```

```vue
<template>
  <div class="typeset typeset-chat" v-html="message" />
  <article class="typeset typeset-docs" v-html="page" />
</template>
```

For a one-off change, skip the preset and set a value on the container:

```vue
<template>
  <article class="typeset [--typeset-flow:1.75em]">...</article>
</template>
```

## Custom Themes

A preset can change the whole feel of the content, not just the spacing. You can give readers a serif reading mode, a compact UI mode, or any other style that fits your product.

```css
/* Reading: serif, larger type, roomy rhythm. */
.typeset-reading {
  --typeset-font-body: var(--font-lora);
  --typeset-font-heading: var(--font-lora);
  --typeset-size: 18px;
  --typeset-leading: 1.9;
  --typeset-flow: 2em;
}

/* Compact: sans, smaller type, tighter rhythm. */
.typeset-compact {
  --typeset-font-body: var(--font-geist-sans);
  --typeset-font-heading: var(--font-geist-sans);
  --typeset-size: 14px;
  --typeset-leading: 1.6;
  --typeset-flow: 1em;
}
```

## Accessibility and Dark Mode

For readers who prefer larger type and more space, create a roomier typeset and expose it as a setting:

```css
.typeset-large {
  --typeset-size: 16px;
  --typeset-leading: 2;
  --typeset-flow: 2em;
}
```

Dark mode already follows your theme colors. If the text feels a little tight on a dark surface, you can loosen the leading there:

```css
.dark .typeset {
  --typeset-leading: 1.9;
}
```

## Responsive Table

Tables stay real tables and wrap to fit. To scroll a wide one horizontally instead, wrap it in `typeset-scroll`. The wrapper is styled as part of the content, so it only works *inside* a `typeset` container:

```vue
<template>
  <article class="typeset typeset-docs">
    <div class="typeset-scroll">
      <table>...</table>
    </div>
  </article>
</template>
```

Do this in your renderer's table component or a small rehype plugin, where the output already sits inside the container. It works for any wide block, not just tables.

## Overrides

Typeset lives in the `components` layer and uses `:where()` for its element selectors. Tailwind utilities on an element win without `!important`:

```vue
<template>
  <div class="typeset typeset-docs">
    <p class="text-lg">...</p>
  </div>
</template>
```

Plain CSS can override Typeset with a normal selector too.

## Opting Out

To keep a component out of Typeset, add `not-typeset` or `data-not-typeset`:

```vue
<template>
  <div class="typeset">
    <p>Styled prose.</p>
    <UiCard class="not-typeset"> Untouched component. </UiCard>
  </div>
</template>
```

Both options cover the component and everything inside it. Another `typeset` container inside that subtree stays opted out too.

## Streaming

Typeset is written so that adding a new block does not change the styles of the blocks already on screen.

- No forward-looking selectors. `:last-child`, `:has()`, and `:empty` are left out of layout rules because their matches can change as content is added.
- Spacing flows in one direction, using `margin-block-start` only. A new block adds its own space.
- Table separators live on the cells being added, so a new row does not restyle the row above it.

Text that is still streaming can grow and wrap normally. Typeset just avoids restyling the blocks that came before it.

## Prior Art

The `prose` class from `@tailwindcss/typography` is excellent at what it was built for: adding beautiful typographic defaults to plain HTML, including content rendered from Markdown or a CMS.

Typeset takes a different approach with container-aware sizing, app theme tokens, presets for different contexts, and streaming stability. Here's where they differ:

|              | @tailwindcss/typography                      | Typeset                                          |
| ------------ | -------------------------------------------- | ------------------------------------------------ |
| Sizing       | Fixed `rem` scale, `prose-sm` to `prose-2xl` | Relative to the container, any size              |
| Dark mode    | `prose-invert`, a second palette             | Your tokens flip, nothing to add                 |
| Theming      | Prose color variables; scale baked in        | Your theme tokens, plus font and rhythm controls |
| Overrides    | `prose-a:`, `prose-headings:` modifier API   | Plain utilities and CSS win                      |
| Streaming    | No append-stability contract                 | Designed for stable appends                      |
| Distribution | npm plugin, generated CSS                    | One CSS file you own                             |

Typeset borrows two ideas from the plugin: the zero-specificity `:where()` guard pattern, and the escape-hatch class (`not-typeset`, in the spirit of `not-prose`).

## Credits

Ported from [shadcn-vue](https://www.shadcn-vue.com/docs/typeset){rel="&#x22;nofollow&#x22;"}.


# Vue Tippy

## Getting Started

::prose-steps
  :::prose-step
  ### Installation

  Run the command below to install the Vue Tippy package.

    ::::prose-code-group{sync="_pm"}
    ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
    npm i vue-tippy@v6
    ```

    ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
    pnpm i vue-tippy@v6
    ```

    ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
    bun add vue-tippy@v6
    ```

    ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
    yarn add vue-tippy@v6
    ```
    ::::
  :::

  :::prose-step
  ### Create Plugin

  Create a plugin to add Vue Tippy globally to your Nuxt application.

  Here I added some configurations to the plugin, like the default animation, delay, trigger, and touch.

  Feel free to change these configurations to fit your needs.

  ```ts [tippy.ts]
  import VueTippy from "vue-tippy";
  import type { TippyPluginOptions } from "vue-tippy";

  import "tippy.js/animations/scale.css";
  import "tippy.js/animations/shift-away.css";
  import "tippy.js/animations/shift-toward.css";
  import "tippy.js/animations/perspective.css";

  export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueTippy, {
      component: "Tippy",
      directive: "tippy",
      defaultProps: {
        animation: "shift-away",
        delay: [200, 100],
        trigger: "mouseenter",
        touch: ["hold", 500],
        arrow: false,
      },
    } satisfies TippyPluginOptions);
  });
  ```
  :::

  :::prose-step
  ### Add CSS

  Create a new CSS file and add the following code to it.

  ```css [tippy.css]
  [data-tippy-root] {
    .tippy-box {
      border-radius: var(--radius-md);
      background-color: var(--color-popover);
      padding-inline: calc(var(--spacing) * 2);
      padding-block: calc(var(--spacing) * 1);
      color: var(--color-popover-foreground);
      box-shadow:
        0 0 0 1px var(--color-border),
        0 1px 3px 0 rgb(0 0 0 / 0.1),
        0 1px 2px -1px rgb(0 0 0 / 0.1);

      .tippy-content {
        font-size: 13px;
      }
    }

    .tippy-box[data-theme~="error"] {
      background-color: var(--color-destructive);
      color: var(--color-destructive-foreground);
      box-shadow:
        0 0 0 1px var(--color-destructive),
        0 1px 3px 0 rgb(0 0 0 / 0.1),
        0 1px 2px -1px rgb(0 0 0 / 0.1);
    }
  }
  ```
  :::
::

## Usage

There are three(3) ways in which you can use Vue Tippy:

### Directive

We can add the `v-tippy` directive to any element to show a tooltip.

The directive accepts a string with the content of the tooltip OR an object with the content and the options.

Check out the [Directive Docs](https://vue-tippy.netlify.app/flavor/directive){rel="&#x22;nofollow&#x22;"} to learn more.

::prose-show-case
:docs-tippy-usage-directive

#code
```vue [DocsTippyUsageDirective.vue]
<template>
  <div class="flex flex-col items-center gap-5">
    <UiButton v-tippy="'Hello 👋🏽'" variant="outline">String</UiButton>
    <UiButton v-tippy="objectOptions" variant="outline">Object</UiButton>
  </div>
</template>

<script lang="ts" setup>
  import type { TippyOptions } from "vue-tippy";

  const objectOptions: TippyOptions = {
    content: "Hello 👋🏽",
    placement: "bottom",
    arrow: true,
    hideOnClick: false,
  };
</script>
```
::

### Component

We can use the `<Tippy/>` component to show a tooltip.

You can visit the [Component Docs](https://vue-tippy.netlify.app/flavor/component){rel="&#x22;nofollow&#x22;"} to see some more examples of how this component can be used.

::prose-show-case
:docs-tippy-usage-component

#code
```vue [DocsTippyUsageComponent.vue]
<template>
  <div class="flex flex-col items-center gap-5">
    <Tippy v-bind="options">
      <UiButton variant="outline">Hello World</UiButton>
    </Tippy>

    <Tippy max-width="320px" interactive :hide-on-click="false">
      <UiButton>Tip!</UiButton>
      <template #content="props">
        <div class="relative flex flex-col gap-1 px-2 py-3 text-sm">
          <UiButton
            variant="ghost"
            size="icon-xs"
            class="absolute top-2 right-0 size-5 p-1"
            @click="props.hide()"
          >
            <Icon class="size-3" name="lucide:x" />
          </UiButton>
          <p class="font-semibold">Building a Design System with Nuxt and Tailwind CSS</p>
          <p class="text-muted-foreground">
            Learn how to build a comprehensive design system using Tailwind CSS, including component
            architecture, and theme customization.
          </p>
          <div class="text-muted-foreground flex items-center gap-2 pt-1 text-xs">
            8 min read <span>•</span> Updated 2 days ago
          </div>
        </div>
      </template>
    </Tippy>
  </div>
</template>

<script lang="ts" setup>
  import type { TippyOptions } from "vue-tippy";

  const options: TippyOptions = {
    content: "Hello World",
    placement: "top",
    interactive: true,
  };
</script>
```
::

#### Additional Props

Do note that these additional props can be added to the component

| Prop            | Type              | Default | Description           |
| --------------- | ----------------- | ------- | --------------------- |
| `tag`           | String            | "span"  | Trigger wrapper tag   |
| `content-tag`   | String            | "span"  | Content wrapper tag   |
| `content-class` | String            | null    | Content wrapper class |
| `to`            | Element or String | null    | Target selector       |

### Composition API

We can import nd use the `useTippy` composable to show a tooltip.

This is a low-level, flexible composition, ideal for building tooltips with complex interactions.

You can visit the [Composition API Docs](https://vue-tippy.netlify.app/flavor/composition-api){rel="&#x22;nofollow&#x22;"} to see some more examples of how this composition can be used.

::prose-show-case
:docs-tippy-usage-composition

#code
```vue [DocsTippyUsageComposition.vue]
<template>
  <div class="flex flex-col items-center gap-5">
    <div ref="container">
      <UiButton variant="outline">Hello World</UiButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useTippy } from "vue-tippy";

  import { DocsAlertSubData } from "#components";

  const container = ref();
  useTippy(container, {
    interactive: true,
    content: h(DocsAlertSubData, { class: tw`border-none p-2` }),
  });
</script>
```
::

## Vue Tippy Examples

Here are some examples taken from the [Vue Tippy](https://vue-tippy.netlify.app/){rel="&#x22;nofollow&#x22;"} documentation.

### Follow Mouse

This example shows how to create a tooltip that follows the mouse.

::prose-show-case
:docs-tippy-follow-mouse

#code
```vue [DocsTippyFollowMouse.vue]
<template>
  <div>
    <div ref="container" class="!cursor-none">
      <ClientOnly>
        <UiPlaceholder class="h-[400px]"> {{ x }}, {{ y }} </UiPlaceholder>
      </ClientOnly>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useTippy } from "vue-tippy";

  const container = ref<HTMLElement>();
  const { x, y } = useMouseInElement(container, {
    resetOnTouchEnds: true,
    type: "client",
  });

  const { tippy } = useTippy(container, {
    content: computed(() => `(${x.value},${y.value})`),
    trigger: "mouseenter focus click",
    placement: "top",
    animation: false,
    hideOnClick: false,
    offset: [0, 30],
    arrow: `<svg xmlns="http://www.w3.org/2000/svg" class="size-6 text-sky-600 inline" viewBox="0 0 24 24"><path fill="currentColor" d="M7.407 2.486c-.917-.612-2.251.046-2.152 1.238l.029.347a86 86 0 0 0 2.79 15.693c.337 1.224 2.03 1.33 2.544.195l2.129-4.697c.203-.449.697-.737 1.234-.68l5.266.564c1.209.13 2.063-1.346 1.094-2.281A91 91 0 0 0 7.703 2.684z"/></svg>`,
    getReferenceClientRect: function () {
      return {
        width: 0,
        height: 0,
        top: y.value,
        right: x.value,
        bottom: y.value,
        left: x.value,
      };
    },
  });

  // Sticky alternative
  watch([x, y], () => tippy.value?.popperInstance?.update());
</script>
```
::

### Context Menu

This example shows how to create a context menu using Vue Tippy.

::prose-show-case
:docs-tippy-context-menu

#code
```vue [DocsTippyContextMenu.vue]
<template>
  <div>
    <div ref="container">
      <UiPlaceholder class="h-[400px]">
        <p>Right Click Anywhere</p>
      </UiPlaceholder>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useTippy } from "vue-tippy";

  const container = ref();
  const items = [
    { title: "Account", icon: "lucide:user", shortcut: "⌘A" },
    { title: "Settings", icon: "lucide:settings", shortcut: "⌘S" },
    { title: "Help", icon: "lucide:life-buoy", shortcut: "⌘H" },
    { title: "Sign out", icon: "lucide:log-out", shortcut: "⌘O" },
  ];
  const ContextMenuComponent = {
    render: () =>
      h("div", { class: `w-[200px]` }, [
        h("p", { class: `font-semibold text-sm pt-2 pb-4 px-1` }, "Context menu"),
        h(resolveComponent("UiDivider")),
        h(
          "ul",
          { class: tw`mt-1 flex w-full flex-col gap-0.5` },
          items.map((item) =>
            h(
              "li",
              {
                class: tw`hover:bg-muted flex w-full cursor-pointer items-center gap-2 rounded p-2 text-sm transition`,
                onClick: hide,
              },
              [
                h(resolveComponent("Icon"), {
                  name: item.icon,
                  size: 16,
                  class: tw`text-muted-foreground`,
                }),
                h("span", item.title),
                h("span", { class: tw`text-muted-foreground ml-auto text-xs` }, item.shortcut),
              ]
            )
          )
        ),
      ]),
  };

  const targetIsVisible = useElementVisibility(container, { threshold: 0.5 });

  const { setProps, show, hide } = useTippy(container, {
    content: ContextMenuComponent,
    placement: "right-start",
    trigger: "manual",
    interactive: true,
    arrow: false,
    offset: [0, 0],
  });

  useEventListener(container, "contextmenu", (event) => {
    event.preventDefault();

    setProps({
      getReferenceClientRect: () => ({
        width: 0,
        height: 0,
        top: event.clientY,
        bottom: event.clientY,
        left: event.clientX,
        right: event.clientX,
      }),
    });

    show();
  });

  useEventListener("scroll", () => {
    if (!targetIsVisible.value) {
      hide();
    }
  });
</script>
```
::

### Trigger Target

This example shows how to create a tooltip that is triggered by another element.

::prose-show-case
:docs-tippy-target-el

#code
```vue [DocsTippyTargetEl.vue]
<template>
  <div class="flex flex-col items-center gap-20">
    <div ref="trigger">
      <UiButton variant="outline" size="sm">Hover Me</UiButton>
    </div>
    <p ref="target" class="text-sm font-medium">All the magic is here!</p>
  </div>
</template>

<script lang="ts" setup>
  import { useTippy } from "vue-tippy";

  const target = ref();
  const trigger = ref();

  useTippy(target, {
    interactive: true,
    triggerTarget: trigger,
    content: "Look at me, I'm a tippy!",
  });
</script>
```
::

## Origin UI Examples

These are some examples that I found today over here [Origin Ui](https://originui.com/tooltips){rel="&#x22;nofollow&#x22;"}. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

### Title

::prose-show-case
:docs-tippy-title

#code
```vue [DocsTippyTitle.vue]
<template>
  <div class="flex flex-col items-center gap-20">
    <Tippy max-width="290px" interactive>
      <UiButton variant="outline">W/ Title</UiButton>
      <template #content>
        <div class="space-y-1 px-2 py-2">
          <p class="text-[13px] font-medium">Tooltip with title</p>
          <p class="text-muted-foreground text-xs">
            Tooltips are made to be highly customizable, with features like dynamic placement, rich
            content, and a robust API. You can even use them as a full-featured dropdown menu by
            setting the <code>trigger</code> prop to <code>click</code>.
          </p>
        </div>
      </template>
    </Tippy>
  </div>
</template>
```
::

### Icon

::prose-show-case
:docs-tippy-icon

#code
```vue [DocsTippyIcon.vue]
<template>
  <div class="flex flex-col items-center gap-20">
    <Tippy max-width="290px" interactive>
      <UiButton variant="outline">W/ Icon</UiButton>
      <template #content>
        <div class="flex gap-3 p-2">
          <Icon name="lucide:globe" class="mt-1 size-4 shrink-0 opacity-60" aria-hidden="true" />
          <div class="space-y-1">
            <p class="text-[13px] font-medium">Tooltip with title and icon</p>
            <p class="text-muted-foreground text-xs">
              Tooltips are made to be highly customizable, with features like dynamic placement,
              rich content, and a robust API.
            </p>
          </div>
        </div>
      </template>
    </Tippy>
  </div>
</template>
```
::

### Image

::prose-show-case
:docs-tippy-image

#code
```vue [DocsTippyImage.vue]
<template>
  <div class="flex flex-col items-center gap-20">
    <Tippy max-width="290px" interactive>
      <UiButton variant="outline">W/ Image</UiButton>
      <template #content>
        <div class="space-y-2 p-2">
          <img
            class="h-[150px] w-full rounded"
            src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=50&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            width="382"
            height="216"
            alt="Content image"
          />
          <div class="space-y-1">
            <p class="text-[13px] font-medium">Tooltip with title and icon</p>
            <p class="text-muted-foreground text-xs">
              Tooltips are made to be highly customizable, with features like dynamic placement,
              rich content, and a robust API.
            </p>
          </div>
        </div>
      </template>
    </Tippy>
  </div>
</template>
```
::

### Pan

::prose-show-case
:docs-tippy-pan

#code
```vue [DocsTippyPan.vue]
<template>
  <div class="flex flex-col items-center gap-20">
    <div class="inline-grid w-fit grid-cols-3 gap-1">
      <UiButton
        v-tippy.top="'Pan top'"
        class="col-start-2"
        variant="outline"
        size="icon"
        aria-label="Pan camera up"
      >
        <Icon name="lucide:chevron-up" size="16" aria-hidden="true" />
      </UiButton>
      <UiButton
        v-tippy.left="'Pan left'"
        class="col-start-1"
        variant="outline"
        size="icon"
        aria-label="Pan camera left"
      >
        <Icon name="lucide:chevron-left" size="16" aria-hidden="true" />
      </UiButton>
      <div class="flex items-center justify-center" aria-hidden="true">
        <Icon name="lucide:circle" size="20" class="opacity-60" />
      </div>
      <UiButton
        v-tippy.right="'Pan right'"
        variant="outline"
        size="icon"
        aria-label="Pan camera right"
      >
        <Icon name="lucide:chevron-right" size="16" aria-hidden="true" />
      </UiButton>
      <UiButton
        v-tippy.bottom="'Pan down'"
        class="col-start-2"
        variant="outline"
        size="icon"
        aria-label="Pan camera down"
      >
        <Icon name="lucide:chevron-down" size="16" aria-hidden="true" />
      </UiButton>
    </div>
  </div>
</template>
```
::

### Stats

::prose-show-case
:docs-tippy-stats

#code
```vue [DocsTippyStats.vue]
<template>
  <div class="flex flex-col items-center gap-20">
    <Tippy max-width="290px" interactive>
      <UiButton variant="outline">Stats</UiButton>
      <template #content>
        <div class="space-y-2 p-2">
          <ul class="grid gap-3 text-xs">
            <li class="grid gap-0.5">
              <span class="text-muted-foreground">Status</span>
              <span class="font-medium">Completed</span>
            </li>
            <li class="grid gap-0.5">
              <span class="text-muted-foreground">Code Coverage</span>
              <span class="font-medium">94.3%</span>
            </li>
            <li class="grid gap-0.5">
              <span class="text-muted-foreground">Last Deploy</span>
              <span class="font-medium">Today at 15:42</span>
            </li>
            <li class="grid gap-0.5">
              <span class="text-muted-foreground">Performance Score</span>
              <span class="font-medium">98/100</span>
            </li>
          </ul>
        </div>
      </template>
    </Tippy>
  </div>
</template>
```
::

### Chart

::prose-show-case
:docs-tippy-chart

#code
```vue [DocsTippyChart.vue]
<template>
  <div class="flex flex-col items-center gap-20">
    <Tippy max-width="290px" interactive>
      <UiButton variant="outline">Chart</UiButton>
      <template #content>
        <div class="space-y-2 p-2">
          <div class="text-[13px] font-medium">Tuesday, Aug 13</div>
          <div class="flex items-center gap-2 text-xs">
            <span class="size-2 rounded-full bg-purple-500" />
            <span class="flex grow gap-2"> Sales <span class="ml-auto">$40</span> </span>
          </div>
          <div class="flex items-center gap-2 text-xs">
            <span class="size-2 rounded-full bg-teal-500" />
            <span class="flex grow gap-2"> Revenue <span class="ml-auto">$74</span> </span>
          </div>
          <div class="flex items-center gap-2 text-xs">
            <span class="size-2 rounded-full bg-blue-500" />
            <span class="flex grow gap-2"> Costs <span class="ml-auto">$410</span> </span>
          </div>
        </div>
      </template>
    </Tippy>
  </div>
</template>
```
::


# V-Wave

## Getting Started

::prose-steps
  :::prose-step
  ### Installation

  To get started, you will need to install the package. You can visit the [V-Wave](https://github.com/justintaddei/v-wave){rel=""nofollow""} page for more details... All the details 🙂.

    ::::prose-code-group{sync="_pm"}
    ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
    npm i v-wave
    ```

    ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
    pnpm i v-wave
    ```

    ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
    bun add v-wave
    ```

    ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
    yarn add v-wave
    ```
    ::::
  :::

  :::prose-step
  ### Add it to `nuxt.config.ts`

  Once installed, you can add it to your `nuxt.config.ts` file.

  ```ts
  modules: ["v-wave/nuxt"];
  ```
  :::
::

## Usage

### Buttons

You can add the `v-wave` directive to any button. Be sure to check out the available options in the repo.

::prose-show-case
:docs-v-wave-button

#code
```vue [DocsVWaveButton.vue]
<template>
  <div class="flex items-center justify-center">
    <UiButton v-wave>Button</UiButton>
  </div>
</template>
```
::

### Options

You can change the color of the ripple effect by passing a color to the directive. Even background images are allowed.

::prose-show-case
:docs-v-wave-color

#code
```vue [DocsVWaveColor.vue]
<template>
  <div class="flex items-center justify-center">
    <div
      v-wave="{
        color: 'no-repeat url(/icon.png) 0 0 / cover',
        initialOpacity: 0.7,
        duration: 1,
      }"
      class="flex size-[250px] cursor-pointer items-center justify-center rounded-md border shadow-xs"
    />
  </div>
</template>
```
::


# Scroll Fade

## Credits

Shout out to [Shadcn Vue](https://www.shadcn-vue.com/docs/utilities/scroll-fade){rel="&#x22;nofollow&#x22;"} for the hard work on this utility.

::prose-show-case
:docs-scroll-fade

#code
```vue [DocsScrollFade.vue]
<template>
  <div class="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border">
    <div class="scroll-fade h-72 scrollbar-none overflow-y-auto">
      <div class="flex flex-col gap-1.5 p-1.5">
        <div v-for="item in items" :key="item" class="bg-muted rounded-lg px-3 py-2.5 text-sm">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  const items = Array.from({ length: 12 }, (_, index) => `Item ${index + 1}`);
</script>
```
::

## Installation

Adding this to your project ensures that the scroll fade utility is available for use in your components.

```css [scroll-fade.css]
@property --scroll-fade-t {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --scroll-fade-b {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --scroll-fade-s {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --scroll-fade-e {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --scroll-fade-mask {
  syntax: "*";
  inherits: false;
}

@theme inline {
  @keyframes scroll-fade-reveal-t {
    from {
      --scroll-fade-t: 0px;
    }
    to {
      --scroll-fade-t: var(--_scroll-fade-size-t, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
    }
  }
  @keyframes scroll-fade-reveal-b {
    from {
      --scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
    }
    to {
      --scroll-fade-b: 0px;
    }
  }
  @keyframes scroll-fade-reveal-s {
    from {
      --scroll-fade-s: 0px;
    }
    to {
      --scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
    }
  }
  @keyframes scroll-fade-reveal-e {
    from {
      --scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
    }
    to {
      --scroll-fade-e: 0px;
    }
  }
}

@utility scroll-fade {
  --_scroll-fade-size-t: var(
    --scroll-fade-t-size,
    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
  );
  --_scroll-fade-size-b: var(
    --scroll-fade-b-size,
    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
  );
  --scroll-fade-block: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--scroll-fade-t, 0px),
    #000 calc(100% - var(--scroll-fade-b, 0px)),
    transparent 100%
  );
  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  @supports (animation-timeline: scroll()) {
    animation:
      scroll-fade-reveal-t 1ms ease-in-out,
      scroll-fade-reveal-b 1ms ease-in-out;
    animation-timeline: scroll(self y), scroll(self y);
    animation-range:
      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
    animation-fill-mode: both;
  }

  @supports not (animation-timeline: scroll()) {
    --scroll-fade-t: var(--_scroll-fade-size-t);
    --scroll-fade-b: var(--_scroll-fade-size-b);
  }
}

@utility scroll-fade-y {
  --_scroll-fade-size-t: var(
    --scroll-fade-t-size,
    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
  );
  --_scroll-fade-size-b: var(
    --scroll-fade-b-size,
    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
  );
  --scroll-fade-block: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--scroll-fade-t, 0px),
    #000 calc(100% - var(--scroll-fade-b, 0px)),
    transparent 100%
  );
  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  @supports (animation-timeline: scroll()) {
    animation:
      scroll-fade-reveal-t 1ms ease-in-out,
      scroll-fade-reveal-b 1ms ease-in-out;
    animation-timeline: scroll(self y), scroll(self y);
    animation-range:
      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
    animation-fill-mode: both;
  }

  @supports not (animation-timeline: scroll()) {
    --scroll-fade-t: var(--_scroll-fade-size-t);
    --scroll-fade-b: var(--_scroll-fade-size-b);
  }
}

@utility scroll-fade-x {
  --_scroll-fade-size-s: var(
    --scroll-fade-s-size,
    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
  );
  --_scroll-fade-size-e: var(
    --scroll-fade-e-size,
    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
  );
  --scroll-fade-inline: linear-gradient(
    to right,
    transparent 0,
    #000 var(--scroll-fade-s, 0px),
    #000 calc(100% - var(--scroll-fade-e, 0px)),
    transparent 100%
  );
  &:where([dir="rtl"], [dir="rtl"] *) {
    --scroll-fade-inline: linear-gradient(
      to left,
      transparent 0,
      #000 var(--scroll-fade-s, 0px),
      #000 calc(100% - var(--scroll-fade-e, 0px)),
      transparent 100%
    );
  }
  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
  mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  @supports (animation-timeline: scroll()) {
    animation:
      scroll-fade-reveal-s 1ms ease-in-out,
      scroll-fade-reveal-e 1ms ease-in-out;
    animation-timeline: scroll(self inline), scroll(self inline);
    animation-range:
      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
    animation-fill-mode: both;
  }

  @supports not (animation-timeline: scroll()) {
    --scroll-fade-s: var(--_scroll-fade-size-s);
    --scroll-fade-e: var(--_scroll-fade-size-e);
  }
}

@utility scroll-fade-t {
  --_scroll-fade-size-t: var(
    --scroll-fade-t-size,
    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
  );
  --scroll-fade-mask: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--scroll-fade-t, 0px),
    #000 100%
  );
  -webkit-mask-image: var(--scroll-fade-mask);
  mask-image: var(--scroll-fade-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  @supports (animation-timeline: scroll()) {
    animation: scroll-fade-reveal-t 1ms ease-in-out;
    animation-timeline: scroll(self y);
    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
    animation-fill-mode: both;
  }

  @supports not (animation-timeline: scroll()) {
    --scroll-fade-t: var(--_scroll-fade-size-t);
  }
}

@utility scroll-fade-b {
  --_scroll-fade-size-b: var(
    --scroll-fade-b-size,
    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
  );
  --scroll-fade-mask: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--scroll-fade-b, 0px)),
    transparent 100%
  );
  -webkit-mask-image: var(--scroll-fade-mask);
  mask-image: var(--scroll-fade-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  @supports (animation-timeline: scroll()) {
    animation: scroll-fade-reveal-b 1ms ease-in-out;
    animation-timeline: scroll(self y);
    animation-range: calc(
        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
      )
      100%;
    animation-fill-mode: both;
  }

  @supports not (animation-timeline: scroll()) {
    --scroll-fade-b: var(--_scroll-fade-size-b);
  }
}

@utility scroll-fade-l {
  --_scroll-fade-size-s: var(
    --scroll-fade-s-size,
    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
  );
  --scroll-fade-mask: linear-gradient(
    to right,
    transparent 0,
    #000 var(--scroll-fade-s, 0px),
    #000 100%
  );
  -webkit-mask-image: var(--scroll-fade-mask);
  mask-image: var(--scroll-fade-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  @supports (animation-timeline: scroll()) {
    animation: scroll-fade-reveal-s 1ms ease-in-out;
    animation-timeline: scroll(self x);
    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
    animation-fill-mode: both;
  }

  @supports not (animation-timeline: scroll()) {
    --scroll-fade-s: var(--_scroll-fade-size-s);
  }
}

@utility scroll-fade-r {
  --_scroll-fade-size-e: var(
    --scroll-fade-e-size,
    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
  );
  --scroll-fade-mask: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - var(--scroll-fade-e, 0px)),
    transparent 100%
  );
  -webkit-mask-image: var(--scroll-fade-mask);
  mask-image: var(--scroll-fade-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  @supports (animation-timeline: scroll()) {
    animation: scroll-fade-reveal-e 1ms ease-in-out;
    animation-timeline: scroll(self x);
    animation-range: calc(
        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
      )
      100%;
    animation-fill-mode: both;
  }

  @supports not (animation-timeline: scroll()) {
    --scroll-fade-e: var(--_scroll-fade-size-e);
  }
}

@utility scroll-fade-s {
  --_scroll-fade-size-s: var(
    --scroll-fade-s-size,
    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
  );
  --scroll-fade-mask: linear-gradient(
    to right,
    transparent 0,
    #000 var(--scroll-fade-s, 0px),
    #000 100%
  );
  &:where([dir="rtl"], [dir="rtl"] *) {
    --scroll-fade-mask: linear-gradient(
      to left,
      transparent 0,
      #000 var(--scroll-fade-s, 0px),
      #000 100%
    );
  }
  -webkit-mask-image: var(--scroll-fade-mask);
  mask-image: var(--scroll-fade-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  @supports (animation-timeline: scroll()) {
    animation: scroll-fade-reveal-s 1ms ease-in-out;
    animation-timeline: scroll(self inline);
    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
    animation-fill-mode: both;
  }

  @supports not (animation-timeline: scroll()) {
    --scroll-fade-s: var(--_scroll-fade-size-s);
  }
}

@utility scroll-fade-e {
  --_scroll-fade-size-e: var(
    --scroll-fade-e-size,
    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
  );
  --scroll-fade-mask: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - var(--scroll-fade-e, 0px)),
    transparent 100%
  );
  &:where([dir="rtl"], [dir="rtl"] *) {
    --scroll-fade-mask: linear-gradient(
      to left,
      #000 0,
      #000 calc(100% - var(--scroll-fade-e, 0px)),
      transparent 100%
    );
  }
  -webkit-mask-image: var(--scroll-fade-mask);
  mask-image: var(--scroll-fade-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  @supports (animation-timeline: scroll()) {
    animation: scroll-fade-reveal-e 1ms ease-in-out;
    animation-timeline: scroll(self inline);
    animation-range: calc(
        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
      )
      100%;
    animation-fill-mode: both;
  }

  @supports not (animation-timeline: scroll()) {
    --scroll-fade-e: var(--_scroll-fade-size-e);
  }
}

@utility scroll-fade-* {
  --scroll-fade-size: calc(var(--spacing) * --value(integer));
  --scroll-fade-size: --value([length], [percentage]);
}

@utility scroll-fade-t-* {
  --scroll-fade-t-size: calc(var(--spacing) * --value(integer));
  --scroll-fade-t-size: --value([length], [percentage]);
}

@utility scroll-fade-b-* {
  --scroll-fade-b-size: calc(var(--spacing) * --value(integer));
  --scroll-fade-b-size: --value([length], [percentage]);
}

@utility scroll-fade-s-* {
  --scroll-fade-s-size: calc(var(--spacing) * --value(integer));
  --scroll-fade-s-size: --value([length], [percentage]);
}

@utility scroll-fade-e-* {
  --scroll-fade-e-size: calc(var(--spacing) * --value(integer));
  --scroll-fade-e-size: --value([length], [percentage]);
}

@utility scroll-fade-none {
  --scroll-fade-mask: none;
}
```

## Usage

| Class                             | Styles                                                                                                           |
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| `scroll-fade`                     | `mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));` :br `animation-timeline: scroll(self y);`       |
| `scroll-fade-y`                   | `mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));` :br `animation-timeline: scroll(self y);`       |
| `scroll-fade-x`                   | `mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));` :br `animation-timeline: scroll(self inline);` |
| `scroll-fade-t`                   | Fade mask on the top edge. :br `animation-timeline: scroll(self y);`                                             |
| `scroll-fade-b`                   | Fade mask on the bottom edge. :br `animation-timeline: scroll(self y);`                                          |
| `scroll-fade-l`                   | Fade mask on the left edge. :br `animation-timeline: scroll(self x);`                                            |
| `scroll-fade-r`                   | Fade mask on the right edge. :br `animation-timeline: scroll(self x);`                                           |
| `scroll-fade-s`                   | Fade mask on the start edge, mirrors in RTL. :br `animation-timeline: scroll(self inline);`                      |
| `scroll-fade-e`                   | Fade mask on the end edge, mirrors in RTL. :br `animation-timeline: scroll(self inline);`                        |
| `scroll-fade-<number>`            | `--scroll-fade-size: calc(var(--spacing) * <number>);`                                                           |
| `scroll-fade-[<value>]`           | `--scroll-fade-size: <value>;`                                                                                   |
| `scroll-fade-{t,b,s,e}-<number>`  | `--scroll-fade-{t,b,s,e}-size: calc(var(--spacing) * <number>);`                                                 |
| `scroll-fade-{t,b,s,e}-[<value>]` | `--scroll-fade-{t,b,s,e}-size: <value>;`                                                                         |
| `scroll-fade-none`                | `--scroll-fade-mask: none;`                                                                                      |

Add `scroll-fade` or `scroll-fade-y` to the scroll container, i.e. the element that has `overflow-y-auto`.

```vue
<template>
  <div class="scroll-fade overflow-y-auto">
    <!-- ... -->
  </div>
</template>
```

The fade is scroll-aware and tracks the scroll position:

- At rest, the top edge is crisp and the bottom edge fades to hint at more content.
- As you scroll, a fade appears at the top and both edges stay faded mid-scroll.
- At the end, the bottom edge sharpens to show you have reached the last item.

The fade is applied with `mask-image`, so it dissolves the content itself rather than overlaying a color. The mask uses a linear fade from transparent to black, so it adapts to any background without configuration. If your scroll area sits inside a card, put the background and border on a wrapper and `scroll-fade` on the inner scroller, so the fade dissolves the content and not the card.

The [`ScrollArea`](https://uithing.com/docs/components/scroll-area) and [`MessageScroller`](https://uithing.com/docs/components/message-scroller) components can use `scroll-fade` on their scrollable viewport.

## No Overflow, No Fade

If the content does not overflow, no fade is shown. You can apply `scroll-fade` to any list without checking whether it scrolls.

::prose-show-case
:docs-scroll-fade-overflow

#code
```vue [DocsScrollFadeOverflow.vue]
<script setup lang="ts">
  const items = Array.from({ length: 3 }, (_, index) => `Item ${index + 1}`);
</script>

<template>
  <div class="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border">
    <div class="scroll-fade scrollbar-none overflow-y-auto">
      <div class="flex flex-col gap-1.5 p-1.5">
        <div v-for="item in items" :key="item" class="bg-muted rounded-lg px-3 py-2.5 text-sm">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>
```
::

## Horizontal Scrolling

Use `scroll-fade-x` on containers that scroll horizontally, i.e. the element that has `overflow-x-auto`.

::prose-show-case
:docs-scroll-fade-horizontal

#code
```vue [DocsScrollFadeHorizontal.vue]
<script setup lang="ts">
  const tags = [
    "Design",
    "Engineering",
    "Marketing",
    "Product",
    "Research",
    "Sales",
    "Support",
    "Operations",
    "Finance",
    "Legal",
    "People",
    "Security",
  ];
</script>

<template>
  <div class="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border">
    <div class="scroll-fade-x scrollbar-none overflow-x-auto">
      <div class="flex w-max gap-1.5 p-1.5">
        <div
          v-for="tag in tags"
          :key="tag"
          class="bg-muted shrink-0 rounded-lg px-3 py-2.5 text-sm"
        >
          {{ tag }}
        </div>
      </div>
    </div>
  </div>
</template>
```
::

```vue
<template>
  <div class="flex scroll-fade-x overflow-x-auto">
    <!-- ... -->
  </div>
</template>
```

The horizontal fade is direction-aware. In RTL layouts, the crisp edge and the fade follow the reading direction with no extra classes needed. `scroll-fade-<number>` and `scroll-fade-none` work the same for both axes.

## Edge Fades

Use edge utilities when only one edge should track the scroll position.

::prose-show-case
:docs-scroll-fade-edge

#code
```vue [DocsScrollFadeEdge.vue]
<script setup lang="ts">
  const items = [
    "Inbox triage",
    "Design review",
    "API contract",
    "QA pass",
    "Launch notes",
    "Metrics follow-up",
  ];

  const tags = [
    "Design",
    "Engineering",
    "Marketing",
    "Product",
    "Research",
    "Sales",
    "Support",
    "Operations",
  ];
</script>

<template>
  <div class="mx-auto flex max-w-xs min-w-0 flex-col gap-6">
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade-t h-36 scrollbar-none overflow-y-auto">
          <div class="flex flex-col gap-1.5 p-1.5">
            <div v-for="item in items" :key="item" class="bg-muted rounded-lg px-3 py-2.5 text-sm">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-muted-foreground text-center font-mono text-xs">scroll-fade-t</p>
    </div>
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade-b h-36 scrollbar-none overflow-y-auto">
          <div class="flex flex-col gap-1.5 p-1.5">
            <div v-for="item in items" :key="item" class="bg-muted rounded-lg px-3 py-2.5 text-sm">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-muted-foreground text-center font-mono text-xs">scroll-fade-b</p>
    </div>
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade-s scrollbar-none overflow-x-auto">
          <div class="flex w-max gap-1.5 p-1.5">
            <div
              v-for="tag in tags"
              :key="tag"
              class="bg-muted shrink-0 rounded-xl px-4 py-2.5 text-sm"
            >
              {{ tag }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-muted-foreground text-center font-mono text-xs">scroll-fade-s</p>
    </div>
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade-e scrollbar-none overflow-x-auto">
          <div class="flex w-max gap-1.5 p-1.5">
            <div
              v-for="tag in tags"
              :key="tag"
              class="bg-muted shrink-0 rounded-xl px-4 py-2.5 text-sm"
            >
              {{ tag }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-muted-foreground text-center font-mono text-xs">scroll-fade-e</p>
    </div>
  </div>
</template>
```
::

```vue
<template>
  <div class="scroll-fade-b overflow-y-auto">
    <!-- ... -->
  </div>
</template>
```

The edge utilities are scroll-aware. Start edges fade in after you scroll away from the start, and end edges fade out when you reach the end. Use `scroll-fade-t`, `scroll-fade-b`, `scroll-fade-l`, and `scroll-fade-r` for physical edges. Use `scroll-fade-s` and `scroll-fade-e` for logical inline edges that mirror in RTL.

## Fade Size

The fade depth defaults to `12%` of the container, capped at `40px` so tall scrollers stay subtle. Use `scroll-fade-<number>` to set a fixed size on the spacing scale instead, the same way `scroll-mt-<number>` works.

::prose-show-case
:docs-scroll-fade-size

#code
```vue [DocsScrollFadeSize.vue]
<script setup lang="ts">
  const items = Array.from({ length: 8 }, (_, index) => `Item ${index + 1}`);
</script>

<template>
  <div class="mx-auto flex w-full max-w-xs flex-col gap-6">
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade scroll-fade-4 h-48 scrollbar-none overflow-y-auto">
          <div class="flex flex-col gap-1.5 p-1.5">
            <div v-for="item in items" :key="item" class="bg-muted rounded-lg px-3 py-2.5 text-sm">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-muted-foreground text-center font-mono text-xs">scroll-fade-4</p>
    </div>
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade scroll-fade-24 h-48 scrollbar-none overflow-y-auto">
          <div class="flex flex-col gap-1.5 p-1.5">
            <div v-for="item in items" :key="item" class="bg-muted rounded-lg px-3 py-2.5 text-sm">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-muted-foreground text-center font-mono text-xs">scroll-fade-24</p>
    </div>
  </div>
</template>
```
::

```vue
<template>
  <div class="scroll-fade scroll-fade-24 overflow-y-auto">
    <!-- ... -->
  </div>
</template>
```

For one-off values, use an arbitrary length or percentage:

```vue
<template>
  <div class="scroll-fade scroll-fade-[15%] overflow-y-auto">
    <!-- ... -->
  </div>
</template>
```

To fade opposite edges by different amounts, use the per-edge modifiers `scroll-fade-t-<number>`, `scroll-fade-b-<number>`, `scroll-fade-s-<number>`, and `scroll-fade-e-<number>`. They override `scroll-fade-<number>` on the edge they target and accept arbitrary values too.

```vue
<template>
  <div class="scroll-fade scroll-fade-b-8 scroll-fade-t-2 overflow-y-auto">
    <!-- ... -->
  </div>
</template>
```

Use the logical `s`/`e` modifiers for horizontal scrollers so the sizes mirror in RTL.

The fade eases in and out over a fixed scroll distance rather than appearing instantly. That distance is the `--scroll-fade-reveal` variable, `96px` by default and independent of the fade depth. Lower it for a snappier reveal or raise it for a more gradual one:

```vue
<template>
  <div class="scroll-fade overflow-y-auto [--scroll-fade-reveal:64px]">
    <!-- ... -->
  </div>
</template>
```

## Disabling the Fade

Use `scroll-fade-none` to remove the fade. It works in any class order, so the typical use is responsive or stateful:

```vue
<template>
  <div class="scroll-fade overflow-y-auto md:scroll-fade-none">
    <!-- ... -->
  </div>
</template>
```

::prose-show-case
:docs-scroll-fade-none

#code
```vue [DocsScrollFadeNone.vue]
<script setup lang="ts">
  const items = Array.from({ length: 8 }, (_, index) => `Item ${index + 1}`);
</script>

<template>
  <div class="mx-auto flex w-full max-w-xs min-w-0 flex-col gap-6">
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade h-48 scrollbar-none overflow-y-auto">
          <div class="flex flex-col gap-1.5 p-1.5">
            <div v-for="item in items" :key="item" class="bg-muted rounded-lg px-3 py-2.5 text-sm">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-muted-foreground text-center font-mono text-xs">scroll-fade</p>
    </div>
    <div class="flex flex-col gap-3">
      <div class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade scroll-fade-none h-48 scrollbar-none overflow-y-auto">
          <div class="flex flex-col gap-1.5 p-1.5">
            <div v-for="item in items" :key="item" class="bg-muted rounded-lg px-3 py-2.5 text-sm">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-muted-foreground text-center font-mono text-xs">
        scroll-fade scroll-fade-none
      </p>
    </div>
  </div>
</template>
```
::

## Fallback

The scroll-aware behavior is implemented with [CSS scroll-driven animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations){rel="&#x22;nofollow&#x22;"}, with no JavaScript and no scroll listeners. In browsers that do not support scroll-driven animations, `scroll-fade` falls back to a static fade on both edges, and edge utilities fall back to a static fade on the selected edge.

Since the mask is applied to the scroll container itself, a visible scrollbar fades with the content at the edges. Pair `scroll-fade` with `scrollbar-none`, which ships in the same package, if you want to hide the scrollbar entirely.

## RTL

`scroll-fade-x` follows the reading direction. At rest, the start edge is crisp and the end edge fades. In RTL layouts that means a crisp right edge and a fade on the left, mirrored from LTR.

::prose-show-case
:docs-scroll-fade-r-t-l

#code
```vue [DocsScrollFadeRTL.vue]
<script setup lang="ts">
  const ltrTags = [
    "Design",
    "Engineering",
    "Marketing",
    "Product",
    "Research",
    "Sales",
    "Support",
    "Operations",
    "Finance",
    "Legal",
  ];

  const rtlTags = [
    "تصميم",
    "هندسة",
    "تسويق",
    "منتج",
    "أبحاث",
    "مبيعات",
    "دعم",
    "عمليات",
    "مالية",
    "قانوني",
  ];
</script>

<template>
  <div class="mx-auto grid w-full max-w-lg gap-6 sm:grid-cols-2">
    <div class="flex flex-col gap-3">
      <div dir="ltr" class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade-x scrollbar-none overflow-x-auto">
          <div class="flex w-max gap-1.5 p-1.5">
            <div
              v-for="tag in ltrTags"
              :key="tag"
              class="bg-muted shrink-0 rounded-lg px-3 py-2.5 text-sm"
            >
              {{ tag }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-muted-foreground text-center font-mono text-xs">dir="ltr"</p>
    </div>
    <div class="flex flex-col gap-3">
      <div dir="rtl" class="overflow-hidden rounded-2xl border">
        <div class="scroll-fade-x scrollbar-none overflow-x-auto">
          <div class="flex w-max gap-1.5 p-1.5">
            <div
              v-for="tag in rtlTags"
              :key="tag"
              class="bg-muted shrink-0 rounded-lg px-3 py-2.5 text-sm"
            >
              {{ tag }}
            </div>
          </div>
        </div>
      </div>
      <p class="text-muted-foreground text-center font-mono text-xs">dir="rtl"</p>
    </div>
  </div>
</template>
```
::


# Shimmer

## Credits

Shout out to [Shadcn Vue](https://www.shadcn-vue.com/docs/utilities/shimmer){rel="&#x22;nofollow&#x22;"} for the hard work on this utility.

::prose-show-case
:docs-shimmer-demo

#code
```vue [DocsShimmerDemo.vue]
<template>
  <div class="flex h-full w-full items-center justify-center">
    <p class="shimmer text-muted-foreground text-sm">Generating response&hellip;</p>
  </div>
</template>
```
::

## Installation

Adding this to your project ensures that the shimmer utility is available for use in your components.

```css [shimmer.css]
@property --shimmer-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 20deg;
}
@property --shimmer-image {
  syntax: "*";
  inherits: false;
}
@property --shimmer-text-fill {
  syntax: "*";
  inherits: false;
}

@theme inline {
  @keyframes tw-shimmer {
    from {
      background-position: 100% 0;
    }
    to {
      background-position: 0 0;
    }
  }
}

@utility shimmer {
  --_spread: var(--shimmer-spread, calc(3ch + 40px));
  --_base: currentColor;
  --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha* 0.2)));

  background-image: var(
    --shimmer-image,
    linear-gradient(
      calc(90deg + var(--shimmer-angle)),
      var(--_base) calc(50% - var(--_spread)),
      color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * 0.5),
      var(--_highlight) 50%,
      color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * 0.5),
      var(--_base) calc(50% + var(--_spread))
    )
  );
  background-repeat: no-repeat;
  background-size: calc(200% + var(--_spread) * 2) 100%;
  background-position: 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;

  @variant dark {
    --_highlight: var(
      --shimmer-color,
      oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))
    );
  }

  &:where([dir="rtl"], [dir="rtl"] *) {
    animation-direction: reverse;
  }
}

@utility shimmer-once {
  animation-iteration-count: 1;
}

@utility shimmer-reverse {
  animation-direction: reverse;
}

@utility shimmer-none {
  --shimmer-image: none;
  --shimmer-text-fill: currentColor;
}

@utility shimmer-color-* {
  --shimmer-color: --value(--color, [color]);
  --shimmer-color: color-mix(
    in oklch,
    --value(--color, [color]) calc(--modifier(integer) * 1%),
    transparent
  );
}

@utility shimmer-duration-* {
  --shimmer-duration: calc(--value(integer) * 1ms);
}

@utility shimmer-spread-* {
  --shimmer-spread: calc(var(--spacing) * --value(integer));
  --shimmer-spread: --value([length], [percentage]);
}

@utility shimmer-angle-* {
  --shimmer-angle: calc(--value(integer) * 1deg);
}

@media (prefers-reduced-motion: reduce) {
  .shimmer {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}
```

## Usage

| Class                         | Styles                                                                                            |
| ----------------------------- | ------------------------------------------------------------------------------------------------- |
| `shimmer`                     | `background-clip: text;` :br `animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;` |
| `shimmer-once`                | `animation-iteration-count: 1;`                                                                   |
| `shimmer-reverse`             | `animation-direction: reverse;`                                                                   |
| `shimmer-none`                | `--shimmer-image: none;` :br `--shimmer-text-fill: currentColor;`                                 |
| `shimmer-color-<color>`       | `--shimmer-color: <color>;`                                                                       |
| `shimmer-color-[<value>]`     | `--shimmer-color: <value>;`                                                                       |
| `shimmer-color-<color>/<pct>` | `--shimmer-color: color-mix(in oklch, <color> <pct>, transparent);`                               |
| `shimmer-duration-<number>`   | `--shimmer-duration: calc(<number> * 1ms);`                                                       |
| `shimmer-spread-<number>`     | `--shimmer-spread: calc(var(--spacing) * <number>);`                                              |
| `shimmer-spread-[<value>]`    | `--shimmer-spread: <value>;`                                                                      |
| `shimmer-angle-<number>`      | `--shimmer-angle: calc(<number> * 1deg);`                                                         |

Add `shimmer` to a text element.

```html
<p class="shimmer text-muted-foreground">Generating response&hellip;</p>
```

The shimmer is built on `currentColor`, so it adapts to the element:

- The highlight is derived from the text color, with no configuration needed.
- It works on any color, from `text-muted-foreground` to brand colors.
- In dark mode, the highlight automatically brightens to stay visible.

The effect is pure CSS. The text is painted with `background-clip: text`, and the highlight sweeps across it in a seamless loop.

## Color

Use `shimmer-color-<color>` to set the highlight color explicitly. It accepts theme colors with an optional opacity modifier, or any arbitrary color value.

::prose-show-case
:docs-shimmer-color-demo

#code
```vue [DocsShimmerColorDemo.vue]
<template>
  <div class="text-muted-foreground flex flex-col items-center gap-2 text-sm">
    <p class="shimmer shimmer-color-blue-500/60">Generating response&hellip;</p>
    <p class="shimmer shimmer-color-[#378ADD]">Generating response&hellip;</p>
  </div>
</template>
```
::

## Duration

Use `shimmer-duration-<number>` to set the duration of one sweep in milliseconds. The default is `2000`, i.e. `2s`.

::prose-show-case
:docs-shimmer-duration-demo

#code
```vue [DocsShimmerDurationDemo.vue]
<template>
  <div
    class="text-muted-foreground mx-auto grid w-full max-w-lg gap-6 text-center text-sm sm:grid-cols-2"
  >
    <div class="flex flex-col gap-3">
      <p class="shimmer">Generating response&hellip;</p>
      <p class="font-mono text-xs">shimmer</p>
    </div>
    <div class="flex flex-col gap-3">
      <p class="shimmer shimmer-duration-1000">Generating response&hellip;</p>
      <p class="font-mono text-xs">shimmer-duration-1000</p>
    </div>
  </div>
</template>
```
::

## Spread

Use `shimmer-spread-<number>` to set the width of the highlight band using the spacing scale. The default is `calc(3ch + 40px)`: a fixed base plus a `3ch` term that scales with the font size.

::prose-show-case
:docs-shimmer-spread-demo

#code
```vue [DocsShimmerSpreadDemo.vue]
<template>
  <div
    class="text-muted-foreground mx-auto grid w-full max-w-lg gap-6 text-center text-sm sm:grid-cols-2"
  >
    <div class="flex flex-col gap-3">
      <p class="shimmer shimmer-spread-4">Generating response&hellip;</p>
      <p class="font-mono text-xs">shimmer-spread-4</p>
    </div>
    <div class="flex flex-col gap-3">
      <p class="shimmer shimmer-spread-24">Generating response&hellip;</p>
      <p class="font-mono text-xs">shimmer-spread-24</p>
    </div>
  </div>
</template>
```
::

For one-off values, use an arbitrary length or percentage:

```html
<p class="shimmer shimmer-spread-[5rem]">Generating response&hellip;</p>
```

## Angle

Use `shimmer-angle-<number>` to set the tilt of the highlight band in degrees. The default is `20`.

::prose-show-case
:docs-shimmer-angle-demo

#code
```vue [DocsShimmerAngleDemo.vue]
<template>
  <div
    class="text-muted-foreground mx-auto grid w-full max-w-lg gap-6 text-center text-sm sm:grid-cols-2"
  >
    <div class="flex flex-col gap-3">
      <p class="shimmer">Generating response&hellip;</p>
      <p class="font-mono text-xs">shimmer</p>
    </div>
    <div class="flex flex-col gap-3">
      <p class="shimmer shimmer-angle-45">Generating response&hellip;</p>
      <p class="font-mono text-xs">shimmer-angle-45</p>
    </div>
  </div>
</template>
```
::

## Reverse

Use `shimmer-reverse` to sweep the highlight in the opposite direction. In RTL layouts the sweep already follows the reading direction. See [RTL](https://uithing.com/#rtl).

## Play Once

Use `shimmer-once` to play a single sweep instead of looping, useful as a reveal when streaming completes. Pair it with `shimmer-duration-<number>` to control how long the sweep takes.

::prose-show-case
:docs-shimmer-play-once-demo

#code
```vue [DocsShimmerPlayOnceDemo.vue]
<script setup lang="ts">
  import { ref } from "vue";

  const key = ref(0);
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <p :key="key" class="shimmer text-muted-foreground shimmer-duration-1100 shimmer-once text-sm">
      Generating response&hellip;
    </p>
    <UiButton variant="outline" size="sm" @click="key++"> Replay </UiButton>
  </div>
</template>
```
::

## Disabling the Shimmer

Use `shimmer-none` to turn the effect off and render the text normally. It works in any class order, so the typical use is responsive or stateful:

::prose-show-case
:docs-shimmer-disabling-demo

#code
```vue [DocsShimmerDisablingDemo.vue]
<template>
  <div class="text-muted-foreground flex flex-col items-center gap-3 text-sm">
    <p class="shimmer md:shimmer-none">Generating response&hellip;</p>
    <p class="font-mono text-xs">shimmer md:shimmer-none</p>
  </div>
</template>
```
::

## Fallback

The shimmer is built on modern color features, [relative color syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors){rel="&#x22;nofollow&#x22;"} and `color-mix()`, which are available in all current browsers. In older browsers without support, the highlight gradient is dropped and the text can render transparent. If you target older browsers, apply `shimmer` conditionally with a `supports-*` variant:

```vue
<p class="supports-[color:oklch(from_white_l_c_h)]:shimmer">
  Generating response&hellip;
</p>
```

## Reduced Motion

When the user prefers reduced motion, the animation is disabled automatically and the text renders normally. There is nothing to configure.

## RTL

The sweep follows the reading direction, left to right in LTR and right to left in RTL, with no extra classes. Use `shimmer-reverse` to flip the direction manually.

::prose-show-case
:docs-shimmer-r-t-l-demo

#code
```vue [DocsShimmerRTLDemo.vue]
<template>
  <div
    class="text-muted-foreground mx-auto grid w-full max-w-lg gap-6 text-center text-sm sm:grid-cols-2"
  >
    <div class="flex flex-col gap-3">
      <p dir="ltr" class="shimmer">Generating response&hellip;</p>
      <p class="font-mono text-xs">dir=&quot;ltr&quot;</p>
    </div>
    <div class="flex flex-col gap-3">
      <p dir="rtl" class="shimmer">جارٍ إنشاء الرد&hellip;</p>
      <p class="font-mono text-xs">dir=&quot;rtl&quot;</p>
    </div>
  </div>
</template>
```
::


# Forms Introduction

So you may be wondering why I have 2 types of forms in this documentation... In all honesty, I was just following the guys that created shadcn-vue lol.

The components created here is how I usually go about creating form elements to be used in my projects. I use the composition API provided by `vee-validate` to compose my reusable form elements and then use the `useForm` composable to do the validation with either `zod` or `yup` schemas.

## Getting Started

::prose-steps
  :::prose-step
  ### Installation

  In order to get this to work in your app, you will need to install the [Vee-Validate Nuxt Module](https://vee-validate.logaretm.com/v4/integrations/nuxt/){rel=""nofollow""}

    ::::prose-code-group{sync="_pm"}
    ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
    npm i @vee-validate/nuxt
    ```

    ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
    pnpm i @vee-validate/nuxt
    ```

    ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
    bun add @vee-validate/nuxt
    ```

    ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
    yarn add @vee-validate/nuxt
    ```
    ::::
  :::

  :::prose-step
  ### Add Validation Library

  You will also need a library that will be used to perform validation.

  Since `vee-validate` supports `zod`, `yup`, `valibot` and `joi`, you can choose any of these libraries to perform validation.

  #### Zod

    ::::prose-code-group{sync="_pm"}
    ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
    npm i zod @vee-validate/zod
    ```

    ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
    pnpm i zod @vee-validate/zod
    ```

    ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
    bun add zod @vee-validate/zod
    ```

    ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
    yarn add zod @vee-validate/zod
    ```
    ::::

  #### Yup

    ::::prose-code-group{sync="_pm"}
    ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
    npm i yup @vee-validate/yup
    ```

    ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
    pnpm i yup @vee-validate/yup
    ```

    ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
    bun add yup @vee-validate/yup
    ```

    ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
    yarn add yup @vee-validate/yup
    ```
    ::::

  #### Valibot

    ::::prose-code-group{sync="_pm"}
    ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
    npm i valibot @vee-validate/valibot
    ```

    ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
    pnpm i valibot @vee-validate/valibot
    ```

    ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
    bun add valibot @vee-validate/valibot
    ```

    ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
    yarn add valibot @vee-validate/valibot
    ```
    ::::

  #### Joi

    ::::prose-code-group{sync="_pm"}
    ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
    npm i joi @vee-validate/joi
    ```

    ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
    pnpm i joi @vee-validate/joi
    ```

    ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
    bun add joi @vee-validate/joi
    ```

    ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
    yarn add joi @vee-validate/joi
    ```
    ::::
  :::

  :::prose-step
  ### Update Nuxt Config

  After that, we will need to add the `@vee-validate/nuxt` module to our `nuxt.config.js` file.

  ```ts
  export default defineNuxtConfig({
    //...
    modules: ["@vee-validate/nuxt"],
    //...
  });
  ```
  :::
::


# Form Builder

We all know that building forms can be a pain in the butt. I stumbled on this form builder example in the vee-validate documentation and thought that it would be nice to have one of these here as well.

## Getting Started

::prose-steps
  :::prose-step
  ### Setup

  To get started, you need to setup Vee Validate in your Nuxt project. You can do so by following the instructions outline in the [Forms Introduction](https://uithing.com/forms) page.
  :::

  :::prose-step
  ### Installation

  Next, you can install the form builder component by running the following command.

    ::::prose-code-group{hide-header-meta no-format sync="_pm"}
    ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
    npx ui-thing@latest add vee-form-builder
    ```

    ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
    pnpm dlx ui-thing@latest add vee-form-builder
    ```

    ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
    bun x ui-thing@latest add vee-form-builder
    ```

    ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
    yarn dlx ui-thing@latest add vee-form-builder
    ```
    ::::
  :::

  :::prose-step
  ### Use the Form Builder Component

  Now you can use the form builder component in your project.

  ```vue
  <template>
    <FormBuilder :fields="fields" />
  </template>

  <script lang="ts" setup>
    import type { FormBuilder } from "@/components/Ui/FormBuilder/FormBuilder.vue";

    const form: FormBuilder[] = [
      {
        variant: "Checkbox",
        name: "rememberMe",
        label: "Remember Me",
        description: "Remember me on this device",
      },
    ];
  </script>
  ```
  :::
::

## Full Example

Here is an example of the component in action.

Do note that you can use the `renderIf` prop to conditionally render a field.

Also, you can render your own markup by using the `name` of the prop on the object as the slot name. This is demonstrated in the `Conditional & Currency` section of the form.

::prose-show-case
:docs-form-builder-full

#code
```vue [DocsFormBuilderFull.vue]
<template>
  <form @submit="submit">
    <fieldset :disabled="isSubmitting">
      <UiFormBuilder class="grid grid-cols-12 gap-5" :fields="form">
        <template #nextInstructions>
          <div class="col-span-full">
            <p class="font-semibold">We can do this too</p>
            <p class="text-muted-foreground text-sm">
              Check the box below to conditionally render a field
            </p>
          </div>
        </template>
      </UiFormBuilder>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { promiseTimeout } from "@vueuse/core";
  import dayjs from "dayjs";
  import { array, bool, number, object, string } from "yup";
  import type { InferType } from "yup";

  import type { FormBuilder } from "@/components/Ui/FormBuilder/FormBuilder.vue";

  const schema = object({
    firstName: string().required().label("First Name").min(2),
    lastName: string().required().label("Last Name").min(2),
    email: string().email().required().label("Email"),
    password: string().required().label("Password").min(8),
    age: number().required().label("Age").min(18).max(200).typeError("Invalid age"),
    salePrice: number()
      .typeError("Invalid price")
      .label("Sale Price")
      .when("itemsOnSale", {
        is: true,
        then: (s) => s.required(),
      })
      .transform((v) => (v ? parseFloat(v) : v)),
    fullPrice: number()
      .typeError("Invalid price")
      .label("Full Price")
      .when("itemsOnSale", {
        is: false,
        then: (s) => s.required(),
      })
      .transform((v) => (v ? parseFloat(v) : v)),
    itemsOnSale: bool().label("Items on Sale").default(false),
    multiSelect: array().of(string()).label("Multi Select").min(1),
  });
  const { handleSubmit, isSubmitting, resetForm, values } = useForm<InferType<typeof schema>>({
    name: "form-builder-full",
    validationSchema: schema,
    initialValues: {
      firstName: "Jane",
      // you will get a vue warning cause select with the multiple prop expects an array
      multiSelect: ["Option 1"],
    },
  });

  const submit = handleSubmit((values) => {
    try {
      console.log(values);
      useSonner.success("Form submitted successfully", {
        description: "We will reset the form in 5 seconds",
      });
      promiseTimeout(5000).then(() => {
        resetForm();
      });
    } catch (error) {
      console.log(error);
      useSonner.error("Form submission failed", {
        description: "Please try again",
      });
    }
  });

  const form: FormBuilder[] = [
    { variant: "Divider", name: "divider", wrapperClass: tw`col-span-full`, label: "Input" },
    {
      variant: "Input",
      label: "First Name",
      name: "firstName",
      placeholder: "Enter your first name",
      required: true,
      hint: "Enter your first name",
      wrapperClass: tw`col-span-full md:col-span-6`,
    },
    {
      variant: "Input",
      label: "Last Name",
      name: "lastName",
      placeholder: "Enter your last name",
      required: true,
      hint: "Enter your last name",
      wrapperClass: tw`col-span-full md:col-span-6`,
    },
    {
      variant: "Input",
      label: "Email",
      name: "email",
      placeholder: "igugowuj@jakomka.edu",
      type: "email",
      required: true,
      icon: "lucide:mail",
      wrapperClass: tw`col-span-full md:col-span-6`,
    },
    {
      variant: "Input",
      label: "Password",
      name: "password",
      placeholder: "••••••••",
      icon: "lucide:lock",
      required: true,
      type: "password",
      wrapperClass: tw`col-span-full md:col-span-6`,
    },
    {
      variant: "Input",
      type: "number",
      label: "Age",
      min: 18,
      max: 200,
      placeholder: "Enter your age",
      name: "age",
      wrapperClass: tw`col-span-6`,
    },
    {
      variant: "Input",
      type: "date",
      label: "Date of Birth",
      min: dayjs().subtract(100, "year").format("YYYY-MM-DD"),
      max: dayjs().subtract(18, "year").format("YYYY-MM-DD"),
      name: "dob",
      wrapperClass: tw`col-span-6`,
    },
    {
      variant: "Divider",
      name: "divider",
      wrapperClass: tw`col-span-full`,
      label: "Conditional & Currency",
    },
    { variant: "Input", name: "nextInstructions" },
    { variant: "Divider", name: "divider", wrapperClass: tw`col-span-full` },
    {
      variant: "CurrencyInput",
      label: "Full Price",
      name: "fullPrice",
      placeholder: "Enter the full price",
      required: true,
      hint: "Enter the full price",
      wrapperClass: tw`col-span-full md:col-span-6`,
    },
    {
      variant: "CurrencyInput",
      label: "Sale Price",
      name: "salePrice",
      placeholder: "Enter the sale price",
      required: true,
      hint: "Enter the sale price",
      wrapperClass: tw`col-span-full md:col-span-6`,
      renderIf: () => values.itemsOnSale,
    },
    {
      variant: "Checkbox",
      name: "itemsOnSale",
      label: "Items on Sale",
      hint: "Are these items on sale?",
      wrapperClass: tw`col-span-full`,
    },
    {
      variant: "Divider",
      name: "divider",
      wrapperClass: tw`col-span-full`,
      label: "DateFields",
    },
    {
      variant: "DateField",
      name: "randomDateField",
      label: "Anniversary",
      hint: "When is your anniversary?",
      wrapperClass: tw`col-span-full`,
    },
    {
      variant: "Divider",
      name: "divider",
      wrapperClass: tw`col-span-full`,
      label: "File Input",
    },
    {
      variant: "FileInput",
      name: "imageFile",
      label: "Image Files",
      hint: "Only image files are allowed",
      multiple: false,
      accept: "image/*",
      wrapperClass: tw`col-span-full md:col-span-6`,
    },
    {
      variant: "FileInput",
      name: "documentFiles",
      label: "Document Files",
      hint: "Only PDF document files are allowed",
      multiple: true,
      accept: "application/pdf",
      wrapperClass: tw`col-span-full md:col-span-6`,
    },
    {
      variant: "Divider",
      name: "divider",
      wrapperClass: tw`col-span-full`,
      label: "Selects",
    },
    {
      variant: "Select",
      name: "singleSelect",
      label: "Select Only One",
      wrapperClass: tw`col-span-full md:col-span-6`,
      options: [
        { value: "", label: "Select a value", disabled: true },
        { value: "option1", label: "Option 1" },
        { value: "option2", label: "Option 2" },
        { value: "option3", label: "Option 3" },
      ],
    },
    {
      variant: "Select",
      name: "multiSelect",
      label: "Select Multiple",
      multiple: true,
      class: "h-[100px] mb-5",
      wrapperClass: tw`col-span-full md:col-span-6`,
      options: [
        { value: "none", label: "Select values", disabled: true },
        { value: "option1", label: "Option 1" },
        { value: "option2", label: "Option 2" },
        { value: "option3", label: "Option 3" },
      ],
    },
    {
      variant: "Divider",
      name: "divider",
      wrapperClass: tw`col-span-full`,
      label: "TextArea",
    },
    {
      variant: "Textarea",
      name: "message",
      label: "Message",
      placeholder: "Enter your message",
      required: true,
      hint: "Enter your message",
      wrapperClass: tw`col-span-full`,
    },
    {
      variant: "Divider",
      name: "divider",
      wrapperClass: tw`col-span-full`,
      label: "MultiSelect",
    },
    {
      variant: "MultiSelect",
      name: "multiSelectMultiTags",
      // for multi-select, the formLabel prop is needed to display the label
      formLabel: "Select Multiple Tags",
      // The label prop is used when options is an array of objects
      label: "label",
      valueProp: "value",
      wrapperClass: tw`col-span-full md:col-span-6`,
      mode: "tags",
      options: [
        { value: "", label: "Select a value", disabled: true },
        { value: "option1", label: "Option 1" },
        { value: "option2", label: "Option 2" },
        { value: "option3", label: "Option 3" },
      ],
    },
    {
      variant: "MultiSelect",
      name: "multiSelectSingle",
      // for multi-select, the formLabel prop is needed to display the label
      formLabel: "Select One Option",
      wrapperClass: tw`col-span-full md:col-span-6`,
      options: ["Option 1", "Option 2", "Option 3"],
    },
    {
      variant: "Divider",
      name: "divider",
      wrapperClass: tw`col-span-full`,
      label: "Pin Input",
    },
    {
      variant: "PinInput",
      name: "pinInput",
      label: "Enter your pin",
      wrapperClass: tw`col-span-full`,
      inputCount: 6,
    },
    {
      variant: "Divider",
      name: "divider",
      wrapperClass: tw`col-span-full`,
      label: "Tags Input",
    },
    {
      variant: "TagsInput",
      name: "tagInput",
      label: "Car Brands",
      wrapperClass: tw`col-span-full`,
      hint: "Type a brand and press enter to register it",
    },
    {
      variant: "Divider",
      name: "divider",
      wrapperClass: tw`col-span-full`,
      label: "Radio Group",
    },
    {
      variant: "RadioGroup",
      name: "radioGroup",
      label: "How would you like to be notified?",
      wrapperClass: tw`col-span-full`,
      options: [
        { label: "Send me emails only", value: "email" },
        { label: "Send me SMS only", value: "sms" },
        { label: "Call me", value: "call" },
        { label: "Don't notify me", value: "none" },
      ],
    },
    {
      variant: "Divider",
      name: "divider",
      wrapperClass: tw`col-span-full`,
      label: "Vueform Slider",
    },
    {
      variant: "VueformSlider",
      name: "vueFormSlider",
      label: "How much do you like Nuxt?",
      wrapperClass: tw`col-span-full md:col-span-6`,
      max: 5,
    },
    {
      variant: "VueformSlider",
      name: "volume",
      label: "Volume",
      wrapperClass: tw`col-span-full md:col-span-6`,
    },
    {
      variant: "Divider",
      name: "divider",
      wrapperClass: tw`col-span-full`,
      label: "Native Checkbox",
    },
    {
      variant: "NativeCheckbox",
      name: "vueFormNativeCheckbox",
      label: "Enable Notifications",
      wrapperClass: tw`col-span-full mt-2 mb-8`,
      description: "Receive notifications on your device",
    },
    {
      variant: "NativeCheckbox",
      name: "vueFormNativeCheckbox2",
      label: "Email Notifications",
      value: "email",
      description: "Get updates via email",
      wrapperClass: tw`col-span-full md:col-span-4`,
    },
    {
      variant: "NativeCheckbox",
      name: "vueFormNativeCheckbox2",
      label: "SMS Notifications",
      description: "Get updates via sms",
      value: "sms",
      wrapperClass: tw`col-span-full md:col-span-4`,
    },
    {
      variant: "NativeCheckbox",
      name: "vueFormNativeCheckbox2",
      label: "Call Notifications",
      description: "Get updates via call",
      value: "call",
      wrapperClass: tw`col-span-full md:col-span-4`,
    },
  ];
</script>
```
::


# VeeVueFormSlider

## Source code

Click :source-code-link{component="Vee/VueFormSlider.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-vue-form-slider
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-vue-form-slider
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-vue-form-slider
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-vue-form-slider
```
::

## Usage

You can visit the [VueForm Slider page](https://github.com/vueform/slider?tab=readme-ov-file#demo){rel="&#x22;nofollow&#x22;"} for more information on how to use this component.

### Single Slider

::prose-show-case
:docs-vee-vue-form-slider-single

#code
```vue [DocsVeeVueFormSliderSingle.vue]
<template>
  <div class="mx-auto max-w-md">
    <UiVeeVueFormSlider v-model="value" />
  </div>
</template>

<script lang="ts" setup>
  const value = ref(20);
</script>
```
::

### Multiple Sliders

::prose-show-case
:docs-vee-vue-form-slider-multiple

#code
```vue [DocsVeeVueFormSliderMultiple.vue]
<template>
  <div class="mx-auto max-w-md">
    <UiVeeVueFormSlider v-model="value" />
  </div>
</template>

<script lang="ts" setup>
  const value = ref([20, 40]);
</script>
```
::

### Tooltip Formatting

::prose-show-case
:docs-vee-vue-form-slider-tooltip

#code
```vue [DocsVeeVueFormSliderTooltip.vue]
<template>
  <div class="mx-auto flex w-full max-w-xl flex-col gap-y-16">
    <div class="flex w-full flex-col gap-5">
      <p class="text-sm">A slider where the tooltip shows the value in currency format.</p>
      <UiVeeVueFormSlider v-model="value" tooltip-position="bottom" :format="format1" />
    </div>
    <div class="flex w-full flex-col gap-5">
      <p class="text-sm">A slider where the tooltip format is based on the object passed in.</p>
      <UiVeeVueFormSlider
        v-model="value"
        tooltip-position="bottom"
        :format="{
          decimals: 1,
          prefix: '£',
        }"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  const value = ref(20);
  const format1 = (v: number) =>
    Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(v);
</script>
```
::

### Tooltip Merging

::prose-show-case
:docs-vee-vue-form-slider-merging

#code
```vue [DocsVeeVueFormSliderMerging.vue]
<template>
  <div class="mx-auto max-w-md">
    <UiVeeVueFormSlider v-model="value" :merge="10" />
  </div>
</template>

<script lang="ts" setup>
  const value = ref([20, 30, 40]);
</script>
```
::

### Vertical Slider

::prose-show-case
:docs-vee-vue-form-slider-vertical

#code
```vue [DocsVeeVueFormSliderVertical.vue]
<template>
  <div class="mx-auto flex justify-center">
    <div class="w-fit">
      <UiVeeVueFormSlider
        v-model="value"
        :step="5"
        orientation="vertical"
        :format="Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  const value = ref(20);
</script>
```
::

### Form Validation

::prose-show-case
:docs-vee-vue-form-slider-validate

#code
```vue [DocsVeeVueFormSliderValidate.vue]
<template>
  <form class="mx-auto flex max-w-md flex-col gap-6" @submit="submit">
    <UiLabel for="slider">Age Range</UiLabel>
    <UiVeeVueFormSlider id="slider" v-model="value" show-tooltip="drag" />
    <UiButton type="submit">Set Range</UiButton>
  </form>
</template>

<script lang="ts" setup>
  import { array, number, object } from "yup";

  const value = ref([18, 60]);

  const { handleSubmit } = useForm({
    validationSchema: toTypedSchema(
      object({
        slider: array().of(number().label("Age range").min(18).max(60)),
      })
    ),
  });

  const submit = handleSubmit((values) => {
    useSonner.success("Range Set", {
      description: `The age range has been set to ${values.slider?.[0]}-${values.slider?.[1]}.`,
    });
  });
</script>
```
::


# VeeCheckbox

## Source code

Click :source-code-link{component="Vee/Checkbox.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-checkbox
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-checkbox
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-checkbox
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-checkbox
```
::

## Usage

### Grouping checkboxes

Checkboxes can be tricky to implement with validation libraries. Luckily, Vee-Validate takes care of the heavy lifting for us. Take a look at the [`Building Checkboxes Docs`](https://vee-validate.logaretm.com/v4/guide/composition-api/custom-inputs/#building-checkboxes){rel="&#x22;nofollow&#x22;"} for more information on how this works.

::prose-show-case
:docs-vee-checkbox

#code
```vue [DocsVeeCheckbox.vue]
<template>
  <form class="mx-auto max-w-md" @submit="onSubmit">
    <fieldset :disabled="isSubmitting" class="space-y-5">
      <UiVeeCheckbox name="drinks" value="coffee" label="Coffee" hint="I love coffee" />
      <UiVeeCheckbox name="drinks" value="tea" label="Tea" hint="I love tea" />
      <UiVeeCheckbox name="drinks" value="water" label="Water" hint="I love water" />
      <UiButton :loading="isSubmitting" type="submit"> Order now </UiButton>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { promiseTimeout } from "@vueuse/core";
  import { array, object, string } from "yup";

  const { handleSubmit, isSubmitting } = useForm({
    validationSchema: toTypedSchema(
      object({
        drinks: array()
          .min(1, "Please select at least one drink")
          .label("Drinks")
          .required()
          .of(string()),
      })
    ),
  });

  const onSubmit = handleSubmit(async (values) => {
    await promiseTimeout(2000); // Simulate a network request
    useSonner.success("Order Complete", {
      description: () => `We will be sending you ${values.drinks.join(", ")} soon!`,
    });
  });
</script>
```
::

### Single checkbox

::prose-show-case
:docs-vee-checkbox-single

#code
```vue [DocsVeeCheckboxSingle.vue]
<template>
  <form class="mx-auto max-w-md" @submit="onSubmit">
    <p class="font-semibold">Terms of Service</p>
    <p class="text-muted-foreground mt-2 mb-4 text-sm">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit, perspiciatis sunt, quae
      architecto, dicta nobis corrupti commodi tempora asperiores eligendi id dolore dolores.
      Dolores quaerat architecto in sapiente expedita cum?
    </p>
    <fieldset :disabled="isSubmitting" class="space-y-5">
      <UiVeeCheckbox name="terms" label="I agree to the terms of service" />
      <UiButton type="submit"> Continue </UiButton>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { boolean, object } from "yup";

  const { handleSubmit, isSubmitting } = useForm({
    validationSchema: toTypedSchema(
      object({
        terms: boolean().label("Terms of Service").required().is([true]),
      })
    ),
  });

  const onSubmit = handleSubmit(async (_) => {
    const promise = () => new Promise((resolve) => setTimeout(resolve, 3000));
    useSonner.promise(promise, {
      loading: "Starting the process...",
      success: () => `We will begin the process now`,
      error: () => "Error! Your information could not be sent to our servers!",
    });
  });
</script>
```
::

### Default Value

We can use the `v-model` prop to set the default value of the VeeCheckbox.

::prose-show-case
:docs-vee-checkbox-default

#code
```vue [DocsVeeCheckboxDefault.vue]
<template>
  <div class="flex items-center justify-center">
    <form class="mx-auto max-w-md">
      <p class="font-semibold">On by default</p>
      <p class="text-muted-foreground mt-2 mb-4 text-sm">This checkbox will be true by default.</p>
      <fieldset class="space-y-5">
        <UiVeeCheckbox v-model="someVariable" name="terms" label="I will be on by default" />
      </fieldset>
    </form>
  </div>
</template>

<script lang="ts" setup>
  const someVariable = ref(true);
</script>
```
::

## Origin UI Examples

These are some examples that I found today over here [Origin UI](https://originui.com/checks-radios-switches){rel="&#x22;nofollow&#x22;"}. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

### Colored Checkbox

::prose-show-case
:docs-vee-checkbox-colored

#code
```vue [DocsVeeCheckboxColored.vue]
<template>
  <div
    class="flex justify-center [--primary:var(--color-indigo-500)] [--ring:var(--color-indigo-300)] dark:[--ring:var(--color-indigo-900)]"
  >
    <UiVeeCheckbox :model-value="true" label="Colored checkbox" />
  </div>
</template>
```
::

### Simple Todo

::prose-show-case
:docs-vee-checkbox-simple-todo

#code
```vue [DocsVeeCheckboxSimpleTodo.vue]
<template>
  <div class="flex justify-center">
    <UiVeeCheckbox id="checkbox-05" class="peer" :model-value="true" />
    <UiLabel for="checkbox-05" class="peer-has-[button[data-state=checked]]:line-through">
      Simple todo item
    </UiLabel>
  </div>
</template>
```
::

### Fancy Todo

::prose-show-case
:docs-vee-checkbox-fancy-todo

#code
```vue [DocsVeeCheckboxFancyTodo.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeCheckbox
      id="checkbox-06"
      class="peer [&_button]:border-border [&_[data-state=checked]]:border-emerald-500 [&_[data-state=checked]]:bg-emerald-500 [&_button]:rounded-full [&_button_span]:rounded-full"
      :model-value="true"
    />
    <UiLabel
      for="checkbox-06"
      class="peer-has-[button[data-state=checked]]:text-muted-foreground after:bg-muted-foreground relative peer-has-[button[data-state=checked]]:line-through after:absolute after:top-1/2 after:left-0 after:h-px after:w-full after:origin-bottom after:-translate-y-1/2 after:scale-x-0 after:transition-transform after:ease-in-out peer-has-[button[data-state=checked]]:after:scale-x-100"
    >
      Fancy todo item
    </UiLabel>
  </div>
</template>
```
::

### Terms of Service

::prose-show-case
:docs-vee-checkbox-terms

#code
```vue [DocsVeeCheckboxTerms.vue]
<template>
  <div class="flex items-center justify-center gap-2">
    <UiVeeCheckbox id="checkbox-07">
      <template #label>
        <UiLabel for="checkbox-07">
          I agree to the
          <a class="underline" href="https://google.com" target="_blank"> terms of service </a>
        </UiLabel>
      </template>
    </UiVeeCheckbox>
  </div>
</template>
```
::

### Frameworks

::prose-show-case
:docs-vee-checkbox-frameworks

#code
```vue [DocsVeeCheckboxFrameworks.vue]
<template>
  <div class="flex justify-center gap-6">
    <UiVeeCheckbox
      v-for="framework in frameworks"
      :key="framework"
      class="[&_button]:border-border"
      :label="framework"
    />
  </div>
</template>

<script lang="ts" setup>
  const frameworks = ["Vue", "Nuxt", "Svelte"];
</script>
```
::

### Right Aligned

::prose-show-case
:docs-vee-checkbox-right-aligned

#code
```vue [DocsVeeCheckboxRightAligned.vue]
<template>
  <div class="mx-auto flex max-w-sm items-center justify-between gap-2">
    <UiLabel for="checkbox-09">Right aligned checkbox</UiLabel>
    <UiVeeCheckbox id="checkbox-09" />
  </div>
</template>
```
::

### Label w/ Sublabel

::prose-show-case
:docs-vee-checkbox-label-sublabel

#code
```vue [DocsVeeCheckboxLabelSublabel.vue]
<template>
  <div class="flex justify-center">
    <UiVeeCheckbox
      id="checkbox-10"
      hint="You can use this checkbox with a label and a description."
    >
      <template #label>
        <UiLabel for="checkbox-10" class="justify-start gap-2">
          Label
          <span class="text-muted-foreground text-xs leading-[inherit] font-normal">
            (Sublabel)
          </span>
        </UiLabel>
      </template>
    </UiVeeCheckbox>
  </div>
</template>
```
::

### Input Expansion

::prose-show-case
:docs-vee-checkbox-input-expansion

#code
```vue [DocsVeeCheckboxInputExpansion.vue]
<template>
  <div class="mx-auto flex max-w-sm flex-col items-start gap-5">
    <div>
      <UiVeeCheckbox
        id="checkbox-11"
        v-model="open"
        label="Checkbox with expansion"
        aria-controls="checkbox-input-11"
      />
      <p class="text-muted-foreground ml-[30px] text-xs">
        Check the <span class="font-semibold">Checkbox</span> to expand the input field.
      </p>
    </div>
    <AnimatePresence as="div" class="w-full">
      <motion.div
        v-if="open"
        :exit="{ opacity: 0, height: 0 }"
        :initial="{ opacity: 0, height: 0 }"
        :animate="{ opacity: 1, height: 'auto' }"
      >
        <UiInput autofocus class="w-full" placeholder="Enter your text here" />
      </motion.div>
    </AnimatePresence>
  </div>
</template>

<script lang="ts" setup>
  import { motion } from "motion-v";

  const open = ref(false);
</script>
```
::

### Right Aligned w/ Sublabel

::prose-show-case
:docs-vee-checkbox-right-aligned-sublabel

#code
```vue [DocsVeeCheckboxRightAlignedSublabel.vue]
<template>
  <div class="mx-auto flex max-w-sm items-start gap-2">
    <div class="grid grow gap-2">
      <UiLabel for="checkbox-12" class="justify-start gap-2">
        Label
        <span class="text-muted-foreground text-xs leading-[inherit] font-normal">
          (Sublabel)
        </span>
      </UiLabel>
      <p id="checkbox-12-description" class="text-muted-foreground text-xs">
        You can use this checkbox with a label and a description.
      </p>
    </div>
    <UiVeeCheckbox id="checkbox-12" aria-describedby="checkbox-12-description" />
  </div>
</template>
```
::

### Right Aligned w/ Sublabel Bordered

::prose-show-case
:docs-vee-checkbox-right-aligned-sublabel-border

#code
```vue [DocsVeeCheckboxRightAlignedSublabelBorder.vue]
<template>
  <div
    class="border-input has-[div_button[data-state=checked]]:border-ring relative mx-auto flex w-full max-w-sm items-start gap-2 rounded-lg border p-4 shadow-xs shadow-black/5"
  >
    <div class="grid grow gap-2">
      <UiLabel for="checkbox-13" class="justify-start gap-2">
        Label
        <span class="text-muted-foreground text-xs leading-[inherit] font-normal">
          (Sublabel)
        </span>
      </UiLabel>
      <p id="checkbox-13-description" class="text-muted-foreground text-xs">
        A short description goes here.
      </p>
    </div>
    <UiVeeCheckbox id="checkbox-13" aria-describedby="checkbox-13-description" />
  </div>
</template>
```
::

### Grid Box

::prose-show-case
:docs-vee-checkbox-grid-box

#code
```vue [DocsVeeCheckboxGridBox.vue]
<template>
  <div class="mx-auto flex w-full max-w-sm justify-center">
    <div class="grid w-full grid-cols-2 gap-3">
      <div
        v-for="item in items"
        :key="item.id"
        class="border-input has-[[data-state=checked]]:border-ring relative flex cursor-pointer flex-col gap-4 rounded-lg border p-4 shadow-xs shadow-black/5"
      >
        <div class="flex justify-between gap-2">
          <UiVeeCheckbox
            :id="item.id"
            :value="item.value"
            :model-value="item.defaultChecked ? item.value : null"
            class="order-1"
          />
          <Icon :name="item.icon" class="size-4 shrink-0 opacity-60" aria-hidden="true" />
        </div>
        <UiLabel class="after:absolute after:inset-0" :for="item.id">{{ item.label }}</UiLabel>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const items = [
    {
      id: "checkbox-16-c1",
      value: "c1",
      label: "Palette",
      icon: "lucide:swatch-book",
      defaultChecked: true,
    },
    { id: "checkbox-16-c2", value: "c2", label: "Brush", icon: "lucide:brush" },
    { id: "checkbox-16-c3", value: "c3", label: "Eraser", icon: "lucide:eraser" },
    { id: "checkbox-16-c4", value: "c4", label: "Cut", icon: "lucide:scissors" },
  ];
</script>
```
::

### Days of the Week

::prose-show-case
:docs-vee-checkbox-days-of-the-week

#code
```vue [DocsVeeCheckboxDaysOfTheWeek.vue]
<template>
  <div class="flex justify-center">
    <fieldset class="space-y-4">
      <legend class="text-foreground text-sm leading-none font-medium">Days of the week</legend>
      <div class="flex gap-1.5">
        <label
          v-for="item in items"
          :key="item.id"
          class="border-input has-[:focus-visible]:outline-ring/70 has-[[data-state=checked]]:border-primary has-[[data-state=checked]]:bg-primary has-[[data-state=checked]]:text-primary-foreground relative flex size-9 cursor-pointer flex-col items-center justify-center gap-3 rounded-full border text-center shadow-xs shadow-black/5 outline-offset-2 transition-colors has-[:focus-visible]:outline-2 has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-50"
        >
          <UiVeeCheckbox
            :id="item.id"
            :model-value="item.defaultChecked ? item.value : null"
            :value="item.value"
            class="sr-only"
            name="days"
            :disabled="item.disabled"
          />
          <span aria-hidden="true" class="text-sm font-medium">
            {{ item.label[0] }}
          </span>
          <span class="sr-only">{{ item.label }}</span>
        </label>
      </div>
    </fieldset>
  </div>
</template>

<script lang="ts" setup>
  const items = [
    { id: "checkbox-18-c1", value: "c1", label: "Monday", defaultChecked: true },
    { id: "checkbox-18-c2", value: "c2", label: "Tuesday", defaultChecked: true },
    { id: "checkbox-18-c3", value: "c3", label: "Wednesday" },
    { id: "checkbox-18-c4", value: "c4", label: "Thursday", defaultChecked: true },
    { id: "checkbox-18-c5", value: "c5", label: "Friday", defaultChecked: true },
    { id: "checkbox-18-c6", value: "c6", label: "Saturday" },
    { id: "checkbox-18-c7", value: "c7", label: "Sunday", disabled: true },
  ];
</script>
```
::


# Checkbox - Native

## Source code

Click :source-code-link{component="Vee/NativeCheckbox.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-native-checkbox
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-native-checkbox
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-native-checkbox
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-native-checkbox
```
::

## Why?

You may be wondering why this is here. I ran into an issue the other day with how the checkbox from Radix Vue was working with an array of values.

This has been fixed with the `CheckboxGroup` component in Reka UI but I am keeping this here anyways 🙂

## Usage

### Basic

::prose-show-case
:docs-vee-native-checkbox-basic

#code
```vue [DocsVeeNativeCheckboxBasic.vue]
<template>
  <div class="flex justify-center">
    <UiVeeNativeCheckbox />
  </div>
</template>
```
::

### Indeterminate

::prose-show-case
:docs-vee-native-checkbox-indeterminate

#code
```vue [DocsVeeNativeCheckboxIndeterminate.vue]
<template>
  <div class="flex justify-center">
    <UiVeeNativeCheckbox indeterminate />
  </div>
</template>
```
::

### Colors

::prose-show-case
:docs-vee-native-checkbox-colors

#code
```vue [DocsVeeNativeCheckboxColors.vue]
<template>
  <div class="flex flex-wrap justify-center gap-3">
    <UiVeeNativeCheckbox v-for="color in colors" :key="color" :color="color" indeterminate />
  </div>
</template>

<script lang="ts" setup>
  const colors = [
    "red",
    "orange",
    "amber",
    "yellow",
    "lime",
    "green",
    "emerald",
    "teal",
    "cyan",
    "sky",
    "blue",
    "indigo",
    "violet",
    "purple",
    "fuchsia",
    "pink",
    "rose",
    "slate",
    "gray",
    "zinc",
    "neutral",
    "stone",
  ] as const;
</script>
```
::

### Sizes

::prose-show-case
:docs-vee-native-checkbox-sizes

#code
```vue [DocsVeeNativeCheckboxSizes.vue]
<template>
  <div class="flex flex-wrap justify-center gap-3">
    <UiVeeNativeCheckbox v-for="size in sizes" :key="size" :size="size" indeterminate />
  </div>
</template>

<script lang="ts" setup>
  const sizes = ["sm", "md"] as const;
</script>
```
::

### Label Only

::prose-show-case
:docs-vee-native-checkbox-label

#code
```vue [DocsVeeNativeCheckboxLabel.vue]
<template>
  <div class="flex justify-center">
    <UiVeeNativeCheckbox label="Enable Notifications" />
  </div>
</template>
```
::

### Description Only

::prose-show-case
:docs-vee-native-checkbox-description

#code
```vue [DocsVeeNativeCheckboxDescription.vue]
<template>
  <div class="flex justify-center">
    <UiVeeNativeCheckbox description="I agree to getting notified via email & SMS" />
  </div>
</template>
```
::

### Label & Description

::prose-show-case
:docs-vee-native-checkbox-label-description

#code
```vue [DocsVeeNativeCheckboxLabelDescription.vue]
<template>
  <div class="flex justify-center">
    <UiVeeNativeCheckbox
      label="Enable Notification"
      description="I agree to getting notified via email & SMS"
    />
  </div>
</template>
```
::

### Array of Items

::prose-show-case
:docs-vee-native-checkbox-array

#code
```vue [DocsVeeNativeCheckboxArray.vue]
<template>
  <form class="mx-auto w-full max-w-sm" @submit="submit">
    <fieldset :disabled="isSubmitting" class="flex flex-col gap-8">
      <UiVeeNativeCheckbox
        name="notifications"
        label="Email"
        description="Get notified via email"
        value="Email"
      />
      <UiVeeNativeCheckbox
        name="notifications"
        label="SMS"
        description="Get notified via SMS"
        value="SMS"
      />
      <UiButton type="submit" :loading="isSubmitting">Save</UiButton>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { array, object, string } from "yup";
  import type { InferType } from "yup";

  const schema = object({
    notifications: array(string().required().label("Notification type")).min(
      1,
      "At least one notification type is required"
    ),
  });
  const { handleSubmit, isSubmitting } = useForm<InferType<typeof schema>>({
    name: "checkbox-notification",
    validationSchema: schema,
    initialValues: {
      notifications: ["Email"],
    },
  });

  const submit = handleSubmit(async () => {
    try {
      await new Promise((resolve) => setTimeout(resolve, 2000));
      useSonner.success("Updated Successfully", {
        description: "Your notification settings have been updated",
      });
    } catch (error: any) {
      useSonner.error("An error occurred", {
        duration: 12000,
        description: error.message || "An error occurred",
      });
    }
  });
</script>
```
::


# VeeCurrencyInput

## Source code

Click :source-code-link{component="Vee/CurrencyInput.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-currency-input
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-currency-input
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-currency-input
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-currency-input
```
::

## Usage

### User form

In the form below, we are using the `useForm` composition function provided by Vee-Validate to handle the form submission and validation. The `useForm` composable accepts a `validationSchema` option that we can use to define our validation rules. We are using the `yup` library to define our validation rules. You can use any validation library you want as long as it is supported by Vee-Validate and can be passed to the `toTypedSchema` function.

::prose-show-case
:docs-vee-currency-input

#code
```vue [DocsVeeCurrencyInput.vue]
<template>
  <form class="mx-auto max-w-md" @submit="onSubmit">
    <fieldset :disabled="isSubmitting" class="space-y-5">
      <UiVeeCurrencyInput
        placeholder="234"
        label="Toys total"
        name="toys"
        hint="The cost for the baby toys"
      />
      <UiVeeCurrencyInput
        placeholder="567"
        label="Food total"
        name="food"
        hint="The cost for the baby food"
      />
      <UiButton :loading="isSubmitting" type="submit"> Pay now </UiButton>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { promiseTimeout } from "@vueuse/core";
  import { number, object } from "yup";

  const schema = object({
    toys: number().required().label("Toys total").min(50),
    food: number().required().label("Food total").min(150),
  });

  const { handleSubmit, isSubmitting } = useForm({
    validationSchema: toTypedSchema(schema),
  });

  const onSubmit = handleSubmit(async (_) => {
    await promiseTimeout(2000);
    useSonner.success("Payment successful", {
      description: "Your payment was processed successfully! ",
    });
  });
</script>
```
::


# VeeDateField

## Source code

Click :source-code-link{component="Vee/DateField.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-date-field
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-date-field
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-date-field
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-date-field
```
::

## Usage

### DOB form

In the form below, we are using the `useForm` composition provided by Vee-Validate to handle the form submission and validation. The `useForm` composable accepts a `validationSchema` option that we can use to define our validation rules. We are using the `yup` library to define our validation rules. You can use any validation library you want as long as it is supported by Vee-Validate and can be passed to the `toTypedSchema` function.

::prose-show-case
:docs-vee-date-field

#code
```vue [DocsVeeDateField.vue]
<template>
  <form @submit="submit">
    <fieldset :disabled="isSubmitting" class="space-y-5">
      <UiVeeDateField name="dob" label="Enter your date of birth" />
      <UiButton type="submit">Submit</UiButton>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { getLocalTimeZone, parseDate, today } from "@internationalized/date";
  import type { DateValue } from "@internationalized/date";
  import { mixed, object } from "yup";
  import type { InferType } from "yup";

  const schema = object({
    dob: mixed<DateValue>().required().label("Date of birth"),
  });

  const { handleSubmit, isSubmitting } = useForm<InferType<typeof schema>>({
    validationSchema: schema,
    initialValues: {
      // use `parseDate` to convert a `Date` object to a `CalendarDate`
      dob: parseDate(today(getLocalTimeZone()).toString()),
    },
  });
  const submit = handleSubmit(async (values) => {
    useSonner.success("Awesome!", {
      description: `You were born on ${useDateFormat(values.dob.toString(), "dddd, MMM DD, YYYY").value}`,
    });
  });
</script>
```
::


# VeeDatepicker

## Source code

Click :source-code-link{component="Vee/Datepicker.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-datepicker
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-datepicker
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-datepicker
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-datepicker
```
::

## Usage

::prose-show-case
:docs-vee-datepicker

#code
```vue [DocsVeeDatepicker.vue]
<template>
  <form class="mx-auto max-w-md" @submit="onSubmit">
    <fieldset :disabled="isSubmitting" class="space-y-5">
      <UiVeeDatepicker
        :date-picker-props="{
          mode: 'dateTime',
        }"
        readonly
        placeholder="MM/DD/YYYY HH:MM AM/PM"
        label="Start date"
        name="startDate"
        hint="This will be displayed to the public"
      />
      <UiButton :loading="isSubmitting" type="submit"> Submit </UiButton>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { promiseTimeout } from "@vueuse/core";
  import dayjs from "dayjs";
  import { date, object } from "yup";

  const schema = object({
    startDate: date()
      .label("Start date")
      .required()
      .test({
        message: "Select a date after today",
        test(v) {
          const selectedDate = dayjs(v);
          const today = dayjs().startOf("day");
          return selectedDate.isAfter(today);
        },
      }),
  });

  const { handleSubmit, isSubmitting } = useForm({
    validationSchema: toTypedSchema(schema),
  });

  const onSubmit = handleSubmit(async () => {
    await promiseTimeout(2500);
    useSonner.success("Start Date Set", {
      description: "Your start date is set!",
    });
  });
</script>
```
::


# VeeFileInput

## Source code

Click :source-code-link{component="Vee/FileInput.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-file-input
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-file-input
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-file-input
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-file-input
```
::

## Usage

### File upload

Why not use the `VeeInput` to accept file uploads? Well, we cannot force select a file from a user's device so the way how data binding works with file inputs and `vee-validate` is a bit different. According to the [docs](https://vee-validate.logaretm.com/v4/api/field#rendering-complex-fields-with-scoped-slots){rel="&#x22;nofollow&#x22;"} it is better to use the `handleChange` and `handleBlur` methods to handle the file input changes.

::prose-show-case
:docs-vee-input-files

#code
```vue [DocsVeeInputFiles.vue]
<template>
  <form class="mx-auto max-w-md" @submit="onSubmit">
    <fieldset :disabled="isSubmitting" class="space-y-5">
      <UiVeeFileInput multiple label="Certificates" name="certs" hint="Add at least 2 files" />
      <UiButton :loading="isSubmitting" type="submit"> Upload files </UiButton>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { promiseTimeout } from "@vueuse/core";
  import { array, mixed, object } from "yup";

  const ACCEPTED_TYPES = [
    "application/pdf",
    "application/msword",
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    "application/vnd.ms-excel",
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    "text/plain",
    "image/jpeg",
    "image/png",
    "image/webp",
  ];

  const schema = object({
    certs: array()
      .of(
        mixed()
          .required()
          .label("Certificate")
          .test({
            message: "Ensure that the select file(s) are valid",
            name: "is-valid",
            test(v: any) {
              return ACCEPTED_TYPES.includes(v.type?.toLowerCase());
            },
          })
      )
      .min(2, "Upload at least 2 files")
      .label("Certificates")
      .required(),
  });

  const { handleSubmit, isSubmitting } = useForm({
    validationSchema: toTypedSchema(schema),
  });

  const onSubmit = handleSubmit(async (_, ctx) => {
    await promiseTimeout(3000);

    useSonner.success("Updated Successfully", {
      description: "We updated your information.",
    });
    ctx.resetForm();
  });
</script>
```
::


# VeeInput

## Source code

Click :source-code-link{component="Vee/Input.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-input
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-input
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-input
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-input
```
::

## Usage

### User form

In the form below, we are using the `useForm` composition function provided by Vee-Validate to handle the form submission and validation. The `useForm` composable accepts a `validationSchema` option that we can use to define our validation rules. We are using the `zod` library to define our validation rules. You can use any validation library you want as long as it is supported by Vee-Validate and can be passed to the `toTypedSchema` function.

::prose-show-case
:docs-vee-input

#code
```vue [DocsVeeInput.vue]
<template>
  <form class="mx-auto max-w-xs" @submit="onSubmit">
    <fieldset :disabled="isSubmitting" class="space-y-5">
      <UiVeeInput label="Full name" name="name" hint="This will be displayed to the public" />
      <UiVeeInput label="Email" name="email" type="email" />
      <UiVeeInput label="Age" name="age" type="number" />
      <UiButton :loading="isSubmitting" type="submit"> Submit </UiButton>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { promiseTimeout } from "@vueuse/core";
  import { number, object, string } from "yup";

  const schema = object({
    name: string().required().label("Name").min(3),
    age: number()
      .required()
      .label("Age")
      .integer()
      .min(18)
      .max(120)
      .typeError("Age must be a number"),
    email: string().required().label("Email").email(),
  });

  const { handleSubmit, isSubmitting } = useForm({
    validationSchema: toTypedSchema(schema),
  });

  const onSubmit = handleSubmit(async (_) => {
    await promiseTimeout(3000);
    useSonner.success("Information Saved", {
      description: (_) => "We updated your information.",
    });
  });
</script>
```
::

## Origin UI

Here we have some examples that come from [Origin UI](https://originui.com/inputs){rel="&#x22;nofollow&#x22;"}.

Not all examples are copied but these should give you a good idea of what you can do with the `VeeInput` component.

### Required Input

::prose-show-case
:docs-origin-input-required

#code
```vue [DocsOriginInputRequired.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput label="Required input" placeholder="Email" type="email" required />
  </div>
</template>
```
::

### Input with Helper Text

::prose-show-case
:docs-origin-input-helper-text

#code
```vue [DocsOriginInputHelperText.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      label="Input with helper text"
      placeholder="Email"
      type="email"
      hint="We won't share your email with anyone"
    />
  </div>
</template>
```
::

### Input with label hint

::prose-show-case
:docs-origin-input-label-hint

#code
```vue [DocsOriginInputLabelHint.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      label="Input with label hint"
      placeholder="Email"
      type="email"
      label-hint="Optional"
    />
  </div>
</template>
```
::

### Input with Colored Ring

::prose-show-case
:docs-origin-input-colored-border

#code
```vue [DocsOriginInputColoredBorder.vue]
<template>
  <div
    class="flex items-center justify-center [--ring:var(--color-indigo-300)] dark:[--ring:var(--color-indigo-900)]"
  >
    <UiVeeInput label="Input with colored ring" placeholder="Email" type="email" />
  </div>
</template>
```
::

### Input with Gray Background

::prose-show-case
:docs-origin-input-gray-bg

#code
```vue [DocsOriginInputGrayBg.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      label="Input with gray background"
      class="bg-muted border-transparent shadow-none"
      placeholder="Email"
      type="email"
    />
  </div>
</template>
```
::

### Disabled Input

::prose-show-case
:docs-origin-input-disabled

#code
```vue [DocsOriginInputDisabled.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput label="Disabled input" disabled placeholder="Email" type="email" />
  </div>
</template>
```
::

### Input with Start Icon

::prose-show-case
:docs-origin-input-start-icon

#code
```vue [DocsOriginInputStartIcon.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      icon="lucide:at-sign"
      label="Input with start icon"
      placeholder="Email"
      type="email"
    />
  </div>
</template>
```
::

### Input with End Icon

::prose-show-case
:docs-origin-input-end-icon

#code
```vue [DocsOriginInputEndIcon.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      trailing-icon="lucide:mail"
      label="Input with end icon"
      placeholder="Email"
      type="email"
    />
  </div>
</template>
```
::

### Input with Start Inline Addon

::prose-show-case
:docs-origin-input-start-inline-add-on

#code
```vue [DocsOriginInputStartInlineAddOn.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput label="Input with start inline add-on" class="peer pl-16" placeholder="google.com">
      <template #icon>
        <span
          class="text-muted-foreground pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm peer-disabled:opacity-50"
        >
          https://
        </span>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with End Inline Addon

::prose-show-case
:docs-origin-input-end-inline-add-on

#code
```vue [DocsOriginInputEndInlineAddOn.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput label="Input with end inline add-on" class="peer pr-14" placeholder="google.com">
      <template #trailingIcon>
        <span
          class="text-muted-foreground pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm peer-disabled:opacity-50"
        >
          .com
        </span>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with Inline Addons

::prose-show-case
:docs-origin-input-inline-add-ons

#code
```vue [DocsOriginInputInlineAddOns.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput label="Input with inline add-ons" class="peer ps-6 pe-12" placeholder="0.00">
      <template #trailingIcon>
        <span
          class="text-muted-foreground pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm peer-disabled:opacity-50"
        >
          EUR
        </span>
      </template>
      <template #icon>
        <span
          class="text-muted-foreground pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm peer-disabled:opacity-50"
        >
          €
        </span>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with Start Addon

::prose-show-case
:docs-origin-input-start-addon

#code
```vue [DocsOriginInputStartAddon.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      label="Input with start add-on"
      class="peer pl-20"
      placeholder="google.com"
      type="text"
    >
      <template #icon>
        <span
          class="text-muted-foreground pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center border-r px-3 text-sm peer-disabled:opacity-50"
        >
          https://
        </span>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with End Addon

::prose-show-case
:docs-origin-input-end-addon

#code
```vue [DocsOriginInputEndAddon.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      label="Input with end add-on"
      class="peer pr-16"
      placeholder="google.com"
      type="text"
    >
      <template #trailingIcon>
        <span
          class="text-muted-foreground pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center border-l px-3 text-sm peer-disabled:opacity-50"
        >
          .com
        </span>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with Inline Start & End Addon

::prose-show-case
:docs-origin-input-inline-start-end-addon

#code
```vue [DocsOriginInputInlineStartEndAddon.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      label="Input with inline start and end add-on"
      class="peer pr-16"
      placeholder="0.00"
      type="text"
    >
      <template #icon>
        <span
          class="text-muted-foreground pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm peer-disabled:opacity-50"
        >
          €
        </span>
      </template>
      <template #trailingIcon>
        <span
          class="text-muted-foreground pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center border-l px-3 text-sm peer-disabled:opacity-50"
        >
          EUR
        </span>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with Start Select

::prose-show-case
:docs-origin-input-start-select

#code
```vue [DocsOriginInputStartSelect.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      label="Input with start select"
      class="peer pl-28"
      placeholder="192.168.1.1"
      type="text"
    >
      <template #icon>
        <select
          aria-label="Protocol"
          class="form-select border-input bg-background text-muted-foreground ring-offset-background focus:border-input focus:ring-offset-background focus-visible:ring-ring absolute inset-y-0 start-0 flex items-center justify-center rounded-s-md border ps-3 text-sm peer-disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
        >
          <option value="https://">https://</option>
          <option value="http://">http://</option>
          <option value="ftp://">ftp://</option>
          <option value="sftp://">sftp://</option>
          <option value="ws://">ws://</option>
          <option value="wss://">wss://</option>
        </select>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with End Select

::prose-show-case
:docs-origin-input-end-select

#code
```vue [DocsOriginInputEndSelect.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput label="Input with end select" class="peer pr-20" placeholder="google">
      <template #trailingIcon>
        <select
          aria-label="Protocol"
          class="form-select border-input bg-background text-muted-foreground focus:border-input focus:border-primary focus:ring-ring/50 absolute inset-y-0 end-0 flex rounded-e-md border pe-7 text-sm peer-disabled:opacity-50 focus:ring-[3px]"
        >
          <option>.com</option>
          <option>.org</option>
          <option>.net</option>
        </select>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with End Inline Button

::prose-show-case
:docs-origin-input-end-inline-button

#code
```vue [DocsOriginInputEndInlineButton.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      label="Input with end inline button"
      class="peer pe-9"
      placeholder="Email"
      type="email"
    >
      <template #trailingIcon>
        <button
          type="button"
          aria-label="Subscribe"
          class="text-muted-foreground/80 ring-offset-background hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md border border-transparent transition-shadow focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
        >
          <Icon name="lucide:send" class="size-4" />
        </button>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with End Icon Button

::prose-show-case
:docs-origin-input-end-icon-button

#code
```vue [DocsOriginInputEndIconButton.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      label="Input with end icon button"
      class="peer pr-10"
      placeholder="Email"
      type="email"
    >
      <template #trailingIcon>
        <button
          type="button"
          aria-label="Subscribe"
          class="border-l-input text-muted-foreground/80 ring-offset-background hover:bg-muted/50 hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md border border-transparent transition-shadow focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
        >
          <Icon name="lucide:download" class="size-4" />
        </button>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with End Button

::prose-show-case
:docs-origin-input-end-button

#code
```vue [DocsOriginInputEndButton.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput label="Input with end button" class="peer pr-16" placeholder="Email" type="email">
      <template #trailingIcon>
        <button
          type="button"
          aria-label="Send email"
          class="border-l-input ring-offset-background hover:bg-muted/50 hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 absolute inset-y-0 end-0 flex h-full items-center justify-center rounded-e-md border border-transparent px-3 text-sm transition-shadow focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
        >
          Send
        </button>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with Button

::prose-show-case
:docs-origin-input-with-button

#code
```vue [DocsOriginInputWithButton.vue]
<template>
  <div class="flex items-end justify-center gap-2">
    <UiVeeInput label="Input with button" placeholder="Email" type="email" />
    <UiButton aria-label="Send the email" variant="outline">Send</UiButton>
  </div>
</template>
```
::

### Input with Show/Hide Password

::prose-show-case
:docs-origin-input-show-hide-password

#code
```vue [DocsOriginInputShowHidePassword.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      label="Show/hide password input"
      :type="isVisible ? 'text' : 'password'"
      placeholder="••••••••"
    >
      <template #trailingIcon>
        <UiTooltip disable-closing-trigger>
          <UiTooltipTrigger as-child>
            <button
              type="button"
              aria-label="Login password"
              class="text-muted-foreground/80 ring-offset-background hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md border border-transparent transition-shadow focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
              @click="toggleVisibility"
            >
              <Icon :name="isVisible ? 'lucide:eye-off' : 'lucide:eye'" class="size-4" />
            </button>
          </UiTooltipTrigger>
          <UiTooltipContent align="center">
            {{ isVisible ? "Hide" : "Show" }} password
          </UiTooltipContent>
        </UiTooltip>
      </template>
    </UiVeeInput>
  </div>
</template>

<script lang="ts" setup>
  const isVisible = ref(false);
  const toggleVisibility = () => (isVisible.value = !isVisible.value);
</script>
```
::

### Input with Clear Button

::prose-show-case
:docs-origin-input-clear-button

#code
```vue [DocsOriginInputClearButton.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput v-model="value" label="Input with clear button" placeholder="Enter a value">
      <template #trailingIcon>
        <UiTooltip disable-closing-trigger>
          <AnimatePresence>
            <Motion
              v-if="value"
              class="text-muted-foreground hover:text-foreground absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center"
              :initial="{ opacity: 0, scale: 0.5 }"
              :animate="{ opacity: 1, scale: 1 }"
              :exit="{ opacity: 0, scale: 0 }"
            >
              <UiTooltipTrigger type="button" aria-label="Clear input" @click="value = ''">
                <Icon name="lucide:circle-x" class="size-4" />
              </UiTooltipTrigger>
            </Motion>
          </AnimatePresence>
          <UiTooltipContent align="center"> Clear </UiTooltipContent>
        </UiTooltip>
      </template>
    </UiVeeInput>
  </div>
</template>

<script lang="ts" setup>
  const value = ref("Click to clear");
</script>
```
::

### Input with \<kbd>

::prose-show-case
:docs-origin-input-with-k-d-b

#code
```vue [DocsOriginInputWithKDB.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      label="Search input with &lt;kbd&gt;"
      class="pr-12"
      placeholder="Search..."
      type="search"
    >
      <template #trailingIcon>
        <div
          class="text-muted-foreground pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-2"
        >
          <UiKbd variant="outline"> ⌘K </UiKbd>
        </div>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Search Input with Icon & Button

::prose-show-case
:docs-origin-input-search-with-icon-button

#code
```vue [DocsOriginInputSearchWithIconButton.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      label="Search input with icon and button"
      class="peer pe-9"
      placeholder="Search..."
      type="search"
      icon="lucide:search"
    >
      <template #trailingIcon>
        <button
          type="button"
          aria-label="Subscribe"
          class="text-muted-foreground/80 ring-offset-background hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md border border-transparent transition-shadow focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
        >
          <Icon name="lucide:arrow-right" class="size-4" />
        </button>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Search Input with Loader Icon

::prose-show-case
:docs-origin-input-search-with-loader

#code
```vue [DocsOriginInputSearchWithLoader.vue]
<template>
  <div class="flex items-center justify-center">
    <UiVeeInput
      v-model.trim="search"
      label="Search input with loader"
      class="peer pe-9"
      placeholder="Search..."
      type="search"
      :icon="!loading ? 'lucide:search' : 'svg-spinners:6-dots-rotate'"
    >
      <template #trailingIcon>
        <button
          type="button"
          aria-label="Start/Stop recording"
          class="text-muted-foreground/80 ring-offset-background hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md border border-transparent transition-shadow focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
          @click="useSonner.success('Recording started!')"
        >
          <Icon name="lucide:mic" class="size-4" />
        </button>
      </template>
    </UiVeeInput>
  </div>
</template>

<script lang="ts" setup>
  const search = ref("");
  const dSearch = refDebounced(search, 300);
  const loading = ref(false);

  const fakeApiCall = async () => {
    loading.value = true;
    await new Promise((resolve) => setTimeout(resolve, 2000));
    loading.value = false;
  };

  watch(dSearch, () => {
    fakeApiCall();
  });
</script>
```
::

### Input with Overlapping Label

::prose-show-case
:docs-origin-input-overlapping-label

#code
```vue [DocsOriginInputOverlappingLabel.vue]
<template>
  <div class="relative flex items-center justify-center">
    <UiLabel
      for="input-overlapping-label"
      class="bg-background text-foreground absolute start-1 top-0 z-10 block -translate-y-1/2 px-2 text-xs font-medium group-has-[:disabled]:opacity-50"
    >
      Input with overlapping label
    </UiLabel>

    <UiVeeInput id="input-overlapping-label" placeholder="Email" type="email" />
  </div>
</template>
```
::

### Input with Password Strength Indicator

::prose-show-case
:docs-origin-input-password-strength-indicator

#code
```vue [DocsOriginInputPasswordStrengthIndicator.vue]
<template>
  <div class="flex flex-col">
    <UiVeeInput
      v-model="password"
      label="Input with password strength indicator"
      class="peer pe-9"
      placeholder="Password"
      :type="isVisible ? 'text' : 'password'"
      :aria-invalid="strengthScore < requirements.length && password.length > 0"
    >
      <template #trailingIcon>
        <UiTooltip disable-closing-trigger>
          <UiTooltipTrigger as-child>
            <button
              type="button"
              aria-label="Subscribe"
              class="text-muted-foreground/80 ring-offset-background hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md border border-transparent transition-shadow focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
              @click="toggleVisibility"
            >
              <Icon :name="isVisible ? 'lucide:eye-off' : 'lucide:eye'" class="size-4" />
            </button>
          </UiTooltipTrigger>
          <UiTooltipContent align="center">
            {{ isVisible ? "Hide" : "Show" }} password
          </UiTooltipContent>
        </UiTooltip>
      </template>
    </UiVeeInput>

    <div
      class="bg-border mt-3 mb-4 h-1 w-full overflow-hidden rounded-full"
      role="progressbar"
      :aria-valuenow="strengthScore"
      :aria-valuemin="0"
      :aria-valuemax="requirements.length"
      aria-label="Password strength"
    >
      <div
        :class="[`h-full ${getStrengthColor(strengthScore)} transition-all duration-500 ease-out`]"
        :style="{ width: `${(strengthScore / requirements.length) * 100}%` }"
      />
    </div>

    <p id="password-strength" class="text-foreground mb-2 text-sm font-medium">
      {{ getStrengthText(strengthScore) }}. Must contain:
    </p>

    <ul class="space-y-1.5" aria-label="Password requirements">
      <li v-for="(req, index) in strength" :key="index" class="flex items-center gap-2">
        <Icon
          v-if="req.met"
          name="lucide:check"
          size="16"
          class="text-emerald-500"
          aria-hidden="true"
        />
        <Icon
          v-else
          name="lucide:x"
          size="16"
          class="text-muted-foreground/80"
          aria-hidden="true"
        />
        <span :class="[`text-xs ${req.met ? 'text-emerald-600' : 'text-muted-foreground'}`]">
          {{ req.text }}
          <span class="sr-only">
            {{ req.met ? " - Requirement met" : " - Requirement not met" }}
          </span>
        </span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
  const password = ref("");
  const isVisible = ref(false);
  const toggleVisibility = () => (isVisible.value = !isVisible.value);

  const requirements = [
    { regex: /.{8,}/, text: "At least 8 characters" },
    { regex: /[^A-Za-z0-9]/, text: "At least 1 special character" },
    { regex: /[0-9]/, text: "At least 1 number" },
    { regex: /[a-z]/, text: "At least 1 lowercase letter" },
    { regex: /[A-Z]/, text: "At least 1 uppercase letter" },
  ];
  const checkStrength = (pass: string) => {
    return requirements.map((req) => ({
      met: req.regex.test(pass),
      text: req.text,
    }));
  };

  const strength = computed(() => checkStrength(password.value));
  const strengthScore = computed(() => strength.value.filter((req) => req.met).length);

  const getStrengthColor = (score: number) => {
    if (score === 0) return "bg-border";
    if (score <= 1) return "bg-red-500";
    if (score <= 3) return "bg-orange-500";
    if (score === 4) return "bg-amber-500";
    return "bg-emerald-500";
  };

  const getStrengthText = (score: number) => {
    if (score === 0) return "Enter a password";
    if (score <= 3) return "Weak password";
    if (score === 4) return "Medium password";
    return "Strong password";
  };
</script>
```
::


# VeeMultiSelect

## Source code

Click :source-code-link{component="Vee/Multiselect.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-multi-select
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-multi-select
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-multi-select
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-multi-select
```
::

## Usage

You can visit the [VueForm Multiselect page](https://www.npmjs.com/package/@vueform/multiselect#demo){rel="&#x22;nofollow&#x22;"} for more information on how to use this component.

### Objects

::prose-show-case
:docs-vee-multiselect-object

#code
```vue [DocsVeeMultiselectObject.vue]
<template>
  <form class="mx-auto max-w-md" @submit="submit">
    <UiVeeMultiSelect
      form-label="Hero"
      value-prop="id"
      label="name"
      placeholder="Select a hero"
      :options="options"
      name="heroObject"
    />
    <UiButton type="submit" class="mt-5"> Submit </UiButton>
  </form>
</template>

<script setup lang="ts">
  import { number, object } from "yup";

  const options = [
    { name: "Batman", id: 1, disabled: true },
    { name: "Robin", id: 2 },
    { name: "Joker", id: 3 },
    { name: "Catwoman", id: 4 },
    { name: "Bane", id: 5 },
    { name: "Scarecrow", id: 6 },
    { name: "Riddler", id: 7 },
    { name: "Two-Face", id: 8 },
    { name: "Penguin", id: 9 },
    { name: "Poison Ivy", id: 10 },
    { name: "Harley Quinn", id: 11 },
  ];

  const { handleSubmit } = useForm({
    validationSchema: toTypedSchema(
      object({
        heroObject: number().label("Hero").required(),
      })
    ),
  });

  const submit = handleSubmit(
    async (values) => {
      useSonner.success("Awesome!", {
        description: `You selected ${options.find((o) => o.id === values.heroObject)?.name}`,
      });
    },
    ({ errors }) => {
      // This is how you would scroll to the first error in the form
      const firstError = Object.keys(errors)[0];
      const el: HTMLInputElement | null = document.querySelector(`[name="${firstError}"]`);
      el?.scrollIntoView({
        behavior: "smooth",
      });
      el?.focus();

      useSonner.error("No hero :(", {
        description: "Please select a hero",
      });
    }
  );
</script>
```
::

### Groups

::prose-show-case
:docs-vee-multiselect-group

#code
```vue [DocsVeeMultiselectGroup.vue]
<template>
  <div class="mx-auto max-w-md">
    <form @submit="submit">
      <UiVeeMultiSelect
        name="hero"
        form-label="Hero"
        groups
        placeholder="Select a hero"
        :options="options"
      />
      <UiButton type="submit" class="mt-4"> Submit </UiButton>
    </form>
  </div>
</template>

<script setup lang="ts">
  import { object, string } from "yup";

  const options = [
    {
      label: "DC",
      options: ["Batman", "Robin", "Joker"],
    },
    {
      label: "Marvel",
      options: ["Spider-man", "Iron Man", "Captain America"],
    },
  ];

  const { handleSubmit } = useForm({
    validationSchema: toTypedSchema(
      object({
        hero: string().label("Hero").required(),
      })
    ),
  });

  const submit = handleSubmit(
    async (values) => {
      useSonner.success("Awesome!", {
        description: `You selected ${values.hero}`,
      });
    },
    ({ errors }) => {
      // This is how you would scroll to the first error in the form
      const firstError = Object.keys(errors)[0];
      const el: HTMLInputElement | null = document.querySelector(`[name="${firstError}"]`);
      el?.scrollIntoView({
        behavior: "smooth",
      });
      el?.focus();

      useSonner.error("No hero :(", {
        description: "Please select a hero",
      });
    }
  );
</script>
```
::

### Search

::prose-show-case
:docs-vee-multiselect-search

#code
```vue [DocsVeeMultiselectSearch.vue]
<template>
  <div class="mx-auto max-w-md">
    <UiVeeMultiSelect
      searchable
      form-label="Hero"
      value-prop="id"
      label="name"
      placeholder="Search heroes..."
      :options="options"
    />
  </div>
</template>

<script setup lang="ts">
  const options = [
    { name: "Batman", id: 1, disabled: true },
    { name: "Robin", id: 2 },
    { name: "Joker", id: 3 },
    { name: "Cat Woman", id: 4 },
    { name: "Bane", id: 5 },
    { name: "Scarecrow", id: 6 },
    { name: "Riddler", id: 7 },
    { name: "Two-Face", id: 8 },
    { name: "Penguin", id: 9 },
    { name: "Poison Ivy", id: 10 },
    { name: "Harley Quinn", id: 11 },
  ];
</script>
```
::

### Tags w/ Search & Create

::prose-show-case
:docs-multiselect-tags-search-create

#code
```vue [DocsMultiselectTagsSearchCreate.vue]
<template>
  <div class="mx-auto w-full max-w-xs">
    <UiVeeMultiSelect
      v-model="value"
      mode="tags"
      :close-on-select="false"
      :searchable="true"
      :create-option="true"
      :options="[
        { value: 'batman', label: 'Batman' },
        { value: 'robin', label: 'Robin' },
        { value: 'joker', label: 'Joker' },
      ]"
    />
  </div>
</template>

<script lang="ts" setup>
  const value = ref(["batman", "robin"]);
</script>
```
::

### Autocomplete w/ Async

::prose-show-case
:docs-multiselect-autocomplete-async

#code
```vue [DocsMultiselectAutocompleteAsync.vue]
<template>
  <div class="mx-auto w-full max-w-xs">
    <UiVeeMultiSelect
      v-model="value"
      placeholder="Choose a programming language"
      :filter-results="false"
      :min-chars="0"
      :delay="400"
      :searchable="true"
      :options="fetchLanguages"
    />
  </div>
</template>

<script lang="ts" setup>
  import { promiseTimeout } from "@vueuse/core";
  import { useFilter } from "reka-ui";

  const { contains } = useFilter({ sensitivity: "base" });
  const value = ref();

  const fetchLanguages = async (q?: string) => {
    if (q) {
      // Simulate network delay if a query is provided
      await promiseTimeout(2000);
    }
    const languages = [
      { value: "javascript", label: "JavaScript" },
      { value: "python", label: "Python" },
      { value: "java", label: "Java" },
      { value: "csharp", label: "C#" },
      { value: "php", label: "PHP" },
      { value: "ruby", label: "Ruby" },
      { value: "go", label: "Go" },
      { value: "swift", label: "Swift" },
    ];

    if (!q) return [...languages];
    return languages.filter((lang) => contains(lang.label, q));
  };
</script>
```
::


# VeeNumberField

## Source code

Click :source-code-link{component="Vee/NumberField.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-number-field
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-number-field
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-number-field
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-number-field
```
::

## Usage

### User form

In the form below, we are using the `useForm` composition function provided by Vee-Validate to handle the form submission and validation. The `useForm` composable accepts a `validationSchema` option that we can use to define our validation rules. We are using the `yup` library to define our validation rules. You can use any validation library you want as long as it is supported by Vee-Validate.

::prose-show-case
:docs-vee-number-field

#code
```vue [DocsVeeNumberField.vue]
<template>
  <form class="mx-auto w-full max-w-xs" @submit="submit">
    <fieldset :disabled="isSubmitting" class="grid grid-cols-1 gap-5">
      <UiVeeNumberField
        :min="0"
        label="Payment"
        name="payment"
        :format-options="{
          style: 'currency',
          currency: 'USD',
        }"
      >
        <UiNumberFieldInput placeholder="15" />
        <UiNumberFieldDecrement class="border-l" />
        <UiNumberFieldIncrement class="border-l" />
      </UiVeeNumberField>
      <UiButton :loading="isSubmitting" type="submit">Submit</UiButton>
    </fieldset>
  </form>
</template>
<script lang="ts" setup>
  import { promiseTimeout } from "@vueuse/core";
  import { number, object } from "yup";

  const { handleSubmit, resetForm, isSubmitting } = useForm({
    validationSchema: object({
      payment: number().required().min(0).label("Payment").typeError("Payment is required."),
    }),
  });

  const submit = handleSubmit(async () => {
    await promiseTimeout(2000);
    useSonner.success("Record updated", {
      description: "Your payment has been successfully updated.",
    });
    resetForm();
  });
</script>
```
::


# VeePinInput

## Source code

Click :source-code-link{component="Vee/PinInput.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-pin-input
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-pin-input
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-pin-input
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-pin-input
```
::

## Usage

### User form

In the form below, we are using the `useForm` composition function provided by Vee-Validate to handle the form submission and validation. The `useForm` composable accepts a `validationSchema` option that we can use to define our validation rules. We are using the `zod` library to define our validation rules. You can use any validation library you want as long as it is supported by Vee-Validate and can be passed to the `toTypedSchema` function.

::prose-show-case
:docs-vee-pin-input

#code
```vue [DocsVeePinInput.vue]
<template>
  <form @submit="onSubmit">
    <fieldset :disabled="isSubmitting" class="mx-auto grid w-fit max-w-xs grid-cols-1 gap-5">
      <UiVeePinInput :input-count="6" name="otp" label="Enter your 2FA code below" otp />
      <UiButton :loading="isSubmitting" type="submit"> Submit </UiButton>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { promiseTimeout } from "@vueuse/core";
  import { array, object, string } from "yup";

  const schema = object({
    otp: array()
      .label("OTP")
      .typeError("Please enter a valid code")
      .min(1, "Please enter a valid code")
      .length(6, "Code must be exactly 6 characters long")
      .required()
      .of(string().label("Code").required()),
  });

  const { handleSubmit, isSubmitting } = useForm({
    validationSchema: toTypedSchema(schema),
  });

  const onSubmit = handleSubmit(async (values) => {
    await promiseTimeout(2000); // Simulate a network request
    useSonner.success(`Verifying Code`, {
      description: `Code ${values.otp?.join("")} verified! You may now continue`,
    });
  });
</script>
```
::


# VeeRadioGroup

## Source code

Click :source-code-link{component="Vee/RadioGroup.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-radio-group
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-radio-group
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-radio-group
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-radio-group
```
::

## Usage

### Notification type

In the form below, we are using the `<UiVeeRadioGroup/>` component to create a radio group that allows the user to select how they want to be notified. The component uses the composition API provided by Vee-Validate to perform validation. Notice that we pass the different `RadioItems` into the default slot of the component.

::prose-show-case
:docs-vee-radio-group

#code
```vue [DocsVeeRadioGroup.vue]
<template>
  <form class="mx-auto w-fit max-w-md" @submit="onSubmit">
    <fieldset :disabled="isSubmitting" class="space-y-5">
      <UiVeeRadioGroup name="notify" label="Select how you want to be notified">
        <template v-for="(opt, i) in options" :key="i">
          <div class="mb-2 flex items-center gap-3">
            <UiRadioGroupItem :id="opt.value" :value="opt.value" />
            <UiLabel :for="opt.value">{{ opt.text }}</UiLabel>
          </div>
        </template>
      </UiVeeRadioGroup>
      <UiButton :loading="isSubmitting" type="submit"> Update settings </UiButton>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { promiseTimeout } from "@vueuse/core";
  import { object, string } from "yup";

  const options = [
    { text: "Send me emails only", value: "email" },
    { text: "Send me SMS only", value: "sms" },
    { text: "Call me", value: "call" },
    { text: "Don't notify me", value: "none" },
  ] as const;

  const schema = object({
    notify: string()
      .label("Notification Method")
      .trim()
      .required()
      .oneOf(
        options.map((opt) => opt.value),
        "Invalid notification method"
      ),
  });

  const { handleSubmit, isSubmitting } = useForm({
    validationSchema: toTypedSchema(schema),
  });

  const onSubmit = handleSubmit(async (values) => {
    await promiseTimeout(2000); // Simulate a network request

    if (values.notify === "none") {
      useSonner.success("Settings Updated", {
        description: "You will no longer receive notifications",
      });
      return;
    } else {
      useSonner.success("Settings Updated", {
        description: `You will be notified by ${values.notify}`,
      });
    }
  });
</script>
```
::


# VeeSelect

## Source code

Click :source-code-link{component="Vee/Select.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-select
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-select
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-select
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-select
```
::

## Usage

### Form

In the form below, we are using the `useForm` composition function provided by Vee-Validate to handle the form submission and validation. The `useForm` composable accepts a `validationSchema` option that we can use to define our validation rules. We are using the `zod` library to define our validation rules. You can use any validation library you want as long as it is supported by Vee-Validate and can be passed to the `toTypedSchema` function.

::prose-show-case
:docs-vee-select

#code
```vue [DocsVeeSelect.vue]
<template>
  <form class="mx-auto max-w-xs" @submit="onSubmit">
    <fieldset :disabled="isSubmitting" class="grid gap-5">
      <UiVeeSelect label="Country" name="country" hint="Pick the country you want to visit">
        <option disabled value="">Select a country</option>
        <option v-for="country in countries" :key="country" :value="country">
          {{ country }}
        </option>
      </UiVeeSelect>
      <AnimatePresence>
        <Motion
          v-if="values.country"
          :initial="{ opacity: 0, y: -10 }"
          :animate="{ opacity: 1, y: 0 }"
          :exit="{ opacity: 0, y: -10 }"
          :transition="{ type: 'keyframes' }"
        >
          <UiVeeSelect
            label="Attraction"
            name="attraction"
            hint="Pick the attraction you want to visit"
          >
            <option disabled value="">Select an attraction</option>
            <option v-for="spot in spots" :key="spot" :value="spot">
              {{ spot }}
            </option>
          </UiVeeSelect>
        </Motion>
      </AnimatePresence>
      <UiButton :loading="isSubmitting" type="submit"> Book now </UiButton>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { promiseTimeout } from "@vueuse/core";
  import { object, string } from "yup";

  const places = [
    { country: "Jamaica", spots: ["Dunn's River Falls", "Doctor's Cave Beach", "Blue Lagoon"] },
    { country: "Mexico", spots: ["Chichen Itza", "Cancun Beaches", "Tulum Ruins"] },
    { country: "USA", spots: ["Grand Canyon", "Statue of Liberty", "Yellowstone"] },
    { country: "Canada", spots: ["Niagara Falls", "Banff National Park", "CN Tower"] },
    { country: "Italy", spots: ["Colosseum", "Venice Canals", "Leaning Tower of Pisa"] },
    { country: "France", spots: ["Eiffel Tower", "Louvre Museum", "Palace of Versailles"] },
    { country: "Spain", spots: ["Sagrada Familia", "Alhambra", "Ibiza"] },
    { country: "Greece", spots: ["Acropolis of Athens", "Santorini", "Mykonos"] },
    { country: "Germany", spots: ["Neuschwanstein Castle", "Brandenburg Gate", "Berlin Wall"] },
    { country: "UK", spots: ["Big Ben", "Tower of London", "Stonehenge"] },
    { country: "Japan", spots: ["Mount Fuji", "Tokyo Tower", "Hiroshima Peace Memorial"] },
    { country: "China", spots: ["Great Wall of China", "Forbidden City", "Terracotta Army"] },
    { country: "India", spots: ["Taj Mahal", "Red Fort", "Golden Temple"] },
    { country: "Australia", spots: ["Sydney Opera House", "Great Barrier Reef", "Uluru"] },
    { country: "New Zealand", spots: ["Milford Sound", "Bay of Islands", "Franz Josef Glacier"] },
    { country: "Brazil", spots: ["Christ the Redeemer", "Sugarloaf Mountain", "Iguazu Falls"] },
    { country: "Argentina", spots: ["Perito Moreno Glacier", "Iguazu Falls", "Buenos Aires"] },
    { country: "Peru", spots: ["Machu Picchu", "Lake Titicaca", "Nazca Lines"] },
    { country: "Chile", spots: ["Easter Island", "Torres del Paine", "Valle de la Luna"] },
  ];

  const countries = places.map((place) => place.country);
  const spots = computed(
    () => places.find((place) => place.country === values.country)?.spots || []
  );

  const schema = object({
    country: string().label("Country").required().oneOf(countries, "Invalid country selected"),
    attraction: string().label("Attraction").required(),
  });

  const { handleSubmit, isSubmitting, values } = useForm({
    validationSchema: toTypedSchema(schema),
  });

  const onSubmit = handleSubmit(async (values, ctx) => {
    const id = useSonner.loading("Booking your trip...");
    await promiseTimeout(2000); // Simulate a network request
    useSonner.dismiss(id);
    await nextTick();
    useSonner.success(`Trip to ${values.country} booked!`, {
      description: `You will visit ${values.attraction}. Enjoy your trip!`,
    });
    ctx.resetForm();
  });
</script>
```
::


# VeeSwitch

## Source code

Click :source-code-link{component="Vee/Switch.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-switch
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-switch
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-switch
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-switch
```
::

## Usage

### Basic example

::prose-show-case
:docs-vee-switch

#code
```vue [DocsVeeSwitch.vue]
<template>
  <form class="mx-auto max-w-md" @submit="onSubmit">
    <fieldset :disabled="isSubmitting" class="space-y-5">
      <UiVeeSwitch
        name="productUpdates"
        label="Product updates"
        hint="Receive product announcements and release notes by email."
      />
      <UiButton :loading="isSubmitting" type="submit"> Save preferences </UiButton>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { boolean, object } from "yup";

  const { handleSubmit, isSubmitting } = useForm({
    validationSchema: toTypedSchema(
      object({
        productUpdates: boolean().label("Product updates"),
      })
    ),
  });

  const onSubmit = handleSubmit((values) => {
    useSonner.success("Preferences updated", {
      description: values.productUpdates
        ? "You will receive product updates."
        : "You will not receive product updates.",
    });
  });
</script>
```
::

### Default value

::prose-show-case
:docs-vee-switch-default

#code
```vue [DocsVeeSwitchDefault.vue]
<template>
  <div class="flex justify-center">
    <form class="w-full max-w-md space-y-4">
      <UiVeeSwitch
        v-model="enabled"
        name="notifications"
        label="Push notifications"
        hint="Turn on push notifications for mentions and replies."
      />
      <p class="text-muted-foreground text-sm">
        Notifications are currently
        <span class="text-foreground font-medium">{{ enabled ? "on" : "off" }}</span
        >.
      </p>
    </form>
  </div>
</template>

<script lang="ts" setup>
  const enabled = ref(true);
</script>
```
::

### Settings row

::prose-show-case
:docs-vee-switch-settings

#code
```vue [DocsVeeSwitchSettings.vue]
<template>
  <div class="flex justify-center">
    <form class="w-full max-w-lg space-y-4" @submit="onSubmit">
      <div class="bg-card rounded-xl border p-5 shadow-sm">
        <UiVeeSwitch
          name="airplaneMode"
          label="Airplane mode"
          hint="Disable wireless connections while still allowing access to offline content."
          class="justify-between"
        >
          <template #label="{ errorMessage }">
            <div class="grid gap-1 pr-4">
              <UiLabel :class="[errorMessage && 'text-destructive']">Airplane mode</UiLabel>
              <p class="text-muted-foreground text-sm">
                Disable wireless connections while still allowing access to offline content.
              </p>
            </div>
          </template>
          <template #hint />
        </UiVeeSwitch>
      </div>
      <UiButton type="submit">Update settings</UiButton>
    </form>
  </div>
</template>

<script lang="ts" setup>
  import { boolean, object } from "yup";

  const { handleSubmit } = useForm({
    validationSchema: toTypedSchema(
      object({
        airplaneMode: boolean().label("Airplane mode"),
      })
    ),
    initialValues: {
      airplaneMode: true,
    },
  });

  const onSubmit = handleSubmit((values) => {
    useSonner.success("Settings saved", {
      description: `Airplane mode is ${values.airplaneMode ? "on" : "off"}.`,
    });
  });
</script>
```
::

### Preferences card

::prose-show-case
:docs-vee-switch-preferences-card

#code
```vue [DocsVeeSwitchPreferencesCard.vue]
<template>
  <div class="flex justify-center">
    <form class="w-full max-w-xl" @submit="onSubmit">
      <UiCard class="gap-0 overflow-hidden py-0">
        <UiCardHeader class="border-b py-6">
          <UiCardTitle>Notification preferences</UiCardTitle>
          <UiCardDescription>
            Choose which updates you want to receive from your account.
          </UiCardDescription>
        </UiCardHeader>

        <UiCardContent class="px-0">
          <div class="border-b px-6 py-4">
            <UiVeeSwitch id="securityAlerts" name="securityAlerts">
              <template #label="{ errorMessage }">
                <div class="grid gap-1 pr-4">
                  <UiLabel for="securityAlerts" :class="[errorMessage && 'text-destructive']"
                    >Security alerts</UiLabel
                  >
                  <p class="text-muted-foreground text-sm">
                    Get notified about new sign-ins and unusual activity.
                  </p>
                </div>
              </template>
              <template #hint />
            </UiVeeSwitch>
          </div>

          <div class="border-b px-6 py-4">
            <UiVeeSwitch id="sproductUpdates" name="sproductUpdates">
              <template #label="{ errorMessage }">
                <div class="grid gap-1 pr-4">
                  <UiLabel for="sproductUpdates" :class="[errorMessage && 'text-destructive']"
                    >Product updates</UiLabel
                  >
                  <p class="text-muted-foreground text-sm">
                    Receive feature launches, changelogs, and release notes.
                  </p>
                </div>
              </template>
              <template #hint />
            </UiVeeSwitch>
          </div>

          <div class="px-6 py-4">
            <UiVeeSwitch id="weeklyDigest" name="weeklyDigest">
              <template #label="{ errorMessage }">
                <div class="grid gap-1 pr-4">
                  <UiLabel for="weeklyDigest" :class="[errorMessage && 'text-destructive']"
                    >Weekly digest</UiLabel
                  >
                  <p class="text-muted-foreground text-sm">
                    Get a weekly summary of mentions, replies, and pending tasks.
                  </p>
                </div>
              </template>
              <template #hint />
            </UiVeeSwitch>
          </div>
        </UiCardContent>

        <UiCardFooter class="justify-between border-t py-6">
          <p class="text-muted-foreground text-sm">You can update these settings any time.</p>
          <UiButton type="submit">Save changes</UiButton>
        </UiCardFooter>
      </UiCard>
    </form>
  </div>
</template>

<script lang="ts" setup>
  import { boolean, object } from "yup";

  const { handleSubmit } = useForm({
    name: "notificationPreferences",
    validationSchema: toTypedSchema(
      object({
        securityAlerts: boolean().label("Security alerts"),
        sproductUpdates: boolean().label("Product updates"),
        weeklyDigest: boolean().label("Weekly digest"),
      })
    ),
    initialValues: {
      securityAlerts: true,
      sproductUpdates: false,
      weeklyDigest: true,
    },
  });

  const onSubmit = handleSubmit((values) => {
    const enabledPreferences = [
      values.securityAlerts && "Security alerts",
      values.sproductUpdates && "Product updates",
      values.weeklyDigest && "Weekly digest",
    ].filter(Boolean);

    useSonner.success("Preferences saved", {
      description: enabledPreferences.length
        ? `Enabled: ${enabledPreferences.join(", ")}`
        : "All notification preferences are turned off.",
    });
  });
</script>
```
::


# VeeTagsInput

## Source code

Click :source-code-link{component="Vee/TagsInput.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-tags-input
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-tags-input
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-tags-input
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-tags-input
```
::

## Usage

In the form below, we are using the `useForm` composition function provided by Vee-Validate to handle the form submission and validation. The `useForm` composable accepts a `validationSchema` option that we can use to define our validation rules. We are using the `zod` library to define our validation rules. You can use any validation library you want as long as it is supported by Vee-Validate and can be passed to the `toTypedSchema` function.

::prose-show-case
:docs-vee-tags-input

#code
```vue [DocsVeeTagsInput.vue]
<template>
  <form class="mx-auto w-full max-w-xs" @submit="onSubmit">
    <fieldset :disabled="isSubmitting" class="grid gap-5">
      <UiVeeTagsInput
        :max="5"
        placeholder="Type a brand and press enter..."
        label="Car brands"
        name="brands"
        hint="This will be displayed to the public"
      />
      <UiButton :loading="isSubmitting" type="submit"> Submit </UiButton>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { promiseTimeout } from "@vueuse/core";
  import { array, object, string } from "yup";

  const schema = object({
    brands: array(string().label("Brand")).label("Brands").min(2).max(5).required(),
  });

  const { handleSubmit, isSubmitting } = useForm({
    validationSchema: toTypedSchema(schema),
  });

  const onSubmit = handleSubmit(async (values) => {
    await promiseTimeout(2000); // Simulate a network request
    useSonner.success("Brands Submitted", {
      description: h("pre", null, JSON.stringify(values.brands, null, 2)),
    });
  });
</script>
```
::


# VeeTextarea

## Source code

Click :source-code-link{component="Vee/Textarea.vue"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add vee-textarea
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add vee-textarea
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add vee-textarea
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add vee-textarea
```
::

## Usage

### Form

In the form below, we are using the `useForm` composition function provided by Vee-Validate to handle the form submission and validation. The `useForm` composable accepts a `validationSchema` option that we can use to define our validation rules. We are using the `zod` library to define our validation rules. You can use any validation library you want as long as it is supported by Vee-Validate and can be passed to the `toTypedSchema` function.

::prose-show-case
:docs-vee-textarea

#code
```vue [DocsVeeTextarea.vue]
<template>
  <form class="mx-auto max-w-md" @submit="onSubmit">
    <fieldset :disabled="isSubmitting" class="space-y-5">
      <UiVeeTextarea label="First love" name="firstLove" hint="We will not share this" />
      <UiVeeTextarea
        label="First heartbreak"
        name="firstHeartbreak"
        hint="We will not share this"
      />
      <UiButton type="submit"> Save secrets </UiButton>
    </fieldset>
  </form>
</template>

<script lang="ts" setup>
  import { promiseTimeout } from "@vueuse/core";
  import { object, string } from "yup";

  const schema = object({
    firstLove: string().label("First Love").required().min(3).max(50).trim(),
    firstHeartbreak: string().label("First Heartbreak").required().min(3).max(50).trim(),
  });

  const { handleSubmit, isSubmitting } = useForm({
    validationSchema: toTypedSchema(schema),
  });

  const onSubmit = handleSubmit(async () => {
    await promiseTimeout(2000); // Simulate a network request
    useSonner("Secrets Saved", {
      description: "Your secrets have been saved successfully.",
    });
  });
</script>
```
::


# ApexCharts

ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages. It is highly customizable and supports a wide range of chart types, making it a great choice for data visualization in web applications.

## Getting Started

::prose-steps
  :::prose-step
  ### Create the component

  Start by adding the following code to your project. Preferably in the components folder.

  ```vue [Apexchart.client.vue]
  <template>
    <!-- @vue-ignore -->
    <VueApexCharts v-bind="forwarded" ref="chart" />
  </template>

  <script lang="ts">
    import type { ApexOptions } from "apexcharts";
    import { useForwardPropsEmits } from "reka-ui";
    import VueApexCharts from "vue3-apexcharts";

    declare global {
      interface Window {
        Apex: ApexOptions;
      }
    }

    /**
     * This is the default configuration for ApexCharts, which can be overridden by the `options`
     * prop.
     *
     * It sets the default styles, colors, and other properties for the charts.
     */
    window.Apex = {
      tooltip: { arrow: false },
      chart: {
        animations: { enabled: true },
        fontFamily: "var(--font-sans)",
        foreColor: "var(--color-foreground)",
        selection: {
          fill: { color: "var(--color-blue-500)", opacity: 0.1 },
          stroke: { color: "var(--color-blue-500)", width: 1, opacity: 0.5 },
        },
        toolbar: {
          show: false,
          tools: {
            download: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m4-5l5 5l5-5m-5 5V3"/></svg>`,
            reset: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M21 12a9 9 0 0 0-9-9a9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5m-5 4a9 9 0 0 0 9 9a9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></g></svg>`,
            pan: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2m0 4V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2m0 4.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></g></svg>`,
            zoom: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21l-4.3-4.3"/></g></svg>`,
            zoomout: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21l-4.35-4.35M8 11h6"/></g></svg>`,
            zoomin: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21l-4.35-4.35M11 8v6m-3-3h6"/></g></svg>`,
            selection: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033zM5 3a2 2 0 0 0-2 2m16-2a2 2 0 0 1 2 2M5 21a2 2 0 0 1-2-2M9 3h1M9 21h2m3-18h1M3 9v1m18-1v2M3 14v1"/></svg>`,
          },
        },
        zoom: { enabled: false },
      },
      stroke: { curve: "smooth", lineCap: "round" },
      dataLabels: { enabled: false },
      grid: { borderColor: "var(--color-border)" },
      legend: {
        show: false,
        itemMargin: { horizontal: 8 },
        markers: { strokeWidth: 0, size: 6, offsetX: -3 },
      },
      markers: { strokeWidth: 0 },
      yaxis: {
        axisBorder: { color: "var(--color-border)" },
        axisTicks: { color: "var(--color-border)" },
        crosshairs: { stroke: { width: 1, color: "var(--color-border)" } },
        labels: { style: { colors: "var(--color-muted-foreground)", fontSize: "12px" } },
        title: { style: { color: "var(--color-muted-foreground)", fontSize: "12px" } },
      },
      xaxis: {
        axisBorder: { color: "var(--color-border)" },
        axisTicks: { color: "var(--color-border)" },
        crosshairs: { stroke: { width: 1, color: "var(--color-border)" } },
        labels: {
          style: { colors: "var(--color-muted-foreground)", fontSize: "12px" },
          hideOverlappingLabels: true,
          rotateAlways: false,
          rotate: 0,
        },
        title: { style: { color: "var(--color-muted-foreground)", fontSize: "12px" } },
      },
      plotOptions: {
        radialBar: {
          track: { background: "var(--color-muted)" },
          hollow: { size: "30px", background: "transparent" },
        },
        polarArea: {
          rings: { strokeColor: "var(--color-border)" },
          spokes: { connectorColors: "var(--color-border)" },
        },
        radar: {
          polygons: {
            strokeColors: "var(--color-border)",
            connectorColors: "var(--color-border)",
          },
        },
      },
      // Hex values are best. If you need to convert your oklch values, use the `culori` package.
      colors: ["#93c5fd", "#3b82f6", "#2563eb", "#1d4ed8", "#1e40af"],
    };

    export type ApexChartProps = {
      /**
       * All the optional configuration of the chart goes in this property.
       *
       * @default {}
       */
      options?: ApexOptions;
      /**
       * The chart type.
       *
       * @default line
       */
      type?:
        | "line"
        | "area"
        | "bar"
        | "histogram"
        | "pie"
        | "donut"
        | "radialBar"
        | "rangeBar"
        | "scatter"
        | "bubble"
        | "heatmap"
        | "candlestick"
        | "radar"
        | "polarArea"
        | "treemap"
        | "gauge";
      /**
       * The data which you want to display in the chart.
       *
       * @default [ ]
       */
      series?: ApexOptions["series"];
      /**
       * Width of the chart.
       *
       * @default "100%"
       */
      width?: string | number;
      /**
       * Height of the chart.
       *
       * @default "100%"
       */
      height?: string | number;
    };
    export type ChartInstanceMethods = {
      init(): Promise<void>;
      refresh(): Promise<void>;
      destroy(): void;
      updateOptions(
        options: any,
        redrawPaths?: boolean,
        animate?: boolean,
        updateSyncedCharts?: boolean
      ): Promise<void>;
      updateSeries(newSeries: any, animate?: boolean): Promise<void>;
      toggleSeries(seriesName: string): any;
      highlightSeries(seriesName: string): any;
      showSeries(seriesName: string): void;
      hideSeries(seriesName: string): void;
      resetSeries(): void;
      zoomX(min: number, max: number): void;
      toggleDataPointSelection(seriesIndex: number, dataPointIndex?: number): any;
      appendData(newData: any): Promise<void>;
      appendSeries(newSeries: any, animate?: boolean): Promise<void>;
      addXaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
      addYaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
      addPointAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
      removeAnnotation(id: string, options?: any): void;
      clearAnnotations(): void;
      dataURI(options?: { scale?: number; width?: number }): Promise<void>;
    };
  </script>

  <script lang="ts" setup>
    const props = withDefaults(defineProps<ApexChartProps>(), {
      series: () => [],
      type: "line",
      width: "100%",
      height: "100%",
      options: () => ({}),
    });

    /**
     * The ApexCharts instance.
     *
     * You can use this to call methods on the chart instance, such as `chart.updateOptions()`,
     * `chart.refresh()`, etc.
     */
    const chart = useTemplateRef<ChartInstanceMethods>("chart");

    const emits = defineEmits([
      "animationEnd",
      "beforeMount",
      "mounted",
      "updated",
      "click",
      "mouseMove",
      "mouseLeave",
      "legendClick",
      "markerClick",
      "selection",
      "dataPointSelection",
      "dataPointMouseEnter",
      "dataPointMouseLeave",
      "beforeZoom",
      "beforeResetZoom",
      "zoomed",
      "scrolled",
      "brushScrolled",
    ]);

    const forwarded = useForwardPropsEmits(props, emits);

    defineExpose({ chart });
  </script>

  <style scoped>
    :deep(.apexcharts-tooltip) {
      --apx-tt-bg: var(--color-popover);
      --apx-tt-border: var(--color-border);
      --apx-tt-shadow-y-mid: 8px;
      --apx-tt-shadow-y-far: 16px;
      --apx-tt-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.04),
        0 var(--apx-tt-shadow-y-mid) 16px -6px rgba(15, 23, 42, 0.12),
        0 var(--apx-tt-shadow-y-far) 36px -12px rgba(15, 23, 42, 0.18);
      --apx-tt-arrow-bg: var(--apx-tt-bg);
      --apx-tt-arrow-drop-y: 2px;
      --apx-tt-arrow-shadow: drop-shadow(0 0 0.5px rgba(15, 23, 42, 0.2))
        drop-shadow(0 var(--apx-tt-arrow-drop-y) 4px rgba(15, 23, 42, 0.2));
      --apx-tt-color: var(--color-popover-foreground);
      --apx-tt-color-muted: var(--color-muted-foreground);
      border: 1px solid --alpha(var(--color-border) / 50%) !important;
      background: var(--color-background) !important;
      box-shadow: var(--shadow-xl);
      border-radius: var(--radius-lg) !important;
      padding: 0 !important;

      .apexcharts-tooltip-title {
        padding: 8px 12px !important;
        background: var(--color-popover) !important;
        border-bottom: 1px solid --alpha(var(--color-border) / 50%) !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
        font-weight: var(--font-weight-semibold);
      }
    }

    :deep(.apexcharts-xaxistooltip),
    :deep(.apexcharts-yaxistooltip) {
      background: var(--color-popover) !important;
      border: 1px solid var(--color-border) !important;
      box-shadow: var(--shadow-xl);
      color: var(--color-popover-foreground) !important;
      border-radius: var(--radius-md);
    }
    :deep(.apexcharts-yaxistooltip-left:before) {
      border-left-color: var(--color-border) !important;
    }
    :deep(.apexcharts-yaxistooltip-left:after) {
      border-left-color: var(--color-popover) !important;
    }
    :deep(.apexcharts-xaxistooltip-bottom:after) {
      border-bottom-color: var(--color-popover) !important;
    }
    :deep(.apexcharts-xaxistooltip-bottom:before) {
      border-bottom-color: var(--color-border) !important;
    }

    :deep(.apexcharts-toolbar) {
      gap: 10px;
      align-items: center;
      max-width: fit-content;

      /* CSS for apple glass like container */
      background: transparent;

      > [class*="icon"] {
        width: auto;
        height: auto;
        transform: scale(1);
        margin: auto;
        transition: all 0.2s ease-in-out;
        color: var(--color-muted-foreground);
        &:hover:not(.apexcharts-selected) {
          color: --alpha(var(--color-primary) / 50%) !important;
          background: transparent !important;
        }
        &:hover {
          color: var(--color-primary) !important;
        }

        &.apexcharts-selected {
          color: var(--color-primary);
          background: transparent;
        }

        svg {
          fill: var(--color-muted-foreground);
          width: 16px;
          height: 16px;
          transform: scale(1);
        }
      }

      .apexcharts-menu {
        background: var(--color-popover);
        border: 1px solid --alpha(var(--color-border) / 50%);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        width: auto;
        min-width: 110px;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 2px;

        .apexcharts-menu-item {
          color: var(--color-popover-foreground);
          border-radius: var(--radius-sm);
          cursor: pointer;
          padding: 4px;
          font-size: 12px;
          font-weight: var(--font-weight-normal);
          &:hover {
            background: var(--color-muted);
          }
        }
      }
    }
  </style>
  ```
  :::
::


# Area

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add apexcharts
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add apexcharts
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add apexcharts
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add apexcharts
```
::

## Usage

### Interactive

::prose-show-case
:docs-apex-charts-area-interactive

#code
```vue [DocsApexChartsAreaInteractive.vue]
<template>
  <div>
    <UiCard class="pt-0">
      <UiCardHeader class="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
        <div class="grid flex-1 gap-1">
          <UiCardTitle>Area Chart - Interactive</UiCardTitle>
          <UiCardDescription> Showing total visitors for the last 3 months </UiCardDescription>
        </div>
        <UiSelect v-model="timeRange">
          <UiSelectTrigger class="hidden w-[160px] sm:ml-auto sm:flex" aria-label="Select a value">
            <UiSelectValue placeholder="Last 3 months" />
          </UiSelectTrigger>
          <UiSelectContent>
            <UiSelectItem value="90d" class="rounded-md"> Last 3 months </UiSelectItem>
            <UiSelectItem value="30d" class="rounded-md"> Last 30 days </UiSelectItem>
            <UiSelectItem value="7d" class="rounded-md"> Last 7 days </UiSelectItem>
          </UiSelectContent>
        </UiSelect>
      </UiCardHeader>
      <UiCardContent class="aspect-auto h-[350px] w-full px-2 pt-4 sm:px-6 sm:pt-6">
        <UiApexchart type="area" :series :options />
      </UiCardContent>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const timeRange = ref("90d");
  const chartData = [
    { date: "2024-04-01", desktop: 222, mobile: 150 },
    { date: "2024-04-02", desktop: 97, mobile: 180 },
    { date: "2024-04-03", desktop: 167, mobile: 120 },
    { date: "2024-04-04", desktop: 242, mobile: 260 },
    { date: "2024-04-05", desktop: 373, mobile: 290 },
    { date: "2024-04-06", desktop: 301, mobile: 340 },
    { date: "2024-04-07", desktop: 245, mobile: 180 },
    { date: "2024-04-08", desktop: 409, mobile: 320 },
    { date: "2024-04-09", desktop: 59, mobile: 110 },
    { date: "2024-04-10", desktop: 261, mobile: 190 },
    { date: "2024-04-11", desktop: 327, mobile: 350 },
    { date: "2024-04-12", desktop: 292, mobile: 210 },
    { date: "2024-04-13", desktop: 342, mobile: 380 },
    { date: "2024-04-14", desktop: 137, mobile: 220 },
    { date: "2024-04-15", desktop: 120, mobile: 170 },
    { date: "2024-04-16", desktop: 138, mobile: 190 },
    { date: "2024-04-17", desktop: 446, mobile: 360 },
    { date: "2024-04-18", desktop: 364, mobile: 410 },
    { date: "2024-04-19", desktop: 243, mobile: 180 },
    { date: "2024-04-20", desktop: 89, mobile: 150 },
    { date: "2024-04-21", desktop: 137, mobile: 200 },
    { date: "2024-04-22", desktop: 224, mobile: 170 },
    { date: "2024-04-23", desktop: 138, mobile: 230 },
    { date: "2024-04-24", desktop: 387, mobile: 290 },
    { date: "2024-04-25", desktop: 215, mobile: 250 },
    { date: "2024-04-26", desktop: 75, mobile: 130 },
    { date: "2024-04-27", desktop: 383, mobile: 420 },
    { date: "2024-04-28", desktop: 122, mobile: 180 },
    { date: "2024-04-29", desktop: 315, mobile: 240 },
    { date: "2024-04-30", desktop: 454, mobile: 380 },
    { date: "2024-05-01", desktop: 165, mobile: 220 },
    { date: "2024-05-02", desktop: 293, mobile: 310 },
    { date: "2024-05-03", desktop: 247, mobile: 190 },
    { date: "2024-05-04", desktop: 385, mobile: 420 },
    { date: "2024-05-05", desktop: 481, mobile: 390 },
    { date: "2024-05-06", desktop: 498, mobile: 520 },
    { date: "2024-05-07", desktop: 388, mobile: 300 },
    { date: "2024-05-08", desktop: 149, mobile: 210 },
    { date: "2024-05-09", desktop: 227, mobile: 180 },
    { date: "2024-05-10", desktop: 293, mobile: 330 },
    { date: "2024-05-11", desktop: 335, mobile: 270 },
    { date: "2024-05-12", desktop: 197, mobile: 240 },
    { date: "2024-05-13", desktop: 197, mobile: 160 },
    { date: "2024-05-14", desktop: 448, mobile: 490 },
    { date: "2024-05-15", desktop: 473, mobile: 380 },
    { date: "2024-05-16", desktop: 338, mobile: 400 },
    { date: "2024-05-17", desktop: 499, mobile: 420 },
    { date: "2024-05-18", desktop: 315, mobile: 350 },
    { date: "2024-05-19", desktop: 235, mobile: 180 },
    { date: "2024-05-20", desktop: 177, mobile: 230 },
    { date: "2024-05-21", desktop: 82, mobile: 140 },
    { date: "2024-05-22", desktop: 81, mobile: 120 },
    { date: "2024-05-23", desktop: 252, mobile: 290 },
    { date: "2024-05-24", desktop: 294, mobile: 220 },
    { date: "2024-05-25", desktop: 201, mobile: 250 },
    { date: "2024-05-26", desktop: 213, mobile: 170 },
    { date: "2024-05-27", desktop: 420, mobile: 460 },
    { date: "2024-05-28", desktop: 233, mobile: 190 },
    { date: "2024-05-29", desktop: 78, mobile: 130 },
    { date: "2024-05-30", desktop: 340, mobile: 280 },
    { date: "2024-05-31", desktop: 178, mobile: 230 },
    { date: "2024-06-01", desktop: 178, mobile: 200 },
    { date: "2024-06-02", desktop: 470, mobile: 410 },
    { date: "2024-06-03", desktop: 103, mobile: 160 },
    { date: "2024-06-04", desktop: 439, mobile: 380 },
    { date: "2024-06-05", desktop: 88, mobile: 140 },
    { date: "2024-06-06", desktop: 294, mobile: 250 },
    { date: "2024-06-07", desktop: 323, mobile: 370 },
    { date: "2024-06-08", desktop: 385, mobile: 320 },
    { date: "2024-06-09", desktop: 438, mobile: 480 },
    { date: "2024-06-10", desktop: 155, mobile: 200 },
    { date: "2024-06-11", desktop: 92, mobile: 150 },
    { date: "2024-06-12", desktop: 492, mobile: 420 },
    { date: "2024-06-13", desktop: 81, mobile: 130 },
    { date: "2024-06-14", desktop: 426, mobile: 380 },
    { date: "2024-06-15", desktop: 307, mobile: 350 },
    { date: "2024-06-16", desktop: 371, mobile: 310 },
    { date: "2024-06-17", desktop: 475, mobile: 520 },
    { date: "2024-06-18", desktop: 107, mobile: 170 },
    { date: "2024-06-19", desktop: 341, mobile: 290 },
    { date: "2024-06-20", desktop: 408, mobile: 450 },
    { date: "2024-06-21", desktop: 169, mobile: 210 },
    { date: "2024-06-22", desktop: 317, mobile: 270 },
    { date: "2024-06-23", desktop: 480, mobile: 530 },
    { date: "2024-06-24", desktop: 132, mobile: 180 },
    { date: "2024-06-25", desktop: 141, mobile: 190 },
    { date: "2024-06-26", desktop: 434, mobile: 380 },
    { date: "2024-06-27", desktop: 448, mobile: 490 },
    { date: "2024-06-28", desktop: 149, mobile: 200 },
    { date: "2024-06-29", desktop: 103, mobile: 160 },
    { date: "2024-06-30", desktop: 446, mobile: 400 },
  ];

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: chartData.map((item) => ({
        x: dayjs(item.date).toDate(),
        y: item.desktop,
      })),
    },
    {
      name: "Mobile",
      data: chartData.map((item) => ({
        x: dayjs(item.date).toDate(),
        y: item.mobile,
      })),
    },
  ]);

  watch(timeRange, (newRange) => {
    const referenceDate = dayjs("2024-06-30");
    const newDays = parseInt(newRange, 10);
    const startDate = referenceDate.subtract(newDays, "days");
    const filteredData = chartData.filter((item) => {
      return dayjs(item.date).isAfter(startDate);
    });
    series.value = [
      {
        name: "Desktop",
        data: filteredData.map((item) => ({
          x: dayjs(item.date).toDate(),
          y: item.desktop,
        })),
      },
      {
        name: "Mobile",
        data: filteredData.map((item) => ({
          x: dayjs(item.date).toDate(),
          y: item.mobile,
        })),
      },
    ];
  });

  const options = ref<ApexOptions>({
    stroke: { width: 1, curve: "smooth", lineCap: "round" },
    tooltip: {
      style: { fontSize: "12px" },
    },
    chart: {
      toolbar: { show: false },
      zoom: { enabled: false },
      fontFamily: "var(--font-sans)",
    },
    legend: {
      fontSize: "12px",
      offsetY: 10,
      itemMargin: { horizontal: 8 },
      labels: {
        colors: "var(--color-card-foreground)",
      },
      markers: {
        offsetX: -4,
        size: 6,
        strokeWidth: 0,
      },
    },
    markers: { strokeWidth: 0 },
    fill: {
      type: "gradient",
      gradient: {
        shadeIntensity: 0,
        opacityFrom: 0.7,
        opacityTo: 0.4,
        stops: [0, 100],
      },
    },
    yaxis: { labels: { show: false } },
    xaxis: {
      type: "category",
      crosshairs: { show: false },
      labels: {
        hideOverlappingLabels: true,
        rotateAlways: false,
        rotate: 0,
        formatter(value) {
          return dayjs(value).format("MMM D");
        },
      },
      tickAmount: 5,
      axisTicks: { show: false },
      tooltip: { enabled: false },
    },
  });
</script>
```
::

### Area Chart

::prose-show-case
:docs-apex-charts-area1

#code
```vue [DocsApexChartsArea1.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Area Chart</UiCardTitle>
      <UiCardDescription> Showing total visitors for the last 6 months </UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[350px] w-full">
      <UiApexchart type="area" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            January - June 2024
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { curve: "smooth", width: 1 },

    fill: { type: "solid", opacity: 0.3 },
    yaxis: { labels: { show: false } },
    xaxis: {
      labels: {
        formatter(value) {
          return value?.slice(0, 3);
        },
      },
    },
  });
</script>
```
::

### Area Chart - Linear

::prose-show-case
:docs-apex-charts-area2

#code
```vue [DocsApexChartsArea2.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Area Chart</UiCardTitle>
      <UiCardDescription> Showing total visitors for the last 6 months </UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[350px] w-full">
      <UiApexchart type="area" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            January - June 2024
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { curve: "straight", width: 1 },

    fill: { type: "solid", opacity: 0.3 },
    yaxis: { labels: { show: false } },
    xaxis: {
      labels: {
        formatter(value) {
          return value?.slice(0, 3);
        },
      },
    },
  });
</script>
```
::

### Area Chart - Step Line

::prose-show-case
:docs-apex-charts-area3

#code
```vue [DocsApexChartsArea3.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Area Chart</UiCardTitle>
      <UiCardDescription> Showing total visitors for the last 6 months </UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[350px] w-full">
      <UiApexchart type="area" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            January - June 2024
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { curve: "stepline", width: 1 },

    fill: { type: "solid", opacity: 0.3 },
    yaxis: { labels: { show: false } },
    xaxis: {
      labels: {
        formatter(value) {
          return value?.slice(0, 3);
        },
      },
    },
  });
</script>
```
::

### Area Chart - Legend

::prose-show-case
:docs-apex-charts-area4

#code
```vue [DocsApexChartsArea4.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Area Chart</UiCardTitle>
      <UiCardDescription> Showing total visitors for the last 6 months </UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[350px] w-full">
      <UiApexchart type="area" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            January - June 2024
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
    {
      name: "Mobile",
      data: [
        { x: "January", y: 80 },
        { x: "February", y: 200 },
        { x: "March", y: 120 },
        { x: "April", y: 190 },
        { x: "May", y: 130 },
        { x: "June", y: 140 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    legend: { show: true },
    stroke: { curve: "smooth", width: 1 },

    fill: { type: "solid", opacity: 0.3 },
    yaxis: { labels: { show: false } },
    xaxis: {
      tooltip: { enabled: false },
      labels: {
        formatter(value) {
          return value?.slice(0, 3);
        },
      },
    },
  });
</script>
```
::

### Area Chart - Custom Marker

::prose-show-case
:docs-apex-charts-area5

#code
```vue [DocsApexChartsArea5.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Area Chart</UiCardTitle>
      <UiCardDescription> Showing total visitors for the last 6 months </UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[350px] w-full">
      <UiApexchart type="area" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            January - June 2024
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
    {
      name: "Mobile",
      data: [
        { x: "January", y: 80 },
        { x: "February", y: 200 },
        { x: "March", y: 120 },
        { x: "April", y: 190 },
        { x: "May", y: 130 },
        { x: "June", y: 140 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { curve: "smooth", width: 1 },
    legend: {
      show: true,
      markers: {
        customHTML() {
          return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m22 7l-8.5 8.5l-5-5L2 17"/><path d="M16 7h6v6"/></g></svg>`;
        },
      },
    },

    fill: { type: "solid", opacity: 0.3 },
    yaxis: { labels: { show: false } },
    xaxis: {
      tooltip: { enabled: false },
      labels: {
        formatter(value) {
          return value?.slice(0, 3);
        },
      },
    },
  });
</script>
```
::

### Area Chart - Gradient

::prose-show-case
:docs-apex-charts-area6

#code
```vue [DocsApexChartsArea6.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Area Chart</UiCardTitle>
      <UiCardDescription> Showing total visitors for the last 6 months </UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[350px] w-full">
      <UiApexchart type="area" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            January - June 2024
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
    {
      name: "Mobile",
      data: [
        { x: "January", y: 80 },
        { x: "February", y: 200 },
        { x: "March", y: 120 },
        { x: "April", y: 190 },
        { x: "May", y: 130 },
        { x: "June", y: 140 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { curve: "smooth", width: 1 },

    fill: {
      type: "gradient",
      opacity: 0.3,
      gradient: {
        stops: [0, 100],
        opacityFrom: 0.9,
        opacityTo: 0.1,
        shadeIntensity: 0,
      },
    },
    yaxis: { labels: { show: false } },
    xaxis: {
      tooltip: { enabled: false },
      labels: {
        formatter(value) {
          return value?.slice(0, 3);
        },
      },
    },
  });
</script>
```
::

### Area Chart - Axes

::prose-show-case
:docs-apex-charts-area7

#code
```vue [DocsApexChartsArea7.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Area Chart</UiCardTitle>
      <UiCardDescription> Showing total visitors for the last 6 months </UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[350px] w-full">
      <UiApexchart type="area" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            January - June 2024
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
    {
      name: "Mobile",
      data: [
        { x: "January", y: 80 },
        { x: "February", y: 200 },
        { x: "March", y: 120 },
        { x: "April", y: 190 },
        { x: "May", y: 130 },
        { x: "June", y: 140 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { curve: "smooth", width: 1 },

    xaxis: {
      tooltip: { enabled: false },
      labels: {
        formatter(value) {
          return value?.slice(0, 3);
        },
      },
    },
  });
</script>
```
::

### Area Chart - Annotations

::prose-show-case
:docs-apex-charts-area8

#code
```vue [DocsApexChartsArea8.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Area Chart</UiCardTitle>
      <UiCardDescription> Showing total visitors for the last 6 months </UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[350px] w-full">
      <UiApexchart type="area" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            January - June 2024
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
    {
      name: "Mobile",
      data: [
        { x: "January", y: 80 },
        { x: "February", y: 200 },
        { x: "March", y: 120 },
        { x: "April", y: 190 },
        { x: "May", y: 130 },
        { x: "June", y: 140 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { curve: "smooth", width: 1 },
    annotations: {
      yaxis: [
        {
          y: 0,
          y2: 73,
          fillColor: "var(--color-red-500)",
          opacity: 1,
          strokeDashArray: 0,
          borderColor: "transparent",
          borderWidth: 0,
          label: {
            text: "Lowest",
            borderColor: "var(--color-border)",
            borderRadius: 6,
            offsetY: -5,
            offsetX: -10,
            style: {
              color: "var(--color-popover-foreground)",
              background: "var(--color-popover)",
              fontSize: "12px",
              padding: {
                bottom: 4,
                top: 4,
                left: 8,
                right: 8,
              },
            },
          },
        },
      ],
      points: [
        {
          x: "Feb",
          y: 305,
          // Do something when the point is clicked
          click() {
            useSonner("Most Visitors", {
              description: "February had the highest number of visitors.",
            });
          },
          marker: {
            size: 5,
            fillColor: "var(--color-emerald-500)",
            strokeColor: "var(--color-emerald-500)",
          },
          label: {
            text: "Most Visitors",
            borderColor: "var(--color-border)",
            borderRadius: 6,
            style: {
              background: "var(--color-popover)",
              color: "var(--color-popover-foreground)",
              padding: {
                bottom: 4,
                top: 4,
                left: 8,
                right: 8,
              },
            },
          },
        },
      ],
    },

    yaxis: { labels: { show: false } },
    xaxis: {
      tooltip: { enabled: false },
      labels: {
        formatter(value) {
          return value?.slice(0, 3);
        },
      },
    },
  });
</script>
```
::

### Area Chart - Custom Tooltip

::prose-show-case
:docs-apex-charts-area9

#code
```vue [DocsApexChartsArea9.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Area Chart</UiCardTitle>
      <UiCardDescription> Showing total visitors for the last 6 months </UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[350px] w-full">
      <UiApexchart type="area" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            January - June 2024
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
    {
      name: "Mobile",
      data: [
        { x: "January", y: 80 },
        { x: "February", y: 200 },
        { x: "March", y: 120 },
        { x: "April", y: 190 },
        { x: "May", y: 130 },
        { x: "June", y: 140 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { curve: "smooth", width: 1 },
    tooltip: {
      // Return an array of functions to customize the tooltip
      custom: (value) => {
        const dataDesktop = value.series[0][value.dataPointIndex];
        const dataMobile = value.series[1][value.dataPointIndex];
        const month = value.w.globals.initialSeries[0].data[value.dataPointIndex].x;
        const desktopColor = value.w.globals.colors[0];
        const mobileColor = value.w.globals.colors[1];
        return `
        <div class="p-3 bg-linear-to-b to-white from-zinc-100 dark:from-zinc-900 dark:to-zinc-800 w-full min-w-32 text-xs ring-1 ring-border/50 rounded-lg shadow-xl">
          <p class="font-semibold">${month} Visitors</p>
          <div class="flex flex-col mt-4 gap-2">
            <div class="flex items-center gap-2">
              <div class="w-1 h-[14px] block rounded-full" style="background-color: ${desktopColor};"></div>
              <span class="text-muted-foreground">Desktop</span>
              <span class="font-semibold">${dataDesktop}</span>
            </div>
            <div class="flex items-center gap-2">
              <div class="w-1 h-[14px] block rounded-full" style="background-color: ${mobileColor};"></div>
              <span class="text-muted-foreground">Mobile</span>
              <span class="font-semibold">${dataMobile}</span>
            </div>
          </div>
        </div>
        `;
      },
    },

    yaxis: { labels: { show: false } },
    xaxis: {
      tooltip: { enabled: false },
      labels: {
        formatter(value) {
          return value?.slice(0, 3);
        },
      },
    },
  });
</script>
```
::

### Area Chart - Toolbar

::prose-show-case
:docs-apex-charts-area10

#code
```vue [DocsApexChartsArea10.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Area Chart</UiCardTitle>
      <UiCardDescription> Showing total visitors for the last 6 months </UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[350px] w-full">
      <UiApexchart type="area" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            January - June 2024
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
    {
      name: "Mobile",
      data: [
        { x: "January", y: 80 },
        { x: "February", y: 200 },
        { x: "March", y: 120 },
        { x: "April", y: 190 },
        { x: "May", y: 130 },
        { x: "June", y: 140 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { curve: "smooth", width: 1 },
    yaxis: { labels: { show: false } },
    chart: {
      zoom: { enabled: true },
      selection: { enabled: true },
      toolbar: { show: true },
    },
    xaxis: {
      tooltip: { enabled: false },
      labels: {
        formatter(value) {
          return value?.slice(0, 3);
        },
      },
    },
  });
</script>
```
::

### Area Chart - Sparkline

::prose-show-case
:docs-apex-charts-area11

#code
```vue [DocsApexChartsArea11.vue]
<template>
  <UiCard class="@container">
    <UiCardHeader>
      <UiCardTitle>Area Chart</UiCardTitle>
      <UiCardDescription> Showing total visitors for the last 6 months </UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="grid aspect-auto w-full grid-cols-1 gap-4 @[450px]:grid-cols-2">
      <div class="@[700px]:h-[100px]">
        <UiApexchart type="area" :series :options />
      </div>
      <div class="@[700px]:h-[100px]">
        <UiApexchart type="area" :series="series2" :options />
      </div>
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            January - June 2024
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 30 },
        { x: "February", y: 250 },
        { x: "March", y: 110 },
        { x: "April", y: 200 },
        { x: "May", y: 400 },
        { x: "June", y: 440 },
      ],
    },
  ]);
  const series2 = ref<ApexOptions["series"]>([
    {
      name: "Mobile",
      data: [
        { x: "January", y: 80 },
        { x: "February", y: 200 },
        { x: "March", y: 120 },
        { x: "April", y: 190 },
        { x: "May", y: 130 },
        { x: "June", y: 140 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { width: 1 },
    yaxis: { labels: { show: false } },
    chart: {
      sparkline: { enabled: true },
    },
    xaxis: {
      tooltip: { enabled: false },
      labels: {
        formatter(value) {
          return value?.slice(0, 3);
        },
      },
    },
  });
</script>
```
::


# Bar

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add apexcharts
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add apexcharts
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add apexcharts
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add apexcharts
```
::

## Usage

### Interactive

::prose-show-case
:docs-apex-charts-bar1

#code
```vue [DocsApexChartsBar1.vue]
<template>
  <div>
    <UiCard class="py-0">
      <UiCardHeader class="flex flex-col items-stretch border-b !p-0 sm:flex-row">
        <div class="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0">
          <UiCardTitle>Bar Chart - Interactive</UiCardTitle>
          <UiCardDescription> Showing total visitors for the last 3 months </UiCardDescription>
        </div>
        <div class="flex">
          <button
            v-for="(chart, key) in ['desktop', 'mobile']"
            :key="key"
            :data-active="activeSeries === chart"
            class="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
            @click="activeSeries = chart"
          >
            <span class="text-muted-foreground text-xs">
              {{ chart.charAt(0).toUpperCase() + chart.slice(1) }} Visitors
            </span>
            <span class="text-lg leading-none font-bold sm:text-3xl">
              {{
                chart === "desktop"
                  ? Intl.NumberFormat().format(desktopTotal)
                  : Intl.NumberFormat().format(mobileTotal)
              }}
            </span>
          </button>
        </div>
      </UiCardHeader>
      <UiCardContent class="h-[250px] w-full px-2 sm:p-6">
        <UiApexchart type="bar" :series :options />
      </UiCardContent>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const chartData = [
    { date: "2024-04-01", desktop: 222, mobile: 150 },
    { date: "2024-04-02", desktop: 97, mobile: 180 },
    { date: "2024-04-03", desktop: 167, mobile: 120 },
    { date: "2024-04-04", desktop: 242, mobile: 260 },
    { date: "2024-04-05", desktop: 373, mobile: 290 },
    { date: "2024-04-06", desktop: 301, mobile: 340 },
    { date: "2024-04-07", desktop: 245, mobile: 180 },
    { date: "2024-04-08", desktop: 409, mobile: 320 },
    { date: "2024-04-09", desktop: 59, mobile: 110 },
    { date: "2024-04-10", desktop: 261, mobile: 190 },
    { date: "2024-04-11", desktop: 327, mobile: 350 },
    { date: "2024-04-12", desktop: 292, mobile: 210 },
    { date: "2024-04-13", desktop: 342, mobile: 380 },
    { date: "2024-04-14", desktop: 137, mobile: 220 },
    { date: "2024-04-15", desktop: 120, mobile: 170 },
    { date: "2024-04-16", desktop: 138, mobile: 190 },
    { date: "2024-04-17", desktop: 446, mobile: 360 },
    { date: "2024-04-18", desktop: 364, mobile: 410 },
    { date: "2024-04-19", desktop: 243, mobile: 180 },
    { date: "2024-04-20", desktop: 89, mobile: 150 },
    { date: "2024-04-21", desktop: 137, mobile: 200 },
    { date: "2024-04-22", desktop: 224, mobile: 170 },
    { date: "2024-04-23", desktop: 138, mobile: 230 },
    { date: "2024-04-24", desktop: 387, mobile: 290 },
    { date: "2024-04-25", desktop: 215, mobile: 250 },
    { date: "2024-04-26", desktop: 75, mobile: 130 },
    { date: "2024-04-27", desktop: 383, mobile: 420 },
    { date: "2024-04-28", desktop: 122, mobile: 180 },
    { date: "2024-04-29", desktop: 315, mobile: 240 },
    { date: "2024-04-30", desktop: 454, mobile: 380 },
    { date: "2024-05-01", desktop: 165, mobile: 220 },
    { date: "2024-05-02", desktop: 293, mobile: 310 },
    { date: "2024-05-03", desktop: 247, mobile: 190 },
    { date: "2024-05-04", desktop: 385, mobile: 420 },
    { date: "2024-05-05", desktop: 481, mobile: 390 },
    { date: "2024-05-06", desktop: 498, mobile: 520 },
    { date: "2024-05-07", desktop: 388, mobile: 300 },
    { date: "2024-05-08", desktop: 149, mobile: 210 },
    { date: "2024-05-09", desktop: 227, mobile: 180 },
    { date: "2024-05-10", desktop: 293, mobile: 330 },
    { date: "2024-05-11", desktop: 335, mobile: 270 },
    { date: "2024-05-12", desktop: 197, mobile: 240 },
    { date: "2024-05-13", desktop: 197, mobile: 160 },
    { date: "2024-05-14", desktop: 448, mobile: 490 },
    { date: "2024-05-15", desktop: 473, mobile: 380 },
    { date: "2024-05-16", desktop: 338, mobile: 400 },
    { date: "2024-05-17", desktop: 499, mobile: 420 },
    { date: "2024-05-18", desktop: 315, mobile: 350 },
    { date: "2024-05-19", desktop: 235, mobile: 180 },
    { date: "2024-05-20", desktop: 177, mobile: 230 },
    { date: "2024-05-21", desktop: 82, mobile: 140 },
    { date: "2024-05-22", desktop: 81, mobile: 120 },
    { date: "2024-05-23", desktop: 252, mobile: 290 },
    { date: "2024-05-24", desktop: 294, mobile: 220 },
    { date: "2024-05-25", desktop: 201, mobile: 250 },
    { date: "2024-05-26", desktop: 213, mobile: 170 },
    { date: "2024-05-27", desktop: 420, mobile: 460 },
    { date: "2024-05-28", desktop: 233, mobile: 190 },
    { date: "2024-05-29", desktop: 78, mobile: 130 },
    { date: "2024-05-30", desktop: 340, mobile: 280 },
    { date: "2024-05-31", desktop: 178, mobile: 230 },
    { date: "2024-06-01", desktop: 178, mobile: 200 },
    { date: "2024-06-02", desktop: 470, mobile: 410 },
    { date: "2024-06-03", desktop: 103, mobile: 160 },
    { date: "2024-06-04", desktop: 439, mobile: 380 },
    { date: "2024-06-05", desktop: 88, mobile: 140 },
    { date: "2024-06-06", desktop: 294, mobile: 250 },
    { date: "2024-06-07", desktop: 323, mobile: 370 },
    { date: "2024-06-08", desktop: 385, mobile: 320 },
    { date: "2024-06-09", desktop: 438, mobile: 480 },
    { date: "2024-06-10", desktop: 155, mobile: 200 },
    { date: "2024-06-11", desktop: 92, mobile: 150 },
    { date: "2024-06-12", desktop: 492, mobile: 420 },
    { date: "2024-06-13", desktop: 81, mobile: 130 },
    { date: "2024-06-14", desktop: 426, mobile: 380 },
    { date: "2024-06-15", desktop: 307, mobile: 350 },
    { date: "2024-06-16", desktop: 371, mobile: 310 },
    { date: "2024-06-17", desktop: 475, mobile: 520 },
    { date: "2024-06-18", desktop: 107, mobile: 170 },
    { date: "2024-06-19", desktop: 341, mobile: 290 },
    { date: "2024-06-20", desktop: 408, mobile: 450 },
    { date: "2024-06-21", desktop: 169, mobile: 210 },
    { date: "2024-06-22", desktop: 317, mobile: 270 },
    { date: "2024-06-23", desktop: 480, mobile: 530 },
    { date: "2024-06-24", desktop: 132, mobile: 180 },
    { date: "2024-06-25", desktop: 141, mobile: 190 },
    { date: "2024-06-26", desktop: 434, mobile: 380 },
    { date: "2024-06-27", desktop: 448, mobile: 490 },
    { date: "2024-06-28", desktop: 149, mobile: 200 },
    { date: "2024-06-29", desktop: 103, mobile: 160 },
    { date: "2024-06-30", desktop: 446, mobile: 400 },
  ];

  const getDesktopTotal = useMemoize(() => {
    return chartData.reduce((acc, item) => acc + item.desktop, 0);
  });
  const getMobileTotal = useMemoize(() => {
    return chartData.reduce((acc, item) => acc + item.mobile, 0);
  });

  const desktopTotal = getDesktopTotal();
  const mobileTotal = getMobileTotal();

  const activeSeries = ref("desktop");

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: chartData.map((item) => ({
        x: new Date(item.date),
        y: item.desktop,
      })),
    },
  ]);

  watchImmediate(activeSeries, (newValue) => {
    series.value = [
      {
        name: newValue.charAt(0).toUpperCase() + newValue.slice(1),
        data: chartData.map((item) => ({
          x: new Date(item.date),
          y: newValue === "desktop" ? item.desktop : item.mobile,
        })),
      },
    ];
  });

  const options = ref<ApexOptions>({
    plotOptions: {
      bar: {
        columnWidth: "55%",
      },
    },
    colors: ["var(--color-blue-500)"],
    xaxis: {
      type: "datetime",
      crosshairs: { show: false },
      labels: {
        formatter: (value) => {
          return dayjs(value).format("MMM D");
        },
      },
      tickAmount: 6,
    },
    yaxis: { show: false },
  });
</script>
```
::

### Bar Chart

::prose-show-case
:docs-apex-charts-bar2

#code
```vue [DocsApexChartsBar2.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Bar Chart</UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[300px] w-full">
      <UiApexchart type="bar" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    plotOptions: { bar: { borderRadius: 8 } },
    fill: { opacity: 1 },
    states: { hover: { filter: { type: "none" } } },
    yaxis: { labels: { show: false } },
    xaxis: { labels: { formatter: (value) => value?.slice(0, 3) } },
  });
</script>
```
::

### Bar Chart - Horizontal

::prose-show-case
:docs-apex-charts-bar3

#code
```vue [DocsApexChartsBar3.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Bar Chart</UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[350px] w-full">
      <UiApexchart type="bar" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    plotOptions: { bar: { borderRadius: 5, horizontal: true } },
    fill: { opacity: 1 },
    grid: { show: false },
    states: { hover: { filter: { type: "none" } } },
    xaxis: {
      type: "category",
      labels: { show: false },
      axisBorder: { show: false },
      axisTicks: { show: false },
    },
  });
</script>
```
::

### Bar Chart - Multiple

::prose-show-case
:docs-apex-charts-bar4

#code
```vue [DocsApexChartsBar4.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Bar Chart</UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[300px] w-full">
      <UiApexchart type="bar" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
    {
      name: "Mobile",
      data: [
        { x: "January", y: 80 },
        { x: "February", y: 200 },
        { x: "March", y: 120 },
        { x: "April", y: 190 },
        { x: "May", y: 130 },
        { x: "June", y: 140 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    plotOptions: { bar: { borderRadius: 6 } },
    stroke: { width: 4, colors: ["transparent"] },
    fill: { opacity: 1 },
    states: { hover: { filter: { type: "none" } } },
    yaxis: { labels: { show: false } },
    xaxis: {
      labels: { formatter: (value) => value?.slice(0, 3) },
      crosshairs: { show: false },
      axisBorder: { show: false },
      axisTicks: { show: false },
    },
  });
</script>
```
::

### Bar Chart - Stacked

::prose-show-case
:docs-apex-charts-bar5

#code
```vue [DocsApexChartsBar5.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Bar Chart</UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[300px] w-full">
      <UiApexchart type="bar" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
    {
      name: "Mobile",
      data: [
        { x: "January", y: 80 },
        { x: "February", y: 200 },
        { x: "March", y: 120 },
        { x: "April", y: 190 },
        { x: "May", y: 130 },
        { x: "June", y: 140 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    plotOptions: { bar: { borderRadius: 6 } },
    chart: { stacked: true },
    fill: { opacity: 1 },
    states: { hover: { filter: { type: "none" } } },
    yaxis: { labels: { show: false } },
    legend: { show: true },
    xaxis: {
      labels: { formatter: (value) => value?.slice(0, 3) },
      axisBorder: { show: false },
      axisTicks: { show: false },
    },
  });
</script>
```
::

### Bar Chart - Label

::prose-show-case
:docs-apex-charts-bar6

#code
```vue [DocsApexChartsBar6.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Bar Chart</UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[300px] w-full">
      <UiApexchart type="bar" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    plotOptions: { bar: { borderRadius: 8, dataLabels: { position: "top" } } },
    dataLabels: {
      enabled: true,
      offsetY: -25,
      style: { colors: ["var(--color-foreground)"] },
    },
    colors: ["var(--color-blue-600)"],
    fill: { opacity: 1 },
    states: { hover: { filter: { type: "none" } } },
    yaxis: { labels: { show: false } },
    xaxis: { labels: { formatter: (value) => value?.slice(0, 3) } },
  });
</script>
```
::

### Bar Chart - Mixed

::prose-show-case
:docs-apex-charts-bar7

#code
```vue [DocsApexChartsBar7.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Bar Chart</UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[300px] w-full">
      <UiApexchart type="bar" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "Chrome", y: 275, fillColor: "var(--color-blue-300)" },
        { x: "Safari", y: 200, fillColor: "var(--color-blue-500)" },
        { x: "Firefox", y: 187, fillColor: "var(--color-blue-600)" },
        { x: "Edge", y: 173, fillColor: "var(--color-blue-700)" },
        { x: "Other", y: 90, fillColor: "var(--color-blue-800)" },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    plotOptions: { bar: { borderRadius: 5, horizontal: true } },
    fill: { opacity: 1 },
    grid: { show: false },
    states: { hover: { filter: { type: "none" } } },
    xaxis: {
      type: "category",
      labels: { show: false },
      axisBorder: { show: false },
      axisTicks: { show: false },
    },
  });
</script>
```
::

### Bar Chart - Negative

::prose-show-case
:docs-apex-charts-bar8

#code
```vue [DocsApexChartsBar8.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Bar Chart</UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[300px] w-full">
      <UiApexchart type="bar" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Visitors",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 205 },
        { x: "March", y: -207, fillColor: "var(--color-rose-600)" },
        { x: "April", y: 173 },
        { x: "May", y: -209, fillColor: "var(--color-rose-600)" },
        { x: "June", y: 214 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    plotOptions: { bar: { borderRadius: 5 } },
    fill: { opacity: 1 },
    colors: ["var(--color-blue-600)"],
    states: { hover: { filter: { type: "none" } } },
    xaxis: {
      type: "category",
      labels: { show: false },
      axisBorder: { show: false },
      axisTicks: { show: false },
    },
  });
</script>
```
::

### Bar Chart - Image

::prose-show-case
:docs-apex-charts-bar9

#code
```vue [DocsApexChartsBar9.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle> Flower Sales </UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[300px] w-full">
      <UiApexchart type="bar" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  // Create fake data
  const generateFakeData = () => {
    return Array.from({ length: 70 }, () => ({
      x: faker.date.month({ abbreviated: true }),
      y: faker.number.int({ min: 250, max: 300 }),
    }));
  };

  const series = ref<ApexOptions["series"]>([
    {
      name: "Flowers Sold",
      data: generateFakeData(),
    },
  ]);

  const options = ref<ApexOptions>({
    plotOptions: {
      bar: {
        barHeight: "100%",
        columnWidth: "100%",
        borderRadius: 4,
        borderRadiusApplication: "end",
      },
    },
    stroke: { width: 0 },
    fill: {
      opacity: 1,
      type: "image",
      image: {
        src: "https://images.unsplash.com/photo-1526047932273-341f2a7631f9?q=80&w=1760&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      },
    },
    colors: ["var(--color-pink-500)"],
    states: { active: { filter: { type: "none" } }, hover: { filter: { type: "none" } } },
    grid: { show: false },
    yaxis: { labels: { show: false } },
    xaxis: {
      type: "category",
      crosshairs: { show: false },
      labels: { show: false },
      axisBorder: { show: false },
      axisTicks: { show: false },
    },
    tooltip: {
      followCursor: true,
    },
  });
</script>
```
::


# Candlestick

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add apexcharts
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add apexcharts
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add apexcharts
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add apexcharts
```
::

## Usage

### Candlestick Chart

::prose-show-case
:docs-apex-charts-candlestick1

#code
```vue [DocsApexChartsCandlestick1.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Candlestick Chart</UiCardTitle>
        <UiCardDescription>January - June 2024</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[350px]">
        <UiApexchart type="candlestick" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const series = ref<ApexOptions["series"]>([
    {
      // Generate random data for the candlestick chart
      data: [
        {
          x: new Date(1538778600000),
          y: [6629.81, 6650.5, 6623.04, 6633.33],
        },
        {
          x: new Date(1538780400000),
          y: [6632.01, 6643.59, 6620, 6630.11],
        },
        {
          x: new Date(1538782200000),
          y: [6630.71, 6648.95, 6623.34, 6635.65],
        },
        {
          x: new Date(1538784000000),
          y: [6635.65, 6651, 6629.67, 6638.24],
        },
        {
          x: new Date(1538785800000),
          y: [6638.24, 6640, 6620, 6624.47],
        },
        {
          x: new Date(1538787600000),
          y: [6624.53, 6636.03, 6621.68, 6624.31],
        },
        {
          x: new Date(1538789400000),
          y: [6624.61, 6632.2, 6617, 6626.02],
        },
        {
          x: new Date(1538791200000),
          y: [6627, 6627.62, 6584.22, 6603.02],
        },
        {
          x: new Date(1538793000000),
          y: [6605, 6608.03, 6598.95, 6604.01],
        },
        {
          x: new Date(1538794800000),
          y: [6604.5, 6614.4, 6602.26, 6608.02],
        },
        {
          x: new Date(1538796600000),
          y: [6608.02, 6610.68, 6601.99, 6608.91],
        },
        {
          x: new Date(1538798400000),
          y: [6608.91, 6618.99, 6608.01, 6612],
        },
        {
          x: new Date(1538800200000),
          y: [6612, 6615.13, 6605.09, 6612],
        },
        {
          x: new Date(1538802000000),
          y: [6612, 6624.12, 6608.43, 6622.95],
        },
        {
          x: new Date(1538803800000),
          y: [6623.91, 6623.91, 6615, 6615.67],
        },
        {
          x: new Date(1538805600000),
          y: [6618.69, 6618.74, 6610, 6610.4],
        },
        {
          x: new Date(1538807400000),
          y: [6611, 6622.78, 6610.4, 6614.9],
        },
        {
          x: new Date(1538809200000),
          y: [6614.9, 6626.2, 6613.33, 6623.45],
        },
        {
          x: new Date(1538811000000),
          y: [6623.48, 6627, 6618.38, 6620.35],
        },
        {
          x: new Date(1538812800000),
          y: [6619.43, 6620.35, 6610.05, 6615.53],
        },
        {
          x: new Date(1538814600000),
          y: [6615.53, 6617.93, 6610, 6615.19],
        },
        {
          x: new Date(1538816400000),
          y: [6615.19, 6621.6, 6608.2, 6620],
        },
        {
          x: new Date(1538818200000),
          y: [6619.54, 6625.17, 6614.15, 6620],
        },
        {
          x: new Date(1538820000000),
          y: [6620.33, 6634.15, 6617.24, 6624.61],
        },
        {
          x: new Date(1538821800000),
          y: [6625.95, 6626, 6611.66, 6617.58],
        },
        {
          x: new Date(1538823600000),
          y: [6619, 6625.97, 6595.27, 6598.86],
        },
        {
          x: new Date(1538825400000),
          y: [6598.86, 6598.88, 6570, 6587.16],
        },
        {
          x: new Date(1538827200000),
          y: [6588.86, 6600, 6580, 6593.4],
        },
        {
          x: new Date(1538829000000),
          y: [6593.99, 6598.89, 6585, 6587.81],
        },
        {
          x: new Date(1538830800000),
          y: [6587.81, 6592.73, 6567.14, 6578],
        },
        {
          x: new Date(1538832600000),
          y: [6578.35, 6581.72, 6567.39, 6579],
        },
        {
          x: new Date(1538834400000),
          y: [6579.38, 6580.92, 6566.77, 6575.96],
        },
        {
          x: new Date(1538836200000),
          y: [6575.96, 6589, 6571.77, 6588.92],
        },
        {
          x: new Date(1538838000000),
          y: [6588.92, 6594, 6577.55, 6589.22],
        },
        {
          x: new Date(1538839800000),
          y: [6589.3, 6598.89, 6589.1, 6596.08],
        },
        {
          x: new Date(1538841600000),
          y: [6597.5, 6600, 6588.39, 6596.25],
        },
        {
          x: new Date(1538843400000),
          y: [6598.03, 6600, 6588.73, 6595.97],
        },
        {
          x: new Date(1538845200000),
          y: [6595.97, 6602.01, 6588.17, 6602],
        },
        {
          x: new Date(1538847000000),
          y: [6602, 6607, 6596.51, 6599.95],
        },
        {
          x: new Date(1538848800000),
          y: [6600.63, 6601.21, 6590.39, 6591.02],
        },
        {
          x: new Date(1538850600000),
          y: [6591.02, 6603.08, 6591, 6591],
        },
        {
          x: new Date(1538852400000),
          y: [6591, 6601.32, 6585, 6592],
        },
        {
          x: new Date(1538854200000),
          y: [6593.13, 6596.01, 6590, 6593.34],
        },
        {
          x: new Date(1538856000000),
          y: [6593.34, 6604.76, 6582.63, 6593.86],
        },
        {
          x: new Date(1538857800000),
          y: [6593.86, 6604.28, 6586.57, 6600.01],
        },
        {
          x: new Date(1538859600000),
          y: [6601.81, 6603.21, 6592.78, 6596.25],
        },
        {
          x: new Date(1538861400000),
          y: [6596.25, 6604.2, 6590, 6602.99],
        },
        {
          x: new Date(1538863200000),
          y: [6602.99, 6606, 6584.99, 6587.81],
        },
        {
          x: new Date(1538865000000),
          y: [6587.81, 6595, 6583.27, 6591.96],
        },
        {
          x: new Date(1538866800000),
          y: [6591.97, 6596.07, 6585, 6588.39],
        },
        {
          x: new Date(1538868600000),
          y: [6587.6, 6598.21, 6587.6, 6594.27],
        },
        {
          x: new Date(1538870400000),
          y: [6596.44, 6601, 6590, 6596.55],
        },
        {
          x: new Date(1538872200000),
          y: [6598.91, 6605, 6596.61, 6600.02],
        },
        {
          x: new Date(1538874000000),
          y: [6600.55, 6605, 6589.14, 6593.01],
        },
        {
          x: new Date(1538875800000),
          y: [6593.15, 6605, 6592, 6603.06],
        },
        {
          x: new Date(1538877600000),
          y: [6603.07, 6604.5, 6599.09, 6603.89],
        },
        {
          x: new Date(1538879400000),
          y: [6604.44, 6604.44, 6600, 6603.5],
        },
        {
          x: new Date(1538881200000),
          y: [6603.5, 6603.99, 6597.5, 6603.86],
        },
        {
          x: new Date(1538883000000),
          y: [6603.85, 6605, 6600, 6604.07],
        },
        {
          x: new Date(1538884800000),
          y: [6604.98, 6606, 6604.07, 6606],
        },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    yaxis: { tooltip: { enabled: true }, labels: { show: false } },
    chart: {
      zoom: { enabled: true },
      selection: { enabled: true },
      toolbar: { show: true },
    },
    plotOptions: {
      candlestick: {
        colors: { upward: "var(--color-emerald-500)", downward: "var(--color-rose-500)" },
      },
    },
    tooltip: { followCursor: true },
    xaxis: {
      tickAmount: 4,
      labels: {
        style: { fontSize: "10px" },
        formatter(value) {
          return dayjs(value).format("MMM D  h:mma");
        },
      },
    },
  });
</script>
```
::


# Funnel

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add apexcharts
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add apexcharts
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add apexcharts
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add apexcharts
```
::

## Usage

### Funnel Chart

::prose-show-case
:docs-apex-charts-funnel1

#code
```vue [DocsApexChartsFunnel1.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Sales Funnel</UiCardTitle>
      <UiCardDescription>
        {{ dayjs().subtract(1, "month").format("MMMM YYYY") }} -
        {{ dayjs().format("MMMM YYYY") }}</UiCardDescription
      >
    </UiCardHeader>
    <UiCardContent class="h-[320px]">
      <UiApexchart type="bar" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Looking for a way to improve your sales funnel?
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            <span>Check out our</span>
            <NuxtLink
              target="_blank"
              href="https://apexcharts.com/vue-chart-demos/funnel-charts/funnel/"
              class="text-primary hover:underline"
            >
              ApexCharts documentation
            </NuxtLink>
            <span>for more examples and tips.</span>
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Leads",
      data: [
        { x: "Lead", y: 9500 },
        { x: "Email Campaign", y: 6500 },
        { x: "Website Visit", y: 4390 },
        { x: "Contact Form", y: 2390 },
        { x: "Quoted", y: 978 },
        { x: "Deal Closed", y: 540 },
        { x: "Repeat Customer", y: 120 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    states: { hover: { filter: { type: "none" } } },
    plotOptions: {
      bar: {
        borderRadius: 0,
        horizontal: true,
        barHeight: "80%",
        isFunnel: true,
      },
    },
    theme: {
      monochrome: { enabled: true, color: "#4F46E5", shadeTo: "light", shadeIntensity: 0.6 },
    },
    dataLabels: {
      enabled: true,
      formatter(val, opts) {
        console.log(val, opts);
        if (Number(val) > 2250) return `${val} (${Math.round((Number(val) / 9500) * 100)}%)`;
        return "";
      },
    },
  });
</script>
```
::

### Funnel Chart - Inverted

::prose-show-case
:docs-apex-charts-funnel2

#code
```vue [DocsApexChartsFunnel2.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Content Distribution</UiCardTitle>
      <UiCardDescription>
        {{ dayjs().subtract(1, "month").format("MMMM YYYY") }} -
        {{ dayjs().format("MMMM YYYY") }}</UiCardDescription
      >
    </UiCardHeader>
    <UiCardContent class="h-[320px]">
      <UiApexchart type="bar" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Want to learn more about funnel charts?
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            <span>Check out</span>
            <NuxtLink
              target="_blank"
              href="https://apexcharts.com/vue-chart-demos/funnel-charts/funnel/"
              class="text-primary hover:underline"
            >
              ApexCharts documentation
            </NuxtLink>
            <span>for more examples and tips.</span>
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Content Flow",
      data: [
        { x: "Original Posts", y: 30 },
        { x: "Shares by Influencers", y: 40 },
        { x: "Shares by Followers", y: 50 },
        { x: "Comments", y: 70 },
        { x: "Likes", y: 100 },
        { x: "Views", y: 200 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    states: { hover: { filter: { type: "none" } } },
    plotOptions: {
      bar: {
        borderRadius: 0,
        horizontal: true,
        barHeight: "90%",
        isFunnel: true,
      },
    },
    colors: ["#FF4560"],
    legend: { show: true },
  });
</script>
```
::


# Gauge

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add apexcharts
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add apexcharts
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add apexcharts
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add apexcharts
```
::

## Usage

### Gauge Chart

::prose-show-case
:docs-apex-charts-guage1

#code
```vue [DocsApexChartsGuage1.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Performance Score</UiCardTitle>
        <UiCardDescription>Overall system health</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[300px]">
        <UiApexchart type="gauge" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Performing well this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">Based on the last 30 days of metrics</div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([72]);

  const options = ref<ApexOptions>({
    labels: ["Score"],
    colors: ["var(--color-primary)"],
    plotOptions: {
      radialBar: {
        startAngle: -125,
        endAngle: 125,
        dataLabels: {
          name: {
            show: true,
            fontSize: "14px",
            fontWeight: "600",
            color: "var(--color-muted-foreground)",
            offsetY: 30,
          },
          value: {
            fontSize: "40px",
            fontWeight: "bold",
            color: "var(--color-primary)",
            offsetY: -5,
          },
        },
        hollow: { size: "70%", background: "transparent" },
      },
    },
    states: { hover: { filter: { type: "lighten" } } },
  });
</script>
```
::

### Gauge Chart - Color Bands

::prose-show-case
:docs-apex-charts-guage2

#code
```vue [DocsApexChartsGuage2.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Risk Level</UiCardTitle>
        <UiCardDescription>Portfolio risk assessment</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[300px]">
        <UiApexchart type="gauge" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Moderate risk detected <Icon name="lucide:shield-alert" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">Review your portfolio allocations</div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([55]);

  const options = ref<ApexOptions>({
    labels: ["Risk"],
    colors: [
      typeof series.value?.[0] === "number" && series.value[0] > 66
        ? "var(--color-red-500)"
        : typeof series.value?.[0] === "number" && series.value[0] > 33
          ? "var(--color-yellow-500)"
          : "var(--color-emerald-500)",
    ],
    plotOptions: {
      radialBar: {
        bands: [
          { from: 0, to: 33, color: "var(--color-emerald-500)", label: "Low" },
          { from: 33, to: 66, color: "var(--color-yellow-500)", label: "Medium" },
          { from: 66, to: 100, color: "var(--color-red-500)", label: "High" },
        ],
        bandsStyle: { strokeWidth: "40%", gap: 2, hideTrackWhenPresent: true, linecap: "round" },
        dataLabels: {
          name: {
            show: true,
            fontSize: "14px",
            fontWeight: "600",
            color: "var(--color-muted-foreground)",
            offsetY: 35,
          },
          value: {
            fontSize: "40px",
            fontWeight: "bold",
            offsetY: -5,
            formatter(val) {
              return val + "%";
            },
          },
        },
        hollow: { size: "60%" },
      },
    },
    states: { hover: { filter: { type: "none" } } },
  });
</script>
```
::

### Gauge Chart - Needle

::prose-show-case
:docs-apex-charts-guage3

#code
```vue [DocsApexChartsGuage3.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>CPU Usage</UiCardTitle>
        <UiCardDescription>Current processor load</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[300px]">
        <UiApexchart type="gauge" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Usage is within
          <span
            class="font-semibold"
            :class="[
              getStateRangeText === 'high'
                ? 'text-red-500'
                : getStateRangeText === 'elevated'
                  ? 'text-yellow-500'
                  : 'text-emerald-500',
            ]"
            >{{ getStateRangeText }}</span
          >range <Icon name="lucide:cpu" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">
          Monitor for spikes during intensive tasks
        </div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([68]);

  const getColor = () => {
    const value = series.value?.[0];
    if (typeof value === "number") {
      if (value > 80) return "var(--color-red-500)";
      if (value > 50) return "var(--color-yellow-500)";
    }
    return "var(--color-emerald-500)";
  };

  const getStateRangeText = computed(() => {
    const value = series.value?.[0];
    if (typeof value === "number") {
      if (value > 80) return "high";
      if (value > 50) return "elevated";
    }
    return "normal";
  });

  const options = computed<ApexOptions>(() => {
    const color = getColor();
    return {
      labels: ["CPU"],
      colors: [color],
      plotOptions: {
        radialBar: {
          min: 0,
          max: 100,
          shape: "needle",
          bands: [
            { from: 0, to: 50, color: "var(--color-emerald-500)", label: "Normal" },
            { from: 50, to: 80, color: "var(--color-yellow-500)", label: "Elevated" },
            { from: 80, to: 100, color: "var(--color-red-500)", label: "High" },
          ],
          bandsStyle: { strokeWidth: "40%", gap: 2, hideTrackWhenPresent: true, linecap: "round" },
          needle: {
            showValueArc: true,
            color: "var(--color-foreground)",
            length: "70%",
            baseWidth: 8,
            tipWidth: 1,
            animation: { enabled: true, duration: 800, easing: "ease-out" },
          },
          track: { background: "var(--color-muted)", strokeWidth: "100%", margin: 5 },
          dataLabels: {
            name: {
              show: true,
              fontSize: "14px",
              fontWeight: "600",
              color: "var(--color-muted-foreground)",
              offsetY: 65,
            },
            value: {
              fontSize: "40px",
              fontWeight: "bold",
              color,
              offsetY: 30,
            },
          },
          hollow: { size: "60%" },
        },
      },
      states: { hover: { filter: { type: "none" } } },
    };
  });

  let interval: ReturnType<typeof setInterval>;

  onMounted(() => {
    interval = setInterval(() => {
      series.value = [Math.floor(Math.random() * 101)];
    }, 5000);
  });
  onUnmounted(() => {
    clearInterval(interval);
  });
</script>
```
::

### Gauge Chart - Semi Circle

::prose-show-case
:docs-apex-charts-guage4

#code
```vue [DocsApexChartsGuage4.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Storage Usage</UiCardTitle>
        <UiCardDescription>Disk capacity overview</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[260px]">
        <UiApexchart type="gauge" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Consider expanding storage soon <Icon name="lucide:hard-drive" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">237 GB of 512 GB used</div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([46]);

  const options = ref<ApexOptions>({
    labels: ["Used"],
    colors: ["var(--color-primary)"],
    plotOptions: {
      radialBar: {
        startAngle: -90,
        endAngle: 90,
        dataLabels: {
          name: {
            show: true,
            fontSize: "14px",
            fontWeight: "600",
            color: "var(--color-muted-foreground)",
            offsetY: 0,
          },
          value: {
            fontSize: "36px",
            fontWeight: "bold",
            color: "var(--color-primary)",
            offsetY: -40,
          },
        },
        hollow: { size: "65%" },
      },
    },
    states: { hover: { filter: { type: "none" } } },
  });
</script>
```
::


# Heatmap

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add apexcharts
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add apexcharts
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add apexcharts
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add apexcharts
```
::

## Usage

### Heatmap Chart

::prose-show-case
:docs-apex-charts-heatmap1

#code
```vue [DocsApexChartsHeatmap1.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>User Activity</UiCardTitle>
      <UiCardDescription> {{ dayjs().format("MMMM DD YYYY") }}</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="h-[320px]">
      <UiApexchart type="heatmap" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Want to learn more about heatmap charts?
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            <span>Check out</span>
            <NuxtLink
              target="_blank"
              href="https://apexcharts.com/javascript-chart-demos/heatmap-charts/basic/"
              class="text-primary hover:underline"
            >
              ApexCharts documentation
            </NuxtLink>
            <span>for more examples and tips.</span>
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  type HeatmapOptions = {
    rows: number;
    columns: number;
    min: number;
    max: number;
    xLabels?: string[]; // optional column headers
    rowLabels?: string[]; // optional row names
  };

  function generateHeatmapData(options: HeatmapOptions) {
    const { rows, columns, min, max, xLabels, rowLabels } = options;

    const data = [];

    for (let i = 0; i < rows; i++) {
      const seriesName = rowLabels?.[i] || `Row ${i + 1}`;
      const seriesData = [];

      for (let j = 0; j < columns; j++) {
        const label = xLabels?.[j] || `Col ${j + 1}`;
        seriesData.push({
          x: label,
          y: faker.number.int({ min, max }),
        });
      }

      data.push({
        name: seriesName,
        data: seriesData,
      });
    }

    return data;
  }
  const chartData = generateHeatmapData({
    rows: 7,
    columns: 12,
    min: 0,
    max: 100,
    xLabels: Array.from({ length: 12 }, (_, i) => `${i + 1}:00`),
    rowLabels: Array.from(
      { length: 7 },
      () => `${faker.person.firstName()} ${faker.person.lastName()}`
    ),
  });

  const series = ref(chartData);

  const options = ref<ApexOptions>({
    stroke: { colors: ["var(--color-card)"] },
  });
</script>
```
::

### Heatmap Chart - Color Range

::prose-show-case
:docs-apex-charts-heatmap2

#code
```vue [DocsApexChartsHeatmap2.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>System Performance</UiCardTitle>
      <UiCardDescription> {{ dayjs().format("MMMM DD YYYY") }}</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="h-[320px]">
      <UiApexchart type="heatmap" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Want to learn more about heatmap charts?
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            <span>Check out</span>
            <NuxtLink
              target="_blank"
              href="https://apexcharts.com/javascript-chart-demos/heatmap-charts/basic/"
              class="text-primary hover:underline"
            >
              ApexCharts documentation
            </NuxtLink>
            <span>for more examples and tips.</span>
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  type HeatmapOptions = {
    rows: number;
    columns: number;
    min: number;
    max: number;
    xLabels?: string[]; // optional column headers
    rowLabels?: string[]; // optional row names
  };

  function generateHeatmapData(options: HeatmapOptions) {
    const { rows, columns, min, max, xLabels, rowLabels } = options;

    const data = [];

    for (let i = 0; i < rows; i++) {
      const seriesName = rowLabels?.[i] || `Row ${i + 1}`;
      const seriesData = [];

      for (let j = 0; j < columns; j++) {
        const label = xLabels?.[j] || `Col ${j + 1}`;
        seriesData.push({
          x: label,
          y: faker.number.int({ min, max }),
        });
      }

      data.push({
        name: seriesName,
        data: seriesData,
      });
    }

    return data;
  }
  const chartData = generateHeatmapData({
    rows: 7,
    columns: 12,
    min: 0,
    max: 100,
    xLabels: Array.from({ length: 12 }, (_, i) => `${i + 1}:00`),
    rowLabels: Array.from(
      { length: 7 },
      () => faker.location.continent() + " " + faker.number.int({ min: 1, max: 100 })
    ),
  });

  const series = ref(chartData);

  const options = ref<ApexOptions>({
    stroke: { colors: ["var(--color-card)"] },
    plotOptions: {
      heatmap: {
        colorScale: {
          ranges: [
            { color: "#E10531", from: 75, to: 100, name: "High" },
            { color: "#E6C822", from: 50, to: 75, name: "Medium" },
            { color: "#14E196", from: 0, to: 50, name: "Low" },
          ],
        },
      },
    },
  });
</script>
```
::


# Line

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add apexcharts
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add apexcharts
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add apexcharts
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add apexcharts
```
::

## Usage

### Interactive

::prose-show-case
:docs-apex-charts-line1

#code
```vue [DocsApexChartsLine1.vue]
<template>
  <div>
    <UiCard class="py-0">
      <UiCardHeader class="flex flex-col items-stretch border-b !p-0 sm:flex-row">
        <div class="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0">
          <UiCardTitle>Line Chart - Interactive</UiCardTitle>
          <UiCardDescription> Showing total visitors for the last 3 months </UiCardDescription>
        </div>
        <div class="flex">
          <button
            v-for="(chart, key) in ['desktop', 'mobile']"
            :key="key"
            :data-active="activeSeries === chart"
            class="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
            @click="activeSeries = chart"
          >
            <span class="text-muted-foreground text-xs">
              {{ chart.charAt(0).toUpperCase() + chart.slice(1) }} Visitors
            </span>
            <span class="text-lg leading-none font-bold sm:text-3xl">
              {{
                chart === "desktop"
                  ? Intl.NumberFormat().format(desktopTotal)
                  : Intl.NumberFormat().format(mobileTotal)
              }}
            </span>
          </button>
        </div>
      </UiCardHeader>
      <UiCardContent class="h-[250px] w-full px-2 sm:p-6">
        <UiApexchart type="line" :series :options />
      </UiCardContent>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const chartData = [
    { date: "2024-04-01", desktop: 222, mobile: 150 },
    { date: "2024-04-02", desktop: 97, mobile: 180 },
    { date: "2024-04-03", desktop: 167, mobile: 120 },
    { date: "2024-04-04", desktop: 242, mobile: 260 },
    { date: "2024-04-05", desktop: 373, mobile: 290 },
    { date: "2024-04-06", desktop: 301, mobile: 340 },
    { date: "2024-04-07", desktop: 245, mobile: 180 },
    { date: "2024-04-08", desktop: 409, mobile: 320 },
    { date: "2024-04-09", desktop: 59, mobile: 110 },
    { date: "2024-04-10", desktop: 261, mobile: 190 },
    { date: "2024-04-11", desktop: 327, mobile: 350 },
    { date: "2024-04-12", desktop: 292, mobile: 210 },
    { date: "2024-04-13", desktop: 342, mobile: 380 },
    { date: "2024-04-14", desktop: 137, mobile: 220 },
    { date: "2024-04-15", desktop: 120, mobile: 170 },
    { date: "2024-04-16", desktop: 138, mobile: 190 },
    { date: "2024-04-17", desktop: 446, mobile: 360 },
    { date: "2024-04-18", desktop: 364, mobile: 410 },
    { date: "2024-04-19", desktop: 243, mobile: 180 },
    { date: "2024-04-20", desktop: 89, mobile: 150 },
    { date: "2024-04-21", desktop: 137, mobile: 200 },
    { date: "2024-04-22", desktop: 224, mobile: 170 },
    { date: "2024-04-23", desktop: 138, mobile: 230 },
    { date: "2024-04-24", desktop: 387, mobile: 290 },
    { date: "2024-04-25", desktop: 215, mobile: 250 },
    { date: "2024-04-26", desktop: 75, mobile: 130 },
    { date: "2024-04-27", desktop: 383, mobile: 420 },
    { date: "2024-04-28", desktop: 122, mobile: 180 },
    { date: "2024-04-29", desktop: 315, mobile: 240 },
    { date: "2024-04-30", desktop: 454, mobile: 380 },
    { date: "2024-05-01", desktop: 165, mobile: 220 },
    { date: "2024-05-02", desktop: 293, mobile: 310 },
    { date: "2024-05-03", desktop: 247, mobile: 190 },
    { date: "2024-05-04", desktop: 385, mobile: 420 },
    { date: "2024-05-05", desktop: 481, mobile: 390 },
    { date: "2024-05-06", desktop: 498, mobile: 520 },
    { date: "2024-05-07", desktop: 388, mobile: 300 },
    { date: "2024-05-08", desktop: 149, mobile: 210 },
    { date: "2024-05-09", desktop: 227, mobile: 180 },
    { date: "2024-05-10", desktop: 293, mobile: 330 },
    { date: "2024-05-11", desktop: 335, mobile: 270 },
    { date: "2024-05-12", desktop: 197, mobile: 240 },
    { date: "2024-05-13", desktop: 197, mobile: 160 },
    { date: "2024-05-14", desktop: 448, mobile: 490 },
    { date: "2024-05-15", desktop: 473, mobile: 380 },
    { date: "2024-05-16", desktop: 338, mobile: 400 },
    { date: "2024-05-17", desktop: 499, mobile: 420 },
    { date: "2024-05-18", desktop: 315, mobile: 350 },
    { date: "2024-05-19", desktop: 235, mobile: 180 },
    { date: "2024-05-20", desktop: 177, mobile: 230 },
    { date: "2024-05-21", desktop: 82, mobile: 140 },
    { date: "2024-05-22", desktop: 81, mobile: 120 },
    { date: "2024-05-23", desktop: 252, mobile: 290 },
    { date: "2024-05-24", desktop: 294, mobile: 220 },
    { date: "2024-05-25", desktop: 201, mobile: 250 },
    { date: "2024-05-26", desktop: 213, mobile: 170 },
    { date: "2024-05-27", desktop: 420, mobile: 460 },
    { date: "2024-05-28", desktop: 233, mobile: 190 },
    { date: "2024-05-29", desktop: 78, mobile: 130 },
    { date: "2024-05-30", desktop: 340, mobile: 280 },
    { date: "2024-05-31", desktop: 178, mobile: 230 },
    { date: "2024-06-01", desktop: 178, mobile: 200 },
    { date: "2024-06-02", desktop: 470, mobile: 410 },
    { date: "2024-06-03", desktop: 103, mobile: 160 },
    { date: "2024-06-04", desktop: 439, mobile: 380 },
    { date: "2024-06-05", desktop: 88, mobile: 140 },
    { date: "2024-06-06", desktop: 294, mobile: 250 },
    { date: "2024-06-07", desktop: 323, mobile: 370 },
    { date: "2024-06-08", desktop: 385, mobile: 320 },
    { date: "2024-06-09", desktop: 438, mobile: 480 },
    { date: "2024-06-10", desktop: 155, mobile: 200 },
    { date: "2024-06-11", desktop: 92, mobile: 150 },
    { date: "2024-06-12", desktop: 492, mobile: 420 },
    { date: "2024-06-13", desktop: 81, mobile: 130 },
    { date: "2024-06-14", desktop: 426, mobile: 380 },
    { date: "2024-06-15", desktop: 307, mobile: 350 },
    { date: "2024-06-16", desktop: 371, mobile: 310 },
    { date: "2024-06-17", desktop: 475, mobile: 520 },
    { date: "2024-06-18", desktop: 107, mobile: 170 },
    { date: "2024-06-19", desktop: 341, mobile: 290 },
    { date: "2024-06-20", desktop: 408, mobile: 450 },
    { date: "2024-06-21", desktop: 169, mobile: 210 },
    { date: "2024-06-22", desktop: 317, mobile: 270 },
    { date: "2024-06-23", desktop: 480, mobile: 530 },
    { date: "2024-06-24", desktop: 132, mobile: 180 },
    { date: "2024-06-25", desktop: 141, mobile: 190 },
    { date: "2024-06-26", desktop: 434, mobile: 380 },
    { date: "2024-06-27", desktop: 448, mobile: 490 },
    { date: "2024-06-28", desktop: 149, mobile: 200 },
    { date: "2024-06-29", desktop: 103, mobile: 160 },
    { date: "2024-06-30", desktop: 446, mobile: 400 },
  ];

  const getDesktopTotal = useMemoize(() => {
    return chartData.reduce((acc, item) => acc + item.desktop, 0);
  });
  const getMobileTotal = useMemoize(() => {
    return chartData.reduce((acc, item) => acc + item.mobile, 0);
  });

  const desktopTotal = getDesktopTotal();
  const mobileTotal = getMobileTotal();

  const activeSeries = ref("desktop");

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: chartData.map((item) => ({
        x: new Date(item.date),
        y: item.desktop,
      })),
    },
  ]);

  watchImmediate(activeSeries, (newValue) => {
    series.value = [
      {
        name: newValue.charAt(0).toUpperCase() + newValue.slice(1),
        data: chartData.map((item) => ({
          x: new Date(item.date),
          y: newValue === "desktop" ? item.desktop : item.mobile,
        })),
      },
    ];
  });

  const options = ref<ApexOptions>({
    colors: ["var(--color-blue-500)"],
    xaxis: {
      type: "datetime",
      labels: {
        formatter: (value) => {
          return dayjs(value).format("MMM D");
        },
      },
      tickAmount: 6,
    },
    tooltip: { followCursor: true },
    stroke: { width: 2 },
    yaxis: { show: false },
  });
</script>
```
::

### Line Chart

::prose-show-case
:docs-apex-charts-line2

#code
```vue [DocsApexChartsLine2.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Line Chart</UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[300px] w-full">
      <UiApexchart type="line" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: Array.from({ length: 6 }, (_, i) => ({
        x: dayjs()
          .subtract(5 - i, "month")
          .format("MMM"),
        y: faker.number.int({ min: 250, max: 260 }),
      })),
    },
  ]);

  const options = ref<ApexOptions>({
    yaxis: { labels: { show: false } },
    tooltip: { followCursor: true },
    stroke: { width: 2, curve: "smooth" },
  });
</script>
```
::

### Line Chart - Linear

::prose-show-case
:docs-apex-charts-line3

#code
```vue [DocsApexChartsLine3.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Line Chart</UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[350px] w-full">
      <UiApexchart :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { width: 2, curve: "straight" },
    yaxis: { labels: { show: false } },
    xaxis: {
      labels: {
        formatter(value) {
          return value?.slice(0, 3); // Shorten month names to first three letters
        },
      },
    },
  });
</script>
```
::

### Line Chart - Multiple

::prose-show-case
:docs-apex-charts-line4

#code
```vue [DocsApexChartsLine4.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Line Chart</UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[300px] w-full">
      <UiApexchart :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
    {
      name: "Mobile",
      data: [
        { x: "January", y: 80 },
        { x: "February", y: 200 },
        { x: "March", y: 120 },
        { x: "April", y: 190 },
        { x: "May", y: 130 },
        { x: "June", y: 140 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { width: 2, curve: "monotoneCubic" },
    yaxis: { labels: { show: false } },
    xaxis: {
      crosshairs: { show: false },
      labels: { formatter: (value) => value?.slice(0, 3) },
    },
    tooltip: { followCursor: true },
    legend: { show: true },
  });
</script>
```
::

### Line Chart - Step Line

::prose-show-case
:docs-apex-charts-line5

#code
```vue [DocsApexChartsLine5.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Line Chart</UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[300px] w-full">
      <UiApexchart :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
    {
      name: "Mobile",
      data: [
        { x: "January", y: 80 },
        { x: "February", y: 200 },
        { x: "March", y: 120 },
        { x: "April", y: 190 },
        { x: "May", y: 130 },
        { x: "June", y: 140 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    yaxis: { labels: { show: false } },
    legend: { show: true, markers: { shape: "diamond" } },
    markers: { shape: "diamond" },
    stroke: { width: 2, curve: "stepline" },

    xaxis: {
      labels: { formatter: (value) => value?.slice(0, 3) },
      axisBorder: { show: false },
      axisTicks: { show: false },
    },
  });
</script>
```
::

### Line Chart - Label

::prose-show-case
:docs-apex-charts-line6

#code
```vue [DocsApexChartsLine6.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Line Chart</UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[300px] w-full">
      <UiApexchart :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 305 },
        { x: "March", y: 237 },
        { x: "April", y: 73 },
        { x: "May", y: 209 },
        { x: "June", y: 214 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { width: 2, curve: "smooth" },
    chart: { toolbar: { show: true } },
    dataLabels: {
      enabled: true,
      offsetY: -5,
      background: {
        backgroundColor: "transparent",
        borderWidth: 0,
        foreColor: "var(--color-blue-500)",
      },
      style: {
        fontSize: "12px",
        fontWeight: 600,
      },
    },
    colors: ["var(--color-blue-500)"],
    yaxis: { labels: { show: false } },
    xaxis: { labels: { formatter: (value) => value?.slice(0, 3) } },
  });
</script>
```
::

### Line Chart - Custom Label

::prose-show-case
:docs-apex-charts-line7

#code
```vue [DocsApexChartsLine7.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Line Chart</UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[300px] w-full">
      <UiApexchart :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Desktop",
      data: [
        { x: "Chrome", y: 275 },
        { x: "Safari", y: 200 },
        { x: "Firefox", y: 187 },
        { x: "Edge", y: 173 },
        { x: "Other", y: 90 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { width: 2, curve: "smooth" },
    markers: { size: 5, hover: { size: 7 }, shape: "square" },
    tooltip: { followCursor: true },
    dataLabels: {
      enabled: true,
      offsetY: -8,
      background: {
        backgroundColor: "var(--color-card)",
        borderWidth: 1,
        borderColor: "var(--color-border)",
        borderRadius: 4,
        opacity: 1,
        padding: 8,
        foreColor: "var(--color-foreground)",
      },
      style: { fontSize: "12px", fontWeight: 500 },
      formatter(val, opts) {
        return opts.w.globals.initialSeries?.[0]?.data[opts.dataPointIndex]?.x;
      },
    },
    yaxis: {
      labels: { show: false },
      title: { text: "Visitors" },
    },
    xaxis: {
      type: "category",
      title: { text: "Browser" },
      tooltip: { enabled: false },
      labels: { show: false },
      axisBorder: { show: false },
      axisTicks: { show: false },
    },
  });
</script>
```
::

### Line Chart - Negative

::prose-show-case
:docs-apex-charts-line8

#code
```vue [DocsApexChartsLine8.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Line Chart</UiCardTitle>
      <UiCardDescription>January - June 2024</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="aspect-auto h-[300px] w-full">
      <UiApexchart :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month <Icon name="lucide:trending-up" class="inline size-4" />
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            Showing total visitors for the last 6 months
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Visitors",
      data: [
        { x: "January", y: 186 },
        { x: "February", y: 205 },
        { x: "March", y: -207 },
        { x: "April", y: 173 },
        { x: "May", y: -209 },
        { x: "June", y: 214 },
      ],
    },
  ]);

  const options = ref<ApexOptions>({
    plotOptions: {
      line: {
        colors: {
          threshold: 0,
          colorAboveThreshold: "var(--color-blue-500)",
          colorBelowThreshold: "var(--color-rose-500)",
        },
      },
    },
    colors: ["var(--color-blue-500)"],
    tooltip: { followCursor: true },
    stroke: { width: 2, curve: "smooth" },
    markers: { colors: ["var(--color-blue-500)"] },
    xaxis: {
      type: "category",
      labels: { show: false },
      axisBorder: { show: false },
      axisTicks: { show: false },
    },
  });
</script>
```
::


# Pie / Donut

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add apexcharts
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add apexcharts
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add apexcharts
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add apexcharts
```
::

## Usage

### Pie Chart

::prose-show-case
:docs-apex-charts-pie-donut1

#code
```vue [DocsApexChartsPieDonut1.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Pie Chart</UiCardTitle>
        <UiCardDescription>January - June 2024</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[250px]">
        <UiApexchart type="pie" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 6 }, () => faker.number.int({ min: 1000, max: 5000 }))
  );

  const options = ref<ApexOptions>({
    stroke: { width: 0 },
    theme: { monochrome: { enabled: true, shadeTo: "dark", color: "#34d399" } },
    labels: ["January", "February", "March", "April", "May", "June"],
    states: { hover: { filter: { type: "none" } }, active: { filter: { type: "none" } } },
    tooltip: { followCursor: true },
  });
</script>
```
::

### Pie Chart - Labels

::prose-show-case
:docs-apex-charts-pie-donut2

#code
```vue [DocsApexChartsPieDonut2.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Pie Chart</UiCardTitle>
        <UiCardDescription>January - June 2024</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[250px]">
        <UiApexchart type="pie" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 6 }, () => faker.number.int({ min: 200, max: 400 }))
  );

  const options = ref<ApexOptions>({
    stroke: { width: 0 },
    plotOptions: {
      pie: { expandOnClick: false },
    },
    theme: { monochrome: { enabled: true, shadeTo: "dark", color: "#3b82f6" } },
    dataLabels: {
      enabled: true,
      style: { fontWeight: 600, fontSize: "10px" },
      dropShadow: { enabled: false },
    },
    labels: ["January", "February", "March", "April", "May", "June"],
    states: { hover: { filter: { type: "none" } }, active: { filter: { type: "none" } } },
    tooltip: { followCursor: true },
  });
</script>
```
::

### Pie Chart - Legend

::prose-show-case
:docs-apex-charts-pie-donut3

#code
```vue [DocsApexChartsPieDonut3.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Pie Chart</UiCardTitle>
        <UiCardDescription>January - June 2024</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[250px]">
        <UiApexchart type="pie" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 6 }, () => faker.number.int({ min: 1000, max: 5000 }))
  );

  const options = ref<ApexOptions>({
    stroke: { width: 0 },
    legend: { show: true, position: "bottom", horizontalAlign: "center" },
    theme: { monochrome: { enabled: true, shadeTo: "dark", color: "#34d399" } },
    labels: ["January", "February", "March", "April", "May", "June"],
    states: { hover: { filter: { type: "none" } }, active: { filter: { type: "none" } } },
    tooltip: { followCursor: true },
  });
</script>
```
::

### Donut Chart - Labels

::prose-show-case
:docs-apex-charts-pie-donut4

#code
```vue [DocsApexChartsPieDonut4.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Donut Chart</UiCardTitle>
        <UiCardDescription>January - June 2024</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[250px]">
        <UiApexchart type="donut" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 6 }, () => faker.number.int({ min: 200, max: 400 }))
  );

  const options = ref<ApexOptions>({
    stroke: { width: 0 },
    theme: { monochrome: { enabled: true, shadeTo: "dark", color: "#3b82f6" } },
    dataLabels: {
      enabled: true,
      style: { fontWeight: 600, fontSize: "10px" },
      dropShadow: { enabled: false },
    },
    labels: ["January", "February", "March", "April", "May", "June"],
    states: { hover: { filter: { type: "none" } }, active: { filter: { type: "none" } } },
    tooltip: { followCursor: true },
  });
</script>
```
::

### Donut Chart - Inner Text

::prose-show-case
:docs-apex-charts-pie-donut5

#code
```vue [DocsApexChartsPieDonut5.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Donut Chart</UiCardTitle>
        <UiCardDescription>January - June 2024</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[250px]">
        <UiApexchart type="donut" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 6 }, () => faker.number.int({ min: 200, max: 400 }))
  );

  const options = ref<ApexOptions>({
    stroke: { width: 0 },
    plotOptions: {
      pie: {
        donut: {
          size: "60%",
          labels: {
            show: true,
            name: {
              show: true,
              offsetY: 20,
              fontSize: "16px",
              fontWeight: 500,
            },
            value: {
              show: true,
              offsetY: -20,
              fontSize: "24px",
              fontWeight: 900,
              color: undefined,
              formatter: (val) => val.toLocaleString(),
            },
            total: {
              show: true,
              label: "Visitors",
              fontSize: "13px",
              color: "var(--color-muted-foreground)",
            },
          },
        },
      },
    },
    theme: { monochrome: { enabled: true, shadeTo: "dark", color: "#34d399" } },
    labels: ["January", "February", "March", "April", "May", "June"],
    states: { hover: { filter: { type: "none" } }, active: { filter: { type: "none" } } },
    tooltip: { followCursor: true },
  });
</script>
```
::

### Donut Chart - Semi

::prose-show-case
:docs-apex-charts-pie-donut6

#code
```vue [DocsApexChartsPieDonut6.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Donut Chart</UiCardTitle>
        <UiCardDescription>January - June 2024</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[250px]">
        <UiApexchart type="donut" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 6 }, () => faker.number.int({ min: 200, max: 400 }))
  );

  const options = ref<ApexOptions>({
    stroke: { width: 0 },
    plotOptions: {
      pie: {
        donut: { size: "40%" },
        startAngle: -90,
        endAngle: 90,
        offsetY: 50,
      },
    },
    theme: { monochrome: { enabled: true, shadeTo: "dark", color: "#3b82f6" } },
    labels: ["January", "February", "March", "April", "May", "June"],
    states: { hover: { filter: { type: "none" } }, active: { filter: { type: "none" } } },
    tooltip: { followCursor: true },
  });
</script>
```
::

### Donut Chart - Gradient

::prose-show-case
:docs-apex-charts-pie-donut7

#code
```vue [DocsApexChartsPieDonut7.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Donut Chart</UiCardTitle>
        <UiCardDescription>January - June 2024</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[250px]">
        <UiApexchart type="donut" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 6 }, () => faker.number.int({ min: 200, max: 400 }))
  );

  const options = ref<ApexOptions>({
    stroke: { width: 0 },
    plotOptions: {
      pie: {
        donut: {
          size: "60%",
          labels: {
            show: true,
            name: {
              show: true,
              offsetY: 20,
              fontSize: "16px",
              fontWeight: 500,
            },
            value: {
              show: true,
              offsetY: -20,
              fontSize: "24px",
              fontWeight: 900,
              color: undefined,
              formatter: (val) => val.toLocaleString(),
            },
            total: {
              show: true,
              label: "Visitors",
              fontSize: "13px",
              color: "var(--color-muted-foreground)",
            },
          },
        },
      },
    },
    fill: { type: "gradient" },
    theme: { monochrome: { enabled: true, shadeTo: "dark", color: "#8b5cf6" } },
    labels: ["January", "February", "March", "April", "May", "June"],
    states: { hover: { filter: { type: "none" } }, active: { filter: { type: "none" } } },
    tooltip: { followCursor: true },
  });
</script>
```
::

### Pie Chart - Images

::prose-show-case
:docs-apex-charts-pie-donut8

#code
```vue [DocsApexChartsPieDonut8.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Pie Chart</UiCardTitle>
        <UiCardDescription>January - June 2024</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[250px]">
        <UiApexchart type="pie" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 4 }, () => faker.number.int({ min: 200, max: 400 }))
  );

  const options = ref<ApexOptions>({
    stroke: { width: 2, colors: ["var(--color-background)"] },
    fill: {
      type: "image",
      opacity: 1,
      image: {
        src: [
          "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=50&w=500&auto=format&fit=crop",
          "https://images.unsplash.com/photo-1513346940221-6f673d962e97?q=50&w=500&auto=format&fit=crop",
          "https://images.unsplash.com/photo-1541701494587-cb58502866ab?q=50&w=500&auto=format&fit=crop",
          "https://images.unsplash.com/photo-1557672172-298e090bd0f1?q=50&w=500&auto=format&fit=crop",
        ],
      },
    },
    colors: [
      "var(--color-violet-500)",
      "var(--color-amber-500)",
      "var(--color-blue-500)",
      "var(--color-sky-500)",
    ],
    chart: {
      toolbar: { show: true },
      events: {
        dataPointSelection(e, chart, opts) {
          const images = opts.w.config.fill.image.src;
          const selectedImage = images[opts.dataPointIndex];
          useSonner.info("Open Image", {
            description: "Would you like to view the selected image?",
            icon: h(resolveComponent("Icon"), {
              name: "lucide:image",
              class: "size-4 text-muted-foreground",
            }),
            action: {
              label: "Yes, Open",
              onClick: () => {
                window.open(selectedImage, "_blank");
              },
            },
          });
        },
      },
    },
    labels: ["January", "February", "March", "April"],
    states: { hover: { filter: { type: "none" } }, active: { filter: { type: "none" } } },
    tooltip: { followCursor: true },
  });
</script>
```
::


# Polar Area

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add apexcharts
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add apexcharts
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add apexcharts
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add apexcharts
```
::

## Usage

### Polar Area Chart

::prose-show-case
:docs-apex-charts-polar-area1

#code
```vue [DocsApexChartsPolarArea1.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Polar Area Chart</UiCardTitle>
        <UiCardDescription> Showing total visitors for the last 6 months</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[300px]">
        <UiApexchart type="polarArea" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">January - June 2024</div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 5 }, () => faker.number.int({ min: 1000, max: 2400 }))
  );

  const options = ref<ApexOptions>({
    stroke: { width: 0 },
    labels: ["Chrome", "Safari", "Firefox", "Edge", "Other"],
    states: { hover: { filter: { type: "none" } }, active: { filter: { type: "none" } } },
  });
</script>
```
::

### Polar Area Chart - No Lines

::prose-show-case
:docs-apex-charts-polar-area2

#code
```vue [DocsApexChartsPolarArea2.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Polar Area Chart</UiCardTitle>
        <UiCardDescription> Showing total visitors for the last 6 months</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[300px]">
        <UiApexchart type="polarArea" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">January - June 2024</div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 5 }, () => faker.number.int({ min: 1000, max: 2400 }))
  );

  const options = ref<ApexOptions>({
    stroke: { width: 0 },
    plotOptions: {
      polarArea: {
        rings: { strokeWidth: 0 },
        spokes: { strokeWidth: 0 },
      },
    },
    yaxis: { show: false },
    fill: { opacity: 1 },
    labels: ["Chrome", "Safari", "Firefox", "Edge", "Other"],
    states: { hover: { filter: { type: "none" } }, active: { filter: { type: "none" } } },
  });
</script>
```
::

### Polar Area Chart - Rings

::prose-show-case
:docs-apex-charts-polar-area3

#code
```vue [DocsApexChartsPolarArea3.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Polar Area Chart</UiCardTitle>
        <UiCardDescription> Showing total visitors for the last 6 months</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[300px]">
        <UiApexchart type="polarArea" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">January - June 2024</div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 5 }, () => faker.number.int({ min: 1000, max: 2400 }))
  );

  const options = ref<ApexOptions>({
    stroke: { width: 0 },
    plotOptions: {
      polarArea: {
        rings: { strokeWidth: 1 },
        spokes: { strokeWidth: 0 },
      },
    },
    yaxis: { show: false },
    fill: { opacity: 0.8 },
    theme: { monochrome: { enabled: true, shadeTo: "dark", color: "#34d399" } },
    labels: ["Chrome", "Safari", "Firefox", "Edge", "Other"],
  });
</script>
```
::

### Polar Area Chart - Legend

::prose-show-case
:docs-apex-charts-polar-area4

#code
```vue [DocsApexChartsPolarArea4.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Polar Area Chart</UiCardTitle>
        <UiCardDescription> Showing total visitors for the last 6 months</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[300px]">
        <UiApexchart type="polarArea" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">January - June 2024</div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 5 }, () => faker.number.int({ min: 1000, max: 2400 }))
  );

  const options = ref<ApexOptions>({
    stroke: { width: 0 },
    legend: { show: true, position: "bottom" },
    fill: { opacity: 1 },
    yaxis: { show: false },
    theme: { monochrome: { enabled: true, shadeTo: "light", color: "#5A00A4" } },
    labels: ["Chrome", "Safari", "Firefox", "Edge", "Other"],
  });
</script>
```
::

### Polar Area Chart - Labels

::prose-show-case
:docs-apex-charts-polar-area5

#code
```vue [DocsApexChartsPolarArea5.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Polar Area Chart</UiCardTitle>
        <UiCardDescription> Showing total visitors for the last 6 months</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[300px]">
        <UiApexchart type="polarArea" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">January - June 2024</div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 5 }, () => faker.number.int({ min: 1000, max: 2400 }))
  );

  const options = ref<ApexOptions>({
    fill: { opacity: 1 },
    dataLabels: {
      enabled: true,
      style: { fontWeight: 500, fontSize: "12px" },
      background: {
        backgroundColor: "#fff",
        foreColor: "#A40021",
        borderRadius: 6,
        borderWidth: 0,
        opacity: 1,
        padding: 8,
      },
    },
    yaxis: { show: false },
    theme: { monochrome: { enabled: true, shadeTo: "light", color: "#A40021" } },
    labels: ["Chrome", "Safari", "Firefox", "Edge", "Other"],
  });
</script>
```
::


# Radar

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add apexcharts
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add apexcharts
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add apexcharts
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add apexcharts
```
::

## Usage

### Radar Chart

::prose-show-case
:docs-apex-charts-radar1

#code
```vue [DocsApexChartsRadar1.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Radar Chart</UiCardTitle>
        <UiCardDescription>Showing total visitors for the last 6 months</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[350px]">
        <UiApexchart type="radar" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">January - June 2024</div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Visitors",
      data: Array.from({ length: 6 }, (_, i) => ({
        x: dayjs()
          .subtract(5 - i, "month")
          .format("MMMM"),
        y: faker.number.int({ min: 2000, max: 5000 }),
      })),
    },
  ]);

  const options = ref<ApexOptions>({
    fill: { opacity: 0.6 },
    stroke: { width: 0 },
    yaxis: { show: false },
  });
</script>
```
::

### Radar Chart - Lines Only

::prose-show-case
:docs-apex-charts-radar2

#code
```vue [DocsApexChartsRadar2.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Radar Chart</UiCardTitle>
        <UiCardDescription>Showing total visitors for the last 6 months</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[350px]">
        <UiApexchart type="radar" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">January - June 2024</div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Mobile",
      data: Array.from({ length: 6 }, (_, i) => ({
        x: dayjs()
          .subtract(5 - i, "month")
          .format("MMMM"),
        y: faker.number.int({ min: 2000, max: 5000 }),
      })),
    },
    {
      name: "Desktop",
      data: Array.from({ length: 6 }, (_, i) => ({
        x: dayjs()
          .subtract(5 - i, "month")
          .format("MMMM"),
        y: faker.number.int({ min: 1000, max: 3000 }),
      })),
    },
  ]);

  const options = ref<ApexOptions>({
    fill: { opacity: 0.6, colors: ["transparent"] },
    stroke: { width: 1 },
    yaxis: { show: false },
    markers: { size: 4 },
  });
</script>
```
::

### Radar Chart - Labels

::prose-show-case
:docs-apex-charts-radar3

#code
```vue [DocsApexChartsRadar3.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Radar Chart</UiCardTitle>
        <UiCardDescription>Showing total visitors for the last 6 months</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[350px]">
        <UiApexchart type="radar" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">January - June 2024</div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Visitors",
      data: Array.from({ length: 6 }, (_, i) => ({
        x: dayjs()
          .subtract(5 - i, "month")
          .format("MMMM"),
        y: faker.number.int({ min: 2000, max: 5000 }),
      })),
    },
  ]);

  const options = ref<ApexOptions>({
    fill: { opacity: 0.6 },
    stroke: { width: 0 },
    yaxis: { show: false },
    dataLabels: {
      enabled: true,
      offsetY: -16,
      background: {
        backgroundColor: "var(--color-card)",
        borderWidth: 1,
        borderRadius: 4,
        borderColor: "var(--color-border)",
        padding: 6,
        foreColor: "var(--color-card-foreground)",
      },
      style: {
        fontSize: "10px",
        fontWeight: 500,
        colors: ["green"],
      },
    },
  });
</script>
```
::

### Radar Chart - No Grid Lines

::prose-show-case
:docs-apex-charts-radar4

#code
```vue [DocsApexChartsRadar4.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Radar Chart</UiCardTitle>
        <UiCardDescription>Showing total visitors for the last 6 months</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[350px]">
        <UiApexchart type="radar" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">January - June 2024</div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Visitors",
      data: Array.from({ length: 6 }, (_, i) => ({
        x: dayjs()
          .subtract(5 - i, "month")
          .format("MMMM"),
        y: faker.number.int({ min: 2000, max: 5000 }),
      })),
    },
  ]);

  const options = ref<ApexOptions>({
    fill: { opacity: 0.6 },
    stroke: { width: 0 },
    plotOptions: {
      radar: {
        polygons: {
          strokeColors: ["transparent"],
          strokeWidth: "0px",
          connectorColors: "transparent",
        },
      },
    },
    yaxis: { show: false },
  });
</script>
```
::

### Radar Chart - Grid Filled

::prose-show-case
:docs-apex-charts-radar5

#code
```vue [DocsApexChartsRadar5.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Radar Chart</UiCardTitle>
        <UiCardDescription>Showing total visitors for the last 6 months</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[350px]">
        <UiApexchart type="radar" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">January - June 2024</div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Mobile",
      data: Array.from({ length: 6 }, (_, i) => ({
        x: dayjs()
          .subtract(5 - i, "month")
          .format("MMMM"),
        y: faker.number.int({ min: 2000, max: 5000 }),
      })),
    },
    {
      name: "Desktop",
      data: Array.from({ length: 6 }, (_, i) => ({
        x: dayjs()
          .subtract(5 - i, "month")
          .format("MMMM"),
        y: faker.number.int({ min: 1000, max: 3000 }),
      })),
    },
  ]);

  const options = ref<ApexOptions>({
    fill: { opacity: 0.6 },
    stroke: { width: 0 },
    legend: { show: true },
    markers: { shape: "diamond" },
    plotOptions: {
      radar: {
        polygons: {
          strokeWidth: "0px",
          connectorColors: "transparent",
          fill: { colors: ["rgba(64, 163, 243, 0.2)", "rgba(10, 255, 165,0.3)"] },
        },
      },
    },
    yaxis: { show: false },
  });
</script>
```
::


# Radial

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add apexcharts
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add apexcharts
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add apexcharts
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add apexcharts
```
::

## Usage

### Radial Chart

::prose-show-case
:docs-apex-charts-radial1

#code
```vue [DocsApexChartsRadial1.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Radial Chart</UiCardTitle>
        <UiCardDescription>January - June 2024</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[300px]">
        <UiApexchart type="radialBar" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 5 }, () => faker.number.int({ min: 20, max: 100 }))
  );

  const options = ref<ApexOptions>({
    stroke: { lineCap: "butt" },
    labels: ["Chrome", "Safari", "Firefox", "Edge", "Other"],
    states: { hover: { filter: { type: "none" } }, active: { filter: { type: "none" } } },
  });
</script>
```
::

### Radial Chart - Bar Labels

::prose-show-case
:docs-apex-charts-radial2

#code
```vue [DocsApexChartsRadial2.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Radial Chart</UiCardTitle>
        <UiCardDescription>January - June 2024</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[300px]">
        <UiApexchart type="radialBar" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>(
    Array.from({ length: 5 }, () => faker.number.int({ min: 20, max: 80 }))
  );

  const options = ref<ApexOptions>({
    plotOptions: {
      radialBar: {
        barLabels: {
          enabled: true,
          fontSize: "10px",
          offsetX: -7,
          formatter: function (seriesName, opts) {
            return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex] + "%";
          },
        },
      },
    },
    legend: { show: true, position: "bottom" },
    labels: ["Chrome", "Safari", "Firefox", "Edge", "Other"],
    states: { hover: { filter: { type: "none" } }, active: { filter: { type: "none" } } },
  });
</script>
```
::

### Radial Chart - Custom Text

::prose-show-case
:docs-apex-charts-radial3

#code
```vue [DocsApexChartsRadial3.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Radial Chart</UiCardTitle>
        <UiCardDescription>January - June 2024</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[300px]">
        <UiApexchart type="radialBar" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([80]);

  const options = ref<ApexOptions>({
    colors: ["var(--color-blue-500)"],
    plotOptions: {
      radialBar: {
        dataLabels: {
          name: {
            color: "var(--color-muted-foreground)",
            fontSize: "14px",
            fontWeight: "600",
            offsetY: 28,
          },
          value: {
            color: "var(--color-blue-500)",
            fontSize: "40px",
            fontWeight: "bold",
            offsetY: -15,
          },
        },
        hollow: { size: "60%", background: "var(--color-background)", margin: 0 },
      },
    },
    labels: ["Chrome"],
    states: { hover: { filter: { type: "none" } } },
  });
</script>
```
::

### Radial Chart - Expanded Section

::prose-show-case
:docs-apex-charts-radial4

#code
```vue [DocsApexChartsRadial4.vue]
<template>
  <div>
    <UiCard class="flex flex-col">
      <UiCardHeader class="items-center pb-0">
        <UiCardTitle>Radial Chart</UiCardTitle>
        <UiCardDescription>January - June 2024</UiCardDescription>
      </UiCardHeader>
      <UiCardContent class="h-[300px]">
        <UiApexchart type="radialBar" :series :options />
      </UiCardContent>
      <UiCardFooter class="flex-col gap-2 text-sm">
        <div class="flex items-center gap-2 leading-none font-medium">
          Trending up by 5.2% this month <Icon name="lucide:trending-up" class="size-4" />
        </div>
        <div class="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </UiCardFooter>
    </UiCard>
  </div>
</template>

<script lang="ts" setup>
  import type { ApexOptions } from "apexcharts";

  const series = ref<ApexOptions["series"]>([76]);

  const options = ref<ApexOptions>({
    colors: ["var(--color-blue-500)"],
    stroke: { lineCap: "butt" },
    plotOptions: {
      radialBar: {
        track: { strokeWidth: "40%" },
        dataLabels: {
          name: {
            color: "var(--color-muted-foreground)",
            fontSize: "14px",
            fontWeight: "600",
            offsetY: 28,
          },
          value: {
            color: "var(--color-blue-500)",
            fontSize: "40px",
            fontWeight: "bold",
            offsetY: -15,
            formatter() {
              return "1,260";
            },
          },
        },
        hollow: { size: "65%" },
      },
    },
    labels: ["Visitors"],
    states: { hover: { filter: { type: "none" } } },
  });
</script>
```
::


# Slope

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add apexcharts
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add apexcharts
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add apexcharts
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add apexcharts
```
::

## Usage

### Slope Chart

::prose-show-case
:docs-apex-charts-slope1

#code
```vue [DocsApexChartsSlope1.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Revenue Before and After Campaign</UiCardTitle>
      <UiCardDescription> {{ dayjs().format("MMMM DD YYYY") }}</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="h-[320px]">
      <UiApexchart type="line" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Want to learn more about slope charts?
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            <span>Check out</span>
            <NuxtLink
              target="_blank"
              href="https://apexcharts.com/vue-chart-demos/slope-charts/basic/"
              class="text-primary hover:underline"
            >
              ApexCharts documentation
            </NuxtLink>
            <span>for more examples and tips.</span>
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const series = ref<ApexOptions["series"]>([
    {
      name: faker.commerce.product(),
      data: Array.from({ length: 2 }, (_, i) => ({
        x: i === 0 ? "Before Campaign" : "After Campaign",
        y: faker.number.int({ min: 10, max: 100 }),
      })),
    },
    {
      name: faker.commerce.product(),
      data: Array.from({ length: 2 }, (_, i) => ({
        x: i === 0 ? "Before Campaign" : "After Campaign",
        y: faker.number.int({ min: 10, max: 100 }),
      })),
    },
    {
      name: faker.commerce.product(),
      data: Array.from({ length: 2 }, (_, i) => ({
        x: i === 0 ? "Before Campaign" : "After Campaign",
        y: faker.number.int({ min: 10, max: 100 }),
      })),
    },
  ]);

  const options = ref<ApexOptions>({
    plotOptions: {
      line: { isSlopeChart: true },
    },
  });
</script>
```
::


# Treemaps

## Installation

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx ui-thing@latest add apexcharts
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx ui-thing@latest add apexcharts
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x ui-thing@latest add apexcharts
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx ui-thing@latest add apexcharts
```
::

## Usage

### Treemap Chart

::prose-show-case
:docs-apex-charts-treemap1

#code
```vue [DocsApexChartsTreemap1.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Sales Breakdown</UiCardTitle>
      <UiCardDescription> {{ dayjs().format("MMMM DD YYYY") }}</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="h-[320px]">
      <UiApexchart type="treemap" :series :options height="100%" />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Want to learn more about treemap charts?
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            <span>Check out</span>
            <NuxtLink
              target="_blank"
              href="https://apexcharts.com/docs/chart-types/treemap-chart/"
              class="text-primary hover:underline"
            >
              ApexCharts documentation
            </NuxtLink>
            <span>for more examples and tips.</span>
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Sales",
      data: Array.from({ length: 10 }, () => ({
        x: faker.commerce.department(),
        y: faker.number.int({ min: 1000, max: 5000 }),
        color: faker.color.rgb(),
      })),
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { width: 2, colors: ["var(--color-card)"] },
    dataLabels: { enabled: true },
    states: {
      hover: { filter: { type: "none" } },
    },
    colors: ["#14E196"],
  });
</script>
```
::

### Treemap Chart - Multiple

::prose-show-case
:docs-apex-charts-treemap2

#code
```vue [DocsApexChartsTreemap2.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Website Traffic</UiCardTitle>
      <UiCardDescription> {{ dayjs().format("MMMM DD YYYY") }}</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="h-[320px]">
      <UiApexchart type="treemap" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Want to learn more about treemap charts?
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            <span>Check out</span>
            <NuxtLink
              target="_blank"
              href="https://apexcharts.com/docs/chart-types/treemap-chart/"
              class="text-primary hover:underline"
            >
              ApexCharts documentation
            </NuxtLink>
            <span>for more examples and tips.</span>
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const series = ref<ApexOptions["series"]>([
    {
      name: "Mobile",
      data: Array.from({ length: 5 }, () => ({
        x: faker.internet.domainName(),
        y: faker.number.int({ min: 1000, max: 5000 }),
      })),
    },
    {
      name: "Desktop",
      data: Array.from({ length: 5 }, () => ({
        x: faker.internet.domainName(),
        y: faker.number.int({ min: 1000, max: 5000 }),
      })),
    },
  ]);

  const options = ref<ApexOptions>({
    stroke: { width: 2, colors: ["var(--color-card)"] },
    dataLabels: { enabled: true },
    legend: { show: true },
    plotOptions: {
      treemap: {
        seriesTitle: {
          borderColor: "var(--color-border)",
          borderRadius: 6,
          borderWidth: 1,
          offsetY: -18,
          offsetX: 5,
          style: {
            background: "var(--color-card)",
            color: "var(--color-card-foreground)",
          },
        },
      },
    },
    states: {
      hover: { filter: { type: "none" } },
    },
    colors: ["#7E14E0", "#1469E0"],
  });
</script>
```
::

### Treemap Chart - Color Ranges

::prose-show-case
:docs-apex-charts-treemap3

#code
```vue [DocsApexChartsTreemap3.vue]
<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>File System Usage</UiCardTitle>
      <UiCardDescription> {{ dayjs().format("MMMM DD YYYY") }}</UiCardDescription>
    </UiCardHeader>
    <UiCardContent class="h-[320px]">
      <UiApexchart type="treemap" :series :options />
    </UiCardContent>
    <UiCardFooter>
      <div class="flex w-full items-start gap-2 text-sm">
        <div class="grid gap-2">
          <div class="flex items-center gap-2 leading-none font-medium">
            Want to learn more about treemap charts?
          </div>
          <div class="text-muted-foreground flex items-center gap-2 leading-none">
            <span>Check out</span>
            <NuxtLink
              target="_blank"
              href="https://apexcharts.com/docs/chart-types/treemap-chart/"
              class="text-primary hover:underline"
            >
              ApexCharts documentation
            </NuxtLink>
            <span>for more examples and tips.</span>
          </div>
        </div>
      </div>
    </UiCardFooter>
  </UiCard>
</template>

<script lang="ts" setup>
  import { faker } from "@faker-js/faker";
  import type { ApexOptions } from "apexcharts";
  import dayjs from "dayjs";

  const series = ref<ApexOptions["series"]>([
    {
      name: "File Usage",
      data: Array.from({ length: 12 }, () => ({
        x: faker.system.commonFileType(),
        y: faker.number.int({ min: 900, max: 50_000 }),
      })),
    },
  ]);

  const formatSizeText = (size: number): string => {
    if (size <= 1000) {
      return `${size} KB`;
    } else if (size < 30_000) {
      return `${(size / 1000).toFixed(2)} MB`;
    } else {
      return `${(size / 10000).toFixed(2)} GB`;
    }
  };

  const options = ref<ApexOptions>({
    stroke: { width: 2, colors: ["var(--color-card)"] },
    dataLabels: {
      enabled: true,
      formatter(val) {
        // capitalize the first letter of the file type
        const value = String(val);
        const fileType = value.charAt(0).toUpperCase() + value.slice(1);
        // return the file type with the size
        return fileType;
      },
    },
    states: { hover: { filter: { type: "none" } } },
    tooltip: {
      y: {
        formatter(val) {
          return formatSizeText(val);
        },
      },
    },
    plotOptions: {
      treemap: {
        colorScale: {
          ranges: [
            {
              from: 0,
              to: 10_000,
              color: "#34D399",
            },
            {
              from: 10_001,
              to: 30_000,
              color: "#FBBF24",
            },
            {
              from: 30_001,
              to: 50_000,
              color: "#E02914",
            },
          ],
        },
      },
    },
  });
</script>
```
::


# About

## Simple Centered

Clean, centered layout with company description and mission statement.

:block-showcase{block-path="About/BlockAbout1" component="BlockAbout1" components="container"}

## Team Grid

Grid layout showcasing team members with photos, names, and roles.

::block-showcase
---
block-path: About/BlockAbout2
component: BlockAbout2
components: avatar
iframe-height: 700px
---
::

## Story Timeline

Timeline-based layout telling your company's story with key milestones.

::block-showcase
---
block-path: About/BlockAbout3
component: BlockAbout3
components: badge
iframe-height: 800px
---
::

## Two Column

Split layout with company image on one side and description on the other.

:block-showcase{block-path="About/BlockAbout4" component="BlockAbout4" iframe-height="600px"}

## Stats Highlight

About section featuring key statistics and achievements with prominent numbers.

::block-showcase
---
block-path: About/BlockAbout5
component: BlockAbout5
components: card
iframe-height: 700px
---
::

## Values Grid

Grid showcasing company values with icons and descriptions.

:block-showcase{block-path="About/BlockAbout6" component="BlockAbout6" iframe-height="700px"}

## Leadership Team

Focused layout highlighting leadership team with detailed bios.

::block-showcase
---
block-path: About/BlockAbout7
component: BlockAbout7
components: avatar card badge
iframe-height: 800px
---
::

## Mission Vision

Side-by-side cards displaying mission and vision statements.

::block-showcase
---
block-path: About/BlockAbout8
component: BlockAbout8
components: card border-beam
iframe-height: 600px
---
::

## Image Gallery

About section with image gallery showcasing office, team, or culture.

:block-showcase{block-path="About/BlockAbout9" component="BlockAbout9" iframe-height="800px"}

## Culture & Values

Comprehensive section highlighting company culture and core values.

::block-showcase
---
block-path: About/BlockAbout10
component: BlockAbout10
components: card badge
iframe-height: 900px
---
::

## Testimonials

About section featuring client or employee testimonials with photos.

::block-showcase
---
block-path: About/BlockAbout11
component: BlockAbout11
components: avatar card
iframe-height: 700px
---
::

## Journey Map

Visual journey map showing company evolution with interactive elements.

::block-showcase
---
block-path: About/BlockAbout12
component: BlockAbout12
components: badge card
iframe-height: 800px
---
::

## Meet the Founders

Dedicated section for founder stories with personal narratives.

::block-showcase
---
block-path: About/BlockAbout13
component: BlockAbout13
components: button badge
iframe-height: 800px
---
::

## Office Locations

Multi-location display with addresses and contact information.

::block-showcase
---
block-path: About/BlockAbout14
component: BlockAbout14
components: card badge button
iframe-height: 700px
---
::

## Awards & Recognition

Showcase of company awards, certifications, and achievements.

::block-showcase
---
block-path: About/BlockAbout15
component: BlockAbout15
components: badge card
iframe-height: 700px
---
::

## Team Carousel

Carousel-style team showcase with smooth transitions.

**Requires:** Nuxt Swiper module.

::block-showcase
---
block-path: About/BlockAbout16
component: BlockAbout16
components: button card
iframe-height: 700px
---
::

## Split Content

Alternating content and image sections for storytelling.

::block-showcase
---
block-path: About/BlockAbout17
component: BlockAbout17
components: badge
iframe-height: 900px
---
::

## FAQ About

Combined about section with frequently asked questions.

::block-showcase
---
block-path: About/BlockAbout18
component: BlockAbout18
components: collapsible card button
iframe-height: 800px
---
::

## Contact Integrated

About section with integrated contact form and information.

::block-showcase
---
block-path: About/BlockAbout19
component: BlockAbout19
components: vee-input card vee-textarea button
iframe-height: 800px
---
::

## Full Page

Comprehensive full-page about layout combining multiple elements.

::block-showcase
---
block-path: About/BlockAbout20
component: BlockAbout20
components: avatar badge card button
iframe-height: 1200px
---
::


# App - Empty State

## Style One

::block-showcase
---
block-path: App/EmptyState/BlockAppEmptyState1
component: BlockAppEmptyState1
components: container button fancy-icon
container-class: max-w-2xl mx-auto
iframe-height: 400px
---
:prose-code-snippet{file="/components/content/Block/App/EmptyState/BlockAppEmptyState1.vue" language="vue" title="Style One"}
::

## Style Two

::block-showcase
---
block-path: App/EmptyState/BlockAppEmptyState2
component: BlockAppEmptyState2
components: button
container-class: max-w-md mx-auto
iframe-height: 400px
---
:prose-code-snippet{file="/components/content/Block/App/EmptyState/BlockAppEmptyState2.vue" language="vue" title="Style Two"}
::

## Style Three

::block-showcase
---
block-path: App/EmptyState/BlockAppEmptyState3
component: BlockAppEmptyState3
components: button
container-class: max-w-md mx-auto
iframe-height: 400px
---
:prose-code-snippet{file="/components/content/Block/App/EmptyState/BlockAppEmptyState3.vue" language="vue" title="Style Three"}
::

## Style Four

::block-showcase
---
block-path: App/EmptyState/BlockAppEmptyState4
component: BlockAppEmptyState4
components: card button border-beam
container-class: max-w-lg mx-auto
iframe-height: 500px
---
:prose-code-snippet{file="/components/content/Block/App/EmptyState/BlockAppEmptyState4.vue" language="vue" title="Card with Animation"}
::

## Style Five

::block-showcase
---
block-path: App/EmptyState/BlockAppEmptyState5
component: BlockAppEmptyState5
components: button
container-class: max-w-2xl mx-auto
iframe-height: 600px
---
:prose-code-snippet{file="/components/content/Block/App/EmptyState/BlockAppEmptyState5.vue" language="vue" title="Animated Grid Layout"}
::

## Style Six

::block-showcase
---
block-path: App/EmptyState/BlockAppEmptyState6
component: BlockAppEmptyState6
components: button border-beam
container-class: max-w-md mx-auto
iframe-height: 600px
---
:prose-code-snippet{file="/components/content/Block/App/EmptyState/BlockAppEmptyState6.vue" language="vue" title="Upload State with Features"}
::

## Style Seven

::block-showcase
---
block-path: App/EmptyState/BlockAppEmptyState7
component: BlockAppEmptyState7
components: card
container-class: max-w-xl mx-auto
iframe-height: 500px
---
:prose-code-snippet{file="/components/content/Block/App/EmptyState/BlockAppEmptyState7.vue" language="vue" title="Two-Card Choice Layout"}
::

## Style Eight

::block-showcase
---
block-path: App/EmptyState/BlockAppEmptyState8
component: BlockAppEmptyState8
components: button gradient-divider
container-class: max-w-md mx-auto
iframe-height: 500px
---
:prose-code-snippet{file="/components/content/Block/App/EmptyState/BlockAppEmptyState8.vue" language="vue" title="Setup Steps with Spinner"}
::


# App - Header

## Style One

Profile header with cover image, breadcrumbs, avatar, and action buttons. Perfect for user profile pages.

::block-showcase
---
block-path: App/Header/BlockAppHeader1
component: BlockAppHeader1
components: container breadcrumbs avatar button divider
iframe-height: 500px
---
:prose-code-snippet{file="/components/content/Block/App/Header/BlockAppHeader1.vue" language="vue" title="Style One"}
::

## Style Two

Simple header with avatar, title, description, and action buttons. Great for team or list pages.

::block-showcase
---
block-path: App/Header/BlockAppHeader2
component: BlockAppHeader2
components: container avatar button
iframe-height: 200px
---
:prose-code-snippet{file="/components/content/Block/App/Header/BlockAppHeader2.vue" language="vue" title="Style Two"}
::

## Style Three

Minimal header with title, description, and action buttons. Clean layout for content pages.

::block-showcase
---
block-path: App/Header/BlockAppHeader3
component: BlockAppHeader3
components: container button divider
iframe-height: 300px
---
:prose-code-snippet{file="/components/content/Block/App/Header/BlockAppHeader3.vue" language="vue" title="Style Three"}
::

## Style Four

Header with icon, badge, description, and multiple action buttons. Ideal for dashboard overviews.

::block-showcase
---
block-path: App/Header/BlockAppHeader4
component: BlockAppHeader4
components: container badge button divider
iframe-height: 300px
---
:prose-code-snippet{file="/components/content/Block/App/Header/BlockAppHeader4.vue" language="vue" title="Style Four"}
::

## Style Five

Header with breadcrumbs, tabs, and dropdown menu. Perfect for complex navigation structures.

::block-showcase
---
block-path: App/Header/BlockAppHeader5
component: BlockAppHeader5
components: container breadcrumbs tabs button dropdown-menu
iframe-height: 350px
---
:prose-code-snippet{file="/components/content/Block/App/Header/BlockAppHeader5.vue" language="vue" title="Style Five"}
::

## Style Six

Profile header with avatar, stats metadata, and tab navigation. Great for user profiles with activity tracking.

::block-showcase
---
block-path: App/Header/BlockAppHeader6
component: BlockAppHeader6
components: container avatar separator tabs button
iframe-height: 300px
---
:prose-code-snippet{file="/components/content/Block/App/Header/BlockAppHeader6.vue" language="vue" title="Style Six"}
::

## Style Seven

Project header with status badge, metadata (owner, members, due date), and action buttons. Ideal for project management.

::block-showcase
---
block-path: App/Header/BlockAppHeader7
component: BlockAppHeader7
components: container badge avatar separator button divider
iframe-height: 300px
---
:prose-code-snippet{file="/components/content/Block/App/Header/BlockAppHeader7.vue" language="vue" title="Style Seven"}
::

## Style Eight

Edit page header with back button, subtitle, and save/cancel actions. Perfect for form pages.

::block-showcase
---
block-path: App/Header/BlockAppHeader8
component: BlockAppHeader8
components: container button separator dropdown-menu
iframe-height: 400px
---
:prose-code-snippet{file="/components/content/Block/App/Header/BlockAppHeader8.vue" language="vue" title="Style Eight"}
::

## Style Nine

List header with inline statistics, search input, and filter actions. Great for data-heavy pages.

::block-showcase
---
block-path: App/Header/BlockAppHeader9
component: BlockAppHeader9
components: container separator vee-input button
iframe-height: 300px
---
:prose-code-snippet{file="/components/content/Block/App/Header/BlockAppHeader9.vue" language="vue" title="Style Nine"}
::

## Style Ten

Application header with gradient background, large icon, technology chips, and tab navigation. Perfect for project/app details.

::block-showcase
---
block-path: App/Header/BlockAppHeader10
component: BlockAppHeader10
components: container chip badge tabs button
iframe-height: 400px
---
:prose-code-snippet{file="/components/content/Block/App/Header/BlockAppHeader10.vue" language="vue" title="Style Ten"}
::


# App - Sidebar

## Style One

Full-width sidebar with collapsible navigation groups, search input, storage usage card, and user profile. Features nested navigation items.

::block-showcase
---
block-path: App/Sidebar/BlockAppSidebar1
component: BlockAppSidebar1
components: scroll-area avatar vee-input button collapsible progress divider tooltip
---
:prose-code-snippet{file="/components/content/Block/App/Sidebar/BlockAppSidebar1.vue" language="vue" title="Style One"}
::

## Style Two

Dual-panel sidebar with primary navigation and expandable secondary panel. Features slide-out mini sidebar for sub-items.

::block-showcase
---
block-path: App/Sidebar/BlockAppSidebar2
component: BlockAppSidebar2
components: scroll-area avatar vee-input button progress divider tooltip
---
:prose-code-snippet{file="/components/content/Block/App/Sidebar/BlockAppSidebar2.vue" language="vue" title="Style Two"}
::

## Style Three

Collapsible icon-only sidebar that expands on hover. Minimal design with tooltips for navigation labels. Perfect for maximizing content space.

::block-showcase
---
block-path: App/Sidebar/BlockAppSidebar3
component: BlockAppSidebar3
components: scroll-area avatar button divider
---
:prose-code-snippet{file="/components/content/Block/App/Sidebar/BlockAppSidebar3.vue" language="vue" title="Style Three"}
::

## Style Four

Organized sidebar with categorized sections, notification badges, and colored workspace indicators. Features smooth slide-in animations.

::block-showcase
---
block-path: App/Sidebar/BlockAppSidebar4
component: BlockAppSidebar4
components: scroll-area avatar vee-input button badge dropdown-menu
---
:prose-code-snippet{file="/components/content/Block/App/Sidebar/BlockAppSidebar4.vue" language="vue" title="Style Four"}
::

## Style Five

Sidebar with quick action buttons, multiple navigation sections, and storage usage indicator. Includes collapsible groups and nested items.

::block-showcase
---
block-path: App/Sidebar/BlockAppSidebar5
component: BlockAppSidebar5
components: scroll-area avatar button border-beam badge collapsible progress dropdown-menu
---
:prose-code-snippet{file="/components/content/Block/App/Sidebar/BlockAppSidebar5.vue" language="vue" title="Style Five"}
::

## Style Six

Two-tier navigation with icon sidebar and expandable detail panel. Features contextual content based on selected section with animated transitions.

::block-showcase
---
block-path: App/Sidebar/BlockAppSidebar6
component: BlockAppSidebar6
components: scroll-area avatar vee-input button tooltip dropdown-menu divider
---
:prose-code-snippet{file="/components/content/Block/App/Sidebar/BlockAppSidebar6.vue" language="vue" title="Style Six"}
::

## Style Seven

Project-focused sidebar with tabs for recent, starred, and all projects. Features color-coded projects, star functionality, and quick links section.

::block-showcase
---
block-path: App/Sidebar/BlockAppSidebar7
component: BlockAppSidebar7
components: button scroll-area avatar dropdown-menu vee-input tabs divider
---
:prose-code-snippet{file="/components/content/Block/App/Sidebar/BlockAppSidebar7.vue" language="vue" title="Style Seven"}
::


# App - Stats

## Style One

::block-showcase
---
block-path: App/Stats/BlockAppStats1
component: BlockAppStats1
components: card button dropdown-menu badge fancy-icon
container-class: max-w-md mx-auto
frame-class: py-5 px-1
iframe-height: 350px
---
:prose-code-snippet{file="/components/content/Block/App/Stats/BlockAppStats1.vue" language="vue" title="Stat Card with Icon"}
::

## Style Two

::block-showcase
---
block-path: App/Stats/BlockAppStats2
component: BlockAppStats2
components: card
container-class: max-w-md mx-auto
frame-class: py-5 px-1
iframe-height: 350px
---
:prose-code-snippet{file="/components/content/Block/App/Stats/BlockAppStats2.vue" language="vue" title="Stat Card with Icon Right Aligned"}
::

## Style Three

::block-showcase
---
block-path: App/Stats/BlockAppStats3
component: BlockAppStats3
components: card badge progress
container-class: max-w-md mx-auto
frame-class: py-5 px-1
iframe-height: 350px
---
:prose-code-snippet{file="/components/content/Block/App/Stats/BlockAppStats3.vue" language="vue" title="Stat Card with Progress Bar"}
::

## Style Four

::block-showcase
---
block-path: App/Stats/BlockAppStats4
component: BlockAppStats4
components: card badge
container-class: max-w-md mx-auto
frame-class: py-5 px-1
iframe-height: 350px
---
:prose-code-snippet{file="/components/content/Block/App/Stats/BlockAppStats4.vue" language="vue" title="Stat Card with Left Accent Color"}
::

## Style Five

::block-showcase
---
block-path: App/Stats/BlockAppStats5
component: BlockAppStats5
components: card button dropdown-menu
container-class: max-w-md mx-auto
frame-class: py-5 px-1
iframe-height: 350px
---
:prose-code-snippet{file="/components/content/Block/App/Stats/BlockAppStats5.vue" language="vue" title="Style Five"}
::

## Style Six

::block-showcase
---
block-path: App/Stats/BlockAppStats6
component: BlockAppStats6
components: card fancy-icon separator
container-class: max-w-md mx-auto
frame-class: py-5 px-1
iframe-height: 350px
---
:prose-code-snippet{file="/components/content/Block/App/Stats/BlockAppStats6.vue" language="vue" title="Style Six"}
::

## Style Seven

::block-showcase
---
block-path: App/Stats/BlockAppStats7
component: BlockAppStats7
components: card
container-class: max-w-md mx-auto
frame-class: py-5 px-1
iframe-height: 350px
---
:prose-code-snippet{file="/components/content/Block/App/Stats/BlockAppStats7.vue" language="vue" title="Style Seven"}
::

## Style Eight

::block-showcase
---
block-path: App/Stats/BlockAppStats8
component: BlockAppStats8
components: card
container-class: max-w-md mx-auto
frame-class: py-5 px-1
iframe-height: 350px
---
:prose-code-snippet{file="/components/content/Block/App/Stats/BlockAppStats8.vue" language="vue" title="Style Eight"}
::

## Style Nine

::block-showcase
---
block-path: App/Stats/BlockAppStats9
component: BlockAppStats9
components: card button avatar chip badge
container-class: max-w-md mx-auto
frame-class: py-5 px-1
iframe-height: 350px
---
:prose-code-snippet{file="/components/content/Block/App/Stats/BlockAppStats9.vue" language="vue" title="Style Nine"}
::

## Style Ten

::block-showcase
---
block-path: App/Stats/BlockAppStats10
component: BlockAppStats10
components: card progress
container-class: max-w-md mx-auto
frame-class: py-5 px-1
iframe-height: 350px
---
:prose-code-snippet{file="/components/content/Block/App/Stats/BlockAppStats10.vue" language="vue" title="Style Ten"}
::


# Banner

## Style One

Newsletter subscription banner with email input and call-to-action button. Perfect for email capture campaigns.

::block-showcase
---
block-path: Banner/BlockBanner1
component: BlockBanner1
components: container button vee-input
frame-class: p-1
iframe-height: 300px
---
:prose-code-snippet{file="/components/content/Block/Banner/BlockBanner1.vue" language="vue" title="Style One"}
::

## Style Two

Compact announcement banner with icon and action button. Ideal for product updates and news.

::block-showcase
---
block-path: Banner/BlockBanner2
component: BlockBanner2
components: container button
frame-class: p-1
iframe-height: 300px
---
:prose-code-snippet{file="/components/content/Block/Banner/BlockBanner2.vue" language="vue" title="Style Two"}
::

## Style Three

Cookie consent banner with accept/decline options. Essential for GDPR compliance.

::block-showcase
---
block-path: Banner/BlockBanner3
component: BlockBanner3
components: container button
frame-class: p-1
iframe-height: 300px
---
:prose-code-snippet{file="/components/content/Block/Banner/BlockBanner3.vue" language="vue" title="Style Three"}
::

## Style Four

Minimal notification banner with simple message and dismiss button. Clean and unobtrusive.

::block-showcase
---
block-path: Banner/BlockBanner4
component: BlockBanner4
components: container button
frame-class: p-1
iframe-height: 200px
---
:prose-code-snippet{file="/components/content/Block/Banner/BlockBanner4.vue" language="vue" title="Style Four"}
::

## Style Five

Feature announcement banner with gradient background, animated icon, and dual action buttons. Eye-catching design with smooth entrance animations.

::block-showcase
---
block-path: Banner/BlockBanner5
component: BlockBanner5
components: container button
frame-class: p-1
iframe-height: 300px
---
:prose-code-snippet{file="/components/content/Block/Banner/BlockBanner5.vue" language="vue" title="Style Five"}
::

## Style Six

Premium upgrade banner with feature highlights, badge, and progress indicator. Highlights key benefits with staggered animations.

::block-showcase
---
block-path: Banner/BlockBanner6
component: BlockBanner6
components: button badge
frame-class: p-1
iframe-height: 350px
---
:prose-code-snippet{file="/components/content/Block/Banner/BlockBanner6.vue" language="vue" title="Style Six"}
::

## Style Seven

System maintenance alert banner with warning icon, metadata, and action buttons. Perfect for status updates and scheduled events.

::block-showcase
---
block-path: Banner/BlockBanner7
component: BlockBanner7
components: container button separator
frame-class: p-1
iframe-height: 300px
---
:prose-code-snippet{file="/components/content/Block/Banner/BlockBanner7.vue" language="vue" title="Style Seven"}
::

## Style Eight

Promotional banner with animated progress bar, badge, and trending indicators. Creates urgency with visual countdown.

::block-showcase
---
block-path: Banner/BlockBanner8
component: BlockBanner8
components: button badge
frame-class: p-1
iframe-height: 250px
---
:prose-code-snippet{file="/components/content/Block/Banner/BlockBanner8.vue" language="vue" title="Style Eight"}
::

## Style Nine

Notification center banner with count badge, timestamp, and multiple action buttons. Perfect for updates and alerts.

::block-showcase
---
block-path: Banner/BlockBanner9
component: BlockBanner9
components: container button
frame-class: py-5 p-1
iframe-height: 300px
---
:prose-code-snippet{file="/components/content/Block/Banner/BlockBanner9.vue" language="vue" title="Style Nine"}
::

## Style Ten

Sale event banner with statistics, badge variants, and detailed information. Ideal for e-commerce promotions and limited-time offers.

::block-showcase
---
block-path: Banner/BlockBanner10
component: BlockBanner10
components: button
frame-class: p-1
iframe-height: 350px
---
:prose-code-snippet{file="/components/content/Block/Banner/BlockBanner10.vue" language="vue" title="Style Ten"}
::


# Blog - Page

## Style One

Full blog page with category filter tabs and featured hero post. Features left-aligned header, staggered animations, and three-column responsive grid.

:block-showcase{block-path="Blog/Page/BlockBlogPage1" component="BlockBlogPage1" components="container avatar badge tabs"}

## Style Two

Blog page with sticky sidebar navigation and search functionality. Features centered header, category links, and two-column article layout.

:block-showcase{block-path="Blog/Page/BlockBlogPage2" component="BlockBlogPage2" components="container avatar badge input"}

## Style Three

Newsletter-integrated blog page with subscription form and tag-based filtering. Features centered header, inline email signup, and three-column grid with animated tags.

:block-showcase{block-path="Blog/Page/BlockBlogPage3" component="BlockBlogPage3" components="container badge input button"}

## Style Four

Minimal search-focused blog page with trending topics. Features large search bar, trending topic chips, horizontal dividers, and clean two-column article list.

:block-showcase{block-path="Blog/Page/BlockBlogPage4" component="BlockBlogPage4" components="container avatar chip input button divider"}

## Style Five

Magazine-style blog page with featured grid layout and statistics. Features large featured post, trending sidebar, author cards, sort dropdown, and mixed grid layout.

:block-showcase{block-path="Blog/Page/BlockBlogPage5" component="BlockBlogPage5" components="container avatar badge card dropdown-menu button"}

## Style Six

Premium dark theme blog page with gradient header and featured authors. Features animated gradient blobs, author spotlight cards, enhanced hover effects, engagement metrics, and pagination.

:block-showcase{block-path="Blog/Page/BlockBlogPage6" component="BlockBlogPage6" components="container avatar badge card tabs button divider pagination"}


# Blog Post - Card

## Style One

Classic vertical card with smooth image scale, staggered content reveal, and author profile section.

::block-showcase
---
block-path: Blog/Post/BlockBlogPostCard1
component: BlockBlogPostCard1
components: avatar
container-class: max-w-md mx-auto py-10
frame-class: px-1
iframe-height: 550px
---
::

## Style Two

Modern card with sharp edges, outlined badge with read time, and slide-in animations from the left.

::block-showcase
---
block-path: Blog/Post/BlockBlogPostCard2
component: BlockBlogPostCard2
components: badge avatar
container-class: max-w-md mx-auto py-10
frame-class: px-1
iframe-height: 550px
---
::

## Style Three

Tag-focused card with multiple category badges and date integration in headline.

::block-showcase
---
block-path: Blog/Post/BlockBlogPostCard3
component: BlockBlogPostCard3
components: badge
container-class: max-w-md mx-auto py-10
frame-class: px-1
iframe-height: 550px
---
::

## Style Four

Horizontal layout card with side-by-side image and content, perfect for list views.

::block-showcase
---
block-path: Blog/Post/BlockBlogPostCard4
component: BlockBlogPostCard4
components: avatar
container-class: max-w-md mx-auto py-10
frame-class: px-1
iframe-height: 550px
---
::

## Style Five

Premium card with gradient overlay on hover, arrow icon indicator, and bordered design.

::block-showcase
---
block-path: Blog/Post/BlockBlogPostCard5
component: BlockBlogPostCard5
components: badge avatar
container-class: max-w-md mx-auto py-10
frame-class: px-1
iframe-height: 650px
---
::

## Style Six

Horizontal featured card with metadata icons, read more button, and image hover effects.

::block-showcase
---
block-path: Blog/Post/BlockBlogPostCard6
component: BlockBlogPostCard6
components: badge avatar button
container-class: max-w-2xl mx-auto py-10
frame-class: px-1
iframe-height: 400px
---
::

## Style Seven

Gradient-bordered card with staggered tag animations, center arrow on hover, and bookmark icon.

::block-showcase
---
block-path: Blog/Post/BlockBlogPostCard7
component: BlockBlogPostCard7
components: badge avatar button
container-class: max-w-md mx-auto py-10
frame-class: px-1
iframe-height: 600px
---
::

## Style Eight

Interactive card with social engagement metrics (views, comments), action buttons, and gradient hover effect.

::block-showcase
---
block-path: Blog/Post/BlockBlogPostCard8
component: BlockBlogPostCard8
components: badge avatar button
container-class: max-w-md mx-auto py-10
frame-class: px-1
iframe-height: 650px
---
::

## Style Nine

Compact card with engagement stats (likes, bookmarks), divider separator, and corner arrow icon animation.

::block-showcase
---
block-path: Blog/Post/BlockBlogPostCard9
component: BlockBlogPostCard9
components: badge avatar divider
container-class: max-w-md mx-auto py-10
frame-class: px-1
iframe-height: 600px
---
::


# Blog - Section

## Style One

Classic three-column grid with centered header, author avatars, and staggered card animations. Features responsive layout with mobile-first design.

:block-showcase{block-path="Blog/Section/BlockBlogSection1" component="BlockBlogSection1" components="container avatar button"}

## Style Two

Clean two-column grid layout with left-aligned header and tag-based filtering. Includes category badges and "View all posts" action button.

:block-showcase{block-path="Blog/Section/BlockBlogSection2" component="BlockBlogSection2" components="container badge button"}

## Style Three

Mixed layout with featured content and recent posts sidebar. Features horizontal card layout on mobile with image-heavy design.

:block-showcase{block-path="Blog/Section/BlockBlogSection3" component="BlockBlogSection3" components="container avatar"}

## Style Four

Featured post with sidebar layout showcasing a large hero post and recent articles. Includes gradient header, category chips, and navigation sidebar.

:block-showcase{block-path="Blog/Section/BlockBlogSection4" component="BlockBlogSection4" components="container avatar badge chip card"}

## Style Five

Masonry-style grid with varied card heights and category filter tabs. Features large featured card spanning multiple rows with load more functionality.

:block-showcase{block-path="Blog/Section/BlockBlogSection5" component="BlockBlogSection5" components="container avatar badge card tabs button"}

## Style Six

Newsletter-integrated section with inline subscription card. Features engagement metrics (likes, comments), animated pulse indicator, and social stats.

:block-showcase{block-path="Blog/Section/BlockBlogSection6" component="BlockBlogSection6" components="container avatar badge card input button divider separator"}

## Style Seven

Timeline-style chronological layout with vertical connecting line and date markers. Features horizontal card design with distinct content sections.

:block-showcase{block-path="Blog/Section/BlockBlogSection7" component="BlockBlogSection7" components="container avatar badge card button"}

## Style Eight

Horizontal scrollable cards section with trending badges and gradient fade edges. Features view counters, bookmark actions, and mobile-optimized scrolling.

:block-showcase{block-path="Blog/Section/BlockBlogSection8" component="BlockBlogSection8" components="container avatar badge card button scroll-area divider"}


# Blog - Subscribe

## Style One

Classic newsletter card with gradient icon, centered layout, and staggered entrance animations.

::block-showcase
---
block-path: Blog/Subscribe/BlockBlogSubscribe1
component: BlockBlogSubscribe1
components: card vee-input button
container-class: max-w-md mx-auto my-10
frame-class: px-1
iframe-height: 550px
---
::

## Style Two

Modern design with animated top border accent and spring-based motion effects.

::block-showcase
---
block-path: Blog/Subscribe/BlockBlogSubscribe2
component: BlockBlogSubscribe2
components: card vee-input button
container-class: max-w-md mx-auto my-10
frame-class: px-1
iframe-height: 550px
---
::

## Style Three

Eye-catching card with large animated icon, and privacy assurance badge.

::block-showcase
---
block-path: Blog/Subscribe/BlockBlogSubscribe3
component: BlockBlogSubscribe3
components: card vee-input button
container-class: max-w-md mx-auto my-10
frame-class: px-1
iframe-height: 650px
---
::

## Style Four

Feature-rich subscription card with badge, benefits checklist, and decorative blur effects.

::block-showcase
---
block-path: Blog/Subscribe/BlockBlogSubscribe4
component: BlockBlogSubscribe4
components: card vee-input button badge
container-class: max-w-md mx-auto my-10
frame-class: px-1
iframe-height: 600px
---
::

## Style Five

Gradient background card with inline form, social proof stats, and animated divider.

::block-showcase
---
block-path: Blog/Subscribe/BlockBlogSubscribe5
component: BlockBlogSubscribe5
components: card vee-input button
container-class: max-w-md mx-auto my-10
frame-class: px-1
iframe-height: 600px
---
::

## Style Six

Centered design with dashed border, icon input field, and trust indicators footer.

::block-showcase
---
block-path: Blog/Subscribe/BlockBlogSubscribe6
component: BlockBlogSubscribe6
components: card vee-input button
container-class: max-w-md mx-auto my-10
frame-class: px-1
iframe-height: 550px
---
::

## Style Seven

Premium dark-themed card with statistics grid, inverted colors, and exclusive content badge.

::block-showcase
---
block-path: Blog/Subscribe/BlockBlogSubscribe7
component: BlockBlogSubscribe7
components: card vee-input button badge
container-class: max-w-md mx-auto my-10
frame-class: px-1
iframe-height: 600px
---
::


# Career

## Style One

Simple centered career listing with clean job cards. Features staggered animations, hover effects, and inline action buttons.

:block-showcase{block-path="Career/BlockCareer1" component="BlockCareer1" components="container badge button"}

## Style Two

Two-column layout with descriptive header on the left. Features side-by-side design with company philosophy and job listings.

:block-showcase{block-path="Career/BlockCareer2" component="BlockCareer2" components="container badge button"}

## Style Three

Career section with team image showcase. Features centered header, job listings with animated image, and visual appeal.

:block-showcase{block-path="Career/BlockCareer3" component="BlockCareer3" components="container badge button"}

## Style Four

Card-based career page with department filtering. Features tab navigation, salary ranges, benefits chips, and card hover effects.

:block-showcase{block-path="Career/BlockCareer4" component="BlockCareer4" components="container badge button card divider tabs"}

## Style Five

Minimal search-focused career page with featured position. Features search bar, highlighted featured role with image, and clean position list.

:block-showcase{block-path="Career/BlockCareer5" component="BlockCareer5" components="container badge button card vee-input"}

## Style Six

Modern career page with team culture and perks showcase. Features gradient header, team statistics, benefits cards, accordion job listings, and CTA section.

:block-showcase{block-path="Career/BlockCareer6" component="BlockCareer6" components="container badge button card chip accordion"}


# Contact - Header

## Style One - Centered Contact Form

Simple centered contact form with staggered animations and clean layout.

:block-showcase{block-path="Contact/Header/BlockContactHeader1" component="BlockContactHeader1" components="container vee-input vee-textarea button"}

## Style Two - Form with Google Maps

Two-column layout with contact form and embedded Google Maps integration.

:block-showcase{block-path="Contact/Header/BlockContactHeader2" component="BlockContactHeader2" components="container vee-input vee-textarea button"}

## Style Three - Form with Image

Contact form paired with decorative image in a two-column layout.

:block-showcase{block-path="Contact/Header/BlockContactHeader3" component="BlockContactHeader3" components="container vee-input vee-textarea button"}

## Style Four - Contact Information Cards

Three-column layout with contact information cards featuring icons and hover effects.

:block-showcase{block-path="Contact/Header/BlockContactHeader4" component="BlockContactHeader4" components="container"}

## Style Five - Multiple Locations

Large map showcase with location cards for multiple office addresses.

:block-showcase{block-path="Contact/Header/BlockContactHeader5" component="BlockContactHeader5" components="container"}

## Style Six - Team Support Cards

Contact form with support team member cards, avatars, and quick info panel.

:block-showcase{block-path="Contact/Header/BlockContactHeader6" component="BlockContactHeader6" components="container card avatar badge vee-input vee-textarea button"}

## Style Seven - FAQ with Contact Form

Two-column layout featuring FAQ accordion and contact form card.

:block-showcase{block-path="Contact/Header/BlockContactHeader7" component="BlockContactHeader7" components="container card accordion vee-input vee-textarea button"}

## Style Eight - Gradient Hero Contact

Full-width gradient background with centered form, animated blobs, and social links.

:block-showcase{block-path="Contact/Header/BlockContactHeader8" component="BlockContactHeader8" components="container card divider vee-input vee-textarea button"}

## Style Nine - Department Selection

Contact form with department chip selection, priority badge, and response time estimates.

:block-showcase{block-path="Contact/Header/BlockContactHeader9" component="BlockContactHeader9" components="container card chip badge vee-input vee-textarea button"}


# Call To Action (CTA)

## Style One - Centered CTA

Simple centered call-to-action with dual buttons and staggered animations.

::block-showcase
---
block-path: CTA/BlockCTA1
component: BlockCTA1
components: container button
iframe-height: 450px
---
::

## Style Two - Horizontal Split CTA

Text and buttons arranged side-by-side with responsive stacking on mobile.

::block-showcase
---
block-path: CTA/BlockCTA2
component: BlockCTA2
components: container button
iframe-height: 350px
---
::

## Style Three - Feature List with Image

CTA with feature checklist and decorative image in two-column layout.

:block-showcase{block-path="CTA/BlockCTA3" component="BlockCTA3" components="container button"}

## Style Four - Testimonial Carousel

Swiper-powered testimonial slider with customer reviews and feature list. Requires [Nuxt Swiper Module](https://github.com/cpreston321/nuxt-swiper){rel="&#x22;nofollow&#x22;"}.

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx nuxi@latest module add swiper
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx nuxi@latest module add swiper
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x nuxi@latest module add swiper
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx nuxi@latest module add swiper
```
::

Then add it to your `nuxt.config` file:

```ts
export default defineNuxtConfig({
  modules: ["nuxt-swiper"],
  swiper: {
    /* module options */
  },
});
```

:block-showcase{block-path="CTA/BlockCTA4" component="BlockCTA4" components="container button"}

## Style Five - App Download CTA

Mobile app showcase with platform download buttons and phone mockup.

:block-showcase{block-path="CTA/BlockCTA5" component="BlockCTA5" components="container button"}

## Style Six - Gradient with Statistics

Full-width gradient background with statistics badges and animated blobs.

:block-showcase{block-path="CTA/BlockCTA6" component="BlockCTA6" components="container button"}

## Style Seven - Newsletter Signup

Email newsletter subscription with inline input and submit button.

::block-showcase
---
block-path: CTA/BlockCTA7
component: BlockCTA7
components: container badge input button
iframe-height: 500px
---
::

## Style Eight - Feature Card CTA

Centered card design with feature grid, icon badges, and shadow effects.

:block-showcase{block-path="CTA/BlockCTA8" component="BlockCTA8" components="container card button"}

## Style Nine - Customer Testimonials

Swiper carousel with customer quotes, avatars, and rating stars. Requires [Nuxt Swiper Module](https://github.com/cpreston321/nuxt-swiper){rel="&#x22;nofollow&#x22;"}.

:block-showcase{block-path="CTA/BlockCTA9" component="BlockCTA9" components="container card avatar button"}


# Dashboards

## Style One

Analytics dashboard with KPI cards, a 30-day sales chart, and an orders table.

::block-showcase
---
block-path: Dashboards/BlockDashboards1
component: BlockDashboards1
components: alert-dialog container avatar avatar-label-group badge button card
  checkbox datepicker dropdown-menu gradient-divider rating sheet tabs
  tanstack-table vee-input apexchart
frame-class: p-0
iframe-height: 800px
---
:prose-code-snippet{file="/components/content/Block/Dashboards/BlockDashboards1.vue" language="vue" title="Style One"}
::

## Style Two

Membership dashboard with an MRR line chart, member stats sidebar, recent posts grid, and a top-members list.

::block-showcase
---
block-path: Dashboards/BlockDashboards2
component: BlockDashboards2
components: avatar badge button card dropdown-menu fancy-icon popover tabs
  vee-input apexchart
frame-class: p-0
iframe-height: 800px
---
:prose-code-snippet{file="/components/content/Block/Dashboards/BlockDashboards2.vue" language="vue" title="Style Two"}
::

## Style Three

Traffic analytics dashboard with sparkline metric cards and a filterable, paginated pages table.

::block-showcase
---
block-path: Dashboards/BlockDashboards3
component: BlockDashboards3
components: alert-dialog avatar badge button card checkbox dropdown-menu
  gradient-divider popover select sheet tabs tanstack-table vee-input apexchart
frame-class: p-0
iframe-height: 800px
---
:prose-code-snippet{file="/components/content/Block/Dashboards/BlockDashboards3.vue" language="vue" title="Style Three"}
::

## Style Four

Revenue analytics dashboard with KPI cards, a mixed bar and line chart, and a paginated customers table with edit and delete actions.

::block-showcase
---
block-path: Dashboards/BlockDashboards4
component: BlockDashboards4
components: alert-dialog avatar badge button card checkbox command container
  dropdown-menu gradient-divider kbd popover select sheet tabs tanstack-table
  vee-input apexchart
frame-class: p-0
iframe-height: 800px
---
:prose-code-snippet{file="/components/content/Block/Dashboards/BlockDashboards4.vue" language="vue" title="Style Four"}
::

## Style Five

Traffic and user management dashboard with a dual-line area chart and a paginated users table with search, edit, and delete actions.

::block-showcase
---
block-path: Dashboards/BlockDashboards5
component: BlockDashboards5
components: alert-dialog avatar badge button card checkbox command container
  dropdown-menu gradient-divider kbd pagination popover select sheet tabs
  tanstack-table vee-input apexchart
frame-class: p-0
iframe-height: 800px
---
:prose-code-snippet{file="/components/content/Block/Dashboards/BlockDashboards5.vue" language="vue" title="Style Five"}
::

## Style Six

Customers dashboard with radial and area charts, filter chips, CSV import, add/edit sheets, and a paginated company table.

::block-showcase
---
block-path: Dashboards/BlockDashboards6
component: BlockDashboards6
components: alert-dialog avatar badge button card checkbox command container
  dialog dropdown-menu kbd pagination popover sheet tanstack-table tooltip
  vee-input vee-select apexchart
frame-class: p-0
iframe-height: 800px
---
:prose-code-snippet{file="/components/content/Block/Dashboards/BlockDashboards6.vue" language="vue" title="Style Six"}
::

## Style Seven

Customers dashboard with sparkline stat cards, filter chips, CSV import, add/edit sheets, and a paginated company table.

::block-showcase
---
block-path: Dashboards/BlockDashboards7
component: BlockDashboards7
components: alert-dialog avatar badge button card checkbox command container
  dialog dropdown-menu kbd pagination popover sheet tanstack-table tooltip
  vee-input vee-select apexchart
frame-class: p-0
iframe-height: 800px
---
:prose-code-snippet{file="/components/content/Block/Dashboards/BlockDashboards7.vue" language="vue" title="Style Seven"}
::

## Style Eight

Organization overview dashboard with a radar chart, a stacked bar chart, and a paginated vendor table with ratings and trend badges.

::block-showcase
---
block-path: Dashboards/BlockDashboards8
component: BlockDashboards8
components: alert-dialog avatar badge button card checkbox command container
  dropdown-menu kbd pagination popover sheet tanstack-table tooltip vee-input
  vee-select apexchart
frame-class: p-0
iframe-height: 800px
---
:prose-code-snippet{file="/components/content/Block/Dashboards/BlockDashboards8.vue" language="vue" title="Style Eight"}
::

## Style Nine

Vendor security dashboard with a dual-line chart, a donut capacity chart, and a paginated vendor table with add/edit sheets.

::block-showcase
---
block-path: Dashboards/BlockDashboards9
component: BlockDashboards9
components: alert-dialog avatar badge button button-group card checkbox command
  container dropdown-menu kbd pagination popover sheet tanstack-table tooltip
  vee-input vee-select apexchart
frame-class: p-0
iframe-height: 800px
---
:prose-code-snippet{file="/components/content/Block/Dashboards/BlockDashboards9.vue" language="vue" title="Style Nine"}
::

## Style Ten

Sales overview dashboard with KPI cards, area and bar charts, a live activity feed, and dialogs for inviting teammates, generating charts, and exporting reports.

::block-showcase
---
block-path: Dashboards/BlockDashboards10
component: BlockDashboards10
components: avatar badge button button-group card command container dialog
  dropdown-menu kbd popover toggle-group tooltip apexchart
frame-class: p-0
iframe-height: 800px
---
:prose-code-snippet{file="/components/content/Block/Dashboards/BlockDashboards10.vue" language="vue" title="Style Ten"}
::

## Style Eleven

Sales overview dashboard with KPI sparkline cards, a reactive stacked bar chart, a date range picker, a filters dialog, and an upgrade plan dialog.

::block-showcase
---
block-path: Dashboards/BlockDashboards11
component: BlockDashboards11
components: avatar badge button button-group checkbox command container
  datepicker dialog dropdown-menu kbd popover radio-group tooltip apexchart
frame-class: p-0
iframe-height: 800px
---
:prose-code-snippet{file="/components/content/Block/Dashboards/BlockDashboards11.vue" language="vue" title="Style Eleven"}
::

## Style Twelve

Financial dashboard with a reactive area chart, a paginated transactions table, a dynamic cards list with an add-card form, and a budgets section.

::block-showcase
---
block-path: Dashboards/BlockDashboards12
component: BlockDashboards12
components: avatar badge button button-group checkbox command container
  datepicker dialog dropdown-menu kbd pagination popover tanstack-table tooltip
  apexchart
frame-class: p-0
iframe-height: 800px
---
:prose-code-snippet{file="/components/content/Block/Dashboards/BlockDashboards12.vue" language="vue" title="Style Twelve"}
::

## Style Thirteen

Banking dashboard with two reactive radial account charts, a balance area chart, a recent deposits list, and a cards section — plus deposit and send-funds forms, a filters dialog, and a ⌘K command search.

::block-showcase
---
block-path: Dashboards/BlockDashboards13
component: BlockDashboards13
components: avatar badge button button-group checkbox command container
  datepicker dialog dropdown-menu kbd popover switch tooltip vee-input
  vee-select apexchart
frame-class: p-0
iframe-height: 800px
---
:prose-code-snippet{file="/components/content/Block/Dashboards/BlockDashboards13.vue" language="vue" title="Style Thirteen"}
::


# Error

## Background patterns

Here is one source for background patterns. <https://bg.ibelick.com/>{rel="&#x22;nofollow&#x22;"}

You can copy them and modify them as you see fit.

## Adding a custom error page

To add a custom error page, you can create a new file in the root of your nuxt app call `error.vue`. You can learn more about this in the [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/error){rel="&#x22;nofollow&#x22;"}.

## Simple

Grid pattern background with left-aligned content and staggered entrance animations.

::block-showcase
---
block-path: Error/BlockError
component: BlockError
components: button
iframe-height: 600px
---
::

## Centered

Radial dot pattern background with centered text layout and animated content reveal.

::block-showcase
---
block-path: Error/BlockErrorCentered
component: BlockErrorCentered
components: button
iframe-height: 600px
---
::

## Image

Two-column split layout featuring decorative image with slide-in animation and responsive stacking.

::block-showcase
---
block-path: Error/BlockErrorImage
component: BlockErrorImage
components: button
iframe-height: 600px
---
::

## Links

Grid background with helpful navigation links featuring staggered animations and hover effects.

::block-showcase
---
block-path: Error/BlockErrorLinks
component: BlockErrorLinks
components: button
iframe-height: 600px
---
::

## Animated

Gradient background with floating blobs and GSAP timeline animations for smooth sequential reveals.

**Requires:** `npm install gsap`

::block-showcase
---
block-path: Error/BlockError5
component: BlockError5
iframe-height: 700px
---
#components
The button component is used for the retry action.

  :::prose-code-group{hide-header-meta no-format sync="_pm"}
  ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
  npx ui-thing@latest add button
  ```

  ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
  pnpm dlx ui-thing@latest add button
  ```

  ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
  bun x ui-thing@latest add button
  ```

  ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
  yarn dlx ui-thing@latest add button
  ```
  :::

This also needs gsap to be installed.

  :::prose-code-group{sync="_pm"}
  ```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
  npm i gsap
  ```

  ```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
  pnpm i gsap
  ```

  ```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
  bun add gsap
  ```

  ```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
  yarn add gsap
  ```
  :::
::

## Suggestions carousel

Interactive carousel showcasing helpful resource cards with auto-play functionality.

**Requires:** Nuxt Swiper module.

::block-showcase
---
block-path: Error/BlockError6
component: BlockError6
components: card button
iframe-height: 700px
---
::

## Minimal

Clean, minimal design with custom SVG illustration and spring-based entrance animations.

::block-showcase
---
block-path: Error/BlockError7
component: BlockError7
components: button
iframe-height: 700px
---
::

## Dark / Stats

Dark-themed error page with status cards, error details in terminal style, and retry actions.

::block-showcase
---
block-path: Error/BlockError8
component: BlockError8
components: card badge button
iframe-height: 700px
---
::

## Interactive Search

Feature-rich error page with inline search input and popular pages grid for easy navigation.

::block-showcase
---
block-path: Error/BlockError9
component: BlockError9
components: card input button
iframe-height: 700px
---
::


# FAQs

## Style One

Grid layout with centered icon cards. Features three-column responsive design, staggered animations, icon badges, and centered CTA section.

:block-showcase{block-path="FAQ/BlockFAQ1" component="BlockFAQ1" components="container button"}

## Style Two

Grid layout with left-aligned content. Features three-column cards, icon badges with hover effects, and horizontal CTA with responsive stacking.

:block-showcase{block-path="FAQ/BlockFAQ2" component="BlockFAQ2" components="container button"}

## Style Three

Classic accordion FAQ layout. Features expandable/collapsible questions, centered content area, smooth animations, and support CTA.

:block-showcase{block-path="FAQ/BlockFAQ3" component="BlockFAQ3" components="container button accordion"}

## Style Four

Categorized FAQ with tabs and search. Features category navigation, search bar, accordion per tab, and organized content by topic.

:block-showcase{block-path="FAQ/BlockFAQ4" component="BlockFAQ4" components="container button accordion vee-input tabs"}

## Style Five

Card-based FAQ with search filtering. Features interactive cards with hover effects, real-time search, category badges, and dual CTA buttons.

:block-showcase{block-path="FAQ/BlockFAQ5" component="BlockFAQ5" components="container card badge button vee-input"}

## Style Six

Two-column minimal layout. Features sticky sidebar with description, clean question list, simple border separators, and compact design.

:block-showcase{block-path="FAQ/BlockFAQ6" component="BlockFAQ6" components="container badge button"}

## Style Seven

Interactive collapsible cards. Features manual toggle controls, plus/minus icons, card hover states, and dual support contact options.

:block-showcase{block-path="FAQ/BlockFAQ7" component="BlockFAQ7" components="container card button"}


# Features

## Style One

Alternating image and content layout with checkmark lists. Features large images with detailed feature descriptions and bullet points.

::block-showcase
---
block-path: Feature/BlockFeature1
component: BlockFeature1
components: container
container-class: min-h-screen
---
::

## Style Two

Image and content sections with call-to-action buttons. Similar to Style One but includes action buttons for demos and learn more links.

::block-showcase
---
block-path: Feature/BlockFeature2
component: BlockFeature2
components: container button
container-class: min-h-screen
---
::

## Style Three

Simple centered grid with icon cards. Clean, minimal three-column layout perfect for highlighting key features.

:block-showcase{block-path="Feature/BlockFeature3" component="BlockFeature3" components="container"}

## Style Four

Six-feature grid with centered icon cards. Expanded version of Style Three showing more features in a 2x3 or 3x2 grid.

:block-showcase{block-path="Feature/BlockFeature4" component="BlockFeature4" components="container"}

## Style Five

Left-aligned grid with feature links. Each feature card includes an arrow link for more information.

:block-showcase{block-path="Feature/BlockFeature5" component="BlockFeature5" components="container"}

## Style Six

Grid with decorative SVG and featured image. Includes a decorative arrow SVG element and split layout with feature grid and image.

:block-showcase{block-path="Feature/BlockFeature6" component="BlockFeature6" components="container"}

## Style Seven

Horizontal layout with image and linked features. Features displayed in a row with detailed descriptions and learn more links.

:block-showcase{block-path="Feature/BlockFeature7" component="BlockFeature7" components="container"}

## Style Eight

Two-column layout with decorative SVG and video embed. Includes a YouTube video iframe and decorative background element.

:block-showcase{block-path="Feature/BlockFeature8" component="BlockFeature8" components="container"}

## Style Nine

Centered layout with hero image and feature grid. Features a large hero image followed by a centered grid of features with links.

:block-showcase{block-path="Feature/BlockFeature9" component="BlockFeature9" components="container badge button"}

## Style Ten

Three-column layout with phone mockup. Features arranged on both sides of a centered phone mockup image.

:block-showcase{block-path="Feature/BlockFeature10" component="BlockFeature10" components="container badge button"}

## Style Eleven

Integration showcase with logo icons. Perfect for displaying third-party integrations and partnerships.

:block-showcase{block-path="Feature/BlockFeature11" component="BlockFeature11" components="container badge button"}

## Style Twelve

Tab-based feature sections with images. Interactive tabs for Analytics, Security, and Automation with detailed features and images.

:block-showcase{block-path="Feature/BlockFeature12" component="BlockFeature12" components="container tabs"}

## Style Thirteen

Bento grid layout with mixed card sizes. Modern bento-box style grid with featured large card and smaller feature cards.

:block-showcase{block-path="Feature/BlockFeature13" component="BlockFeature13" components="container card"}

## Style Fourteen

Services grid with hover effects. Six colorful service cards with icons, features, and hover glow effects.

:block-showcase{block-path="Feature/BlockFeature14" component="BlockFeature14" components="container card badge button"}

## Style Fifteen

Feature comparison table. Comprehensive table comparing features across Starter, Professional, and Enterprise tiers.

:block-showcase{block-path="Feature/BlockFeature15" component="BlockFeature15" components="container card button"}

## Style Sixteen

Animated feature cards with badges. Six feature cards with hover animations, badges, and detailed highlights.

:block-showcase{block-path="Feature/BlockFeature16" component="BlockFeature16" components="container card badge"}

## Style Seventeen

Gradient background with floating elements. Features colorful gradient backgrounds with animated floating orbs and feature cards with tags.

:block-showcase{block-path="Feature/BlockFeature17" component="BlockFeature17" components="container card badge button"}

## Style Eighteen

Dark theme with GSAP animations. &#x2A;*Requires:** `npm install gsap`. Dark gradient background with animated floating orbs and feature cards with stats.

:block-showcase{block-path="Feature/BlockFeature18" component="BlockFeature18" components="container card button"}

## Style Nineteen

Animated gradient blobs with masonry grid. Features animated gradient blob backgrounds with mixed-size feature cards in a masonry-style layout.

:block-showcase{block-path="Feature/BlockFeature19" component="BlockFeature19" components="container card badge"}

## Style Twenty

Glassmorphism design with dark background. Premium glassmorphic cards with backdrop blur, gradient borders, and animated particles.

:block-showcase{block-path="Feature/BlockFeature20" component="BlockFeature20" components="container badge button"}


# Footer

## Style One

Six-column link grid footer. Simple footer with a grid of navigation links organized into columns and copyright section with logo.

:block-showcase{block-path="Footer/BlockFooter1" component="BlockFooter1" components="container"}

## Style Two

Logo and description with link columns. Features a prominent logo section with description, four columns of links, and social media icons.

:block-showcase{block-path="Footer/BlockFooter2" component="BlockFooter2" components="container"}

## Style Three

Newsletter subscription with link columns. Includes a newsletter signup form alongside navigation columns and social media links.

:block-showcase{block-path="Footer/BlockFooter3" component="BlockFooter3" components="container button"}

## Style Four

Newsletter highlight with six-column links. Newsletter section at top with prominent call-to-action, followed by comprehensive link grid.

:block-showcase{block-path="Footer/BlockFooter4" component="BlockFooter4" components="container button"}

## Style Five

Navigation and newsletter combined. Features primary navigation links alongside newsletter subscription form in a clean layout.

:block-showcase{block-path="Footer/BlockFooter5" component="BlockFooter5" components="container button"}

## Style Six

Call-to-action footer with centered content. Large CTA section with prominent messaging and action buttons, followed by simple copyright bar.

:block-showcase{block-path="Footer/BlockFooter6" component="BlockFooter6" components="container button"}

## Style Seven

Minimal single-line footer. Simple, clean footer with just logo, copyright, and centered layout.

::block-showcase
---
block-path: Footer/BlockFooter7
component: BlockFooter7
components: container
iframe-height: 200px
---
::

## Style Eight

Ultra-minimal centered footer. Compact footer with logo, navigation links, and copyright in a horizontal layout.

::block-showcase
---
block-path: Footer/BlockFooter8
component: BlockFooter8
components: container
iframe-height: 300px
---
::

## Style Nine

Four-column footer with social media. Features company description, organized link columns, and social media icons in rounded buttons.

::block-showcase
---
block-path: Footer/BlockFooter9
component: BlockFooter9
components: container
container-class: mt-5
---
::

## Style Ten

Dark theme comprehensive footer. Full-featured dark footer with five link columns, newsletter subscription, and social links.

:block-showcase{block-path="Footer/BlockFooter10" component="BlockFooter10" components="container button"}

## Style Eleven

Two-column layout with inline navigation. Clean design with logo/description on left, social links and legal footer on right.

:block-showcase{block-path="Footer/BlockFooter11" component="BlockFooter11" components="container"}

## Style Twelve

Gradient CTA footer with six columns. Features prominent call-to-action section, comprehensive link grid, and social media.

:block-showcase{block-path="Footer/BlockFooter12" component="BlockFooter12" components="container button"}

## Style Thirteen

App download footer with detailed links. Includes App Store/Google Play buttons, extensive social links, and three-column navigation.

:block-showcase{block-path="Footer/BlockFooter13" component="BlockFooter13" components="container"}

## Style Fourteen

Compact single-line footer. Minimal design with logo, inline navigation, and copyright in one clean row.

:block-showcase{block-path="Footer/BlockFooter14" component="BlockFooter14" components="container"}

## Style Fifteen

Centered social-first footer. Large logo with centered navigation, prominent social media icons, and legal links.

:block-showcase{block-path="Footer/BlockFooter15" component="BlockFooter15" components="container"}

## Style Sixteen

Three-column balanced footer. Features logo, quick links, and newsletter subscription in equal-width columns.

:block-showcase{block-path="Footer/BlockFooter16" component="BlockFooter16" components="container button divider"}


# Forgot & Reset Password

## Style One

Email input form for password recovery with grid background. Simple centered layout with email field and instructions to send reset link.

::block-showcase
---
block-path: ForgotPassword/BlockForgotPassword
component: BlockForgotPassword
components: button vee-input
container-class: h-screen
iframe-height: 550px
---
::

## Style Two

Card-based forgot password form with muted background. Clean centered design with email input, divider, and sign-in link. Features icon badge and helpful hint text.

::block-showcase
---
block-path: ForgotPassword/BlockForgotPassword2
component: BlockForgotPassword2
components: button card divider vee-input
container-class: h-screen
iframe-height: 600px
---
::

## Style Three

Split-screen forgot password layout. Left side features the form while right side displays security information with feature highlights and icons. Modern design for larger screens.

::block-showcase
---
block-path: ForgotPassword/BlockForgotPassword3
component: BlockForgotPassword3
components: button vee-input
container-class: h-screen
iframe-height: 700px
---
::

## Success Confirmation

Success confirmation page. Displays after email submission with mail icon, success message, and option to resend instructions.

::block-showcase
---
block-path: ForgotPassword/BlockForgotPasswordSuccess
component: BlockForgotPasswordSuccess
components: button
container-class: h-screen
iframe-height: 550px
---
::

## Two-Step Verification

Multi-method verification selector. Users choose between email or SMS verification with dynamic form fields. Features card-based selection with icons and check indicators.

::block-showcase
---
block-path: ForgotPassword/BlockTwoStepVerification
component: BlockTwoStepVerification
components: button card vee-input
container-class: h-screen
iframe-height: 750px
---
::

## OTP Verification - Style One

OTP verification with grid background. Features 6-digit PIN input using UiVeePinInput, email confirmation display, and resend functionality.

::block-showcase
---
block-path: OTP/BlockOTPVerification
component: BlockOTPVerification
components: button vee-input vee-pin-input
container-class: h-screen
iframe-height: 600px
---
::

## OTP Verification - Style Two

Card-based OTP verification. Clean centered design with lock icon, 6-digit PIN input, verification instructions, and resend option with divider.

::block-showcase
---
block-path: OTP/BlockOTPVerification2
component: BlockOTPVerification2
components: button card divider vee-input vee-pin-input
container-class: h-screen
iframe-height: 650px
---
::

## Reset Password - Style One

Password reset form with validation and grid background. Features password strength indicators, confirmation field matching, and real-time validation feedback with check icons.

::block-showcase
---
block-path: ResetPassword/BlockResetPassword
component: BlockResetPassword
components: button vee-input
container-class: h-screen
iframe-height: 680px
---
::

## Reset Password - Style Two

Card-based password reset form. Minimal design with password inputs, validation requirements list in muted background, and clear visual feedback.

::block-showcase
---
block-path: ResetPassword/BlockResetPassword2
component: BlockResetPassword2
components: button card vee-input
container-class: h-screen
iframe-height: 650px
---
::


# Header Section

## Style One

Centered header with headline, title, and description. Features slotted content area for custom buttons or CTAs. Clean minimal design with responsive text sizing.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection1
component: BlockHeaderSection1
components: container
container-class: h-screen
iframe-height: 400px
---
::

## Style Two

Centered header with dual button layout. Includes headline, title, description, and two action buttons (outline and solid variants) for primary and secondary CTAs.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection2
component: BlockHeaderSection2
components: button container
container-class: h-screen
iframe-height: 400px
---
::

## Style Three

Centered header with billing toggle tabs. Features monthly/annual billing selector with badge highlighting savings. Ideal for pricing pages with plan options.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection3
component: BlockHeaderSection3
components: badge container tabs
container-class: h-screen
iframe-height: 400px
---
::

## Style Four

Centered header with email signup form. Features email input with submit button and privacy policy text. Wide form layout optimized for newsletter signups.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection4
component: BlockHeaderSection4
components: button container vee-input
container-class: h-screen
iframe-height: 400px
---
::

## Style Five

Centered header with search input. Clean design featuring search icon input field. Perfect for documentation sites, knowledge bases, or product search pages.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection5
component: BlockHeaderSection5
components: container vee-input
container-class: h-screen
iframe-height: 400px
---
::

## Style Six

Left-aligned header with slotted content. Features headline, title, and description aligned to the left. Provides flexible slot for custom action elements.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection6
component: BlockHeaderSection6
components: container
container-class: h-screen
iframe-height: 400px
---
::

## Style Seven

Left-aligned header with dual buttons. Similar to Style Six but includes outline and solid button pair for primary and secondary actions.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection7
component: BlockHeaderSection7
components: button container
container-class: h-screen
iframe-height: 400px
---
::

## Style Eight

Left-aligned header with billing tabs. Features monthly/annual billing toggle with savings badge. Left-aligned variant of the pricing header layout.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection8
component: BlockHeaderSection8
components: badge container tabs
container-class: h-screen
iframe-height: 400px
---
::

## Style Nine

Left-aligned header with email form. Email signup form with privacy policy notice. Left-aligned layout for newsletter subscription or waitlist signups.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection9
component: BlockHeaderSection9
components: button container vee-input
container-class: h-screen
iframe-height: 400px
---
::

## Style Ten

Left-aligned header with search field. Features search icon input aligned to the left. Ideal for category pages or filtered content sections.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection10
component: BlockHeaderSection10
components: container vee-input
container-class: h-screen
iframe-height: 400px
---
::

## Style Eleven

Split header with headline and title on left, description on right. Two-column responsive layout that balances heading content with supporting description text.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection11
component: BlockHeaderSection11
components: container
container-class: h-screen
iframe-height: 400px
---
::

## Style Twelve

Split header with dual buttons. Two-column layout with headline/title on left, description on right, and action buttons below for balanced content presentation.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection12
component: BlockHeaderSection12
components: button container
container-class: h-screen
iframe-height: 400px
---
::

## Style Thirteen

Split header with billing tabs. Two-column layout featuring headline/title split with description and billing period selector. Perfect for pricing page headers.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection13
component: BlockHeaderSection13
components: badge container tabs
container-class: h-screen
iframe-height: 400px
---
::

## Style Fourteen

Split header with email signup. Two-column layout with email form and privacy notice. Balanced presentation for lead generation and newsletter signups.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection14
component: BlockHeaderSection14
components: button container vee-input
container-class: h-screen
iframe-height: 400px
---
::

## Style Fifteen

Split header with search input. Two-column layout featuring search field. Ideal for content-heavy pages requiring prominent search functionality.

::block-showcase
---
block-path: HeaderSection/BlockHeaderSection15
component: BlockHeaderSection15
components: container vee-input
container-class: h-screen
iframe-height: 400px
---
::


# Hero

## Style One

Split layout hero with email signup form and side image. Features badge, headline, description, and email input with animated slide-in effects from left and right.

::block-showcase
---
block-path: Hero/BlockHero1
component: BlockHero1
components: badge button vee-input
container-class: h-screen
iframe-height: 600px
---
::

## Style Two

Split layout with dual action buttons and clipped image. Features secondary badge variant, demo and signup buttons, with scale animation on the image.

::block-showcase
---
block-path: Hero/BlockHero2
component: BlockHero2
components: badge button
container-class: h-screen
iframe-height: 600px
---
::

## Style Three

Split layout with customer social proof. Includes email signup form, avatar stack, star ratings, and customer count display.

::block-showcase
---
block-path: Hero/BlockHero3
component: BlockHero3
components: button vee-input animated-tooltip
container-class: h-screen
iframe-height: 600px
---
::

## Style Four

Hero with background grid pattern and rounded image. Features overlay image with custom border radius and grid background with radial mask.

::block-showcase
---
block-path: Hero/BlockHero4
component: BlockHero4
components: button container
container-class: h-screen
iframe-height: 600px
---
::

## Style Five

Hero with dotted background pattern and social proof. Includes email form, avatar stack, star ratings, and radial dot background pattern.

::block-showcase
---
block-path: Hero/BlockHero5
component: BlockHero5
components: button container vee-input animated-tooltip
container-class: h-screen
iframe-height: 600px
---
::

## Style Six

Hero with decorative SVG arrow and signup form. Features centered or left-aligned content with custom SVG decoration and card-based form layout.

::block-showcase
---
block-path: Hero/BlockHero6
component: BlockHero6
components: button container vee-input animated-tooltip
container-class: h-screen
iframe-height: 600px
---
::

## Style Seven

Centered hero with embedded video. Features badge, headline, buttons, and YouTube video embed with staggered fade-in animations.

::block-showcase
---
block-path: Hero/BlockHero7
component: BlockHero7
components: badge button container
container-class: h-screen
iframe-height: 600px
---
::

## Style Eight

Centered hero with dashboard preview. Features feature badges with icons, dual CTAs, trust indicators, and large dashboard screenshot with shadow.

::block-showcase
---
block-path: Hero/BlockHero8
component: BlockHero8
components: badge button container
container-class: h-screen
iframe-height: 700px
---
::

## Style Nine

Centered hero with animated background and stats. Features gradient background, grid pattern, animated status badge, and key statistics display.

::block-showcase
---
block-path: Hero/BlockHero9
component: BlockHero9
components: button container
container-class: h-screen
iframe-height: 700px
---
::

## Style Ten

Split layout with email form and glowing image. Features security badges, email signup, and product showcase image with gradient glow effect.

::block-showcase
---
block-path: Hero/BlockHero10
component: BlockHero10
components: button container vee-input
container-class: h-screen
iframe-height: 700px
---
::

## Style Eleven

Centered hero with radial gradient background and dashboard mockup. Features animated beta badge with pulsing dot, gradient-colored headline word, dual CTA buttons, and a detailed dashboard placeholder with KPI cards, bar chart, and data rows — all animated in on load with staggered spring transitions.

::block-showcase
---
block-path: Hero/BlockHero11
component: BlockHero11
components: badge button container
container-class: h-screen
iframe-height: 750px
---
::


# Login

## Simple

A minimal login form with email and password fields. Includes links for password recovery and account creation. Perfect for straightforward authentication needs.

::block-showcase
---
block-path: Login/BlockLoginSimple
component: BlockLoginSimple
components: vee-input button
container-class: h-screen
iframe-height: 550px
---
::

## Simple w/ Card

Clean login form presented within a bordered card container. Features subtle shadow and rounded corners for a polished, contained appearance.

::block-showcase
---
block-path: Login/BlockLoginSimpleCard
component: BlockLoginSimpleCard
components: vee-input button
container-class: h-screen
iframe-height: 600px
---
::

## Simple w/ Social

Login form with social authentication options. Includes Google and Facebook sign-in buttons separated by a divider for multiple authentication methods.

::block-showcase
---
block-path: Login/BlockLoginSimpleSocial
component: BlockLoginSimpleSocial
components: vee-input button divider
container-class: h-screen
iframe-height: 650px
---
::

## Simple w/ Social 2

Email-only login with extensive social options. Features company logo and multiple social providers including Google, Facebook, and Github for flexible authentication.

::block-showcase
---
block-path: Login/BlockLoginSimpleSocial2
component: BlockLoginSimpleSocial2
components: vee-input button divider
container-class: h-screen
iframe-height: 650px
---
::

## Simple w/ Image

Split-screen login with decorative image. Form on one side, full-height background image on the other. Includes social login option and responsive layout that hides image on mobile.

::block-showcase
---
block-path: Login/BlockLoginSimpleSocialImage
component: BlockLoginSimpleSocialImage
components: vee-input button divider
container-class: h-screen
iframe-height: 650px
---
::

## Remember Me

Login form with remember me functionality. Features company logo, checkbox for persistent sessions, and convenient forgot password link positioned next to the checkbox.

::block-showcase
---
block-path: Login/BlockLoginSimpleRemember
component: BlockLoginSimpleRemember
components: vee-input button vee-checkbox
container-class: h-screen
iframe-height: 650px
---
::

## Two Column

Modern two-column layout with form and feature showcase. Left side contains login form with social options and remember me checkbox. Right side displays security message with icon on muted background.

::block-showcase
---
block-path: Login/BlockLoginTwoColumn
component: BlockLoginTwoColumn
components: vee-input button vee-checkbox divider
container-class: h-screen
iframe-height: 650px
---
::

## Minimal Card

Centered card design with icon header. Features circular user icon, clean spacing, and focused layout. Ideal for admin panels or dashboard authentication.

::block-showcase
---
block-path: Login/BlockLoginMinimal
component: BlockLoginMinimal
components: vee-input button
container-class: h-screen
iframe-height: 600px
---
::

## Centered Social

Social-first authentication with centered layout. Company logo and prominent social login buttons above the traditional email/password form. Remember me checkbox included.

::block-showcase
---
block-path: Login/BlockLoginCentered
component: BlockLoginCentered
components: vee-input button vee-checkbox divider
container-class: h-screen
iframe-height: 700px
---
::

## Compact

Ultra-compact login card with minimal text. Features borderless inputs, simple card design, and terms of service notice. Perfect for space-constrained layouts or mobile-first designs.

::block-showcase
---
block-path: Login/BlockLoginCompact
component: BlockLoginCompact
components: vee-input button
container-class: h-screen
iframe-height: 550px
---
::


# Metric

## Style One

Centered metrics display with muted background container. Features large primary-colored values in a three-column grid layout, perfect for highlighting key achievements.

:block-showcase{block-path="Metric/BlockMetric1" component="BlockMetric1" components="container"}

## Style Two

Bordered metrics section with four-column responsive grid. Simple, clean layout with top and bottom borders separating the metrics from surrounding content.

::block-showcase
---
block-path: Metric/BlockMetric2
component: BlockMetric2
components: container
iframe-height: 400px
---
::

## Style Three

Metrics with header and call-to-action buttons. Features responsive button placement and additional descriptions for each metric, ideal for conversion-focused pages.

:block-showcase{block-path="Metric/BlockMetric3" component="BlockMetric3" components="container button"}

## Style Four

Split layout with image and metrics grid. Combines compelling visuals with statistics, featuring descriptive text for each metric and a strong heading section.

:block-showcase{block-path="Metric/BlockMetric4" component="BlockMetric4" components="container"}

## Style Five

Compact icon-based metrics in horizontal layout. Features icons next to values for visual interest, perfect for dashboard-style metric displays with minimal vertical space.

:block-showcase{block-path="Metric/BlockMetric5" component="BlockMetric5" components="container"}

## Style Six

Card-based metrics with icon badges. Each metric presented in a rounded card with circular icon background, ideal for emphasizing individual statistics with equal weight.

::block-showcase
---
block-path: Metric/BlockMetric6
component: BlockMetric6
components: container
iframe-height: 550px
---
::

## Style Seven

Two-column layout with contextual section. Features heading with descriptive copy alongside a compact 2x2 metrics grid, great for storytelling with data.

:block-showcase{block-path="Metric/BlockMetric7" component="BlockMetric7" components="container"}

## Style Eight

Detailed card metrics with descriptions. Each statistic includes an icon, value, label, and supporting description text within a bordered card container.

::block-showcase
---
block-path: Metric/BlockMetric8
component: BlockMetric8
components: container
iframe-height: 550px
---
::

## Style Nine

Primary-colored hero metrics section. Bold primary background with grid pattern overlay and centered layout, perfect for high-impact metric showcases.

:block-showcase{block-path="Metric/BlockMetric9" component="BlockMetric9" components="container"}

## Style Ten

Business metrics with growth badges. Features hover effects, icon containers, and trend badges showing percentage changes, ideal for dashboards and reports.

::block-showcase
---
block-path: Metric/BlockMetric10
component: BlockMetric10
components: container badge
iframe-height: 500px
---
::


# Navigation (Header)

## Note

In order to see the full navigation bar, please click on the `Full Screen View` button ( :icon{.inline name="lucide:gallery-vertical"} ) at the top of the style.

This is because the full Navigation is not displayed unless you are above the `lg` breakpoint.

## Style One

Multi-level mega menu navigation with categorized sections. Features large dropdown panels with grouped links, icons, and descriptions. Includes mobile sheet navigation with collapsible sections.

::block-showcase
---
block-path: Navigation/BlockNavigation1
component: BlockNavigation1
components: container navigation-menu button sheet scroll-area collapsible gradient-divider
container-class: h-screen
---
::

## Style Two

Mega menu with icon cards and call-to-action footer. Each dropdown item displayed in a bordered card with icon, perfect for feature showcases. Includes promotional message in dropdown footer.

::block-showcase
---
block-path: Navigation/BlockNavigation2
component: BlockNavigation2
components: container navigation-menu button sheet scroll-area collapsible gradient-divider
container-class: h-screen
---
::

## Style Three

Blog-focused navigation with image previews. Features grid layout of blog posts with thumbnail images in the dropdown menu. Includes hover effects and "View all" call-to-action.

::block-showcase
---
block-path: Navigation/BlockNavigation3
component: BlockNavigation3
components: container navigation-menu button sheet collapsible scroll-area gradient-divider
container-class: h-screen
---
::

## Style Four

Compact dropdown menus with narrow panels. Features single-column dropdown layout with icons and descriptions, ideal for simpler navigation structures. Includes "Learn more" footer links.

::block-showcase
---
block-path: Navigation/BlockNavigation4
component: BlockNavigation4
components: container navigation-menu button sheet scroll-area collapsible gradient-divider
container-class: h-screen
---
::


# Newsletter

## Style One

Split layout with large image and email signup form. Features heading, description, email input, subscribe button, and privacy notice with responsive behavior.

:block-showcase{block-path="Newsletter/BlockNewsletter1" component="BlockNewsletter1" components="container vee-input button"}

## Style Two

Horizontal layout with heading and inline form. Simple design with email input and subscribe button, includes privacy policy notice.

::block-showcase
---
block-path: Newsletter/BlockNewsletter2
component: BlockNewsletter2
components: container vee-input button
iframe-height: 400px
---
::

## Style Three

Centered newsletter signup with badge and animations. Features staggered fade-in effects, simple email form, and privacy message with Motion-v animations.

::block-showcase
---
block-path: Newsletter/BlockNewsletter3
component: BlockNewsletter3
components: container badge vee-input button
iframe-height: 500px
---
::

## Style Four

Card-based newsletter with split content and decorative icons. Features subscriber count badge, feature icons (check marks, shield), and slide-in animations from left and right.

::block-showcase
---
block-path: Newsletter/BlockNewsletter4
component: BlockNewsletter4
components: container card vee-input button
iframe-height: 500px
---
::

## Style Five

Newsletter form with grid background and multi-field inputs. Includes first name, last name, email fields, checkbox for terms acceptance, and card container with fade-in animations.

::block-showcase
---
block-path: Newsletter/BlockNewsletter5
component: BlockNewsletter5
components: container card vee-input button checkbox
iframe-height: 600px
---
::

## Style Six

Featured newsletter block with benefits and statistics. Split layout showcasing weekly digest, instant updates, and exclusive offers with icon cards and staggered animations.

::block-showcase
---
block-path: Newsletter/BlockNewsletter6
component: BlockNewsletter6
components: container vee-input button
iframe-height: 500px
---
::

## Style Seven

Premium newsletter card with decorative elements and social proof. Features centered layout with sparkles icon, subscriber count, rating, security badges, and bordered card design with fade-in animations.

::block-showcase
---
block-path: Newsletter/BlockNewsletter7
component: BlockNewsletter7
components: container card vee-input button
iframe-height: 550px
---
::


# Pricing

## Style One

Three-column pricing cards with icon headers and featured border. Each card includes icon badge, plan details, feature list with checkmarks, and call-to-action buttons. Features header with description and action buttons.

:block-showcase{block-path="Pricing/BlockPricing1" component="BlockPricing1" components="container card button"}

## Style Two

Simplified pricing cards with dual action buttons. Features large pricing display, plan name, and feature lists. Each card includes both primary and outline button options in the footer.

:block-showcase{block-path="Pricing/BlockPricing2" component="BlockPricing2" components="container card button"}

## Style Three

Two-column pricing with billing toggle and detailed features. Includes tabs for monthly/annual billing with savings badge, plan descriptions, and extensive two-column feature grids with checkmark indicators.

::block-showcase
---
block-path: Pricing/BlockPricing3
component: BlockPricing3
components: container card button tabs badge
iframe-height: 700px
---
::

## Style Four

Comparison table pricing with detailed feature breakdown. Features billing tabs, comprehensive feature comparison across plans with category groupings. Desktop view shows side-by-side comparison, mobile shows stacked layout.

::block-showcase
---
block-path: Pricing/BlockPricing4
component: BlockPricing4
components: container button tabs badge
iframe-height: 800px
---
::

## Style Five

Popular badge pricing with muted background. Three-column layout with "Most popular" badge on recommended plan, clean feature lists, and varied button styles to emphasize the featured option.

::block-showcase
---
block-path: Pricing/BlockPricing5
component: BlockPricing5
components: container button badge
iframe-height: 700px
---
::

## Style Six

Two-column detailed pricing with feature descriptions. Features recommended badge, detailed feature explanations under each point, and different visual treatment for the featured plan with primary background tint.

::block-showcase
---
block-path: Pricing/BlockPricing6
component: BlockPricing6
components: container button badge
iframe-height: 750px
---
::

## Style Seven

Annual/monthly toggle with switch component. Three-column layout featuring interactive switch for billing period, real-time price updates, and savings badge. Displays annual total when yearly billing selected.

::block-showcase
---
block-path: Pricing/BlockPricing7
component: BlockPricing7
components: container button badge switch
iframe-height: 700px
---
::

## Style Eight

Four-tier pricing with icon badges and custom pricing option. Features icon headers, highlighted popular plan, free tier, and enterprise custom pricing. Organized with key features section separated by border.

::block-showcase
---
block-path: Pricing/BlockPricing8
component: BlockPricing8
components: container button
iframe-height: 750px
---
::

## Style Nine

Three-column pricing with billing toggle, highlighted Pro card, and social proof logos. Features a centered header, monthly/annual switch with animated discount badge, visually elevated recommended card, heroicon check marks, and a brand logo strip below the cards.

::block-showcase
---
block-path: Pricing/BlockPricing9
component: BlockPricing9
components: container button badge switch
iframe-height: 800px
---
::


# Sidebar

## Sidebar 01

A simple sidebar with navigation grouped by section. Features version switcher dropdown, search input, and organized navigation sections with labels and dividers.

::block-showcase
---
block-path: Sidebar/BlockSidebar01
component: BlockSidebar01
components: sidebar dropdown-menu label navbar divider breadcrumbs placeholder
iframe-height: 80vh
---
::

## Sidebar 02

A sidebar with collapsible sections. Includes expandable navigation groups using collapsible components, version switcher, search functionality, and breadcrumb navigation.

::block-showcase
---
block-path: Sidebar/BlockSidebar02
component: BlockSidebar02
components: sidebar dropdown-menu label collapsible navbar divider breadcrumbs placeholder
iframe-height: 80vh
---
::

## Sidebar 03

A sidebar with submenus. Features nested navigation items with expandable submenus, organized by sections with labels and dividers for better content organization.

::block-showcase
---
block-path: Sidebar/BlockSidebar03
component: BlockSidebar03
components: sidebar dropdown-menu label navbar divider breadcrumbs placeholder
iframe-height: 80vh
---
::

## Sidebar 04

A floating sidebar with submenus. Displays as a floating panel with nested navigation structure, dropdown menus for user actions, and organized sections with visual separators.

::block-showcase
---
block-path: Sidebar/BlockSidebar04
component: BlockSidebar04
components: sidebar dropdown-menu label navbar divider breadcrumbs placeholder
iframe-height: 80vh
---
::

## Sidebar 05

A sidebar with collapsible submenus. Features expandable navigation groups with nested items, allowing users to collapse/expand sections to manage sidebar content density.

::block-showcase
---
block-path: Sidebar/BlockSidebar05
component: BlockSidebar05
components: sidebar dropdown-menu collapsible navbar breadcrumbs
iframe-height: 80vh
---
::

## Sidebar 06

A sidebar with submenus as dropdowns. Navigation items with children render as dropdown menus on hover or click, providing a compact navigation solution.

:block-showcase{block-path="Sidebar/BlockSidebar06" component="BlockSidebar06" components="sidebar dropdown-menu navbar breadcrumbs"}

## Sidebar 07

A sidebar that collapses to icons. Features a toggle button to minimize the sidebar to icon-only view, saving screen space while maintaining quick access to navigation.

::block-showcase
---
block-path: Sidebar/BlockSidebar07
component: BlockSidebar07
components: sidebar dropdown-menu navbar breadcrumbs toggle
iframe-height: 80vh
---
::

## Sidebar 08

An inset sidebar with secondary navigation. Features a main sidebar with an additional inset panel for secondary navigation items, perfect for multi-level app structures.

::block-showcase
---
block-path: Sidebar/BlockSidebar08
component: BlockSidebar08
components: sidebar dropdown-menu navbar breadcrumbs
iframe-height: 80vh
---
::

## Sidebar 09

Collapsible nested sidebars. Features multiple sidebar panels that can be collapsed independently, providing flexible navigation for complex applications with multiple sections.

::block-showcase
---
block-path: Sidebar/BlockSidebar09
component: BlockSidebar09
components: sidebar dropdown-menu collapsible navbar breadcrumbs
iframe-height: 80vh
---
::

## Sidebar 10

A sidebar in a popover. Navigation displayed within a popover component, ideal for mobile layouts or when sidebar should be triggered rather than always visible.

::block-showcase
---
block-path: Sidebar/BlockSidebar10
component: BlockSidebar10
components: sidebar dropdown-menu popover navbar breadcrumbs
iframe-height: 80vh
---
::

## Sidebar 11

A sidebar with a collapsible file tree. Features a recursive file/folder tree structure with expand/collapse functionality, perfect for documentation or file management interfaces.

::block-showcase
---
block-path: Sidebar/BlockSidebar11
component: BlockSidebar11
components: sidebar dropdown-menu collapsible navbar breadcrumbs
iframe-height: 80vh
---
::

## Sidebar 12

A sidebar with a calendar. Integrates a calendar component within the sidebar for date selection, along with standard navigation items and user dropdown menu.

::block-showcase
---
block-path: Sidebar/BlockSidebar12
component: BlockSidebar12
components: sidebar dropdown-menu calendar navbar breadcrumbs
iframe-height: 80vh
---
::

## Sidebar 13

A sidebar in a dialog. Navigation rendered within a dialog component, useful for full-screen overlays or modal-based navigation on smaller screens.

::block-showcase
---
block-path: Sidebar/BlockSidebar13
component: BlockSidebar13
components: sidebar dropdown-menu dialog navbar breadcrumbs
iframe-height: 80vh
---
::

## Sidebar 14

A sidebar on the right. Features the sidebar positioned on the right side of the layout instead of the default left position, with all standard navigation features.

::block-showcase
---
block-path: Sidebar/BlockSidebar14
component: BlockSidebar14
components: sidebar dropdown-menu navbar breadcrumbs
iframe-height: 80vh
---
::


# Sign Up

## Background patterns

Here is one source for background patterns. <https://bg.ibelick.com/>{rel="&#x22;nofollow&#x22;"}

You can copy them and modify them as you see fit.

## Simple

Clean sign up form with radial gradient background pattern. Features name, email, and password fields with a centered layout and subtle masked background effect.

::block-showcase
---
block-path: SignUp/BlockSignUp
component: BlockSignUp
components: vee-input button
container-class: h-screen
iframe-height: 600px
---
::

## Card

Simple sign up form presented in a card with border. Features radial dot pattern background and rounded card container with shadow for a polished appearance.

::block-showcase
---
block-path: SignUp/BlockSignUpCard
component: BlockSignUpCard
components: vee-input button
container-class: h-screen
iframe-height: 600px
---
::

## Password Meter

Sign up form with real-time password strength validation. Displays checkmark indicators for password requirements, showing users when their password meets security criteria.

::block-showcase
---
block-path: SignUp/BlockSignUpPasswordMeter
component: BlockSignUpPasswordMeter
components: vee-input button
container-class: h-screen
iframe-height: 700px
---
::

## Social

Email-only signup with multiple social authentication options. Features Google, Facebook, and Github sign-in buttons separated by divider, with grid background pattern.

::block-showcase
---
block-path: SignUp/BlockSignUpSocial
component: BlockSignUpSocial
components: vee-input button divider
container-class: h-screen
iframe-height: 700px
---
::

## Image

Split-screen layout with form and decorative image. Features social login option, form on left side, full-height image on right. Responsive layout hides image on mobile.

::block-showcase
---
block-path: SignUp/BlockSignUpImage
component: BlockSignUpImage
components: vee-input button divider
container-class: h-screen
iframe-height: 700px
---
::

## Two Column

Modern two-column layout with feature showcase. Left side includes first/last name fields, terms checkbox, and social options. Right side displays branded message on muted background.

::block-showcase
---
block-path: SignUp/BlockSignUpTwoColumn
component: BlockSignUpTwoColumn
components: vee-input button vee-checkbox divider
container-class: h-screen
iframe-height: 700px
---
::

## Minimal Card

Centered card with icon header and password confirmation. Features circular user icon badge, confirm password field for validation, and clean card design with muted background.

::block-showcase
---
block-path: SignUp/BlockSignUpMinimal
component: BlockSignUpMinimal
components: vee-input button
container-class: h-screen
iframe-height: 650px
---
::

## Centered Social

Social-first authentication with centered layout. Company logo, prominent social buttons above traditional form, and optional marketing checkbox for user preferences.

::block-showcase
---
block-path: SignUp/BlockSignUpCentered
component: BlockSignUpCentered
components: vee-input button vee-checkbox divider
container-class: h-screen
iframe-height: 750px
---
::

## Compact

Ultra-compact signup with minimal fields. Features borderless inputs, simple card design, and terms/privacy policy notice below form. Perfect for quick account creation flows.

::block-showcase
---
block-path: SignUp/BlockSignUpCompact
component: BlockSignUpCompact
components: vee-input button
container-class: h-screen
iframe-height: 600px
---
::


# Social Proof

## Style One

Simple centered logo grid with company logos. Features staggered scale animations on logos with hover opacity effects. Clean minimal design for showcasing trusted partners.

::block-showcase
---
block-path: SocialProof/BlockSocialProof1
component: BlockSocialProof1
components: container
iframe-height: 300px
---
::

## Style Two

Grid layout with heading and bordered logo cards. Features 8 company logos in responsive grid with hover effects and border animations. Includes descriptive heading and statistics.

::block-showcase
---
block-path: SocialProof/BlockSocialProof2
component: BlockSocialProof2
components: container
iframe-height: 500px
---
::

## Style Three

Split layout combining statistics and company logos. Left side features key metrics with icons (users, rating, awards), right side displays company logos in grid format.

::block-showcase
---
block-path: SocialProof/BlockSocialProof3
component: BlockSocialProof3
components: container
iframe-height: 500px
---
::

## Style Four

Testimonials with star ratings and company logos. Features customer testimonial cards with avatars, 5-star ratings, quotes, and grayscale logo footer. Muted background design.

::block-showcase
---
block-path: SocialProof/BlockSocialProof4
component: BlockSocialProof4
components: avatar card container
iframe-height: 700px
---
::

## Style Five

Infinite scrolling logo marquee with statistics. Features auto-scrolling company logos with hover-to-pause, plus three key metrics displayed below in grid layout.

::block-showcase
---
block-path: SocialProof/BlockSocialProof5
component: BlockSocialProof5
components: container
iframe-height: 500px
---
::


# Team

## Style One

Centered header with avatar grid layout. Features 6 team members with circular avatars, names, and roles. Simple centered design with scale animations on member cards.

:block-showcase{block-path="Team/BlockTeam1" component="BlockTeam1" components="avatar container"}

## Style Two

Team grid with social links and experience. Displays 9 members with circular avatars, bio bullets, and social media icons (Twitter, LinkedIn, Dribbble). Slide-in animations on cards.

:block-showcase{block-path="Team/BlockTeam2" component="BlockTeam2" components="avatar container"}

## Style Three

Full-width photo cards with action buttons. Features 8 members with large rectangular photos, roles, bios, and CTA buttons (About us, Open positions). Card fade-in animations.

:block-showcase{block-path="Team/BlockTeam3" component="BlockTeam3" components="avatar button container"}

## Style Four

Leadership cards with hover effects. Displays 6 team members in card format with square photos, detailed bios, and social links. Image zoom on hover with staggered entrance animations.

:block-showcase{block-path="Team/BlockTeam4" component="BlockTeam4" components="card container"}

## Style Five

Split layout with statistics and team grid. Top section features company stats (team size, countries, remote status, rating), bottom shows 8 members with overlay gradient and names.

:block-showcase{block-path="Team/BlockTeam5" component="BlockTeam5" components="button container"}

## Style Six

Department-organized team sections. Groups members by department (Leadership, Engineering) with large avatars, badges (Founder, New, Core), roles, and locations. Sectioned layout with animations.

:block-showcase{block-path="Team/BlockTeam6" component="BlockTeam6" components="avatar container"}


# Testimony

## Style One

Carousel testimonial slider with auto-rotation. Features centered quotes, customer avatars, star ratings, and company information. Uses Nuxt Swiper Module for smooth transitions between testimonials.

This one requires the [Nuxt Swiper Module](https://github.com/cpreston321/nuxt-swiper?tab=readme-ov-file#features){rel="&#x22;nofollow&#x22;"}.

::prose-code-group{hide-header-meta no-format sync="_pm"}
```bash [npm] icon="material-icon-theme:npm" noFormat hideHeader
npx nuxi@latest module add swiper
```

```bash [pnpm] icon="material-icon-theme:pnpm" noFormat hideHeader
pnpm dlx nuxi@latest module add swiper
```

```bash [bun] icon="material-icon-theme:bun" noFormat hideHeader
bun x nuxi@latest module add swiper
```

```bash [yarn] icon="material-icon-theme:yarn" noFormat hideHeader
yarn dlx nuxi@latest module add swiper
```
::

Then add it to your `nuxt.config` file.

```ts
export default defineNuxtConfig({
  modules: ["nuxt-swiper"],
  swiper: {
    /* module options */
  },
});
```

:block-showcase{block-path="Testimony/BlockTestimony1" component="BlockTestimony1" components="container avatar"}

## Style Two

Single centered testimonial with company logos. Features large quote display, customer details with avatar, star rating, and brand logos below for social proof.

:block-showcase{block-path="Testimony/BlockTestimony2" component="BlockTestimony2" components="container avatar"}

## Style Three

Side-by-side testimonial with customer image. Features large customer photo on the left, star rating at top, quote, and customer details. Responsive layout stacks vertically on mobile.

:block-showcase{block-path="Testimony/BlockTestimony3" component="BlockTestimony3" components="container"}

## Style Four

Split layout with testimonial carousel. Combines static quote section with background image carousel slider. Features decorative SVG element and glass-morphism cards. Requires Nuxt Swiper Module.

This one requires the [Nuxt Swiper Module](https://github.com/cpreston321/nuxt-swiper?tab=readme-ov-file#features){rel="&#x22;nofollow&#x22;"}.

::block-showcase
---
block-path: Testimony/BlockTestimony4
component: BlockTestimony4
components: container
iframe-height: 750px
---
::

## Style Five

Three-column testimonial grid with cards. Features equal-height cards with star ratings, quotes, and customer avatars. Clean grid layout perfect for showcasing multiple testimonials.

::block-showcase
---
block-path: Testimony/BlockTestimony5
component: BlockTestimony5
components: container avatar
iframe-height: 600px
---
::

## Style Six

Two-column layout with stats and testimonials. Left side shows overall rating (4.9/5) and customer count with visual divider. Right side displays stacked testimonial cards with compact layout.

::block-showcase
---
block-path: Testimony/BlockTestimony6
component: BlockTestimony6
components: container avatar
iframe-height: 550px
---
::

## Style Seven

Large card container with four testimonials. Features bordered card wrapper with centered heading and 2x2 grid layout of detailed testimonials including company names.

::block-showcase
---
block-path: Testimony/BlockTestimony7
component: BlockTestimony7
components: container avatar
iframe-height: 700px
---
::

## Style Eight

Masonry grid layout with compact testimonial cards. Uses CSS columns for Pinterest-style staggered layout. Features multiple short testimonials with avatars and ratings in card format.

::block-showcase
---
block-path: Testimony/BlockTestimony8
component: BlockTestimony8
components: container avatar
iframe-height: 650px
---
::


# Tiptap Editor

## Style One

Custom Tiptap instance with grouped icon buttons and tooltips. Features organized button groups for text formatting (bold, italic, strike), headings (H1-H3), lists (bullet, ordered), and block elements (code, blockquote). Includes undo/redo actions with disabled states.

:block-showcase{block-path="Tiptap/BlockTiptap1" component="BlockTiptap1" components="container toggle button separator tooltip"}


# Beautiful Nuxt Components

::landing-hero
---
badge:
  label: New
  href: /changelog
  text: Typeset, Questionnaire & More!
primaryCta:
  label: Get Started
  href: /getting-started/introduction
  icon: lucide:rocket
secondaryCta:
  label: View on GitHub
  href: https://github.com/BayBreezy/ui-thing
  icon: simple-icons:github
description: Discover a collection of stunning UI components for your next Nuxt project.
headline: Beautiful Nuxt Components
logoDark: /logo-dark.svg
logoHref: /getting-started/introduction
logoLight: /logo-light.svg
siteName: UI Thing
---
::

:ui-gradient-divider{.my-10}

:home-page


## More Information
  
- [UI Thing CLI](https://github.com/BayBreezy/ui-thing-cli)

## Contact Information
  
- [GitHub](https://github.com/BayBreezy/)
- [Website](https://behonbaker.com/)
- [Email](mailto:behon.baker@yahoo.com)