# 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-pm-x{command="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-pm-x{command="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-pm-x{command="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-pm-x{command="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-pm-x{command="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-pm-x{command="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-pm-x{command="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-pm-x{command="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-pm-x{command="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-pm-x{command="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.

::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>
```

## `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, prose, 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/prose`
- `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-prose`
- `list-documentation-pages`
- `list-block-pages`
- `search-components`
- `search-documentation-pages`
- `resolve-library-item`

### Details

- `get-component`
- `get-block`
- `get-prose`
- `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`, `get-prose`, 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

## March 20, 2026

### Component Updates

- [**Sidebar**](https://uithing.com/components/sidebar): Fixed an issue where the `SidebarProvider` was not persisting the open or closed state correctly with cookies. The provider now restores the saved state properly and keeps the cookie in sync with controlled updates.
- **Class Overrides**: Updated component and prose style builders to normalize Vue class bindings with `normalizeClass(...)` before passing them into `tv()`. This removes the TypeScript errors introduced by the recent Vue class type change without narrowing the public `class` prop API.
- [**Scrollspy**](https://uithing.com/components/scrollspy): Added a shared `mode="multiple"` option so docs and app layouts can mark every visible heading as active at once. The docs TOC rail now follows those active headings with a segmented zigzag highlight instead of a single active branch.

### Developer Experience

- **Agent Skills**: Added a new local `uithing` Codex skill for UI Thing workflows. It covers real CLI usage, component/docs/generator/MCP authoring inside this repo, and React or shadcn-style snippet conversion into native Vue, Nuxt, and UI Thing composition.

### Form Updates

- [**VeeSwitch**](https://uithing.com/forms/veeswitch): Added a dedicated Vee-Validate switch wrapper with docs and examples, including settings and preferences card patterns. The wrapper now also aligns with the current Reka Switch value model so initial values and custom true/false values display correctly in the UI.

## January 24, 2026

### New Component

- **Color Picker**: A versatile color picker component that supports multiple color formats (HEX, RGB, HSL) and includes features like alpha transparency, preset swatches, and a user-friendly interface. Check out the documentation [here](https://uithing.com/components/color-picker).

## January 3, 2026

### Component Updates

- [**Alert**](https://uithing.com/components/alert): The Alert component has been updated to adjust the icon alignment when there is no title provided. Check out the updated documentation [here](https://uithing.com/components/alert).
- [**Sheet**](https://uithing.com/components/sheet): The Sheet component has been updated to include a new `variant` prop that allows for different visual styles. A `fullscreen` prop was also introduced that will determine if the sheet takes up the entire screen or not. The default variant has been preserved, and additional variants can be explored in the documentation [here](https://uithing.com/components/sheet).

## January 2, 2026

### Component Updates

- [**Tanstack Table**](https://uithing.com/components/tanstacktable): The Tanstack Table component has been updated to fix an issue with column pinning styles. Pinned columns now have the correct background color applied. Check out the updated documentation [here](https://uithing.com/components/tanstacktable).

## January 1, 2026

### New Component

- **Flip Clock**: An animated split-flap clock that supports live time and countdown modes. Check out the documentation [here](https://uithing.com/components/flip-clock).

## December 29, 2025

### New Components

- **QR Code**: A component for generating and displaying QR codes with customizable styling and frame handles. Check out the documentation [here](https://uithing.com/components/qrcode).
- **Avatar Label Group**: A component for displaying an Avatar with associated title and subtitle. Check out the documentation [here](https://uithing.com/components/avatar).

## December 25, 2025

🎄 Happy Holidays 🎄

### MCP Server

UI Thing now has an MCP server that powers its AI capabilities. This allows AI assistants like Claude Desktop, Cursor, and VS Code to access component source code, documentation, installation instructions, and more.

Learn more about it at [Getting Started - MCP Server](https://uithing.com/getting-started/mcp).

### Component Updates

- [**Fancy Icon**](https://uithing.com/components/fancyicon): The fancy icon component has been updated to closer resemble the one from Untitled UI. From the start, it should have looked like that but I was too lazy. This update comes with some breaking changes. Be sure to check the docs [here](https://uithing.com/components/fancyicon) for usage examples.
- [**Icon**](https://uithing.com/components/icon): The icon component has always been in the repo but there was no documentation for it. This was built because of an issue Where the Datatable component could not render icons from the official Nuxt Icon module.
- [**Iframe (Lazy)**](https://uithing.com/components/iframelazy): The Iframe Lazy component is another one that has always been buried in the codebase with no documentation lol. This component allows you to lazy load iframes only when they come into view. Check out the docs [here](https://uithing.com/components/iframelazy).
- [**Tanstack Table**](https://uithing.com/components/tanstacktable): The Tanstack Table component has been updated. No breaking changes but new examples were added to showcase the updates. I am lazy, so I wanted a table that would just take an array of objects and generate the table for me. I also asked Claude to implement the server side pagination part. I may update this later to include other stuff... who knows.

### Component API

The component API now includes an endpoint to get a component by name.

The response now includes a `docsPath` property that contains the path to the documentation page for that component.

**Endpoints:**

- Get all components: [`/api/components`](https://uithing.com/api/components)
  - You can also filter with a search query
- Get a component by name: [`/api/components/{name}`](https://uithing.com/api/components/%7Bname%7D)

### Blocks API

A new API endpoint has been added to get all blocks.

**Endpoints:**

- Get all blocks: [`/api/blocks`](https://uithing.com/api/blocks)
  - You can also filter with a search query
- Get a block by name: [`/api/blocks/{name}`](https://uithing.com/api/blocks/%7Bname%7D)
- Get all block categories: [`/api/blocks/categories`](https://uithing.com/api/blocks/categories)
- Get blocks by category: [`/api/blocks/categories/{name}`](https://uithing.com/api/blocks/categories/%7Bname%7D)

### Prose API

A new API endpoint has been added to get all prose components.

**Endpoints:**

- Get all prose components: [`/api/prose`](https://uithing.com/api/prose)
  - You can also filter with a search query
- Get a prose component by name: [`/api/prose/{name}`](https://uithing.com/api/prose/%7Bname%7D)

### Block Paths

The URL for several block paths have been updated to be more consistent. Some dashes were added here and there. This is only breaking if you were hardcoding the paths somewhere or add them bookmarked 👀...

### Landing Page Example

A new landing page example has been added to the [Examples](https://uithing.com/examples/landing) section.

## October 31, 2025

### New Field Components

Added new interactive field components to enhance user input experiences:

- **DocsFieldHear** - A hearing-style interactive field component
- **DocsFieldNotionPrompt** - Notion-style prompt field with mentions and context

### Home Page Refactor

Refactored the home page layout and added new HomeCards components for improved visual presentation.

### Utilities

Added `no-scrollbar` utility class for improved user experience on scrollable elements.

## October 20, 2025

### Prose Components

Added a comprehensive collection of prose components for enhanced content rendering and documentation:

#### Typography Components

- **ProseH1-H6** - Heading components with anchor link support and customizable styles
- **ProseP** - Paragraph component with customizable classes
- **ProseLead** - Lead paragraph component for introductory text
- **ProseStrong** - Strong text rendering component
- **ProseEm** - Emphasized text component
- **ProseBlockquote** - Styled blockquote component
- **ProseA** - Customizable anchor links with styling
- **ProseHr** - Horizontal rule component

#### List Components

- **ProseUl, ProseOl, ProseLi** - List components with customizable styles
- **ProseIconList** - Lists with icons and multiple variants

#### Table Components

- Added complete table prose components for documentation tables

#### Code Components

- **ProseCodeGroup** - Tabbed interface for multiple code snippets
- **ProseCodeSnippet** - Dynamic code imports with syntax highlighting
- **ProsePre** - Enhanced code blocks with file name display and meta parsing
- **ProseCodeTree** - Interactive file navigation component
- Code collapse functionality
- Copy button for code blocks

#### Documentation Components

- **ProseField & ProseFieldGroup** - Enhanced documentation for component props
- **ProseCallout** - Callout component with various styles and variants
- **ProseCard** - Card component with animated border effects
- **ProseCollapsible** - Collapsible content with customizable icons
- **ProseTabs** - Tabbed content for documentation
- **ProseImage** - Custom image with zoom functionality
- **ProseColorModeImage** - Adaptive images for light/dark modes
- **ProseSmartIcon** - Smart icon component

#### Package Manager Components

- **ProsePmInstall** - Package installation commands
- **ProsePmRun** - Package manager script execution
- **ProsePmX** - Package manager command execution
- Added `usePm` composable for package manager integration

#### Typography Documentation

Added comprehensive typography documentation showcasing all prose components and their usage.

## October 30, 2025

### New Block Components

Expanded the blocks section with multiple new component categories:

#### Testimonial Blocks

Added 8 new testimonial block variations featuring:

- Carousel sliders with auto-rotation
- Grid layouts with customer avatars
- Star ratings and company logos
- Masonry/Pinterest-style layouts

#### Sign Up Blocks

Added 4 new sign up page designs:

- Two-column layouts with feature showcases
- Password confirmation fields
- Social authentication options
- Compact and minimal card designs

#### Pricing Blocks

Added 4 new pricing section layouts:

- Interactive annual/monthly toggles
- Feature comparison grids
- Popular plan badges
- Four-tier pricing with custom options

#### Login Blocks

Added 4 new login page designs:

- Two-column layouts with security messages
- Minimal card designs with icon headers
- Social-first authentication layouts
- Compact designs with terms notices

#### Metric Blocks

Added 6 new metric display styles:

- Icon-based compact layouts
- Card-based designs with badges
- Two-column contextual sections
- Business metrics with growth indicators

#### Newsletter Blocks

Created 5 new newsletter signup blocks:

- Centered layouts with badges
- Card-based split designs
- Multi-field forms with checkboxes
- Feature showcase grids

### Documentation Updates

Enhanced documentation across multiple sections:

- Updated sidebar documentation with detailed descriptions
- Improved navigation documentation
- Enhanced header section documentation with style descriptions

### Component Updates

- **Tiptap Editor**: Added new Tiptap editor block with toolbar and formatting options
- **Nav Component**: Removed client-only wrapper for better performance
- **Animated Tooltip**: Added new component with mouse tracking and animations

## October 27, 2025

### New Block Components

#### Password Recovery & Reset

Implemented password recovery and reset components with enhanced layouts and validation.

#### Footer Components

Enhanced footer components with multiple layouts and styles.

#### Feature Blocks

Added multiple feature blocks with animations and responsive design.

#### FAQ Components

Enhanced FAQ components with multiple layouts and animations.

#### Error Pages

Added custom error pages (404, 500, etc.) with animations and helpful suggestions.

#### CTA Components

Enhanced call-to-action components with animations and new styles.

### Infrastructure

- Added Dockerfile for building and running the application
- Updated to Nuxt v4.2

## September 4, 2023

### UI Thing V2 Launch 🚀

Launched version 2 of UI Thing with a complete rebuild featuring:

- Modern component architecture
- Enhanced documentation
- Improved developer experience
- New component library built on Reka UI
- Update to Tailwind CSS v4
- Comprehensive examples and blocks

## February 27, 2025

### Timeline

In this update, the [`Timeline`](https://uithing.com/components/timeline) component was added.

You can add it by running

```bash
npx ui-thing@latest add timeline
```

## February 9, 2025

### Progress

In this update, the [`Progress`](https://uithing.com/components/progress) component was updated.

There was an issue with how the transform value was being calculated.

You can update it by running

```bash
npx ui-thing@latest add progress
```

### Description List

The [`Description List`](https://uithing.com/components/description-list) component was added.

You can try it out by running

```bash
npx ui-thing@latest add description-list
```

### Native Checkbox

The [`Native Checkbox`](https://uithing.com/forms/veecheckbox-native) component was added.

It was added because of some array issues I had with the Checkbox from Radix Vue.

You can try it out by running

```bash
npx ui-thing@latest add vee-native-checkbox
```

## February 7, 2025

### Loader

In this update, I added the [`Loader`](https://uithing.com/components/loader) component.

It was recommended in this [issue](https://github.com/BayBreezy/ui-thing/issues/77){rel="&#x22;nofollow&#x22;"}.

You can try it out by running

```bash
npx ui-thing@latest add loader
```

## February 2, 2025

### Form Builder

In this update, I added the [`Form Builder`](https://uithing.com/forms/form-builder) component.

I stumbled across an example in the Vee Validate docs and thought it would be nice to have something like this at hand.

You can try it out by running

```bash
npx ui-thing@latest add vee-form-builder
```

## January 15, 2025

### Tabs

Im this update, I added some examples for the [`Tabs`](https://uithing.com/components/tabs) component.

The examples are taken from the [Origin UI](https://originui.com/){rel="&#x22;nofollow&#x22;"} library.

Thanks to the team over there for all the great free examples ❤️.

You can run this command to add the updated tabs component to your project

```bash
npx ui-thing@latest add tabs
```

## January 15, 2025

### Datatables

Im this update, I added some examples for the [`Datatables`](https://uithing.com/components/datatable) component.

The examples are taken from the [Origin UI](https://originui.com/){rel="&#x22;nofollow&#x22;"} library.

Thanks to the team over there for all the great free examples ❤️.

You can run this command to add the updated table component to your project

```bash
npx ui-thing@latest add datatable
```

## January 14, 2025

### Table

Im this update, I added some examples for the [`Table`](https://uithing.com/components/table) component.

The examples are taken from the [Origin UI](https://originui.com/){rel="&#x22;nofollow&#x22;"} library.

Thanks to the team over there for all the great free examples ❤️.

You can run this command to add the updated table component to your project

```bash
npx ui-thing@latest add table
```

## December 28, 2024

### Avatar

Im this update, I added some examples for the [`Avatar`](https://uithing.com/components/avatar) component.

The examples are taken from the [Origin UI](https://originui.com/){rel="&#x22;nofollow&#x22;"} library.

Thanks to the team over there for all the great free examples ❤️.

## December 27, 2024

### Input & Textarea

In this update, the [`Input`](https://uithing.com/components/input) and [`Textarea`](https://uithing.com/components/textarea) components were updated.

A new `pattern` & `maxlength` props was added to them both. Thanks to [arshx86](https://github.com/arshx86){rel="&#x22;nofollow&#x22;"}.

You can try them out by running

```bash
npx ui-thing@latest add input textarea
```

## December 23, 2024

### Breadcrumbs & Pagination

In this update the [`Breadcrumbs`](https://uithing.com/components/breadcrumbs) component got a little update. You can now pass a `slot` in the array of items & customize what is displayed in that slot.

```html
<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>
```

You can try it out by running

```bash
npx ui-thing@latest add breadcrumbs
```

### Pagination

The [`Pagination`](https://uithing.com/components/pagination) component got a little update too. For the core components, only an additional import statement was added from the Vue Use library.

Some nice examples were copied over from the [Origin UI](https://originui.com/){rel="&#x22;nofollow&#x22;"} library.

You can try it out by running

```bash
npx ui-thing@latest add pagination
```

## December 21, 2024

### Carousel

In this update, the `Carousel` component was added.

Thanks to the [Shadcn Vue](https://www.shadcn-vue.com/){rel="&#x22;nofollow&#x22;"} team for doing the heavy lifting.

You can try it out by running

```bash
npx ui-thing@latest add carousel
```

## December 17, 2024

### Alert

In this update, the `Alert` component was updated.

Some cool examples were added from the [Origin UI](https://originui.com/){rel="&#x22;nofollow&#x22;"} library.

To update just run this command in your project

```bash
npx ui-thing@latest add alert
```

### Vue Tippy

The Goodies section was updated with the [Vue Tippy](https://uithing.com/goodies/vue-tippy) package.

You can create cool tooltips with it. The `Tooltip` component still works so now you have two options to choose from 🎉.

## December 15, 2024

### Sliders

In this update, the `Slider` component was updated to accommodate `vertical` orientation.

While adding some examples from the [Origin UI](https://originui.com/){rel="&#x22;nofollow&#x22;"} library, I noticed that the `Slider` component was missing the necessary classes that would make it work in a vertical orientation.

### Vertical Slider

You can check out all the awesome examples here: [Sliders](https://uithing.com/components/slider#origin-ui-examples).

### Checkboxes?

I also add some examples of checkboxes from the [Origin UI](https://originui.com/){rel="&#x22;nofollow&#x22;"} library. You can check them out here: [Checkboxes](https://uithing.com/forms/veecheckbox#origin-ui-examples).

## December 11, 2024 - More Examples & Refactor

### Refactor

In this update, I made some minor fixes to some components that were using `className` instead of `class`.

Some of the code examples were also updated:

- [Dropdown Menu](https://uithing.com/components/dropdownmenu)
- [Navigation Menu](https://uithing.com/components/navigationmenu)
- [Sidebar](https://uithing.com/components/sidebar)
- [Stepper](https://uithing.com/components/stepper)

### Button Examples

I added more button examples to the [Button](https://uithing.com/components/button) page. Shoutout to the [Origin UI](https://originui.com/){rel="&#x22;nofollow&#x22;"} team for providing these examples 🙏.

### Dialogs

Some dialog examples were added to the [Dialog](https://uithing.com/components/dialog) page. These examples are taken from the [Origin UI](https://originui.com/){rel="&#x22;nofollow&#x22;"} library as well. I hope to add some more examples soon.

## December 1, 2024

### VueForm Slider

Let me start by giving credit to the [VueForm Slider](https://github.com/vueform/slider){rel="&#x22;nofollow&#x22;"} creators ❤️.

In this release, I added the [`VeeVueFormSlider`](https://uithing.com/forms/vee-vueformslider) component to the forms section.

Yes, there is an existing `Slider` component provided [here](https://uithing.com/components/slider). The problem with this component is that the `v-model` directive returns an array. ALWAYS! This is coming from the implementation provided by Reka UI.

Based on the issue raised here [#38](https://github.com/BayBreezy/ui-thing/issues/38){rel="&#x22;nofollow&#x22;"}, I decided to create a new slider component that returns a single value. This is the [`VeeVueFormSlider`](https://uithing.com/forms/vee-vueformslider) component.

The cool thing is that this one has built in support for `vee-validate` 🙂.

You can try it out by running

```bash
npx ui-thing@latest add vee-vue-form-slider
```

## November 20, 2024

### Sidebar & Placeholder

In this release, the [`Sidebar`](https://uithing.com/components/sidebar) component was added to the components section.

Thanks to this issue here [#32](https://github.com/BayBreezy/ui-thing/issues/32){rel="&#x22;nofollow&#x22;"}, I saw that shadcn-ui added a [`Sidebar`](https://uithing.com/components/sidebar) component to their library.

The guys at shadcn-vue had already created a port of this, so I used most of that code to create the [`Sidebar`](https://uithing.com/components/sidebar) component.

Thanks to all the great devs that made this component possible ❤️.

As for the [`Placeholder`](https://uithing.com/components/placeholder) component, this one was taken from the guys at [Nuxt UI](https://ui.nuxt.com/){rel="&#x22;nofollow&#x22;"} 🙏.

### Sidebar Blocks

If you want to copy and paste some Sidebar blocks, you can check out the [Sidebar Blocks](https://uithing.com/blocks/sidebar) page.

The examples are taken from the shadcn-ui library 🙂.

## November 14, 2024

### Input Examples

In this update, a tonne of Input examples were added to the [Vee Input](https://uithing.com/forms/veeinput) page.

Thanks to the maintainers of the [Origin UI](https://originui.com/){rel="&#x22;nofollow&#x22;"} library for providing these examples 🙏.

Check them out & let me know what you think.

The [`Password Strength`](https://uithing.com/forms/veeinput#input-with-password-strength-indicator) example is really cool 😎.

## October 31, 2024

### Button Styles

In this release, I added a few button styles to the [Button](https://uithing.com/components/button) page.

The examples are taken from [Enhanced Button](https://enhanced-button.vercel.app/){rel="&#x22;nofollow&#x22;"} ❤️.

Check them out & let me know what you think.


# Cards

:page-ex-cards


# Dashboard

:page-ex-dashboard


# 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-pm-x{command="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`.

::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.

::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="mb-2 rounded-md px-3 text-left text-sm underline-offset-2 hover:bg-muted 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.

::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

::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

::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

::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="ps-7 text-muted-foreground">{{
          item.content
        }}</UiAccordionContent>
      </template>
    </UiAccordion>
  </div>
</template>
```
::

### With Sub-Header & Chevron

::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

::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="ps-12 text-muted-foreground">{{
          item.content
        }}</UiAccordionContent>
      </template>
    </UiAccordion>
  </div>
</template>
```
::

### Tabs with Chevron

::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="rounded-lg border bg-background 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

::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="rounded-lg border bg-background 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

::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="border bg-background 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

::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="border bg-background 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

::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="overflow-hidden border bg-background 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="space-y-1 border-t border-border bg-accent 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="overflow-hidden ps-6 text-sm text-muted-foreground transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
            >
              {{ collapsible.content }}
            </UiCollapsibleContent>
          </UiCollapsible>
        </UiAccordionContent>
      </UiAccordionItem>
    </UiAccordion>
  </div>
</template>
```
::


# 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-pm-x{command="ui-thing@latest add alert"}

## Usage

### Basic

::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

::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

::show-case
:docs-alert-border

#code
```vue [DocsAlertBorder.vue]
<template>
  <div>
    <UiAlert
      class="border-l-8 border-l-primary"
      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

::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

::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

::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

::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

::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

::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

::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

::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

::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

::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="rounded-lg border border-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="list-inside list-disc text-sm text-muted-foreground">
        <li>Minimum 8 characters</li>
        <li>Include a special character</li>
      </ul>
    </div>
  </UiAlert>
</template>
```
::

### Close Button

::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

::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

::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

::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="mb-3 text-sm text-muted-foreground">
          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

::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="mb-3 text-sm text-muted-foreground">
          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

::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="mb-3 text-sm text-muted-foreground">
          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

::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="mb-1 flex items-start justify-between text-muted-foreground">
          <div>
            <a class="font-medium text-foreground hover:underline" href="#"> Mary Palmer </a>
            mentioned you in
            <a class="font-medium text-foreground 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="mb-3 text-sm text-muted-foreground">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>
```
::


# 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-pm-x{command="ui-thing@latest add alert-dialog"}

## Usage

### Simple

::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

::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

::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

::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="flex size-9 shrink-0 items-center justify-center rounded-full border border-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-pm-x{command="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.

::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.

::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.

::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-pm-x{command="ui-thing@latest add aspect-ratio"}

## Usage

Right click the image to perform different actions.

::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>
```
::


# 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-pm-x{command="ui-thing@latest add autocomplete"}

## Usage

### Basic

::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="size-4 text-muted-foreground" />
        </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

::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="size-4 text-muted-foreground" />
        </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

::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="size-4 text-muted-foreground" />
        </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.

::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="size-4 text-muted-foreground" />
          <Icon
            v-else
            name="lucide:loader-circle"
            class="size-4 animate-spin text-muted-foreground"
          />
        </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-pm-x{command="ui-thing@latest add avatar"}

## Usage

::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

::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

::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

::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

::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

::show-case
:docs-avatar-badge

#code
```vue [DocsAvatarBadge.vue]
<template>
  <div class="flex items-center justify-center gap-10">
    <UiChip size="3xl" class="h-auto min-w-fit translate-x-0 bg-background p-0 ring-1">
      <template #content>
        <div class="flex items-center justify-center">
          <Icon name="heroicons:check-badge-solid" class="size-5 text-foreground" />
        </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

::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="size-8 ring-2 ring-background">
        <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="size-8 ring-2 ring-background">
        <UiAvatarImage :src="u.avatar" :alt="u.name" />
        <UiAvatarFallback>{{ u.initials }}</UiAvatarFallback>
      </UiAvatar>
      <UiButton
        v-tippy="{ content: 'Add user' }"
        variant="secondary"
        class="z-10 flex size-8 items-center justify-center rounded-full bg-secondary text-xs text-muted-foreground ring-2 ring-background hover:bg-secondary hover:text-foreground"
        size="icon"
      >
        +3
      </UiButton>
    </div>
    <div class="flex -space-x-3">
      <UiAvatar v-for="u in users" :key="u.name" class="size-12 ring-2 ring-background">
        <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="size-20 ring-2 ring-background">
        <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

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

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

::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-pm-x{command="ui-thing@latest add badge"}

## Variants

### Default

::show-case
:docs-badge-default

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

### Destructive

::show-case
:docs-badge-destructive

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

### Outline

::show-case
:docs-badge-outline

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

### Secondary

::show-case
:docs-badge-secondary

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

### Shadcn

::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

::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-[0.625rem] font-medium text-primary-foreground/60"> 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="relative outline-none has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50 has-data-[state=unchecked]:bg-muted has-data-[state=unchecked]:text-muted-foreground"
      >
        <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="-my-px -ms-px -me-1.5 inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-[inherit] p-0 text-primary-foreground/60 transition-[color,box-shadow] outline-none hover:text-primary-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
          @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="-my-[5px] -ms-0.5 -me-2 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-[inherit] p-0 text-foreground/60 transition-[color,box-shadow] outline-none hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
          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`.

::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-pm-x{command="ui-thing@latest add badge-group"}

## Usage

::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

::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 = [
    "gray",
    "red",
    "orange",
    "amber",
    "yellow",
    "lime",
    "green",
    "emerald",
    "teal",
    "cyan",
    "sky",
    "blue",
    "indigo",
    "violet",
    "purple",
    "fuchsia",
    "pink",
    "rose",
  ] as const;
</script>
```
::

### Semantic aliases

::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: "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`.

::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.

::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: "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.

::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.

::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: "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

::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: "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.

::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-pm-x{command="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.

::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="pointer-events-none relative z-10 bg-linear-to-b from-foreground to-foreground/30 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).

::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="relative flex items-center justify-center overflow-hidden rounded-lg border bg-background"
      :class="{
        'size-[180px]': size === 'sm',
        'size-[240px]': size === 'md',
        'size-[300px]': size === 'lg',
      }"
    >
      <span
        class="pointer-events-none relative z-10 text-sm font-semibold tracking-widest text-muted-foreground 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`.

::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-pm-x{command="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.

::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="pointer-events-none relative z-10 bg-linear-to-b from-foreground to-foreground/30 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).

::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="relative flex items-center justify-center overflow-hidden rounded-lg border bg-background"
      :class="{
        'size-[180px]': size === 'sm',
        'size-[240px]': size === 'md',
        'size-[300px]': size === 'lg',
      }"
    >
      <span
        class="pointer-events-none relative z-10 text-sm font-semibold tracking-widest text-muted-foreground 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`.

::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-pm-x{command="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.

::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="pointer-events-none relative z-10 bg-linear-to-b from-foreground to-foreground/30 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).

::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="relative flex items-center justify-center overflow-hidden rounded-lg border bg-background"
      :class="{
        'size-[180px]': size === 'sm',
        'size-[240px]': size === 'md',
        'size-[300px]': size === 'lg',
      }"
    >
      <span
        class="pointer-events-none relative z-10 text-sm font-semibold tracking-widest text-muted-foreground 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`.

::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-pm-x{command="ui-thing@latest add breadcrumbs"}

## Usage

### Basic

::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

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

#code
```vue [DocsBreadcrumbsDotDropdown.vue]
<template>
  <UiBreadcrumbs :items="items" class="justify-center">
    <template #dots>
      <UiDropdownMenu>
        <UiDropdownMenuTrigger
          class="flex items-center justify-center text-muted-foreground hover:text-foreground"
        >
          <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

::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="flex items-center justify-center text-muted-foreground hover:text-foreground"
        >
          <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

::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

::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

::show-case
:docs-breadcrumbs-bordered

#code
```vue [DocsBreadcrumbsBordered.vue]
<template>
  <UiBreadcrumbs
    :items="items"
    class="mx-auto w-fit rounded-lg border border-border bg-background 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

::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>
```
::


# 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-pm-x{command="ui-thing@latest add button"}

## Plain Buttons

Here we have a few examples of the plain buttons.

### Default Button

::show-case
:docs-button-default

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

### Secondary Button

::show-case
:docs-button-secondary

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

### With Icon

::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

::show-case
:docs-button-loading

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

### Outline

::show-case
:docs-button-outline

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

### Destructive

::show-case
:docs-button-destructive

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

### Ghost

::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

::show-case
:docs-button-link

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

### Icon

::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>
```
::

## Sizes

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

### Regular Button Sizes

::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

::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;"}. I think they are cool.

### Expand Icon - Right

::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

::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

::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

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

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

### Shine

::show-case
:docs-button-shine

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

### Shine on Hover

::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

::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

::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

::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

::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;"}. 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

::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

::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

::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="flex items-center border border-input 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

::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

::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

::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="relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-input"
        :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="truncate text-muted-foreground" 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

::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-pm-x{command="ui-thing@latest add button-group"}

## Usage

### Basic

::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

::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

::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

::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.

::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

::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

::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

::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

::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

::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

::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-pm-x{command="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).

::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

::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

::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="size-4 text-muted-foreground" name="lucide:chevron-down" />
        </div>
      </template>
    </UiCalendar>
  </div>
</template>
```
::

### Date Range

::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

::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

::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

::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-pm-x{command="ui-thing@latest add card"}

## Usage

::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-sm text-muted-foreground">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

::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="mt-1 h-2.5 w-2.5 shrink-0 rounded-full bg-primary" />
              <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;"} library.

## Installation

:prose-pm-x{command="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 />`.

::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

```html [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

```html [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?"}
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.
::

::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

```html [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

```html [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.

::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

::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;"} 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.

::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="py-2 text-center text-sm text-muted-foreground">
      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;"} 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>
```

::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;"} 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-pm-x{command="ui-thing@latest add checkbox"}

## Usage

### Basic

::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-sm text-muted-foreground">
          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

::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-sm text-muted-foreground">
          This checkbox will be in the indeterminate state by default.
        </p>
      </div>
    </div>
  </div>
</template>
```
::

### Shadcn

::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-sm text-muted-foreground">
            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="flex items-start justify-start gap-3 rounded-lg border p-3 hover:bg-accent/50 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-sm text-muted-foreground">
            You can enable or disable notifications at any time.
          </p>
        </div>
      </UiLabel>
    </div>
  </div>
</template>

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

## Origin UI

### Simple

::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

::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

::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

::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

::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

::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="relative peer-data-[state=checked]:text-muted-foreground 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:bg-muted-foreground 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)

::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)

::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

::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-xs text-muted-foreground">
          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-xs text-muted-foreground">
          You can use this checkbox with a label and a description.
        </p>
      </div>
    </div>

    <div
      class="relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50"
    >
      <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-xs text-muted-foreground">
          A short description goes here
        </p>
      </div>
    </div>

    <div
      class="relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50"
    >
      <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-xs text-muted-foreground">
            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

::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="relative flex cursor-pointer flex-col gap-4 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50"
      >
        <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-sm leading-none font-medium text-foreground">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="relative flex size-9 cursor-pointer flex-col items-center justify-center gap-3 rounded-full border border-input text-center shadow-xs transition-[color,box-shadow] outline-none has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50 has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50 has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary has-data-[state=checked]:text-primary-foreground"
        >
          <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-sm leading-none font-medium text-foreground">
        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 relative inline-flex size-9 cursor-pointer items-center justify-center rounded-md border border-input bg-background text-foreground shadow-xs transition-[color,box-shadow] outline-none peer-focus-visible:border-ring peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50 hover:bg-accent hover:text-accent-foreground"
          :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-pm-x{command="ui-thing@latest add chip"}

## Usage

### Basic

::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.

::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.

::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.

::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.

::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>
```
::


# 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-pm-x{command="ui-thing@latest add collapsible"}

## Usage

::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 ring-muted/50" />
          <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-pm-x{command="ui-thing@latest add color-picker"}

## Usage

### Basic

::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-sm text-muted-foreground">
      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`.

::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-sm text-muted-foreground">
      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.

::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="flex flex-wrap gap-2 text-sm text-muted-foreground">
      <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.

::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-sm text-muted-foreground">
      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.

::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="rounded-lg border border-border bg-card 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="h-28 rounded-lg border-2 border-border 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="relative h-10 w-10 rounded-lg border-2 transition-all hover:scale-110 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background 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.

::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="size-4 rounded border border-input" :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;"} 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

::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

::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="size-4 shrink-0 text-muted-foreground/50" />
          </UiButton>
        </UiPopoverTrigger>
        <UiPopoverContent class="w-(--reka-popover-trigger-width) border-input 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-pm-x{command="ui-thing@latest add command"}

## Usage

### Basic

::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

::show-case
:docs-command-shortcut

#code
```vue [DocsCommandShortcut.vue]
<template>
  <div class="flex flex-col items-center justify-center">
    <p class="text-sm text-muted-foreground">
      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

::show-case
:docs-command-popover

#code
```vue [DocsCommandPopover.vue]
<template>
  <div class="flex items-center justify-center space-x-4">
    <p class="text-sm text-muted-foreground">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

::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="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
          {{ 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.

::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">
        <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" should-scale-background>
      <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-pm-x{command="ui-thing@latest add container"}

## Usage

### Basic

::show-case
:docs-container

#code
```vue [DocsContainer.vue]
<template>
  <div>
    <UiContainer>
      <div class="h-[200px] w-full rounded-lg bg-muted 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-pm-x{command="ui-thing@latest add context-menu"}

## Usage

### Basic

::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

::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

::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;"}. 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-pm-x{command="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

::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.

::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.

::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.

::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-pm-x{command="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

::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.

::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

::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-pm-x{command="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.

::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.

::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.

::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

::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

::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-xs text-muted-foreground">@{{ cellData.username }}</span>
        </div>
      </div>
    </template>
  </UiDatatable>
</template>
```
::

### No Horizontal

::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

::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>
  @reference "~/assets/css/tailwind.css";

:deep(table.dataTable td) {
  border-bottom-width: 0px;
  border-top-width: 0px;
}
:deep(table.dataTable tbody tr) {
  @apply border-none odd:bg-muted/50 hover:bg-transparent odd:hover:bg-muted/50;
}
:deep(table.dataTable tbody) {
  @apply [&_td:first-child]:rounded-l-lg [&_td:last-child]:rounded-r-lg;
  tr {
    @apply rounded-lg;
  }
}
</style>
```
::

### Vertical Lines

::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>
  @reference "~/assets/css/tailwind.css";

:deep(.dataTable.cell-border tr th) {
  @apply border-r first:border-l;
}
</style>
```
::

### Dense

::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="overflow-hidden rounded-lg border border-border bg-background">
    <UiDatatable class="nowrap compact hover" :data="programmingLanguages" :options />
  </div>
</template>

<style scoped>
  @reference "~/assets/css/tailwind.css";

:deep(.dataTable thead tr) {
  @apply bg-muted/50;
}
</style>
```
::

### Row Selection

::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

::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="overflow-hidden rounded-lg border border-border bg-background">
    <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

::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="overflow-hidden rounded-lg border border-border bg-background">
    <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

::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="overflow-hidden rounded-lg border border-border bg-background">
    <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>
  @reference "~/assets/css/tailwind.css";

:deep(.dt-scroll-body table thead tr) {
  @apply first:hidden;
}
</style>
```
::

### Search & Sort

::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

::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";
```

::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="mb-2 text-sm text-muted-foreground">
        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>
  @reference "~/assets/css/tailwind.css";

:deep(.dataTable) {
  .dtcr-moving-first {
    @apply border-l border-primary;
  }
  .dtcr-moving-last {
    @apply border-r border-primary;
  }
  thead > tr {
    @apply bg-muted/50;
  }
}
</style>
```
::

### Pagination

::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-pm-x{command="ui-thing@latest add date-field"}

## Usage

::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="mb-2 text-sm text-muted-foreground">
      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-pm-x{command="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

::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

::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="size-4 text-muted-foreground" name="lucide:chevron-down" />
        </div>
      </template>
    </UiDatepicker>
  </div>
</template>
```
::

### Button Slot

::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

::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.

::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.

::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-sm text-muted-foreground">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

::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

::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 {
      @apply size-full;
    }
  }
</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-pm-x{command="ui-thing@latest add description-list"}

## Usage

### Basic

::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

::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-pm-x{command="ui-thing@latest add dialog"}

## Usage

### Profile Dialog

::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.

::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

::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;"} documentation.

Hats off to the Origin UI team ❤️.

I just made them work with my setup.

### Scrollable (native scrollbar)

::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="space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground">
                  <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)

::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="space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground">
                  <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)

::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-b border-border 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="space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground">
                  <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)

::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="space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground">
                  <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-t border-border 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

::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-b border-border 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="space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground">
                  <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-t border-border px-6 py-4 sm:items-center">
          <TransitionSlide appear>
            <span
              v-if="!arrivedState.bottom"
              class="grow text-xs text-muted-foreground 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

::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="flex size-11 shrink-0 items-center justify-center rounded-full border border-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-center text-xs text-muted-foreground">
          By subscribing you agree to our
          <a class="underline hover:no-underline" href="#"> Privacy Policy </a>
          .
        </p>
      </UiDialogContent>
    </UiDialog>
  </div>
</template>
```
::

### Feedback

::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

::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-b border-border 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-lg leading-none font-semibold text-foreground">
                    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="relative flex size-9 flex-1 cursor-pointer flex-col items-center justify-center gap-3 border border-input 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-[:focus-visible]:outline-ring/70 has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-50 has-[[data-state=checked]]:z-10 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-accent"
                    >
                      <RadioGroupItem
                        :id="`radio-17-r${number}`"
                        :value="number.toString()"
                        class="sr-only after:absolute after:inset-0"
                      />
                      {{ number }}
                    </label>
                  </UiRadioGroup>
                </fieldset>
                <div class="mt-2 flex justify-between text-xs text-muted-foreground">
                  <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

::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="flex size-11 shrink-0 items-center justify-center rounded-full border border-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-center text-xs text-muted-foreground"
                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

::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-center text-xs text-muted-foreground">
          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

::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-center text-xs text-muted-foreground">
          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

::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;"}

::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;"}

::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="relative flex cursor-pointer flex-col gap-1 rounded-lg border border-input p-4 shadow-xs shadow-black/5 transition-colors has-focus-visible:outline-3 has-focus-visible:outline-ring/50 has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent/70"
              >
                <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="font-medium text-foreground md:text-sm">{{ plan.name }}</p>
                  <UiBadge v-if="plan.popular">Popular</UiBadge>
                </div>
                <p class="text-sm text-muted-foreground">{{ plan.price }}</p>
              </label>
            </UiRadioGroup>

            <UiVeeInput name="nameOnCard" label="Name on card" required />
            <div class="space-y-2">
              <legend class="text-sm font-medium text-foreground">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-center text-xs text-muted-foreground">
          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

::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="relative flex w-full items-center gap-4 rounded-lg border border-input p-4 shadow-xs shadow-black/5 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-accent 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="flex flex-col gap-3 text-muted-foreground md:text-sm">
              <li v-for="f in features" :key="f" class="flex gap-2">
                <Icon
                  name="lucide:circle-check"
                  class="mt-0.5 size-6 shrink-0 text-primary 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

::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-b border-border 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="relative flex h-full w-full items-center justify-center overflow-hidden bg-muted"
            >
              <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="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 focus-visible:outline-ring/70"
                  :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="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 focus-visible:outline-ring/70"
                  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="relative flex size-20 items-center justify-center overflow-hidden rounded-full border-4 border-background bg-muted 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="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 focus-visible:outline-ring/70"
                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="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center border-r px-3 text-base text-muted-foreground 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-t border-border 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

::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="[
                  'h-1.5 w-1.5 rounded-full bg-primary',
                  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

::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="size-4 shrink-0 text-muted-foreground/80"
        aria-hidden="true"
      />
      <span class="font-normal text-muted-foreground/70">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-pm-x{command="ui-thing@latest add divider"}

## Usage

### Basic

::show-case
:docs-divider

#code
```vue [DocsDivider.vue]
<template>
  <div class="flex w-full items-center">
    <UiDivider />
  </div>
</template>
```
::

### Label

::show-case
:docs-divider-label

#code
```vue [DocsDividerLabel.vue]
<template>
  <div class="flex w-full items-center">
    <UiDivider label="OR" />
  </div>
</template>
```
::

### Icon

::show-case
:docs-divider-icon

#code
```vue [DocsDividerIcon.vue]
<template>
  <div class="flex w-full items-center">
    <UiDivider icon="lucide:activity" />
  </div>
</template>
```
::

### Avatar

::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

::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-pm-x{command="ui-thing@latest add draggable"}

## Usage

### Simple

::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="[
            'flex cursor-grab items-center justify-between gap-3 rounded-md border bg-background 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="size-4 text-destructive" />
            <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

::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 ? 'rounded-md border-2 border-dashed border-muted p-4' : '',
      ]"
    >
      <template #item="{ element }">
        <div class="cursor-grab rounded-md border bg-background 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 ? 'rounded-md border-2 border-dashed border-muted p-4' : '',
      ]"
    >
      <template #item="{ element }">
        <div class="cursor-grab rounded-md border bg-background 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

::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 ? 'rounded-md border-2 border-dashed border-muted p-4' : '',
      ]"
    >
      <template #item="{ element }">
        <div class="cursor-grab rounded-md border bg-background 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 ? 'rounded-md border-2 border-dashed border-muted p-4' : '',
      ]"
    >
      <template #item="{ element }">
        <div class="cursor-grab rounded-md border bg-background 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

::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 ? 'rounded-md border-2 border-dashed border-muted p-4' : '',
      ]"
    >
      <template #item="{ element }">
        <div class="cursor-grab rounded-md border bg-background 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 ? 'rounded-md border-2 border-dashed border-muted p-4' : '',
      ]"
    >
      <template #item="{ element }">
        <div class="cursor-grab rounded-md border bg-background 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.

::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 ? 'rounded-md border-2 border-dashed border-muted p-4' : '',
        ]"
      >
        <template #item="{ element }">
          <div class="cursor-grab rounded-md border bg-background 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 ? 'rounded-md border-2 border-dashed border-muted p-4' : '',
        ]"
      >
        <template #item="{ element }">
          <div class="cursor-grab rounded-md border bg-background 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

::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="[
            'flex items-center justify-between gap-3 rounded-md border bg-background 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="size-4 text-destructive" />
            <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

::show-case
:docs-draggable-table

#code
```vue [DocsDraggableTable.vue]
<template>
  <div class="rounded-md border border-border/50">
    <ui-table>
      <ui-table-header>
        <ui-table-row>
          <ui-table-head class="sticky left-0 w-10 bg-background/50 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="sticky left-0 w-10 bg-background/50 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="py-4 text-center text-sm text-muted-foreground">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

::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="mb-3 text-sm text-muted-foreground">Drag and drop to reorder items</p>
          <ui-gradient-divider />
        </div>
      </template>
      <template #footer>
        <div class="py-4">
          <ui-gradient-divider />
          <p class="mt-3 text-sm text-muted-foreground">Drag and drop to reorder items</p>
        </div>
      </template>
      <template #item="{ element }">
        <div
          :class="[
            'flex cursor-grab items-center justify-between gap-3 rounded-md border bg-background 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

::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-pm-x{command="ui-thing@latest add drawer"}

## Usage

### Basic Form

We can bring the different components together to make a simple drawer.

::show-case
:docs-drawer-basic

#code
```vue [DocsDrawerBasic.vue]
<template>
  <div class="text-center">
    <UiDrawer v-model:open="isOpen" should-scale-background>
      <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.

::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.

::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" should-scale-background>
      <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-pm-x{command="ui-thing@latest add dropdown-menu"}

## Usage

### Menu Items w/ Submenu

::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.

::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

::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

::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

::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="flex size-8 items-center justify-center rounded-md border bg-accent text-accent-foreground"
                  aria-hidden="true"
                >
                  <Icon :name="block.icon" size="16" />
                </div>
                <div>
                  <div class="text-sm font-medium">{{ block.title }}</div>
                  <div class="text-xs text-muted-foreground">{{ 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-pm-x{command="ui-thing@latest add dropfile"}

## Usage

### Placeholder

::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="absolute right-3 ml-auto text-xs whitespace-nowrap text-muted-foreground/60 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-pm-x{command="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.

::show-case
:docs-editable

#code
```vue [DocsEditable.vue]
<template>
  <div>
    <div class="w-full">
      <h1 class="text-lg font-semibold">Application</h1>
      <p class="mt-px text-sm text-muted-foreground">
        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="h-8 cursor-pointer text-muted-foreground">
                  <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-pm-x{command="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

::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="flex items-center gap-2 text-muted-foreground">
          Learn More <Icon name="lucide:arrow-up-right" />
        </a>
      </UiButton>
    </UiEmpty>
  </div>
</template>
```
::

### Outline

::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

::show-case
:docs-empty-background

#code
```vue [DocsEmptyBackground.vue]
<template>
  <div class="flex items-center justify-center">
    <UiEmpty class="h-full bg-gradient-to-b from-muted/50 from-30% to-background">
      <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

::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

::show-case
:docs-empty-avatar-group

#code
```vue [DocsEmptyAvatarGroup.vue]
<template>
  <div class="flex items-center justify-center">
    <UiEmpty>
      <UiEmptyHeader>
        <UiEmptyMedia>
          <div
            class="flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *: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

::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-pm-x{command="ui-thing@latest add fancy-icon"}

## Usage

### Basic

::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

::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

::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

::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

::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

::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

::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-pm-x{command="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

::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

::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

::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

::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

::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

::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

::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

::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

::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

::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="-m-1.5 no-scrollbar 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-xs text-muted-foreground">
                      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-xs text-muted-foreground">
                    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?

::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.

::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.

::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.

::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-pm-x{command="ui-thing@latest add flip-clock"}

## Usage

### Live clock and countdown

::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-sm text-muted-foreground">Live clock</p>
      <UiFlipClock size="lg" />
    </section>

    <section class="space-y-3">
      <p class="text-sm text-muted-foreground">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

::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-sm text-muted-foreground">Size: sm</p>
        <UiFlipClock size="sm" />
      </div>
      <div class="space-y-2">
        <p class="text-sm text-muted-foreground">Size: md</p>
        <UiFlipClock size="md" />
      </div>
      <div class="space-y-2">
        <p class="text-sm text-muted-foreground">Size: lg</p>
        <UiFlipClock size="lg" />
      </div>
      <div class="space-y-2">
        <p class="text-sm text-muted-foreground">Size: xl</p>
        <UiFlipClock size="xl" />
      </div>
    </div>
  </div>
</template>
```
::

### Variants

::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-sm text-muted-foreground">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

::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-sm text-muted-foreground">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-sm text-muted-foreground">show-days="always"</p>
      <UiFlipClock countdown show-days="always" :target-date="targetDate" variant="emerald" />
    </div>
    <div class="space-y-2">
      <p class="text-sm text-muted-foreground">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-pm-x{command="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

::show-case
:docs-floating-dock

#code
```vue [DocsFloatingDock.vue]
<template>
  <div
    class="relative min-h-[280px] rounded-3xl border bg-linear-to-br from-background to-muted/30"
  >
    <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

::show-case
:docs-floating-dock-soft-colors

#code
```vue [DocsFloatingDockSoftColors.vue]
<template>
  <div
    class="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:via-background 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.

::show-case
:docs-floating-dock-fancy-icon

#code
```vue [DocsFloatingDockFancyIcon.vue]
<template>
  <div
    class="relative min-h-[300px] rounded-[2rem] border bg-linear-to-br from-background to-muted/20 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-pm-x{command="ui-thing@latest add form"}

## Usage

### User profile form

::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-pm-x{command="ui-thing@latest add gradient-divider"}

## Usage

::show-case
:docs-gradient-divider

#code
```vue [DocsGradientDivider.vue]
<template>
  <div class="flex w-full">
    <UiGradientDivider />
  </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-pm-x{command="ui-thing@latest add heading"}

## Usage

### Basic example

::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-pm-x{command="ui-thing@latest add hover-card"}

## Usage

### Basic

::show-case
:docs-hover-card

#code
```vue [DocsHoverCard.vue]
<template>
  <div class="flex items-center justify-center">
    <UiHoverCard>
      <UiHoverCardTrigger as-child>
        <div
          class="flex h-20 w-20 cursor-pointer items-center justify-center rounded-full border bg-background 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="w-full dark:bg-primary-foreground dark:text-primary"
                >View profile</UiButton
              >
            </div>
          </div>
        </div>
      </UiHoverCardContent>
    </UiHoverCard>
  </div>
</template>
```
::

### Vue

::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-1 ring-muted">
            <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-xs text-muted-foreground"> 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-pm-x{command="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`.

::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.

::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.

::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.

::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.

::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.

::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:

::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-pm-x{command="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.

::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.

::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.

::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`.

::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.

::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.

::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.

::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-pm-x{command="ui-thing@latest add input"}

## Usage

### Email

::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

::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

::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

::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.

::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-sm text-muted-foreground">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.

::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-sm text-muted-foreground">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-pm-x{command="ui-thing@latest add input-group"}

## Usage

### Basic

::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="flex size-4 items-center justify-center rounded-full bg-primary text-primary-foreground"
        >
          <Icon name="lucide:check" class="size-3" />
        </div>
      </UiInputGroupAddon>
    </UiInputGroup>
  </div>
</template>
```
::

### Icon

::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

::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-xs text-muted-foreground">
          120 characters left
        </UiInputGroupText>
      </UiInputGroupAddon>
    </UiInputGroup>
  </div>
</template>
```
::

### Button

::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="pl-1.5 text-muted-foreground"> 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

::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

::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

::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

::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

::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-pm-x{command="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

::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

::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.

::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

::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

::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="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *: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

::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

::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

::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.

::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

::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-pm-x{command="ui-thing@latest add kbd"}

## Usage

```vue
<template>
  <UiKbd>Ctrl</UiKbd>
</template>
```

## Examples

### Basic

::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.

::show-case
:docs-kbd-group

#code
```vue [DocsKbdGroup.vue]
<template>
  <div class="mx-auto flex flex-col items-center gap-4">
    <p class="text-sm text-muted-foreground">
      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.

::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.

::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.

::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

::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

::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-pm-x{command="ui-thing@latest add label"}

## Usage

### Input

::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-pm-x{command="ui-thing@latest add list"}

## Usage

### Basic

::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

::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

::show-case
:docs-list-nav

#code
```vue [DocsListNav.vue]
<template>
  <div class="flex items-center justify-center">
    <UiList class="max-w-[250px] rounded-lg border bg-background">
      <template v-for="n in navList" :key="n.title">
        <UiListItem :to="n.link" class="">
          <Icon :name="n.icon" class="h-5 w-5 text-muted-foreground" />
          <UiListContent>
            <UiListTitle :title="n.title" class="text-sm font-medium" />
          </UiListContent>
          <span class="ml-auto shrink-0 self-center rounded-full text-muted-foreground/70">
            <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-pm-x{command="ui-thing@latest add listbox"}

## Usage

### Basic

::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

::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-xs text-muted-foreground">{{ 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

::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

::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-xs text-muted-foreground">{{ 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

::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

::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="px-2 py-1.5 text-xs font-medium text-muted-foreground">{{
                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

::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-pm-x{command="ui-thing@latest add loader"}

## Usage

### Basic

::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.

::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.

::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.

::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.

::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>
```
::


# 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-pm-x{command="ui-thing@latest add menubar"}

## Usage

### Full example

::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.

::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.

::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.

::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.

::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>
```
::


# 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-pm-x{command="ui-thing@latest add nav"}

## Usage

### Default

::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-xs leading-none text-muted-foreground">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

::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-xs leading-none text-muted-foreground">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

::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-xs leading-none text-muted-foreground">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-pm-x{command="ui-thing@latest add navbar"}

## Usage

### Basic

::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-sm text-muted-foreground transition-colors hover:text-foreground"
            to="/"
            >{{ l }}</NuxtLink
          >
        </nav>
      </UiContainer>
    </UiNavbar>
  </div>
</template>
```
::

## Origin UI

### One

::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="py-1.5 font-medium text-muted-foreground hover:text-primary"
                >
                  {{ 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

::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="px-2 py-1.5 text-xs font-medium text-muted-foreground">
                      {{ 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="-mx-1 my-1 h-px w-full bg-border"
                      />
                    </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="bg-transparent px-2 py-1.5 font-medium text-muted-foreground hover:text-primary *:[svg]:-me-0.5 *:[svg]:size-3.5"
                  >
                    {{ link.label }}
                  </UiNavigationMenuTrigger>
                  <UiNavigationMenuContent
                    class="z-50 p-1 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!"
                  >
                    <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="size-4 text-foreground 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="line-clamp-2 text-xs text-muted-foreground">
                                {{ 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="py-1.5 font-medium text-muted-foreground hover:text-primary"
                  >
                    {{ 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

::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="h-full justify-center rounded-none border-y-2 border-transparent py-1.5 font-medium text-muted-foreground hover:border-b-primary hover:bg-transparent hover:text-primary data-[active=true]:border-b-primary 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-pm-x{command="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.

::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="rounded-md p-3 text-sm hover:bg-muted"
                >
                  <p class="mb-1 leading-none font-semibold text-foreground">{{ item.title }}</p>
                  <p class="line-clamp-2 text-muted-foreground">{{ 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-lg font-semibold text-foreground">Radix Vue</p>
                <p class="mt-2 text-muted-foreground">
                  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.

::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="line-clamp-2 text-sm leading-snug text-muted-foreground">
              <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="flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b from-muted/50 to-muted 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-sm leading-tight text-muted-foreground">
                      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-pm-x{command="ui-thing@latest add number-field"}

## Usage

### Basic

::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

::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

::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

::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

::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

::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-pm-x{command="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

::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;"} ❤️. I think they are cool.

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

### Apart

::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

::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-sm text-muted-foreground">
          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-sm text-muted-foreground">
          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

::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-sm text-muted-foreground">
          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-sm text-muted-foreground">
          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-sm text-muted-foreground">
          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-sm text-muted-foreground">
          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

::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="size-9 rounded-none border-0 shadow-none data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground dark:bg-transparent dark:data-[selected=true]:bg-primary dark:data-[selected=true]:text-primary-foreground"
              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

::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="grow text-right text-sm whitespace-nowrap text-muted-foreground">
      <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-pm-x{command="ui-thing@latest add pin-input"}

## Usage

### Placeholder

Passing a value to the placeholder prop will render a placeholder character in each input.

::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.

::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.

::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="toast({ title: 'Complete' })" />
    </UiLabel>
  </div>
</template>
```
::

### Origin UI

::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" otp>
        <UiPinInputGroup>
          <UiPinInputInput
            v-for="n in 4"
            :key="n"
            :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"
          />
        </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="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="n in [4, 5, 6]" :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>
      </UiPinInput>
    </div>
  </div>
</template>

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


# 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-pm-x{command="ui-thing@latest add placeholder"}

## Usage

::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-pm-x{command="ui-thing@latest add pointer-highlight"}

## Usage

### Inline text

::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

::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

::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

::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="m-1! w-full max-w-[320px] rounded-lg border-dashed bg-linear-to-br from-background via-muted/40 to-background 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-sm text-muted-foreground">
            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

::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.

::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="rounded-2xl border bg-card 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="rounded-2xl bg-primary/10 px-6 py-4 text-sm font-medium text-primary">
          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-pm-x{command="ui-thing@latest add popover"}

## Anatomy

```vue
<template>
  <UiPopover>
    <UiPopoverTrigger />
    <UiPopoverContent>
      <!-- Some markup -->
    </UiPopoverContent>
  </UiPopover>
</template>
```

## Usage

### Full example

::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-sm text-muted-foreground">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

::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-xs font-medium text-muted-foreground">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="-mx-1 my-1 h-px bg-border"
          />
          <div
            v-for="notification in notifications"
            :key="notification.id"
            class="rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent"
          >
            <div class="relative flex items-start pe-3">
              <div class="flex-1 space-y-1">
                <button
                  class="text-left text-foreground/80 after:absolute after:inset-0"
                  @click="() => handleNotificationClick(notification.id)"
                >
                  <span class="font-medium text-foreground hover:underline">
                    {{ notification.user }}
                  </span>
                  {{ notification.action }}
                  <span class="font-medium text-foreground hover:underline">
                    {{ notification.target }}
                  </span>
                  .
                </button>
                <div class="text-xs text-muted-foreground">
                  {{ 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-xs text-muted-foreground">
                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-xs text-muted-foreground">
                {{ tips[currentTip]?.description }}
              </p>
            </div>
            <div class="flex items-center justify-between gap-2">
              <span class="text-xs text-muted-foreground">
                {{ 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-xs text-muted-foreground">
                {{ tips2[currentTip2]?.description }}
              </p>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-xs text-muted-foreground">
                {{ 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="absolute inset-y-0 end-0 z-10 flex h-full w-9 items-center justify-center rounded-e-md border border-transparent border-l-input text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-muted/50 hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30 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-pm-x{command="ui-thing@latest add progress"}

## Anatomy

```vue
<template>
  <UiProgress>
    <UiProgressIndicator :style="{ transform: `translateX(-${100 - (modelValue || 0)}%)` }" />
  </UiProgress>
</template>
```

## Usage

### Full example

::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

::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-pm-x{command="ui-thing@latest add qrcode"}

## Usage

### Basic

::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

::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

::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

::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

::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

::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

::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="flex justify-center rounded-lg border border-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="relative flex justify-center rounded-lg border border-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


# 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-pm-x{command="ui-thing@latest add radio-group"}

## Anatomy

```vue
<template>
  <UiRadioGroup>
    <UiRadioGroupItem value="default" />
    <UiLabel>Default</UiLabel>
  </UiRadioGroup>
</template>
```

## Usage

### Default value

::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

::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-pm-x{command="ui-thing@latest add rating"}

## Usage

### Basic

::show-case
:docs-rating

#code
```vue [DocsRating.vue]
<template>
  <div class="text-center">
    <UiRating :model-value="4" />
  </div>
</template>
```
::

### Decimal

::show-case
:docs-rating-decimal

#code
```vue [DocsRatingDecimal.vue]
<template>
  <div class="text-center">
    <UiRating :model-value="3.5" />
  </div>
</template>
```
::

### Show Rating

::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

::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

::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

::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

::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="flex items-center gap-0.5 text-sm text-muted-foreground">
          <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-pm-x{command="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

::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>
```
::

### Horizontal scroll

::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="pt-2 text-xs text-muted-foreground">
          Photo by
          <span class="font-semibold text-foreground">
            {{ 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-pm-x{command="ui-thing@latest add scrollspy"}

## Usage

### Component

::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-base text-foreground">{{ item.label }}</h3>
            <div class="h-[350px] rounded-lg bg-muted"></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

::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-base text-foreground">{{ item.label }}</h3>
            <div class="h-[350px] rounded-lg bg-muted"></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

::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-base text-foreground">{{ item.label }}</h3>
            <div class="h-[350px] rounded-lg bg-muted"></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-pm-x{command="ui-thing@latest add select"}

## Usage

### Basic example

::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

::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

::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

::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="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 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-xs text-muted-foreground" 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="mt-2 text-xs text-destructive" 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="w-full border-transparent bg-muted 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="absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground 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]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80"
        >
          <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]]: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 [&_*[role=option]>span>svg]:text-muted-foreground/80"
        >
          <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-pm-x{command="ui-thing@latest add native-select"}

## Origin UI Examples

::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="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 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="mt-2 text-xs text-muted-foreground" 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="mt-2 text-xs text-destructive" role="alert" aria-live="polite">
          Selected option is invalid
        </p>
      </div>

      <div class="*:not-first:mt-2">
        <UiLabel>Gray background</UiLabel>
        <UiNativeSelect class="border-transparent bg-muted 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="absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground 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="relative rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] outline-none focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 has-[select:disabled]:cursor-not-allowed has-[select:disabled]:opacity-50 has-[select:is(:disabled)_*]:pointer-events-none dark:has-aria-invalid:ring-destructive/40"
      >
        <label class="block px-3 pt-2 text-xs font-medium text-foreground">
          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-pm-x{command="ui-thing@latest add separator"}

## Usage

### Basic example

::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-sm text-muted-foreground">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="transition-colors hover:text-primary">Documentation</div>
      <UiSeparator orientation="vertical" />
      <div class="transition-colors hover:text-primary">Components</div>
      <UiSeparator orientation="vertical" />
      <div class="transition-colors hover:text-primary">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-pm-x{command="ui-thing@latest add sheet"}

## Usage

### Right side sheet (default)

::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

::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="size-4 text-muted-foreground/70" />
                  {{ 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

::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

::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

::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-sm text-muted-foreground">
              Notice how the background content is clearly visible without any blur effect. This can
              be useful for maintaining full context visibility.
            </p>
            <div class="rounded-lg border border-border bg-muted/50 p-3">
              <p class="text-sm font-medium">Background Content Visible</p>
              <p class="text-xs text-muted-foreground">
                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

::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-sm text-muted-foreground">
              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

::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="rounded-lg border border-border bg-muted/30 p-3">
                <h4 class="mb-2 text-sm font-medium">Current Settings</h4>
                <ul class="space-y-1 text-sm text-muted-foreground">
                  <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-sm text-muted-foreground">
                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

::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-sm text-muted-foreground">
                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="rounded-lg border border-border bg-muted/40 p-3 text-sm">
                <div class="font-medium">Current settings</div>
                <ul class="space-y-1 text-muted-foreground">
                  <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-pm-x{command="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-pm-x{command="ui-thing@latest add skeleton"}

## Usage

### Profile skeleton

::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

::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

::show-case
:docs-skeleton-card

#code
```vue [DocsSkeletonCard.vue]
<template>
  <div class="flex w-full justify-center">
    <div class="w-full max-w-md space-y-4 rounded-lg border border-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

::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

::show-case
:docs-skeleton-form

#code
```vue [DocsSkeletonForm.vue]
<template>
  <div class="flex w-full justify-center">
    <div class="w-full max-w-md space-y-4 rounded-lg border border-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

::show-case
:docs-skeleton-table

#code
```vue [DocsSkeletonTable.vue]
<template>
  <div class="flex w-full justify-center">
    <div class="w-full max-w-md space-y-3 overflow-hidden rounded-lg border border-border">
      <table class="w-full">
        <thead>
          <tr class="border-b border-border bg-muted/50">
            <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-b border-border">
            <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-pm-x{command="ui-thing@latest add slider"}

## Usage

### Basic example

::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

::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

::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

::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

::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]]:h-6 [&_[data-slot=slider-thumb]]:w-2.5 [&_[data-slot=slider-thumb]]:border-[3px] [&_[data-slot=slider-thumb]]:border-background [&_[data-slot=slider-thumb]]:bg-primary [&_[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

::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="mt-4 flex w-full items-center justify-between gap-1 text-xs font-medium text-muted-foreground"
          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

::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="mt-3 flex w-full items-center justify-between gap-1 px-2.5 text-xs font-medium text-muted-foreground"
          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="['h-1 w-px bg-muted-foreground/70', 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

::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

::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="mb-3 flex w-full items-center justify-between gap-2 text-xs font-medium text-muted-foreground"
          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

::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="mb-3 flex w-full items-center justify-between gap-2 text-xs font-medium text-muted-foreground"
        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

::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

::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

::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

::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

::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

::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)

::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

::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

::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

::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

::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

::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

::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

::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-sm font-medium text-foreground">Object position</legend>
      <div class="space-y-2">
        <div class="flex items-center gap-2">
          <UiLabel class="text-xs text-muted-foreground">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-xs text-muted-foreground">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-xs text-muted-foreground">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

::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="h-full w-full bg-primary/20 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="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground 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="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground 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

::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-center text-sm font-medium text-foreground">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="flex w-0 justify-center text-xs text-muted-foreground">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="flex w-0 justify-center text-xs text-muted-foreground">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="flex w-0 justify-center text-xs text-muted-foreground">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="flex w-0 justify-center text-xs text-muted-foreground">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="flex w-0 justify-center text-xs text-muted-foreground">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-pm-x{command="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

::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="relative z-[999] box-border flex w-full gap-4 rounded-md border bg-background p-3 px-5 shadow-lg md:w-[360px]"
  >
    <UiAvatar
      class="ring-1 ring-border"
      src="https://behonbaker.com/icon.png"
      fallback="BB"
      alt="Behon Baker"
    />
    <div>
      <p class="text-sm font-semibold">Add user</p>
      <p class="text-sm font-normal text-muted-foreground">
        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-pm-x{command="ui-thing@latest add splitter"}

## Usage

### Basic

We can put the parts together to build a simple layout with a resizable sidebar.

::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`.

::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.

::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.

::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-pm-x{command="ui-thing@latest add stepper"}

### Origin UI

::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="mt-2 text-xs text-muted-foreground" 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="mt-2 text-xs text-muted-foreground" 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="size-4 group-data-[state=active]/step:border-2 group-data-[state=active]/step:border-primary group-data-[state=active]/step:bg-transparent [&_span]:sr-only [&_svg]:size-3"
            />
          </UiStepperTrigger>
          <UiStepperSeparator v-if="step < steps.length" />
        </UiStepperItem>
      </UiStepper>
      <p class="mt-2 text-xs text-muted-foreground" 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="mt-2 text-xs text-muted-foreground" 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="mt-2 text-xs text-muted-foreground" 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="mt-2 text-xs text-muted-foreground" 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="h-1 w-full bg-border">
              <span class="sr-only">{{ step }}</span>
            </UiStepperIndicator>
            <div class="space-y-0.5">
              <UiStepperTitle>{{ title }}</UiStepperTitle>
            </div>
          </UiStepperTrigger>
        </UiStepperItem>
      </UiStepper>
      <p class="mt-2 text-xs text-muted-foreground" 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="h-1 w-full bg-border">
                <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="mt-2 text-xs text-muted-foreground" 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="h-2 w-full rounded-none bg-border">
                <span class="sr-only">{{ step }}</span>
              </UiStepperIndicator>
            </UiStepperTrigger>
          </UiStepperItem>
        </UiStepper>
        <div class="text-sm font-medium text-muted-foreground 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="mt-2 text-xs text-muted-foreground" 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="mt-2 text-xs text-muted-foreground" 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="mt-2 text-xs text-muted-foreground" 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="mt-2 text-xs text-muted-foreground" 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="mt-2 text-xs text-muted-foreground" 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="mt-2 text-xs text-muted-foreground" 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="mt-2 text-xs text-muted-foreground" 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="mt-2 text-xs text-muted-foreground" 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="mt-2 text-xs text-muted-foreground" 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-pm-x{command="ui-thing@latest add switch"}

## Usage

### Basic example

::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

::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

::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="h-3 w-9 border-none outline-offset-[6px] [&_span]:border [&_span]:border-input"
        />
        <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]:bg-transparent [&_span]:transition-all data-[state=unchecked]:[&_span]:size-4 data-[state=unchecked]:[&_span]:translate-x-0.5 data-[state=unchecked]:[&_span]:bg-input 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="flex-1 cursor-pointer text-right text-sm font-medium group-data-[state=checked]:text-muted-foreground/70"
          :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="flex-1 cursor-pointer text-left text-sm font-medium group-data-[state=unchecked]:text-muted-foreground/70"
          :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="flex-1 cursor-pointer text-right text-sm font-medium group-data-[state=checked]:text-muted-foreground/70"
          :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="flex-1 cursor-pointer text-left text-sm font-medium group-data-[state=unchecked]:text-muted-foreground/70"
          :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 absolute inset-0 h-[inherit] w-auto rounded-md data-[state=unchecked]:bg-input/50 [&_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="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=checked]:text-background 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="relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50"
        >
          <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-xs leading-[inherit] font-normal text-muted-foreground">
                (Sublabel)
              </span>
            </UiLabel>
            <p :id="`${id}-description`" class="text-xs text-muted-foreground">
              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-pm-x{command="ui-thing@latest add table"}

## Usage

### Basic example

::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

::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-sm text-muted-foreground">
          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="pl-0 font-semibold text-foreground">Name</UiTableHead>
            <UiTableHead class="pl-0 font-semibold text-foreground">Title</UiTableHead>
            <UiTableHead class="pl-0 font-semibold text-foreground">Email</UiTableHead>
            <UiTableHead class="pl-0 font-semibold text-foreground">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="pl-0 text-muted-foreground">{{ user.title }}</UiTableCell>
              <UiTableCell class="pl-0 text-muted-foreground">{{ user.email }}</UiTableCell>
              <UiTableCell class="pl-0 text-muted-foreground">{{ 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

::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-sm text-muted-foreground">
          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="pl-0 font-semibold text-foreground">Name</UiTableHead>
            <UiTableHead class="hidden pl-0 font-semibold text-foreground lg:table-cell"
              >Title</UiTableHead
            >
            <UiTableHead class="hidden pl-0 font-semibold text-foreground md:table-cell"
              >Email</UiTableHead
            >
            <UiTableHead class="pl-0 font-semibold text-foreground">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="hidden pl-0 text-muted-foreground lg:table-cell">{{
                user.title
              }}</UiTableCell>
              <UiTableCell class="hidden pl-0 text-muted-foreground md:table-cell">{{
                user.email
              }}</UiTableCell>
              <UiTableCell class="pl-0 text-muted-foreground">{{ 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

::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-sm text-muted-foreground">
          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="sticky top-0 z-10 bg-background/90 backdrop-blur-sm">
          <UiTableRow>
            <UiTableHead class="pl-0 font-semibold text-foreground backdrop-blur">Name</UiTableHead>
            <UiTableHead
              class="hidden bg-background/90 pl-0 font-semibold text-foreground backdrop-blur lg:table-cell"
              >Title</UiTableHead
            >
            <UiTableHead
              class="hidden bg-background/90 pl-0 font-semibold text-foreground backdrop-blur md:table-cell"
              >Email</UiTableHead
            >
            <UiTableHead class="pl-0 font-semibold text-foreground 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="hidden pl-0 text-muted-foreground lg:table-cell">{{
                user.title
              }}</UiTableCell>
              <UiTableCell class="hidden pl-0 text-muted-foreground md:table-cell">{{
                user.email
              }}</UiTableCell>
              <UiTableCell class="pl-0 text-muted-foreground">{{ 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

::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="mt-4 text-center text-sm text-muted-foreground">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

::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="mt-1 inline-block text-xs text-muted-foreground"
                  >@{{ 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="mt-4 text-center text-sm text-muted-foreground">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

::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="mt-4 text-center text-sm text-muted-foreground">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

::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="border-none odd:bg-muted/50 hover:bg-transparent odd:hover:bg-muted/50"
        >
          <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="mt-4 text-center text-sm text-muted-foreground">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

::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="mt-4 text-center text-sm text-muted-foreground">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

::show-case
:docs-table-dense

#code
```vue [DocsTableDense.vue]
<template>
  <div>
    <div class="overflow-hidden rounded-lg border border-border bg-background">
      <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="mt-4 text-center text-sm text-muted-foreground">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

::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="mt-4 text-center text-sm text-muted-foreground">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

::show-case
:docs-table-card-table

#code
```vue [DocsTableCardTable.vue]
<template>
  <div>
    <div class="overflow-hidden rounded-lg border border-border bg-background">
      <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="mt-4 text-center text-sm text-muted-foreground">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

::show-case
:docs-table-vertical

#code
```vue [DocsTableVertical.vue]
<template>
  <div class="mx-auto max-w-lg">
    <div class="overflow-hidden rounded-lg border border-border bg-background">
      <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="mt-4 text-center text-sm text-muted-foreground">Vertical table</p>
  </div>
</template>
```
::

### Sticky Header 2

::show-case
:docs-table-sticky-header2

#code
```vue [DocsTableStickyHeader2.vue]
<template>
  <div>
    <div class="[&>div]:max-h-96">
      <UiTable
        class="border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-b [&_th]:border-border [&_tr]:border-none [&_tr:not(:last-child)_td]:border-b"
      >
        <UiTableHeader class="sticky top-0 z-10 bg-background/90 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="mt-8 text-center text-sm text-muted-foreground">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

::show-case
:docs-table-browser-support

#code
```vue [DocsTableBrowserSupport.vue]
<template>
  <UiTable>
    <UiTableHeader>
      <UiTableRow
        class="border-y-0 *:border-border hover:bg-transparent [&>:not(:last-child)]:border-r"
      >
        <UiTableCell />
        <UiTableHead class="border-b border-border 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-b border-border 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="h-auto rotate-180 py-3 text-foreground [writing-mode:vertical-lr]"
        >
          {{ browser.name }}
        </UiTableHead>
        <UiTableHead
          v-for="browser in items?.[0]?.mobile"
          :key="browser.name"
          class="h-auto rotate-180 py-3 text-foreground [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="font-medium whitespace-nowrap text-foreground">{{
          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="inline-flex size-4 text-destructive"
            aria-hidden="true"
          />

          <span class="sr-only">{{ browser.supported ? "Supported" : "Not supported" }}</span>
          <div class="text-xs font-medium text-muted-foreground">{{ 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-pm-x{command="ui-thing@latest add tabs"}

## Usage

### Basic example

::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.

::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

::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="p-4 text-center text-sm text-muted-foreground">Content for Tab {{ t }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### Two

::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="p-4 text-center text-sm text-muted-foreground">Content for Tab {{ t }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### Three

::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="rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none"
            >Tab {{ t }}</UiTabsTrigger
          >
        </UiTabsList>
      </div>
      <UiTabsContent v-for="t in 3" :key="t" :value="`tab-${t}`">
        <p class="p-4 text-center text-sm text-muted-foreground">Content for Tab {{ t }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### Four

::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="p-4 text-center text-sm text-muted-foreground">Content for Tab {{ t }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### Five

::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="relative hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent"
            >Tab {{ t }}</UiTabsTrigger
          >
          <UiTabsIndicator />
        </UiTabsList>
      </div>
      <UiTabsContent v-for="t in 3" :key="t" :value="`tab-${t}`">
        <p class="p-4 text-center text-sm text-muted-foreground">Content for Tab {{ t }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### Six

::show-case
:docs-tabs6

#code
```vue [DocsTabs6.vue]
<template>
  <div>
    <UiTabs default-value="tab-1">
      <div class="flex justify-center">
        <UiTabsList
          :pill="false"
          class="relative h-auto -space-x-px bg-background 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="rounded-none border first:rounded-s data-[state=active]:bg-muted [&:nth-child(3n)]:rounded-e"
            >Tab {{ t }}</UiTabsTrigger
          >
          <UiTabsIndicator />
        </UiTabsList>
      </div>
      <UiTabsContent v-for="t in 3" :key="t" :value="`tab-${t}`">
        <p class="p-4 text-center text-sm text-muted-foreground">Content for Tab {{ t }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### Seven

::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="relative h-auto w-full gap-0.5 bg-transparent p-0 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border"
      >
        <UiTabsTrigger
          v-for="t in 3"
          :key="t"
          :pill="false"
          :value="`tab-${t}`"
          class="overflow-hidden rounded-b-none border-x border-t border-border bg-muted 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="p-4 text-center text-sm text-muted-foreground">Content for Tab {{ t }}</p>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>
```
::

### Eight

::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="p-4 text-center text-sm text-muted-foreground">{{ 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

::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="flex items-center gap-2 rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground 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="p-4 text-center text-sm text-muted-foreground">{{ 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

::show-case
:docs-tabs10

#code
```vue [DocsTabs10.vue]
<template>
  <div>
    <UiTabs default-value="Projects">
      <div class="relative mb-3 flex justify-center">
        <UiTabsList
          class="h-auto -space-x-px bg-background p-0 shadow-xs shadow-black/5 rtl:space-x-reverse"
        >
          <UiTabsTrigger
            v-for="t in tabs"
            :key="t.title"
            :value="t.title"
            class="relative flex items-center gap-2 overflow-hidden rounded-none border border-border py-2 first:rounded-s last:rounded-e data-[state=active]:bg-muted"
          >
            <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="p-4 text-center text-sm text-muted-foreground">{{ 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

::show-case
:docs-tabs11

#code
```vue [DocsTabs11.vue]
<template>
  <div>
    <UiTabs default-value="Projects">
      <div class="relative flex justify-center">
        <UiTabsList
          class="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 before:bg-border"
        >
          <UiTabsTrigger
            v-for="t in tabs"
            :key="t.title"
            :value="t.title"
            class="relative flex items-center gap-2 overflow-hidden rounded-b-none border-x border-t border-border bg-muted 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="p-4 text-center text-sm text-muted-foreground">{{ 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

::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="relative mb-3 h-auto gap-2 rounded-none border-b border-border bg-transparent px-0 py-1 text-foreground"
        >
          <UiTabsTrigger
            v-for="t in tabs"
            :key="t.title"
            :value="t.title"
            class="relative hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent"
          >
            <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="p-4 text-center text-sm text-muted-foreground">{{ 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

::show-case
:docs-tabs13

#code
```vue [DocsTabs13.vue]
<template>
  <div class="flex justify-center">
    <UiTabs default-value="Projects" class="items-center">
      <UiTabsList
        class="flex h-auto justify-center rounded-none border-b border-border bg-transparent p-0"
      >
        <UiTabsTrigger
          v-for="t in tabs"
          :key="t.title"
          :value="t.title"
          class="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 data-[state=active]:after:bg-primary"
        >
          <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="mx-auto max-w-sm p-4 text-center text-sm text-pretty text-muted-foreground">
          {{ 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

::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 flex-1 flex-col p-3 text-xs data-[state=active]:bg-muted 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="mx-auto max-w-sm p-4 text-center text-sm text-pretty text-muted-foreground">
          {{ 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

::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="mx-auto p-4 text-center text-sm text-pretty text-muted-foreground">
          {{ 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

::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="px-4 py-3 text-xs text-muted-foreground">
            {{ 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

::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="px-4 py-3 text-xs text-muted-foreground">
          {{ 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

::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="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 data-[state=active]:after:bg-primary"
      >
        {{ 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="px-4 py-3 text-xs text-muted-foreground">
          {{ 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

::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="flex-col gap-1 rounded-none bg-transparent px-1 py-0 text-foreground"
    >
      <UiTabsTrigger
        v-for="t in tabs"
        :key="t.title"
        :pill="false"
        :value="t.title"
        class="relative w-full justify-start after:absolute after:inset-y-0 after:start-0 after:-ms-1 after:w-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary data-[state=active]:hover:bg-accent"
      >
        <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="px-4 py-3 text-xs text-muted-foreground">
          {{ 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

::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="w-full justify-start data-[state=active]:bg-muted 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="px-4 py-3 text-xs text-muted-foreground">
          {{ 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-pm-x{command="ui-thing@latest add tags-input"}

## Usage

### Basic example

::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="h-auto p-1 shadow-xs outline-none focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50"
      >
        <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-pm-x{command="ui-thing@latest add tanstacktable"}

## Usage

### Regular

::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="h-12 w-12 text-muted-foreground" />
            <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";

  const tableRef = useTemplateRef("tableRef");
  const table = ref<Table<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<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

::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 {
    createColumnHelper,
    FlexRender,
    getCoreRowModel,
    useVueTable,
  } 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";

  //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<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.getIsSomeRowsSelected()
            ? "indeterminate"
            : table.getIsAllRowsSelected()
              ? true
              : false,
          "onUpdate:modelValue": (v: CheckboxRootProps["modelValue"]) =>
            table.getToggleAllRowsSelectedHandler()({ target: { checked: v } }),
        });
      },
      cell({ row }) {
        return h(UiCheckbox, {
          modelValue: row.getIsSelected(),
          disabled: !row.getCanSelect(),
          "onUpdate:modelValue": row.getToggleSelectedHandler(),
        });
      },
    }),
    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 = useVueTable({
    // @ts-expect-error - the types are correct
    data,
    columns,
    enableRowSelection: true,
    getCoreRowModel: getCoreRowModel<Item>(),
    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"
              :render="header.column.columnDef.header"
              :props="header.getContext()"
            />
          </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 :render="cell.column.columnDef.cell" :props="cell.getContext()" />
            </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="mt-4 text-center text-sm text-muted-foreground">
      Basic data table made with
      <a
        class="underline hover:text-foreground"
        href="https://tanstack.com/table"
        target="_blank"
        rel="noopener noreferrer"
      >
        TanStack Table
      </a>
    </p>
  </div>
</template>
```
::

### Filters

::show-case
:docs-tan-stack-filters

#code
```vue [DocsTanStackFilters.vue]
<script lang="ts" setup>
  import {
    createColumnHelper,
    FlexRender,
    getCoreRowModel,
    getFacetedRowModel,
    getFacetedUniqueValues,
    getFilteredRowModel,
    getSortedRowModel,
    useVueTable,
  } from "@tanstack/vue-table";
  import type {
    ColumnFiltersState,
    RowData,
    RowSelectionState,
    SortingState,
  } from "@tanstack/vue-table";

  import { Icon, UiCheckbox } from "#components";

  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<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<Item>();

  const columns = [
    columnHelper.accessor("id", {
      enableSorting: false,
      enableGlobalFilter: false,
      header({ table }) {
        return h(UiCheckbox, {
          modelValue: table.getIsSomeRowsSelected()
            ? "indeterminate"
            : table.getIsAllRowsSelected()
              ? true
              : false,
          "onUpdate:modelValue": (v: boolean | "indeterminate") =>
            table.getToggleAllRowsSelectedHandler()({ target: { checked: v } }),
        });
      },
      cell({ row }) {
        return h(UiCheckbox, {
          modelValue: row.getIsSelected(),
          disabled: !row.getCanSelect(),
          "onUpdate:modelValue": row.getToggleSelectedHandler(),
        });
      },
    }),
    columnHelper.accessor("keyword", {
      header: "Keyword",
      sortingFn: "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 = useVueTable({
    columns,
    data: items,
    enableRowSelection: true,
    getCoreRowModel: getCoreRowModel<Item>(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getFacetedRowModel: getFacetedRowModel(),
    getFacetedUniqueValues: getFacetedUniqueValues(),
    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"
                :render="header.column.columnDef.header"
                :props="header.getContext()"
              />
              <Icon
                v-if="header.column.getIsSorted() == 'asc'"
                name="lucide:chevron-up"
                class="size-4 shrink-0 text-muted-foreground"
              />
              <Icon
                v-else-if="header.column.getIsSorted() == 'desc'"
                name="lucide:chevron-down"
                class="size-4 shrink-0 text-muted-foreground"
              />
              <Icon
                v-else-if="header.column.getCanSort()"
                name="lucide:chevrons-up-down"
                class="size-4 shrink-0 text-muted-foreground/30"
              />
              <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) ?? '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 :render="cell.column.columnDef.cell" :props="cell.getContext()" />
            </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="mt-4 text-center text-sm text-muted-foreground">
      Data table with filters made with
      <a
        class="underline hover:text-foreground"
        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.

::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.

::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";

  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<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.

::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-sm text-muted-foreground">@{{ 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";

  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<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.

::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";

  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<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<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<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.

::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";

  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<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.

::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="flex items-center gap-2 px-4 py-2 text-sm text-primary">
          <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";

  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<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.

::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";

  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<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.

::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">
        <template #expand-cell>
          <!-- The expand button is automatically rendered by the component -->
        </template>

        <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";

  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<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.

::show-case
:docs-tan-stack-pinning

#code
```vue [DocsTanStackPinning.vue]
<template>
  <div class="space-y-4">
    <div class="flex items-center gap-2 text-sm text-muted-foreground">
      <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="rounded-lg border bg-muted/50 p-4">
      <div class="font-semibold">Pinned rows</div>
      <div class="mt-2 space-y-1 text-sm text-muted-foreground">
        <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";

  const rowPinning = ref<RowPinningState>({});

  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<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.

::show-case
:docs-tan-stack-column-pinning

#code
```vue [DocsTanStackColumnPinning.vue]
<template>
  <div class="space-y-4">
    <div class="flex items-center gap-2 text-sm text-muted-foreground">
      <Icon name="lucide:info" class="size-4" />
      Pin columns with the header menu: choose left, right, 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="rounded-lg border bg-muted/50 p-4 text-sm text-muted-foreground">
      <div class="font-semibold text-foreground">Pinned columns</div>
      <div class="mt-2 space-y-1">
        <div v-if="columnPinning.left?.length">Left: {{ columnPinning.left.join(", ") }}</div>
        <div v-if="columnPinning.right?.length">Right: {{ columnPinning.right.join(", ") }}</div>
        <div v-if="!columnPinning.left?.length && !columnPinning.right?.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";

  interface User {
    id: string;
    firstName: string;
    lastName: string;
    phone: string;
    email: string;
    department: string;
    status: "active" | "inactive";
  }

  const columnPinning = ref<ColumnPinningState>({});

  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<User>) => {
    // Set an initial pin for demonstration
    table.getColumn("firstName")?.pin("left");
    columnPinning.value = table.getState().columnPinning;
  };

  const columns: ColumnDef<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

::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="mt-4 rounded-lg border bg-muted/50 p-4">
      <p class="text-sm text-muted-foreground">
        <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";

  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<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-pm-x{command="ui-thing@latest add textarea"}

## Usage

### Basic example

::show-case
:docs-textarea

#code
```vue [DocsTextarea.vue]
<template>
  <div class="mx-auto max-w-xs">
    <UiTextarea placeholder="Bio" />
  </div>
</template>
```
::

### Label

::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

::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.

::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-sm text-muted-foreground">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.

::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-sm text-muted-foreground">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-pm-x{command="ui-thing@latest add timeline"}

## Usage

### Basic

::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

::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

::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

::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

::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="flex size-6 items-center justify-center group-data-completed/timeline-item:border-none group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground 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

::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="flex size-6 items-center justify-center border-none bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground 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

::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-sm font-normal text-muted-foreground">
            {{ item.action }}
          </span>
        </UiTimelineTitle>
        <UiTimelineIndicator
          class="flex size-6 items-center justify-center border-none bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground group-data-[orientation=vertical]/timeline:-left-7"
        >
          <img :src="item.image" :alt="item.title" class="size-6 rounded-full" />
        </UiTimelineIndicator>
      </UiTimelineHeader>
      <UiTimelineContent class="mt-2 rounded-lg border px-4 py-3 text-foreground">
        {{ 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

::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

::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

::show-case
:docs-timeline-activity

#code
```vue [DocsTimelineActivity.vue]
<template>
  <div class="flex justify-center">
    <div class="space-y-3">
      <div class="text-xs font-medium text-muted-foreground">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="size-4 text-muted-foreground/80" />
          <UiAvatar :src="item.image" :alt="item.user" class="size-6" />
          <UiTimelineContent class="flex items-center gap-2 text-foreground">
            <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

::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

::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-pm-x{command="ui-thing@latest add toggle"}

## Usage

### Basic example

::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-pm-x{command="ui-thing@latest add toggle-group"}

## Usage

### Basic

::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

::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

::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

::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-pm-x{command="ui-thing@latest add tooltip"}

## Usage

### Basic example

::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

::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-xs text-muted-foreground">
                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-xs text-muted-foreground">
                  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-xs text-muted-foreground">
                  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-pm-x{command="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.

::show-case
:docs-tree

#code
```vue [DocsTree.vue]
<template>
  <div class="flex justify-center">
    <UiScrollArea class="max-h-[500px] w-[250px] rounded-md border bg-background">
      <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="flex cursor-pointer items-center gap-2 rounded px-2 py-1 text-sm font-medium focus-visible:ring-2 focus-visible:ring-border 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.

::show-case
:docs-tree-virtualizer

#code
```vue [DocsTreeVirtualizer.vue]
<template>
  <div class="flex justify-center">
    <UiScrollArea class="max-h-[500px] w-[300px] rounded-md border bg-background">
      <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 rounded px-2 py-1 text-sm focus-visible:ring-1 focus-visible:ring-border 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

::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="flex items-center gap-1 rounded-sm px-2 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-7 hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0"
            >
              <template v-if="item.hasChildren">
                <Icon
                  name="lucide:chevron-right"
                  class="size-3.5 text-muted-foreground"
                  :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="flex items-center gap-1 rounded-sm px-2 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-7 hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0"
            >
              <template v-if="item.hasChildren">
                <Icon
                  name="lucide:chevron-right"
                  class="size-3.5 text-muted-foreground"
                  :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="flex items-center gap-1 rounded-sm px-2 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-7 hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_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="ml-auto size-3.5 text-muted-foreground"
                  :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-pm-x{command="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.

::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

::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="flex w-full justify-between text-sm text-muted-foreground">
          <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

::show-case
:docs-border-beam-reverse

#code
```vue [DocsBorderBeamReverse.vue]
<template>
  <UiCard class="relative mx-auto w-[350px] overflow-hidden border-border/30">
    <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

::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

::steps
  :::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-pm-install{name="canvas-confetti"}
  :::

  :::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.

::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.

::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

::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

::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

::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

::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

::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

::steps
  :::step
  ### Installation

  Add the following packages to your project

  :prose-pm-install{name="@vueuse/core"}
  :::

  :::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

::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="relative flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-md border border-input"
        :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="truncate text-muted-foreground" 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="fixed inset-0 z-50 flex items-center justify-center bg-background/50 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="max-h-full max-w-full rounded-lg border border-input bg-background"
            :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

::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="relative flex size-26 items-center justify-center overflow-hidden rounded-full border border-dashed border-input transition-colors hover:bg-accent/50 has-disabled:pointer-events-none has-disabled:opacity-50 has-[img]:border-none has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50"
        @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="absolute -top-1 -right-1 size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background"
        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-xs text-muted-foreground">
      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

::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="relative flex min-h-52 flex-col items-center justify-center overflow-hidden rounded-xl border border-dashed border-input p-4 transition-colors hover:bg-accent/50 has-disabled:pointer-events-none has-disabled:opacity-50 has-[img]:border-none has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50 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="mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background"
            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-xs text-muted-foreground">Max size: {{ maxSizeMB }}MB</p>
        </div>
      </div>
      <div v-if="currentFile" class="absolute top-3 right-3">
        <button
          type="button"
          class="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:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
          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="flex items-center gap-1 text-xs text-destructive"
      role="alert"
    >
      <Icon name="lucide:circle-alert" class="size-3 shrink-0" />
      <span>{{ errors[0] }}</span>
    </div>

    <p aria-live="polite" role="region" class="mt-2 text-center text-xs text-muted-foreground">
      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

::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="relative flex min-h-52 flex-col items-center justify-center overflow-hidden rounded-xl border border-dashed border-input p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50 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="mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background"
            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-xs text-muted-foreground">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="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:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
          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="flex items-center gap-1 text-xs text-destructive"
      role="alert"
    >
      <Icon name="lucide:circle-alert" class="size-3 shrink-0" />
      <span>{{ errors[0] }}</span>
    </div>

    <p aria-live="polite" role="region" class="mt-2 text-center text-xs text-muted-foreground">
      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

::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="relative flex min-h-52 flex-col items-center overflow-hidden rounded-xl border border-dashed border-input p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50"
    >
      <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="relative aspect-square rounded-md bg-accent"
          >
            <img
              :src="file.preview"
              :alt="file.file.name"
              class="size-full rounded-[inherit] object-cover"
            />
            <UiButton
              size="icon"
              class="absolute -top-2 -right-2 size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background"
              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="mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background"
          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-xs text-muted-foreground">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="flex items-center gap-1 text-xs text-destructive"
      role="alert"
    >
      <Icon name="lucide:circle-alert" class="size-3 shrink-0" />
      <span>{{ errors[0] }}</span>
    </div>

    <p aria-live="polite" role="region" class="mt-2 text-center text-xs text-muted-foreground">
      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

::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="relative flex min-h-52 flex-col items-center overflow-hidden rounded-xl border border-dashed border-input p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50"
    >
      <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="mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background"
          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-xs text-muted-foreground">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="flex items-center gap-1 text-xs text-destructive"
      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="flex items-center justify-between gap-2 rounded-lg border bg-background p-2 pe-3"
      >
        <div class="flex items-center gap-3 overflow-hidden">
          <div class="aspect-square shrink-0 rounded bg-accent">
            <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-xs text-muted-foreground">
              {{ formatBytes(file.file.size) }}
            </p>
          </div>
        </div>

        <UiButton
          size="icon"
          variant="ghost"
          class="-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground"
          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="mt-2 text-center text-xs text-muted-foreground">
      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

::show-case
:docs-file-upload-single-file-uploader

#code
```vue [DocsFileUploadSingleFileUploader.vue]
<template>
  <LayoutGroup>
    <Motion
      :variants="sequenceContainer"
      initial="hidden"
      while-in-view="visible"
      :in-view-options="{ once: true }"
      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="flex min-h-40 flex-col items-center justify-center rounded-xl border border-dashed border-input p-4 transition-colors hover:bg-accent/50 has-disabled:pointer-events-none has-disabled:opacity-50 has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50"
          @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="mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background"
              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-xs text-muted-foreground">
              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"
        :variants="fileListItem"
        class="flex items-center gap-1 text-xs text-destructive"
        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"
        :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="-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground"
            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="mt-2 text-center text-xs text-muted-foreground"
      >
        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, dropzoneRef, inputRef } = 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

::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="flex min-h-40 flex-col items-center justify-center rounded-xl border border-dashed border-input p-4 transition-colors hover:bg-accent/50 has-disabled:pointer-events-none has-disabled:opacity-50 has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50"
          @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="mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background"
              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="mb-2 text-xs text-muted-foreground"
              >Drag & drop or click to browse</Motion
            >
            <Motion
              :variants="dropAreaItem"
              class="flex flex-wrap justify-center gap-1 text-xs text-muted-foreground/70"
            >
              <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="flex items-center gap-1 text-xs text-destructive"
        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"
            class="space-y-2"
          >
            <AnimatePresence>
              <Motion
                v-for="file in files"
                :key="file.id"
                layout="position"
                :variants="fileListItem"
                class="flex items-center justify-between gap-2 rounded-lg border bg-background 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-xs text-muted-foreground">
                      {{ formatBytes(file.file.size) }}
                    </p>
                  </div>
                </div>

                <UiButton
                  size="icon"
                  variant="ghost"
                  class="-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground"
                  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="mt-2 text-center text-xs text-muted-foreground"
      >
        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

::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="flex min-h-56 flex-col items-center rounded-xl border border-dashed border-input p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50"
        >
          <input ref="inputRef" hidden aria-label="Upload files" />

          <AnimatePresence mode="wait">
            <Motion
              v-if="files.length > 0"
              key="file-list"
              :variants="fileListContainer"
              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="flex items-center justify-between gap-2 rounded-lg border bg-background 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-xs text-muted-foreground">
                          {{ formatBytes(file.file.size) }}
                        </p>
                      </div>
                    </div>

                    <UiButton
                      size="icon"
                      variant="ghost"
                      class="-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground"
                      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"
              class="flex flex-col items-center justify-center text-center"
            >
              <Motion
                layout="position"
                :variants="emptyItem"
                class="mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background"
                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-xs text-muted-foreground">
                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"
          class="flex items-center gap-1 text-xs text-destructive"
          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="mt-2 text-center text-xs text-muted-foreground"
      >
        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

::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" 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="overflow-hidden rounded-md border bg-background">
          <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="py-2 text-muted-foreground">
                  {{ file.file.type.split("/")[1]?.toUpperCase() || "UNKNOWN" }}
                </UiTableCell>
                <UiTableCell class="py-2 text-muted-foreground">
                  {{ formatBytes(file.file.size) }}
                </UiTableCell>
                <UiTableCell class="py-2 text-right whitespace-nowrap">
                  <UiButton
                    size="icon"
                    variant="ghost"
                    class="size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground"
                    aria-label="Download file"
                  >
                    <Icon name="lucide:download" class="size-4" />
                  </UiButton>
                  <UiButton
                    size="icon"
                    variant="ghost"
                    class="size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground"
                    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">
        <div
          ref="dropzoneRef"
          :data-files="files.length > 0 || undefined"
          class="flex min-h-56 flex-col items-center rounded-xl border border-dashed border-input p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50 data-[files]:hidden"
        >
          <div class="flex flex-col items-center justify-center text-center">
            <Motion
              :variants="lvl2EmptyItemVariants"
              class="mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background"
              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-xs text-muted-foreground">
              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"
      class="flex items-center gap-1 text-xs text-destructive"
      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="mt-2 text-center text-xs text-muted-foreground"
    >
      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

::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="relative flex min-h-52 flex-col items-center overflow-hidden rounded-xl border border-dashed border-input p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50"
    >
      <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="relative flex flex-col overflow-hidden rounded-md border bg-background">
              <div class="flex aspect-square items-center justify-center overflow-hidden bg-accent">
                <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="truncate text-xs text-muted-foreground">
                  {{ formatBytes(file.file.size) }}
                </p>
              </div>
            </div>
            <UiButton
              size="icon"
              class="absolute -top-2 -right-2 size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background"
              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="mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background"
          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-xs text-muted-foreground">
          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="flex items-center gap-1 text-xs text-destructive"
      role="alert"
    >
      <Icon name="lucide:circle-alert" class="size-3 shrink-0" />
      <span>{{ errors[0] }}</span>
    </div>

    <p aria-live="polite" role="region" class="mt-2 text-center text-xs text-muted-foreground">
      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

::steps
  :::step
  ### Installation

  To get started, you can install the package with the following command:

  :prose-pm-install{name="@fullcalendar/core @fullcalendar/vue3"}
  :::

  :::step
  ### Add Plugins

  You can also install the plugins for Full Calendar:

  :prose-pm-install{name="@fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid @fullcalendar/list @fullcalendar/multimonth @fullcalendar/scrollgrid"}
  :::

  :::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

::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

::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

::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

::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.

::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="absolute right-10 bottom-10 z-10 flex size-14 scale-125 cursor-pointer items-center justify-center rounded-full bg-primary text-primary-foreground 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="absolute right-10 bottom-10 flex size-14 items-center justify-center rounded-full bg-primary text-primary-foreground 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="absolute right-10 bottom-10 flex size-14 items-center justify-center rounded-full bg-primary text-primary-foreground 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

::steps
  :::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;
      }
    }
  }
  ```
  :::

  :::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.

::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

::steps
  :::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 {
      /**
       * @default ""
       * @type string
       * @description
       * The className of the card
       */
      class?: HTMLAttributes["class"];

      /**
       * @default 5
       * @type number
       * @description
       * The size of the border in pixels
       * */
      borderSize?: number;

      /**
       * @default 20
       * @type number
       * @description
       * The size of the radius in pixels
       * */
      borderRadius?: number;

      /**
       * @default "{ firstColor: '#ff00aa', secondColor: '#00FFF1' }"
       * @type string
       * @description
       * The colors of the neon gradient
       * */
      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>
  ```
  :::

  :::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

::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

::steps
  :::step
  ### Installation

  To get started, you can install the package with the following command:

  :prose-pm-install{name="@vueup/vue-quill"}
  :::

  :::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.

::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.

::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.

::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.

::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.

::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

::steps
  :::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);
    }
  }
  ```
  :::

  :::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="inset-[0%_0px] -ml-[200%] h-[300vh] w-[600vw] origin-[100%_0_0] animate-grid 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

::show-case
:docs-retro-grid

#code
```vue [DocsRetroGrid.vue]
<template>
  <div
    class="relative mx-auto flex h-full w-full max-w-[32rem] items-center justify-center overflow-hidden rounded-lg border bg-background 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

::steps
  :::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="sticky top-0 left-0 z-10 flex flex-col gap-y-2 border-b border-border bg-background 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: "relative z-0 size-full max-w-lg overflow-auto rounded-lg border border-border bg-background",
    });
  </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

::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

::steps
  :::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-pm-install{name="@tiptap/vue-3 @tiptap/pm @tiptap/starter-kit"}
  :::

  :::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.

::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>
  @reference "~/assets/css/tailwind.css";

:deep(.tiptap) {
  :first-child {
    margin-top: 0;
  }
  /* List styles */
  ul,
  ol {
    @apply mx-3 my-5 list-inside px-4 py-0;
    li p {
      @apply my-0 inline-block;
    }
  }
  ul {
    list-style-type: disc;
  }
  ol {
    list-style-type: decimal;
  }

  a {
    @apply cursor-pointer text-violet-500 underline underline-offset-2;
  }

  /* Heading styles */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply mt-9 leading-tight font-bold text-pretty;
  }

  h1,
  h2 {
    @apply mt-14 mb-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 {
    @apply rounded bg-muted px-1 font-mono text-sm font-medium text-foreground;
  }

  pre {
    @apply my-6 rounded-md bg-muted p-4 font-mono text-sm text-foreground;
    code {
      @apply bg-none p-0 text-sm text-inherit;
    }
  }
  blockquote {
    @apply mx-0 my-5 border-l-4 border-border py-2 pl-4;
  }
  hr {
    @apply my-6 border-0 border-t border-border;
  }
  table {
    @apply m-0 w-full table-fixed border-collapse overflow-hidden;

    td,
    th {
      @apply relative box-border min-w-4 border border-border px-3 py-2 align-top;

      > * {
        margin-bottom: 0;
      }
    }

    th {
      background-color: var(--gray-1);
      font-weight: bold;
      text-align: left;
    }
  }
  mark {
    @apply rounded bg-sky-400/40 box-decoration-clone p-1 text-accent-foreground dark:bg-sky-500/70 dark:text-white;
  }
}
</style>
```
::


# Vue Tippy

## Getting Started

::steps
  :::step
  ### Installation

  Run the command below to install the Vue Tippy package.

  :prose-pm-install{name="vue-tippy@v6"}
  :::

  :::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);
  });
  ```
  :::

  :::step
  ### Add CSS

  Create a new CSS file and add the following code to it.

  ```css [tippy.css]
  @reference "./tailwind.css";

  [data-tippy-root] {
    .tippy-box {
      @apply rounded-md bg-popover px-2 py-1 text-popover-foreground shadow ring-1 ring-border;
      .tippy-content {
        @apply text-[13px];
      }
    }

    .tippy-box[data-theme~="error"] {
      @apply bg-destructive text-destructive-foreground ring-destructive;
    }
  }
  ```
  :::
::

## 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.

::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.

::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="flex items-center gap-2 pt-1 text-xs text-muted-foreground">
            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.

::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.

::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.

::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`flex w-full cursor-pointer items-center gap-2 rounded p-2 text-sm transition hover:bg-muted`,
                onClick: hide,
              },
              [
                h(resolveComponent("Icon"), {
                  name: item.icon,
                  size: 16,
                  class: tw`text-muted-foreground`,
                }),
                h("span", item.title),
                h("span", { class: tw`ml-auto text-xs text-muted-foreground` }, 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.

::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

::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-xs text-muted-foreground">
            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

::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-xs text-muted-foreground">
              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

::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-xs text-muted-foreground">
              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

::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

::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

::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

::steps
  :::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-pm-install{name="v-wave"}
  :::

  :::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.

::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.

::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>
```
::


# 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

::steps
  :::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-pm-install{name="@vee-validate/nuxt"}
  :::

  :::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-pm-install{name="zod @vee-validate/zod"}

  #### Yup

  :prose-pm-install{name="yup @vee-validate/yup"}

  #### Valibot

  :prose-pm-install{name="valibot @vee-validate/valibot"}

  #### Joi

  :prose-pm-install{name="joi @vee-validate/joi"}
  :::

  :::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

::steps
  :::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.
  :::

  :::step
  ### Installation

  Next, you can install the form builder component by running the following command.

  :prose-pm-x{command="ui-thing@latest add vee-form-builder"}
  :::

  :::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.

::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-sm text-muted-foreground">
              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-pm-x{command="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

::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

::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

::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

::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

::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

::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-pm-x{command="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.

::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

::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="mt-2 mb-4 text-sm text-muted-foreground">
      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.

::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="mt-2 mb-4 text-sm text-muted-foreground">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

::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

::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

::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 [&_[data-state=checked]]:border-emerald-500 [&_[data-state=checked]]:bg-emerald-500 [&_button]:rounded-full [&_button]:border-border [&_button_span]:rounded-full"
      :model-value="true"
    />
    <UiLabel
      for="checkbox-06"
      class="relative peer-has-[button[data-state=checked]]:text-muted-foreground 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:bg-muted-foreground 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

::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

::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

::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

::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-xs leading-[inherit] font-normal text-muted-foreground">
            (Sublabel)
          </span>
        </UiLabel>
      </template>
    </UiVeeCheckbox>
  </div>
</template>
```
::

### Input Expansion

::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="ml-[30px] text-xs text-muted-foreground">
        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

::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-xs leading-[inherit] font-normal text-muted-foreground">
          (Sublabel)
        </span>
      </UiLabel>
      <p id="checkbox-12-description" class="text-xs text-muted-foreground">
        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

::show-case
:docs-vee-checkbox-right-aligned-sublabel-border

#code
```vue [DocsVeeCheckboxRightAlignedSublabelBorder.vue]
<template>
  <div
    class="relative mx-auto flex w-full max-w-sm items-start gap-2 rounded-lg border border-input p-4 shadow-xs shadow-black/5 has-[div_button[data-state=checked]]:border-ring"
  >
    <div class="grid grow gap-2">
      <UiLabel for="checkbox-13" class="justify-start gap-2">
        Label
        <span class="text-xs leading-[inherit] font-normal text-muted-foreground">
          (Sublabel)
        </span>
      </UiLabel>
      <p id="checkbox-13-description" class="text-xs text-muted-foreground">
        A short description goes here.
      </p>
    </div>
    <UiVeeCheckbox id="checkbox-13" aria-describedby="checkbox-13-description" />
  </div>
</template>
```
::

### Grid Box

::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="relative flex cursor-pointer flex-col gap-4 rounded-lg border border-input p-4 shadow-xs shadow-black/5 has-[[data-state=checked]]:border-ring"
      >
        <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

::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-sm leading-none font-medium text-foreground">Days of the week</legend>
      <div class="flex gap-1.5">
        <label
          v-for="item in items"
          :key="item.id"
          class="relative flex size-9 cursor-pointer flex-col items-center justify-center gap-3 rounded-full border border-input text-center shadow-xs shadow-black/5 outline-offset-2 transition-colors has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-ring/70 has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-50 has-[[data-state=checked]]:border-primary has-[[data-state=checked]]:bg-primary has-[[data-state=checked]]:text-primary-foreground"
        >
          <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-pm-x{command="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

::show-case
:docs-vee-native-checkbox-basic

#code
```vue [DocsVeeNativeCheckboxBasic.vue]
<template>
  <div class="flex justify-center">
    <UiVeeNativeCheckbox />
  </div>
</template>
```
::

### Indeterminate

::show-case
:docs-vee-native-checkbox-indeterminate

#code
```vue [DocsVeeNativeCheckboxIndeterminate.vue]
<template>
  <div class="flex justify-center">
    <UiVeeNativeCheckbox indeterminate />
  </div>
</template>
```
::

### Colors

::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

::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

::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

::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

::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

::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-pm-x{command="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.

::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-pm-x{command="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.

::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-pm-x{command="ui-thing@latest add vee-datepicker"}

## Usage

::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-pm-x{command="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.

::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-pm-x{command="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.

::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

::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

::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

::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

::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

::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="border-transparent bg-muted shadow-none"
      placeholder="Email"
      type="email"
    />
  </div>
</template>
```
::

### Disabled Input

::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

::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

::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

::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="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50"
        >
          https://
        </span>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with End Inline Addon

::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="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-50"
        >
          .com
        </span>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with Inline Addons

::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="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-50"
        >
          EUR
        </span>
      </template>
      <template #icon>
        <span
          class="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50"
        >
          €
        </span>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with Start Addon

::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="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center border-r px-3 text-sm text-muted-foreground peer-disabled:opacity-50"
        >
          https://
        </span>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with End Addon

::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="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center border-l px-3 text-sm text-muted-foreground peer-disabled:opacity-50"
        >
          .com
        </span>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with Inline Start & End Addon

::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="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50"
        >
          €
        </span>
      </template>
      <template #trailingIcon>
        <span
          class="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center border-l px-3 text-sm text-muted-foreground peer-disabled:opacity-50"
        >
          EUR
        </span>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with Start Select

::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="absolute inset-y-0 start-0 flex form-select items-center justify-center rounded-s-md border border-input bg-background ps-3 text-sm text-muted-foreground ring-offset-background peer-disabled:opacity-50 focus:border-input focus:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring 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

::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="absolute inset-y-0 end-0 flex form-select rounded-e-md border border-input bg-background pe-7 text-sm text-muted-foreground peer-disabled:opacity-50 focus:border-input focus:border-primary focus:ring-[3px] focus:ring-ring/50"
        >
          <option>.com</option>
          <option>.org</option>
          <option>.net</option>
        </select>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Input with End Inline Button

::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="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30 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

::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="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md border border-transparent border-l-input text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-muted/50 hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30 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

::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="absolute inset-y-0 end-0 flex h-full items-center justify-center rounded-e-md border border-transparent border-l-input px-3 text-sm ring-offset-background transition-shadow hover:bg-muted/50 hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30 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

::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

::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="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30 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

::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="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center text-muted-foreground hover:text-foreground"
              :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>

::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="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-2 text-muted-foreground"
        >
          <UiKbd variant="outline"> ⌘K </UiKbd>
        </div>
      </template>
    </UiVeeInput>
  </div>
</template>
```
::

### Search Input with Icon & Button

::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="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30 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

::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="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30 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

::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="absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground 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

::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="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30 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="mt-3 mb-4 h-1 w-full overflow-hidden rounded-full bg-border"
      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="mb-2 text-sm font-medium text-foreground">
      {{ 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-pm-x{command="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

::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

::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

::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

::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

::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-pm-x{command="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.

::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-pm-x{command="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.

::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-pm-x{command="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.

::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-pm-x{command="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.

::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-pm-x{command="ui-thing@latest add vee-switch"}

## Usage

### Basic example

::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

::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-sm text-muted-foreground">
        Notifications are currently
        <span class="font-medium text-foreground">{{ enabled ? "on" : "off" }}</span
        >.
      </p>
    </form>
  </div>
</template>

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

### Settings row

::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="rounded-xl border bg-card 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-sm text-muted-foreground">
                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

::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-sm text-muted-foreground">
                    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-sm text-muted-foreground">
                    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-sm text-muted-foreground">
                    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-sm text-muted-foreground">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-pm-x{command="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.

::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-pm-x{command="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.

::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

::steps
  :::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 = {
      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" },
        },
        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";
      /**
       * 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) {
      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;

      .apexcharts-tooltip-title {
        padding: 8px 12px !important;
        background: var(--color-popover) !important;
        border-bottom: 1px solid --alpha(var(--color-border) / 50%) !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;

    > [class*="icon"] {
      width: auto;
      height: auto;
      transform: scale(1);
      margin: auto;
      transition: all 0.2s ease-in-out;
      color: var(--color-muted-foreground);
      &:hover {
        color: var(--color-blue-400);
      }

      &.apexcharts-selected {
        color: var(--color-blue-500);
      }

      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-pm-x{command="ui-thing@latest add apexcharts"}

## Usage

### Interactive

::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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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-pm-x{command="ui-thing@latest add apexcharts"}

## Usage

### Interactive

::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="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
            @click="activeSeries = chart"
          >
            <span class="text-xs text-muted-foreground">
              {{ 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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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-pm-x{command="ui-thing@latest add apexcharts"}

## Usage

### Candlestick Chart

::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="leading-none text-muted-foreground">
          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-pm-x{command="ui-thing@latest add apexcharts"}

## Usage

### Funnel Chart

::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="flex items-center gap-2 leading-none text-muted-foreground">
            <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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            <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>
```
::


# Heatmap

## Installation

:prose-pm-x{command="ui-thing@latest add apexcharts"}

## Usage

### Heatmap Chart

::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="flex items-center gap-2 leading-none text-muted-foreground">
            <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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            <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-pm-x{command="ui-thing@latest add apexcharts"}

## Usage

### Interactive

::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="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
            @click="activeSeries = chart"
          >
            <span class="text-xs text-muted-foreground">
              {{ 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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            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-pm-x{command="ui-thing@latest add apexcharts"}

## Usage

### Pie Chart

::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="leading-none text-muted-foreground">
          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

::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="leading-none text-muted-foreground">
          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

::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="leading-none text-muted-foreground">
          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

::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="leading-none text-muted-foreground">
          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

::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="leading-none text-muted-foreground">
          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

::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="leading-none text-muted-foreground">
          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

::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="leading-none text-muted-foreground">
          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

::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="leading-none text-muted-foreground">
          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-pm-x{command="ui-thing@latest add apexcharts"}

## Usage

### Polar Area Chart

::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="leading-none text-muted-foreground">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

::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="leading-none text-muted-foreground">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

::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="leading-none text-muted-foreground">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

::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="leading-none text-muted-foreground">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

::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="leading-none text-muted-foreground">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-pm-x{command="ui-thing@latest add apexcharts"}

## Usage

### Radar Chart

::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="leading-none text-muted-foreground">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

::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="leading-none text-muted-foreground">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

::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="leading-none text-muted-foreground">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

::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="leading-none text-muted-foreground">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

::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="leading-none text-muted-foreground">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-pm-x{command="ui-thing@latest add apexcharts"}

## Usage

### Radial Chart

::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="leading-none text-muted-foreground">
          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

::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="leading-none text-muted-foreground">
          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

::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="leading-none text-muted-foreground">
          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

::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="leading-none text-muted-foreground">
          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-pm-x{command="ui-thing@latest add apexcharts"}

## Usage

### Slope Chart

::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="flex items-center gap-2 leading-none text-muted-foreground">
            <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-pm-x{command="ui-thing@latest add apexcharts"}

## Usage

### Treemap Chart

::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="flex items-center gap-2 leading-none text-muted-foreground">
            <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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            <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

::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="flex items-center gap-2 leading-none text-muted-foreground">
            <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-pm-x{command="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-pm-x{command="ui-thing@latest add button"}

This also needs gsap to be installed.

:prose-pm-install{name="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-pm-x{command="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"}


# Callout

## Source code

Click :source-code-link{component="ProseCallout.global.vue" folder="content/prose/Callout"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Usage

The `ProseCallout` component is used to highlight important information, tips, warnings, and other contextual messages. It supports multiple variants, optional icons, and can even be turned into a clickable link.

## Basic Example

::show-case
---
prose: true
---
  :::prose-callout
  This is a default callout with auto-generated icon.
  :::

  :::prose-callout{icon="lucide:star"}
  This is a callout with a custom icon.
  :::

#code
```mdc
::prose-callout
This is a default callout with auto-generated icon.
::

::prose-callout{icon="lucide:star"}
This is a callout with a custom icon.
::

```
::

## Variants

The callout component comes with several pre-styled variants, each with its own default icon and color scheme.

### Info

::show-case
---
prose: true
---
  :::prose-callout{variant="info"}
  This is an informational message. Use this variant for general information or helpful tips.
  :::

  :::prose-callout{title="Did you know?" variant="info"}
  You can combine the variant with a title to make the callout more prominent and easier to scan.
  :::

#code
```mdc
::prose-callout{variant="info"}
This is an informational message. Use this variant for general information or helpful tips.
::

::prose-callout{variant="info" title="Did you know?"}
You can combine the variant with a title to make the callout more prominent and easier to scan.
::
```
::

### Success

::show-case
---
prose: true
---
  :::prose-callout{variant="success"}
  Operation completed successfully! Your changes have been saved.
  :::

  :::prose-callout{title="Well done!" variant="success"}
  You've successfully completed all the required steps. You can now proceed to the next section.
  :::

#code
```mdc
::prose-callout{variant="success"}
Operation completed successfully! Your changes have been saved.
::

::prose-callout{variant="success" title="Well done!"}
You've successfully completed all the required steps. You can now proceed to the next section.
::
```
::

### Warning

::show-case
---
prose: true
---
  :::prose-callout{variant="warning"}
  Please review your changes carefully before proceeding. This action may have side effects.
  :::

  :::prose-callout{title="Heads up!" variant="warning"}
  Make sure to backup your data before running this command. It will modify files in your project.
  :::

#code
```mdc
::prose-callout{variant="warning"}
Please review your changes carefully before proceeding. This action may have side effects.
::

::prose-callout{variant="warning" title="Heads up!"}
Make sure to backup your data before running this command. It will modify files in your project.
::
```
::

### Error

::show-case
---
prose: true
---
  :::prose-callout{variant="error"}
  An error occurred while processing your request. Please try again later.
  :::

  :::prose-callout{title="Something went wrong" variant="error"}
  The build failed due to syntax errors. Check the console output for more details.
  :::

#code
```mdc
::prose-callout{variant="error"}
An error occurred while processing your request. Please try again later.
::

::prose-callout{variant="error" title="Something went wrong"}
The build failed due to syntax errors. Check the console output for more details.
::
```
::

### Tip

::show-case
---
prose: true
---
  :::prose-callout{variant="tip"}
  Here's a helpful tip: You can use keyboard shortcuts to speed up your workflow.
  :::

  :::prose-callout{title="Pro Tip" variant="tip"}
  Press `Cmd+K` to open the command palette and quickly navigate to any file in your project.
  :::

#code
```mdc
::prose-callout{variant="tip"}
Here's a helpful tip: You can use keyboard shortcuts to speed up your workflow.
::

::prose-callout{variant="tip" title="Pro Tip"}
Press `Cmd+K` to open the command palette and quickly navigate to any file in your project.
::
```
::

### Note

::show-case
---
prose: true
---
  :::prose-callout{variant="note"}
  This is a general note. Use this variant for supplementary information.
  :::

  :::prose-callout{title="Note" variant="note"}
  The API behavior may vary depending on your subscription plan. Check your plan details for more information.
  :::

#code
```mdc
::prose-callout{variant="note"}
This is a general note. Use this variant for supplementary information.
::

::prose-callout{variant="note" title="Note"}
The API behavior may vary depending on your subscription plan. Check your plan details for more information.
::
```
::

### Example

::show-case
---
prose: true
---
  :::prose-callout{variant="example"}
  Here's a practical example of how to use this feature in your code.
  :::

  :::prose-callout{title="Code Example" variant="example"}
  The following snippet demonstrates how to implement authentication in your application.
  :::

#code
```mdc
::prose-callout{variant="example"}
Here's a practical example of how to use this feature in your code.
::

::prose-callout{variant="example" title="Code Example"}
The following snippet demonstrates how to implement authentication in your application.
::
```
::

## Filled Style

Use the `filled` prop to create a more prominent callout with solid background colors:

::show-case
---
prose: true
---
  :::prose-callout{filled title="Filled Info" variant="info"}
  This is a filled info callout with solid colors.
  :::

  :::prose-callout{filled title="Filled Success" variant="success"}
  This is a filled success callout with solid colors.
  :::

  :::prose-callout{filled title="Filled Warning" variant="warning"}
  This is a filled warning callout with solid colors.
  :::

  :::prose-callout{filled title="Filled Error" variant="error"}
  This is a filled error callout with solid colors.
  :::

#code
```mdc
::prose-callout{variant="info" filled title="Filled Info"}
This is a filled info callout with solid colors.
::

::prose-callout{variant="success" filled title="Filled Success"}
This is a filled success callout with solid colors.
::

::prose-callout{variant="warning" filled title="Filled Warning"}
This is a filled warning callout with solid colors.
::

::prose-callout{variant="error" filled title="Filled Error"}
This is a filled error callout with solid colors.
::

```
::

## Custom Icons

Override the default icon for any variant:

::show-case
---
prose: true
---
  :::prose-callout{icon="lucide:rocket" variant="info"}
  Custom icon callouts let you match the icon to your specific use case.
  :::

  :::prose-callout
  ---
  icon: lucide:trophy
  title: Achievement Unlocked
  variant: success
  ---
  You've earned a new badge! Keep up the great work.
  :::

  :::prose-callout{icon="lucide:zap" title="Performance Tip" variant="tip"}
  Enable caching to improve your application's load time by up to 70%.
  :::

#code
```mdc
::prose-callout{variant="info" icon="lucide:rocket"}
Custom icon callouts let you match the icon to your specific use case.
::

::prose-callout{variant="success" icon="lucide:trophy" title="Achievement Unlocked"}
You've earned a new badge! Keep up the great work.
::

::prose-callout{variant="tip" icon="lucide:zap" title="Performance Tip"}
Enable caching to improve your application's load time by up to 70%.
::
```
::

## With Title and Description

::show-case
---
prose: true
---
:prose-callout{description="Follow these steps to set up your development environment and start building your application." title="Getting Started" variant="info"}

:prose-callout{description="Version 2.0 introduces breaking changes. Please review the migration guide before upgrading." title="Breaking Change" variant="warning"}

#code
```mdc
::prose-callout{variant="info" title="Getting Started" description="Follow these steps to set up your development environment and start building your application."}
::

::prose-callout{variant="warning" title="Breaking Change" description="Version 2.0 introduces breaking changes. Please review the migration guide before upgrading."}
::
```
::

## Clickable Callouts

Make callouts clickable by adding a `url` prop

::show-case
---
prose: true
---
  :::prose-callout
  ---
  description: Click to view the complete documentation.
  title: Documentation
  url: /components/accordion
  variant: info
  ---
  :::

  :::prose-callout
  ---
  description: Visit our website for tutorials and guides.
  target: \_blank
  title: Learn More
  url: https://example.com
  variant: tip
  ---
  :::

#code
```mdc
::prose-callout{variant="info" title="Documentation" url="/components/accordion" description="Click to view the complete documentation."}
::

::prose-callout{variant="tip" title="Learn More" url="https://example.com" target="\_blank" description="Visit our website for tutorials and guides."}
::
```
::

## Complex Content

Callouts support rich content including lists, code, and formatting

::show-case
---
prose: true
---
  :::prose-callout{title="Installation Steps" variant="example"}
  Follow these steps to install the package:

  1. Install the package: `npm install my-package`
  2. Import in your app: `import { MyComponent } from 'my-package'`
  3. Use the component: `<MyComponent />`

  **Note:** Make sure you have Node.js 18+ installed.
  :::

  :::prose-callout{title="Best Practices" variant="tip"}
  Here are some recommendations:

  - Keep your components small and focused
  - Write tests for critical functionality
  - Use TypeScript for better type safety
  - Document your code with JSDoc comments

  For more details, check the [style guide](https://uithing.com/docs/style-guide).
  :::

#code
```mdc
::prose-callout{variant="example" title="Installation Steps"}
Follow these steps to install the package:

1. Install the package: `npm install my-package`
2. Import in your app: `import { MyComponent } from 'my-package'`
3. Use the component: `<MyComponent />`

**Note:** Make sure you have Node.js 18+ installed.
::

::prose-callout{variant="tip" title="Best Practices"}
Here are some recommendations:

- Keep your components small and focused
- Write tests for critical functionality
- Use TypeScript for better type safety
- Document your code with JSDoc comments

For more details, check the [style guide](/docs/style-guide).
::
```
::

## Props

### Component Props

| Prop               | Type                                                                                | Default     | Description                                                |
| :----------------- | :---------------------------------------------------------------------------------- | :---------- | :--------------------------------------------------------- |
| `variant`          | `"default" | "info" | "success" | "warning" | "error" | "tip" | "note" | "example"` | `"default"` | Visual style variant                                       |
| `filled`           | `boolean`                                                                           | `false`     | Use filled/solid background style                          |
| `title`            | `string`                                                                            | -           | Title text for the callout                                 |
| `description`      | `string`                                                                            | -           | Description text (can also use default slot)               |
| `icon`             | `string`                                                                            | Auto        | Icon name (auto-selected based on variant if not provided) |
| `url`              | `string`                                                                            | -           | Make the callout clickable with this URL                   |
| `target`           | `"_self" | "_blank" | "_parent" | "_top"`                                           | `"_self"`   | Link target (use `_blank` for external links)              |
| `class`            | `string`                                                                            | -           | Additional CSS classes for wrapper                         |
| `titleClass`       | `string`                                                                            | -           | Additional CSS classes for title                           |
| `descriptionClass` | `string`                                                                            | -           | Additional CSS classes for description                     |
| `iconClass`        | `string`                                                                            | -           | Additional CSS classes for icon                            |

### Default Icons by Variant

| Variant   | Icon                    |
| :-------- | :---------------------- |
| `default` | `lucide:info`           |
| `info`    | `lucide:info`           |
| `success` | `lucide:circle-check`   |
| `warning` | `lucide:triangle-alert` |
| `error`   | `lucide:circle-x`       |
| `tip`     | `lucide:lightbulb`      |
| `note`    | `lucide:sticky-note`    |
| `example` | `lucide:code-2`         |

## Slots

The component provides three slots for maximum flexibility:

| Slot      | Description                                           |
| :-------- | :---------------------------------------------------- |
| `default` | Main content area (overrides `description` prop)      |
| `title`   | Title content (overrides `title` prop)                |
| `icon`    | Icon content (overrides `icon` prop and variant icon) |

## Vue Component Usage

You can also use the Callout component in your Vue files:

::show-case
---
prose: true
---
:docs-callout

#code
```vue [DocsCallout.vue]
<template>
  <div class="space-y-6">
    <div>
      <h3 class="mt-0">All Variants</h3>
      <div class="space-y-4">
        <ProseCallout variant="default" title="Default" description="This is a default callout." />
        <ProseCallout variant="info" title="Info" description="This is an info callout." />
        <ProseCallout variant="success" title="Success" description="This is a success callout." />
        <ProseCallout variant="warning" title="Warning" description="This is a warning callout." />
        <ProseCallout variant="error" title="Error" description="This is an error callout." />
        <ProseCallout variant="tip" title="Tip" description="This is a tip callout." />
        <ProseCallout variant="note" title="Note" description="This is a note callout." />
        <ProseCallout variant="example" title="Example" description="This is an example callout." />
      </div>
    </div>

    <div>
      <h3>Filled Style</h3>
      <div class="space-y-4">
        <ProseCallout
          variant="info"
          title="Filled Info"
          description="This uses the filled style."
          filled
        />
        <ProseCallout
          variant="success"
          title="Filled Success"
          description="This uses the filled style."
          filled
        />
        <ProseCallout
          variant="warning"
          title="Filled Warning"
          description="This uses the filled style."
          filled
        />
        <ProseCallout
          variant="error"
          title="Filled Error"
          description="This uses the filled style."
          filled
        />
      </div>
    </div>

    <div>
      <h3>With Slots</h3>
      <ProseCallout variant="tip">
        <template #icon>
          <Icon name="lucide:sparkles" />
        </template>
        <template #title> Custom Slotted Title </template>
        <template #default>
          <p>This callout uses slots for maximum flexibility.</p>
          <ul class="mt-2 list-inside list-disc space-y-1">
            <li>Custom icon slot</li>
            <li>Custom title slot</li>
            <li>Custom content slot</li>
          </ul>
        </template>
      </ProseCallout>
    </div>

    <div>
      <h3>Clickable Callout</h3>
      <ProseCallout
        variant="info"
        title="Learn More"
        description="Click this callout to navigate to the documentation."
        url="/docs"
      />
    </div>

    <div>
      <h3>Custom Icons</h3>
      <div class="space-y-4">
        <ProseCallout
          variant="success"
          icon="lucide:trophy"
          title="Achievement Unlocked"
          description="You've earned a new badge!"
        />
        <ProseCallout
          variant="info"
          icon="lucide:rocket"
          title="Launch Ready"
          description="Your application is ready to deploy."
        />
        <ProseCallout
          variant="tip"
          icon="lucide:zap"
          title="Performance Boost"
          description="Enable caching for better performance."
        />
      </div>
    </div>
  </div>
</template>
```
::

## Styling

The component uses Tailwind Variants for styling. You can override any part using the class props:

```vue
<Callout
  variant="info"
  title="Custom Styles"
  class="rounded-xl shadow-lg"
  title-class="text-xl font-bold"
  description-class="text-base"
  icon-class="size-6"
>
  Fully customizable styling
</Callout>
```

## Examples in Context

### Documentation Page

::show-case
---
prose: true
---
  :::prose-callout{title="Before You Begin" variant="info"}
  This guide assumes you have basic knowledge of Vue.js and TypeScript. If you're new to these technologies, we recommend reviewing the official documentation first.
  :::

#code
```mdc
::prose-callout{variant="info" title="Before You Begin"}
This guide assumes you have basic knowledge of Vue.js and TypeScript. If you're new to these technologies, we recommend reviewing the official documentation first.
::

```
::

### Migration Guide

::show-case
---
prose: true
---
  :::prose-callout
  ### Breaking Changes in v2.0

  The following breaking changes require updates to your code:

  - `theme` prop renamed to `variant`
  - `color` prop removed (use `variant` instead)
  - Default icon size changed from 20px to 24px
  :::

#### API Documentation

  :::prose-callout{title="Rate Limiting" variant="note"}
  This endpoint is rate-limited to 100 requests per minute per API key. Exceeding this limit will result in a 429 error.
  :::

#### Tutorial

  :::prose-callout{icon="lucide:sparkles" title="Quick Tip" variant="tip"}
  You can use the keyboard shortcut `Cmd + /` to quickly toggle comments in your code editor.
  :::

#### Error Handling

  :::prose-callout
  ---
  target: \_blank
  title: Authentication Failed
  url: https://example.com
  variant: error
  ---
  Your session has expired. Please log in again to continue.
  :::

#code
```mdc
::prose-callout

### Breaking Changes in v2.0

The following breaking changes require updates to your code:

- `theme` prop renamed to `variant`
- `color` prop removed (use `variant` instead)
- Default icon size changed from 20px to 24px

::

#### API Documentation

::prose-callout{variant="note" title="Rate Limiting"}
This endpoint is rate-limited to 100 requests per minute per API key. Exceeding this limit will result in a 429 error.
::

#### Tutorial

::prose-callout{variant="tip" icon="lucide:sparkles" title="Quick Tip"}
You can use the keyboard shortcut `Cmd + /` to quickly toggle comments in your code editor.
::

#### Error Handling

::prose-callout{variant="error" title="Authentication Failed" url="https://example.com" target="\_blank"}
Your session has expired. Please log in again to continue.
::
```
::


# Card

## Source code

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

## Overview

The `ProseCard` component creates visually appealing cards with a subtle animated border beam effect on hover. Cards can be static content containers or interactive links, making them perfect for feature highlights, navigation menus, and content organization.

::prose-callout{title="Features" variant="info"}
- **Animated Border Beam** - Subtle glowing border animation on hover
- **Link Support** - Works as NuxtLink with `to` or `href` props
- **Flexible Slots** - Customize icon, title, description, and footer
- **Icon Support** - Built-in icon display
- **Accessible** - Semantic HTML structure with proper link handling
- **Customizable** - Add custom classes for additional styling
::

## Basic Usage

Create a simple card with title and description:

::show-case
---
prose: true
---
:prose-card{description="Learn the basics of using this component library with step-by-step tutorials and examples." title="Getting Started"}

#code
```mdc
::prose-card{title="Getting Started" description="Learn the basics of using this component library with step-by-step tutorials and examples."}
::
```
::

## With Icon

Add an icon to make cards more visually distinctive:

::show-case
---
prose: true
---
:prose-card{description="Get up and running in minutes with our automated setup process and sensible defaults." icon="lucide:rocket" title="Quick Setup"}

#code
```mdc
::prose-card{icon="lucide:rocket" title="Quick Setup" description="Get up and running in minutes with our automated setup process and sensible defaults."}
::
```
::

## As Link

Make cards clickable by adding a `to` or `href` prop. The card will render as a NuxtLink:

::show-case
---
prose: true
---
  :::prose-card
  ---
  description: Explore our comprehensive guides and API references.
  icon: lucide:book-open
  title: Documentation
  to: https://uithing.com/getting-started/introduction
  ---
  :::

#code
```mdc
::prose-card{to="/getting-started/introduction" icon="lucide:book-open" title="Documentation" description="Explore our comprehensive guides and API references."}
::
```
::

## External Link

Link to external URLs using the `href` prop:

::show-case
---
prose: true
---
  :::prose-card
  ---
  description: View the source code and contribute to the project.
  href: https://github.com
  icon: lucide:github
  target: \_blank
  title: GitHub
  ---
  :::

#code
```mdc
::prose-card{href="https://github.com" target="_blank" icon="lucide:github" title="GitHub" description="View the source code and contribute to the project."}
::
```
::

## With Markdown Content

Use the default slot for rich markdown content:

::show-case
---
prose: true
---
  :::prose-card{icon="lucide:code" title="Developer Experience"}
  Built with modern tools and best practices:

  - TypeScript for type safety
  - Tailwind CSS for styling
  - Nuxt 3 for performance
  - Accessible by default

  Hover to see the animated border effect! ✨
  :::

#code
```mdc
::prose-card{icon="lucide:code" title="Developer Experience"}
Built with modern tools and best practices:

- TypeScript for type safety
- Tailwind CSS for styling
- Nuxt 3 for performance
- Accessible by default

Hover to see the animated border effect! ✨

::
```
::

## Custom Title Slot

Override the title with custom markdown formatting:

::show-case
---
prose: true
---
  :::prose-card
  ---
  icon: lucide:sparkles
  ---
  Check out the latest updates including dark mode, improved animations, and better accessibility.

  #title
  [**New** in Version 2.0]
  :::

#code
```mdc
::prose-card{icon="lucide:sparkles"}

Check out the latest updates including dark mode, improved animations, and better accessibility.

#title

[**New** in Version 2.0]

::
```
::

## With Footer Slot

Add additional content at the bottom of the card using the footer slot:

::show-case
---
prose: true
---
  :::prose-card
  ---
  description: View a fully functional dashboard with charts, tables, and
    interactive components.
  icon: lucide:layout-dashboard
  title: Dashboard Example
  ---
  #footer
  [View Example →](https://uithing.com/examples/dashboard){.text-sm}
  :::

#code
```mdc
::prose-card{icon="lucide:layout-dashboard" title="Dashboard Example" description="View a fully functional dashboard with charts, tables, and interactive components."}

#footer
[View Example →](/examples/dashboard){.text-sm}
::
```
::

## Card Grid

Display multiple cards in a responsive grid layout:

::show-case
---
prose: true
---
  :::div{.grid.gap-4.sm:grid-cols-2}
    ::::prose-card
    ---
    description: Optimized for speed with lazy loading and tree-shaking support.
    icon: lucide:zap
    title: Fast Performance
    to: https://uithing.com/components
    ---
    ::::

    ::::prose-card
    ---
    description: Full TypeScript support with comprehensive type definitions.
    icon: lucide:shield-check
    title: Type Safe
    to: https://uithing.com/components
    ---
    ::::

    ::::prose-card
    ---
    description: Customizable with Tailwind CSS and CSS variables.
    icon: lucide:palette
    title: Themeable
    to: https://uithing.com/components
    ---
    ::::

    ::::prose-card
    ---
    description: WCAG compliant with proper ARIA attributes and keyboard navigation.
    icon: lucide:accessibility
    title: Accessible
    to: https://uithing.com/components
    ---
    ::::

    ::::prose-card
    ---
    description: Import only what you need with tree-shakeable components.
    icon: lucide:package
    title: Modular
    to: https://uithing.com/components
    ---
    ::::

    ::::prose-card
    ---
    description: Comprehensive guides with live examples and best practices.
    icon: lucide:book-open
    title: Well Documented
    to: https://uithing.com/components
    ---
    ::::
  :::

#code
```mdc
<div class="grid gap-4 sm:grid-cols-2">

::prose-card{to="/components" icon="lucide:zap" title="Fast Performance" description="Optimized for speed with lazy loading and tree-shaking support."}
::

::prose-card{to="/components" icon="lucide:shield-check" title="Type Safe" description="Full TypeScript support with comprehensive type definitions."}
::

::prose-card{to="/components" icon="lucide:palette" title="Themeable" description="Customizable with Tailwind CSS and CSS variables."}
::

::prose-card{to="/components" icon="lucide:accessibility" title="Accessible" description="WCAG compliant with proper ARIA attributes and keyboard navigation."}
::

::prose-card{to="/components" icon="lucide:package" title="Modular" description="Import only what you need with tree-shakeable components."}
::

::prose-card{to="/components" icon="lucide:book-open" title="Well Documented" description="Comprehensive guides with live examples and best practices."}
::

</div>
```
::

## Feature Showcase

Highlight key features with rich content:

::show-case
---
prose: true
---
  :::div{.grid.gap-6.md:grid-cols-2}
    ::::prose-card
    ---
    icon: lucide:layout-dashboard
    ---
    Pre-built dashboard components for quick prototyping:

    - Charts and graphs
    - Data tables
    - Statistics cards
    - Activity feeds

    [View Examples →](https://uithing.com/examples/dashboard)

    #title
    #### Dashboard Components
    ::::

    ::::prose-card
    ---
    icon: lucide:form-input
    ---
    Everything you need for complex forms:

    - Input validation
    - File uploads
    - Date pickers
    - Multi-select

    [View Components →](https://uithing.com/components/form)

    #title
    #### Form Components
    ::::
  :::

#code
```mdc
<div class="grid gap-6 md:grid-cols-2">

::prose-card{icon="lucide:layout-dashboard"}

Pre-built dashboard components for quick prototyping:

- Charts and graphs
- Data tables
- Statistics cards
- Activity feeds

[View Examples →](/examples/dashboard)

#title

#### Dashboard Components

::

::prose-card{icon="lucide:form-input"}

Everything you need for complex forms:

- Input validation
- File uploads
- Date pickers
- Multi-select

[View Components →](/components/form)

#title

#### Form Components

::

</div>
```
::

## Use Cases

::prose-callout{title="Perfect For" variant="tip"}
- **Feature Highlights** - Showcase product features with icons and descriptions
- **Navigation Menus** - Create engaging navigation with linked cards
- **Resource Links** - Direct users to guides, examples, or external resources
- **Documentation Sections** - Organize docs into clickable category cards
- **Service Listings** - Display services or offerings in an attractive grid
- **Call-to-Actions** - Highlight important actions or pages
- **Content Previews** - Teasers for articles, examples, or pages
::

## Best Practices

### 1. Use Meaningful Icons

Choose icons that clearly represent the card's content:

```mdc
<!-- ✅ Good - Icon relates to content -->
::prose-card{icon="lucide:shield-check" title="Security"}

<!-- ❌ Less clear - Generic icon -->
::prose-card{icon="lucide:circle" title="Security"}
```

### 2. Keep Titles Concise

Short, punchy titles work best:

```mdc
<!-- ✅ Good - Clear and brief -->
::prose-card{title="Quick Setup"}

<!-- ❌ Too long - Gets cramped -->
::prose-card{title="How to Quickly Set Up Your Development Environment"}
```

### 3. Balance Grid Layouts

Use appropriate grid columns for screen sizes:

```mdc
<!-- ✅ Good - Responsive grid -->
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">

<!-- ❌ Too many - Cramped on mobile -->
<div class="grid grid-cols-4 gap-2">
```


# Code Collapse

## Source code

Click :source-code-link{component="ProseCodeCollapse.global.vue" folder="content/prose/Code"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Overview

The `ProseCodeCollapse` component wraps code blocks and provides a toggle button to expand or collapse content. It's ideal for lengthy code examples that would take up too much vertical space, starting at a fixed height with a gradient fade effect.

::prose-callout{title="Features" variant="info"}
- **Clean Toggle** - Simple expand/collapse functionality
- **Gradient Fade** - Visual indicator when content is collapsed
- **Customizable Labels** - Configure button text and labels
- **Accessible** - Proper ARIA attributes for screen readers
- **Smart Defaults** - Works great out of the box with sensible defaults
::

## Basic Usage

Wrap any code block to make it collapsible:

::show-case
---
prose: true
---
  :::prose-code-collapse
  :prose-code-snippet{file="/plugins/mermaid.client.ts" language="ts" title="Mermaid Plugin"}
  :::

#code
```mdc
::prose-code-collapse
::prose-code-snippet{file="/plugins/mermaid.client.ts" language="ts" title="Mermaid Plugin"}
::
::
```
::

## Custom Labels

Customize the button text and name:

::show-case
---
prose: true
---
  :::prose-code-collapse{close-text="Hide" name="Implementation" open-text="Show"}
  ```vue
  <script setup lang="ts">
    import { computed, ref } from "vue";
    import type { User } from "@/types";

    const users = ref<User[]>([]);
    const loading = ref(false);
    const error = ref<string | null>(null);

    const activeUsers = computed(() => users.value.filter((u) => u.role !== "guest"));

    const totalUsers = computed(() => users.value.length);

    async function fetchUsers() {
      loading.value = true;
      error.value = null;

      try {
        const response = await fetch("/api/users");
        if (!response.ok) throw new Error("Failed to fetch");
        users.value = await response.json();
      } catch (e) {
        error.value = e instanceof Error ? e.message : "Unknown error";
      } finally {
        loading.value = false;
      }
    }

    async function deleteUser(id: string) {
      try {
        await fetch(`/api/users/${id}`, { method: "DELETE" });
        users.value = users.value.filter((u) => u.id !== id);
      } catch (e) {
        console.error("Delete failed:", e);
      }
    }

    onMounted(() => {
      fetchUsers();
    });
  </script>

  <template>
    <div class="user-manager">
      <h2>Users ({{ totalUsers }})</h2>

      <div v-if="loading">Loading...</div>
      <div v-else-if="error" class="error">{{ error }}</div>
      <div v-else class="user-grid">
        <UserCard v-for="user in activeUsers" :key="user.id" :user="user" @delete="deleteUser" />
      </div>
    </div>
  </template>
  ```
  :::

#code
````mdc
::prose-code-collapse{name="Implementation" openText="Show" closeText="Hide"}

```vue
<script setup lang="ts">
  import { computed, ref } from "vue";
  import type { User } from "@/types";

  const users = ref<User[]>([]);
  const loading = ref(false);
  const error = ref<string | null>(null);

  const activeUsers = computed(() => users.value.filter((u) => u.role !== "guest"));

  const totalUsers = computed(() => users.value.length);

  async function fetchUsers() {
    loading.value = true;
    error.value = null;

    try {
      const response = await fetch("/api/users");
      if (!response.ok) throw new Error("Failed to fetch");
      users.value = await response.json();
    } catch (e) {
      error.value = e instanceof Error ? e.message : "Unknown error";
    } finally {
      loading.value = false;
    }
  }

  async function deleteUser(id: string) {
    try {
      await fetch(`/api/users/${id}`, { method: "DELETE" });
      users.value = users.value.filter((u) => u.id !== id);
    } catch (e) {
      console.error("Delete failed:", e);
    }
  }

  onMounted(() => {
    fetchUsers();
  });
</script>

<template>
  <div class="user-manager">
    <h2>Users ({{ totalUsers }})</h2>

    <div v-if="loading">Loading...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else class="user-grid">
      <UserCard v-for="user in activeUsers" :key="user.id" :user="user" @delete="deleteUser" />
    </div>
  </div>
</template>
```

::

````
::

## With Code Snippet

Combine with `::prose-code-snippet` to show actual source files:

::show-case
---
prose: true
---
  :::prose-code-collapse{name="Full Source"}
  :prose-code-snippet{file="/composables/useFormField.ts" language="ts" title="useFormField Composable"}
  :::

#code
```mdc
::prose-code-collapse{name="Full Source"}
::prose-code-snippet{file="/composables/useFormField.ts" language="typescript" title="useFormField Composable"}
::
::
```
::

## Custom Icon

Change the toggle icon:

::show-case
---
prose: true
---
  :::prose-code-collapse{icon="lucide:code" name="Example"}
  :prose-code-snippet{file="/components/Ui/Chip.vue" language="vue" title="Chip Component"}
  :::

#code
```mdc
::prose-code-collapse{icon="lucide:code" name="Example"}
::prose-code-snippet{file="/components/Ui/Chip.vue" language="vue" title="Chip Component"}
::
::
```
::

## Props

| Prop        | Type     | Default                 | Description                                              |
| :---------- | :------- | :---------------------- | :------------------------------------------------------- |
| `icon`      | `string` | `"lucide:chevron-down"` | Icon displayed on the toggle button                      |
| `name`      | `string` | `"Code"`                | Name/label shown in the button text                      |
| `openText`  | `string` | `"Expand"`              | Text shown when code is collapsed (clickable to expand)  |
| `closeText` | `string` | `"Collapse"`            | Text shown when code is expanded (clickable to collapse) |
| `class`     | `string` | -                       | Additional CSS classes for the root container            |

## Behavior

### Initial State

- Code starts **collapsed** at 200px height
- Gradient fade overlay indicates more content below
- Button shows: "{openText} {name}" (e.g., "Expand Code")

### Expanded State

- Code expands to full height (max 80vh)
- Gradient fade removed
- Button shows: "{closeText} {name}" (e.g., "Collapse Code")

## Accessibility

The component includes proper accessibility features:

- **ARIA Attributes**: `aria-expanded` indicates current state
- **ARIA Labels**: `aria-label` provides context for screen readers
- **Keyboard Support**: Button is focusable and clickable via keyboard
- **Icon Decoration**: Chevron icon is marked `aria-hidden="true"`
- **Semantic HTML**: Uses proper button element for interaction

## Use Cases

::prose-callout{title="When to Use Code Collapse" variant="tip"}
- **Long Examples** - Code snippets over \~30 lines
- **Complete Files** - Full component implementations
- **Optional Details** - Advanced examples users can expand if needed
- **Tutorial Code** - Progressive disclosure of complex solutions
- **API References** - Full endpoint implementations
::

## Best Practices

1. **Use Descriptive Names** - Make it clear what's being collapsed
   ```mdc
   ::prose-code-collapse{name="Full Implementation"}
   ```
2. **Customize Button Text** - Match your documentation tone
   ```mdc
   ::prose-code-collapse{openText="Show" closeText="Hide"}
   ```
3. **Combine with Snippets** - Keep docs in sync with source
   ```mdc
   ::prose-code-collapse
   ::prose-code-snippet{file="/path/to/file.vue"}
   ::
   ::
   ```
4. **Use Sparingly** - Don't collapse everything; save for truly long code
5. **Consider Context** - Some readers want full code upfront, others prefer collapsed

## Related Components

::prose-icon-list
[**ProseCodeSnippet**](https://uithing.com/prose/code-snippet) - Import code from files or URL

[**ProseCodeGroup**](https://uithing.com/prose/code-group) - Tabbed code snippets

[**ProseCodeTree**](https://uithing.com/prose/code-tree) - Interactive file tree with code preview
::


# Code Group

## Source code

Click :source-code-link{component="ProseCodeGroup.global.vue" folder="content/prose/Code"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Overview

The `ProseCodeGroup` component creates a tabbed interface for displaying multiple code blocks. It's perfect for showing the same functionality in different languages, comparing implementations, or displaying related configuration files side by side.

::prose-callout{title="Features" variant="info"}
- **Automatic Language Icons** - Detects language from code fence and shows appropriate icon
- **Custom Icons** - Override with custom icons per tab
- **Tab Sync** - Synchronize selections across multiple code groups
- **Search Functionality** - Quick tab search for groups with many options
- **Responsive Design** - Works seamlessly on all screen sizes
::

## Basic Usage

Use the `::prose-code-group` wrapper with code fences. The filename in brackets becomes the tab label:

::show-case
---
prose: true
---
  :::prose-code-group
  ```vue [app.vue] noFormat
  <template>
    <div>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </div>
  </template>
  ```

  ```vue [pages/index.vue] noFormat
  <template>
    <div>
      <h1>Welcome</h1>
    </div>
  </template>
  ```
  :::

#code
````mdc
::prose-code-group

```vue [app.vue] noFormat
<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
```

```vue [pages/index.vue] noFormat
<template>
  <div>
    <h1>Welcome</h1>
  </div>
</template>
```

::
````
::

## Multi-Language Examples

### Component Implementation

Show how to create the same component in different frameworks:

::show-case
---
prose: true
---
  :::prose-code-group
  ```vue [Vue 3] hideHeader // hideHeader removes the name in the pre component
  <script setup lang="ts">
    const count = ref(0);
    const increment = () => count.value++;
  </script>

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

  ```tsx [React] hideHeader
  import { useState } from "react";

  export default function Counter() {
    const [count, setCount] = useState(0);

    return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
  }
  ```

  ```svelte [Svelte] hideHeader
  <script lang="ts">
    let count = 0
    const increment = () => count++
  </script>

  <button on:click={increment}>
    Count: {count}
  </button>
  ```

  ```tsx [Solid] hideHeader
  import { createSignal } from "solid-js";

  export default function Counter() {
    const [count, setCount] = createSignal(0);

    return <button onClick={() => setCount(count() + 1)}>Count: {count()}</button>;
  }
  ```
  :::

#code
````mdc
::prose-code-group

```vue [Vue 3] hideHeader // hideHeader removes the name in the pre component
<script setup lang="ts">
  const count = ref(0);
  const increment = () => count.value++;
</script>

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

```tsx [React] hideHeader
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}
```

```svelte [Svelte] hideHeader
<script lang="ts">
  let count = 0
  const increment = () => count++
</script>

<button on:click={increment}>
  Count: {count}
</button>
```

```tsx [Solid] hideHeader // Hide header removes the name in the pre component
import { createSignal } from 'solid-js'

export default function Counter() {
  const [count, setCount] = createSignal(0)

  return (
    <button onClick={() => setCount(count() + 1)}>
      Count: {count()}
    </button>
  )
}
```

::
````
::

### API Requests

Compare different HTTP client libraries:

::prose-code-group
```ts [Fetch API] hideHeader
async function getUser(id: string) {
  const response = await fetch(`/api/users/${id}`);

  if (!response.ok) {
    throw new Error("Failed to fetch user");
  }

  return response.json();
}
```

```ts [Axios] hideHeader
import axios from "axios";

async function getUser(id: string) {
  const { data } = await axios.get(`/api/users/${id}`);
  return data;
}
```

```ts [Ky] hideHeader
import ky from "ky";

async function getUser(id: string) {
  return ky.get(`/api/users/${id}`).json();
}
```

```ts [ofetch] hideHeader
import { ofetch } from "ofetch";

async function getUser(id: string) {
  return ofetch(`/api/users/${id}`);
}
```
::

## Configuration Files

### Framework Setup

Show related configuration files together:

::prose-code-group
```ts [nuxt.config.ts] hideHeader
export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss", "@nuxt/content"],
  content: {
    highlight: {
      theme: "github-dark",
    },
  },
});
```

```js [tailwind.config.js] hideHeader
export default {
  content: ["./components/**/*.{vue,js,ts}", "./layouts/**/*.vue", "./pages/**/*.vue", "./app.vue"],
  theme: {
    extend: {},
  },
};
```

```json [package.json] hideHeader
{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "preview": "nuxt preview"
  },
  "dependencies": {
    "nuxt": "^3.13.0",
    "@nuxt/content": "^2.13.0"
  }
}
```

```json [tsconfig.json] hideHeader
{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "types": ["@nuxt/types"]
  }
}
```
::

### Environment Variables

::prose-code-group
```bash [.env] hideHeader
DATABASE_URL=postgresql://localhost:5432/mydb
REDIS_URL=redis://localhost:6379
JWT_SECRET=your-secret-key
API_KEY=your-api-key
```

```bash [.env.example] hideHeader
DATABASE_URL=
REDIS_URL=
JWT_SECRET=
API_KEY=
```

```ts [env.d.ts] hideHeader
declare global {
  namespace NodeJS {
    interface ProcessEnv {
      DATABASE_URL: string;
      REDIS_URL: string;
      JWT_SECRET: string;
      API_KEY: string;
    }
  }
}

export {};
```
::

## Synced Code Groups

Use the `sync` prop to keep tab selections synchronized across multiple code groups on the same page:

### Installation

::prose-code-group{sync="package-manager"}
```bash [npm] hideHeader icon="devicon:npm"
npm install ui-thing@latest
```

```bash [pnpm] hideHeader icon="devicon:pnpm"
pnpm add ui-thing@latest
```

```bash [yarn] hideHeader icon="devicon:yarn"
yarn add ui-thing@latest
```

```bash [bun] hideHeader icon="devicon:bun"
bun add ui-thing@latest
```
::

### Run Dev Server

::prose-code-group{sync="package-manager"}
```bash [npm] hideHeader icon="devicon:npm"
npm run dev
```

```bash [pnpm] hideHeader icon="devicon:pnpm"
pnpm dev
```

```bash [yarn] hideHeader icon="devicon:yarn"
yarn dev
```

```bash [bun] hideHeader icon="devicon:bun"
bun dev
```
::

::prose-callout{title="Try It!" variant="tip"}
Click between tabs above - both groups stay synchronized because they use `sync="package-manager"`.
::

## Custom Icons

Override default language icons with custom ones:

::show-case
---
prose: true
---
  :::prose-code-group
  ```ts [server.ts] icon="lucide:server"
  import express from "express";

  const app = express();
  const PORT = 3000;

  app.get("/", (req, res) => {
    res.json({ message: "Hello World" });
  });

  app.listen(PORT);
  ```

  ```ts [client.ts] icon="lucide:smartphone"
  async function fetchData() {
    const response = await fetch("/api/data");
    return response.json();
  }
  ```

  ```ts [database.ts] icon="lucide:database"
  import { PrismaClient } from "@prisma/client";

  const prisma = new PrismaClient();

  export async function getUsers() {
    return prisma.user.findMany();
  }
  ```
  :::

#code
````mdc
::prose-code-group

```ts [server.ts] icon="lucide:server"
import express from 'express'

const app = express()
const PORT = 3000

app.get('/', (req, res) => {
  res.json({ message: 'Hello World' })
})

app.listen(PORT)
```

```ts [client.ts] icon="lucide:smartphone"
async function fetchData() {
  const response = await fetch('/api/data')
  return response.json()
}
```

```ts [database.ts] icon="lucide:database"
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export async function getUsers() {
  return prisma.user.findMany()
}
```

::
````
::

## Testing Examples

### Unit Tests

::prose-code-group
```ts [component.test.ts]
import { mount } from "@vue/test-utils";
import { describe, expect, it } from "vitest";

import MyButton from "./MyButton.vue";

describe("MyButton", () => {
  it("renders correctly", () => {
    const wrapper = mount(MyButton, {
      props: { label: "Click me" },
    });

    expect(wrapper.text()).toBe("Click me");
  });

  it("emits click event", async () => {
    const wrapper = mount(MyButton);
    await wrapper.trigger("click");

    expect(wrapper.emitted("click")).toBeTruthy();
  });
});
```

```ts [utils.test.ts]
import { describe, expect, it } from "vitest";

import { calculateTotal, formatDate } from "./utils";

describe("Utils", () => {
  it("formats date correctly", () => {
    const date = new Date("2024-01-15");
    expect(formatDate(date)).toBe("Jan 15, 2024");
  });

  it("calculates total", () => {
    expect(calculateTotal([10, 20, 30])).toBe(60);
  });
});
```

```ts [api.test.ts]
import { describe, expect, it, vi } from "vitest";

import { getUser } from "./api";

describe("API", () => {
  it("fetches user successfully", async () => {
    global.fetch = vi.fn(() =>
      Promise.resolve({
        ok: true,
        json: () => Promise.resolve({ id: 1, name: "John" }),
      })
    ) as any;

    const user = await getUser("1");
    expect(user.name).toBe("John");
  });
});
```
::

## Database Schemas

### Prisma Schema

::prose-code-group
```prisma [schema.prisma]
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String?
  posts     Post[]
  createdAt DateTime @default(now())
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
  createdAt DateTime @default(now())
}
```

```sql [migration.sql]
CREATE TABLE "User" (
  "id" SERIAL PRIMARY KEY,
  "email" TEXT NOT NULL UNIQUE,
  "name" TEXT,
  "createdAt" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE "Post" (
  "id" SERIAL PRIMARY KEY,
  "title" TEXT NOT NULL,
  "content" TEXT,
  "published" BOOLEAN NOT NULL DEFAULT false,
  "authorId" INTEGER NOT NULL,
  "createdAt" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY ("authorId") REFERENCES "User"("id")
);
```

```ts [types.ts]
export interface User {
  id: number;
  email: string;
  name: string | null;
  posts: Post[];
  createdAt: Date;
}

export interface Post {
  id: number;
  title: string;
  content: string | null;
  published: boolean;
  author: User;
  authorId: number;
  createdAt: Date;
}
```
::

## Styling Examples

### CSS Solutions

::prose-code-group
```css [styles.css]
.button {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  background: #3b82f6;
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.button:hover {
  background: #2563eb;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

```scss [styles.scss]
.button {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  background: #3b82f6;
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.2s;

  &:hover {
    background: #2563eb;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
```

```vue [Scoped CSS]
<style scoped>
  .button {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    background: #3b82f6;
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
  }

  .button:hover {
    background: #2563eb;
  }

  .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
</style>
```

```ts [Tailwind]
const buttonClasses = [
  "px-4 py-2",
  "rounded",
  "bg-blue-500",
  "text-white",
  "border-none",
  "cursor-pointer",
  "transition-colors",
  "hover:bg-blue-600",
  "disabled:opacity-50",
  "disabled:cursor-not-allowed",
].join(" ");
```
::

## Props

| Prop                | Type      | Default           | Description                                       |
| :------------------ | :-------- | :---------------- | :------------------------------------------------ |
| `inStack`           | `boolean` | `false`           | Whether the code group is in a stack layout       |
| `sync`              | `string`  | -                 | Sync identifier for syncing with other tab groups |
| `padded`            | `boolean` | `true`            | Whether to add padding around the tabs            |
| `disableSearch`     | `boolean` | `false`           | Disable the search functionality                  |
| `searchPlaceholder` | `string`  | `'Search Tab...'` | Placeholder text for the search input             |
| `searchEmpty`       | `string`  | `'No tab found.'` | Text to display when no tab is found              |
| `comboBoxFullWidth` | `boolean` | `false`           | Whether the combobox should take full width       |
| `class`             | `string`  | -                 | Additional classes to add to the wrapper          |

## Syntax

### Basic Structure

````mdc
::prose-code-group

```language [Tab Name]
code here
```

```language [Another Tab]
more code
```

::
````

### With Props

````mdc
::prose-code-group{sync="my-group" padded=false}

```ts [Option 1]
const a = 1
```

```ts [Option 2]
const b = 2
```

::
````

### With Icons

````mdc
::prose-code-group

```ts [server.ts] icon="lucide:server"
// server code
```

```ts [client.ts] icon="lucide:smartphone"
// client code
```

::
````

## Search Functionality

For code groups with many tabs, users can search:

::prose-code-group
```ts [auth.ts]
export async function login(email: string, password: string) {
  // Login logic
}
```

```ts [user.ts]
export async function getUser(id: string) {
  // Get user logic
}
```

```ts [post.ts]
export async function createPost(data: any) {
  // Create post logic
}
```

```ts [comment.ts]
export async function addComment(postId: string, text: string) {
  // Add comment logic
}
```

```ts [profile.ts]
export async function updateProfile(userId: string, data: any) {
  // Update profile logic
}
```

```ts [settings.ts]
export async function updateSettings(settings: any) {
  // Update settings logic
}
```

```ts [notification.ts]
export async function sendNotification(userId: string, message: string) {
  // Send notification logic
}
```

```ts [analytics.ts]
export async function trackEvent(event: string, data: any) {
  // Track event logic
}
```
::

::prose-callout{title="Search Tips" variant="tip"}
When you have 5 or more tabs, the `Combobox` variant is automatically used to help users find tabs quickly.
::

## Real-World Use Cases

### API Routes

::prose-code-group
```ts [GET /api/users] noFormat
export default defineEventHandler(async (event) => {
  const users = await prisma.user.findMany();
  return users;
});
```

```ts [GET /api/users/[id\\]] noFormat
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, "id");
  const user = await prisma.user.findUnique({
    where: { id: Number(id) },
  });

  if (!user) {
    throw createError({
      statusCode: 404,
      message: "User not found",
    });
  }

  return user;
});
```

```ts [POST /api/users] noFormat
export default defineEventHandler(async (event) => {
  const body = await readBody(event);

  const user = await prisma.user.create({
    data: body,
  });

  return user;
});
```

```ts [PUT /api/users/[id\\]] noFormat
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, "id");
  const body = await readBody(event);

  const user = await prisma.user.update({
    where: { id: Number(id) },
    data: body,
  });

  return user;
});
```

```ts [DELETE /api/users/[id\\]] noFormat
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, "id");

  await prisma.user.delete({
    where: { id: Number(id) },
  });

  return { success: true };
});
```
::

### Docker Setup

::prose-code-group
```dockerfile [Dockerfile]
FROM node:20-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .

RUN npm run build

EXPOSE 3000

CMD ["node", ".output/server/index.mjs"]
```

```yaml [docker-compose.yml]
version: "3.8"

services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=postgresql://postgres:password@db:5432/mydb
      - NODE_ENV=production
    depends_on:
      - db
      - redis

  db:
    image: postgres:16-alpine
    environment:
      - POSTGRES_PASSWORD=password
      - POSTGRES_DB=mydb
    volumes:
      - postgres_data:/var/lib/postgresql/data

  redis:
    image: redis:7-alpine
    volumes:
      - redis_data:/data

volumes:
  postgres_data:
  redis_data:
```

```yaml [.dockerignore]
node_modules
.nuxt
.output
.git
.env
.env.*
*.log
```
::

### GitHub Actions

::prose-code-group
```yaml [test.yml]
name: Test

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - run: npm ci
      - run: npm test
```

```yaml [deploy.yml]
name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - run: npm ci
      - run: npm run build

      - name: Deploy to production
        run: |
          # Deploy command here
        env:
          API_KEY: ${{ secrets.API_KEY }}
```

```yaml [lint.yml]
name: Lint

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - run: npm ci
      - run: npm run lint
```
::

## Best Practices

::prose-callout{title="Tips for Code Groups" variant="tip"}
- Use descriptive tab names that clearly indicate what the code does
- Keep the number of tabs reasonable (5-10 max for best UX)
- Use `sync` prop when showing package manager commands across multiple groups
- Add custom icons to make tabs more visually distinct
- Use `noFormat` meta flag if you want to preserve exact filename formatting
- Use `hideHeader` meta flag if you want to hide the tab header
- Consider grouping related code (configs, routes, tests) together
::

## Accessibility

The component provides excellent keyboard navigation:

- **Tab** - Move between tabs
- **Enter/Space** - Activate selected tab
- **Arrow Keys** - Navigate tabs in the list
- **Type to Search** - Quick search when many tabs are present

Screen readers announce tab labels and active states properly.

## Vue Component Usage

You can also use it programmatically in Vue files:

```vue
<template>
  <ProseCodeGroup sync="my-group">
    <ProsePre filename="example.ts" language="typescript" :code="code1" />
    <ProsePre filename="another.ts" language="typescript" :code="code2" />
  </ProseCodeGroup>
</template>

<script setup>
  const code1 = "const a = 1";
  const code2 = "const b = 2";
</script>
```

## Related Components

::prose-icon-list
  :::prose-li{icon="lucide:table-2"}
  [**ProseTabs**](https://uithing.com/prose/tabs) - General-purpose tabbed interface
  :::

  :::prose-li{icon="lucide:workflow"}
  [**ProseMermaid**](https://uithing.com/prose/mermaid) - Diagram rendering in code blocks
  :::
::


# Code Snippet

## Source code

Click :source-code-link{component="ProseCodeSnippet.global.vue" folder="content/prose/Code"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Overview

The `ProseCodeSnippet` component allows you to reference actual source files from your project or external URLs, ensuring your documentation always shows the latest code without manual updates. Perfect for keeping docs in sync with your codebase.

::prose-callout{title="Features" variant="info"}
- **Dynamic Imports** - Load code directly from your project files
- **External URLs** - Fetch code from GitHub, GitLab, or any URL
- **Line Extraction** - Show specific line ranges from large files
- **Syntax Highlighting** - Full language support via Shiki
- **Auto-sync** - Documentation updates automatically when source code changes
- **Performance** - Lazy loads files only when needed
::

::prose-callout{title="Build Consideration" variant="warning"}
Files must match the `import.meta.glob` patterns in the component. The current setup includes all `.vue`, `.ts`, `.css`, and `.json` files from `/app/**` (excluding test files). Adjust patterns as needed for your use case.
::

## Basic Usage

Import a component from your project:

::show-case
---
prose: true
---
:prose-code-snippet{file="/components/Ui/Button.vue" language="vue" title="Button Component"}

#code
```mdc
::prose-code-snippet{file="/components/Ui/Button.vue" language="vue" title="Button Component"}
::
```
::

## Import Project Files

### Vue Components

Show your actual component code:

::show-case
---
prose: true
---
:prose-code-snippet{file="/components/Ui/Card/Card.vue" language="vue" title="Card.vue"}

#code
```mdc
::prose-code-snippet{file="/components/Ui/Card/Card.vue" language="vue" title="Card.vue"}
::
```
::

### TypeScript Utilities

Reference utility functions:

::show-case
---
prose: true
---
:prose-code-snippet{file="/utils/colors.ts" language="ts" title="Color Utilities"}

#code
```mdc
::prose-code-snippet{file="/utils/colors.ts" language="ts" title="Color Utilities"}
::
```
::

### Composables

Display your composable logic:

::show-case
---
prose: true
---
  :::prose-code-snippet
  ---
  file: /composables/usePm.ts
  language: ts
  meta: noFormat
  title: usePm Composable
  ---
  :::

#code
```mdc
::prose-code-snippet{file="/composables/usePm.ts" language="ts" title="usePm Composable" meta="noFormat"}
::
```
::

## Extract Specific Lines

Use `start` and `offset` to show only relevant portions of large files:

::show-case
---
prose: true
---
  :::prose-code-snippet
  ---
  file: /components/Ui/Button.vue
  language: vue
  offset: "31"
  start: 137
  title: Button Props
  ---
  :::

#code
```mdc
::prose-code-snippet{file="/components/Ui/Button.vue" language="vue" title="Button Props" start="137" offset="31"}
::
```
::

The example above starts at line 137 and shows the next 31 lines.

## Highlight Lines

Combine with the `highlights` prop to emphasize important code:

::show-case
---
prose: true
---
  :::prose-code-snippet
  ---
  file: /components/Ui/Button.vue
  highlights: 2,4-6,10
  language: vue
  meta: lines
  offset: "31"
  start: 137
  title: Button Props
  ---
  :::

#code
```mdc
::prose-code-snippet{file="/components/Ui/Button.vue" language="vue" title="Button Props" start="137" offset="31" highlights="2,4-6,10" meta="lines"}
::
```
::

## External URLs

### GitHub Raw Content

Load code directly from GitHub:

::show-case
---
prose: true
---
  :::prose-code-snippet
  ---
  language: ts
  meta: lines noFormat
  title: Nuxt useState Source
  url: https://raw.githubusercontent.com/nuxt/nuxt/refs/heads/main/packages/nuxt/src/app/composables/state.ts
  ---
  :::

#code
```mdc
::prose-code-snippet{url="https://raw.githubusercontent.com/nuxt/nuxt/refs/heads/main/packages/nuxt/src/app/composables/state.ts" language="ts" title="Nuxt useState Source" meta="lines noFormat"}
::
```
::

### External Examples

Pull examples from documentation sites or CDNs.

This example fetches the Vue 3 ESM build from a CDN and displays lines 1-20:

::show-case
---
prose: true
---
  :::prose-code-snippet
  ---
  language: js
  meta: lines
  offset: "20"
  start: 1
  title: Vue 3 ESM Build
  url: https://unpkg.com/vue@3/dist/vue.esm-browser.js
  ---
  :::

#code
```mdc
::prose-code-snippet{url="https://unpkg.com/vue@3/dist/vue.esm-browser.js" language="js" title="Vue 3 ESM Build" start="1" offset="20" meta="lines"}
::
```
::

### Style Guide

Show your actual CSS/Tailwind configuration:

::show-case{prose}
:prose-code-snippet{file="/assets/css/tailwind.css" language="css" title="Tailwind Base Styles"}
::

### Migration Guides

Show before and after by referencing different file versions or branches:

```mdc
## Migration from v1 to v2

### Old API (v1)

::prose-code-snippet{url="https://raw.githubusercontent.com/yourorg/yourrepo/v1/src/api.ts" language="typescript" title="Old API"}
::

### New API (v2)

::prose-code-snippet{file="/app/utils/api.ts" language="typescript" title="New API"}
::

### Changes

The new API uses fetch instead of axios and includes better error handling.
```

### Tutorial Series

Create step-by-step tutorials showing progressive code changes:

```mdc
## Step 1: Create Basic Component

::prose-code-snippet{file="/app/components/Tutorial/Step1.vue" language="vue" title="Step 1: Basic Setup"}
::

## Step 2: Add Props

::prose-code-snippet{file="/app/components/Tutorial/Step2.vue" language="vue" title="Step 2: With Props"}
::

## Step 3: Add State Management

::prose-code-snippet{file="/app/components/Tutorial/Step3.vue" language="vue" title="Step 3: Complete"}
::
```

## Advanced Meta Options

Use the `meta` prop to pass additional options to the code block:

::show-case
---
prose: true
---
  :::prose-code-snippet
  ---
  file: /composables/useDocPage.ts
  language: ts
  meta: icon=lucide:package noFormat lines
  title: useDocPage Composable
  ---
  :::

#code
```mdc
::prose-code-snippet{file="/composables/useDocPage.ts" language="ts" title="useDocPage Composable" meta="icon=lucide:package noFormat lines"}
::
```
::

Available meta options:

- `icon=<name>` - Custom file icon
- `noFormat` - Disable code formatting
- `lines` - Show line numbers
- `noHeader` - Hide title header

## Extract Function Definitions

Show just a specific function from a large file:

::show-case
---
prose: true
---
  :::prose-code-snippet
  ---
  file: /utils/colors.ts
  language: ts
  offset: "8"
  start: 45
  title: hexToRgb Function
  ---
  :::

#code
```mdc
::prose-code-snippet{file="/utils/colors.ts" language="ts" title="hexToRgb Function" start="45" offset="8"}
::
```
::

## Multiple File Comparison

Compare related files side by side using tabs:

::show-case
---
prose: true
---
  :::prose-tabs{variant="line"}
    ::::div{label="Button Component"}
    :prose-code-snippet{file="/components/Ui/Button.vue" language="vue" title="Button Component"}
    ::::

    ::::div{label="Badge Component"}
    :prose-code-snippet{file="/components/Ui/Badge.vue" language="vue" title="Badge Component"}
    ::::

    ::::div{label="Divider Component"}
    :prose-code-snippet{file="/components/Ui/Divider.vue" language="vue" title="Divider Component"}
    ::::
  :::

#code
```mdc
:::prose-tabs{variant="line"}

::div{label="Button Component"}
::prose-code-snippet{file="/components/Ui/Button.vue" language="vue" title="Button Component"}
::
::
::div{label="Badge Component"}
::prose-code-snippet{file="/components/Ui/Badge.vue" language="vue" title="Badge Component"}
::
::
::div{label="Divider Component"}
::prose-code-snippet{file="/components/Ui/Divider.vue" language="vue" title="Divider Component"}
::
::

:::
```
::

## Props

| Prop         | Type     | Default      | Description                                                          |
| :----------- | :------- | :----------- | :------------------------------------------------------------------- |
| `file`       | `string` | -            | Relative path to a file in your project (must match glob patterns)   |
| `url`        | `string` | -            | External URL to fetch code from                                      |
| `language`   | `string` | **required** | Programming language for syntax highlighting                         |
| `title`      | `string` | -            | Optional title displayed above the code block                        |
| `highlights` | `string` | -            | Line numbers or ranges to highlight (e.g., `"1,3-5,10"`)             |
| `meta`       | `string` | -            | Additional metadata passed to ProsePre (e.g., `"icon=vue noFormat"`) |
| `start`      | `number` | -            | Starting line number to extract (1-indexed)                          |
| `offset`     | `number` | -            | Number of lines to extract from the starting line                    |

## Syntax

### Basic Import

```mdc
::prose-code-snippet{file="/app/components/Button.vue" language="vue"}
::
```

### With Title

```mdc
::prose-code-snippet{file="/app/utils/helpers.ts" language="typescript" title="Helper Functions"}
::
```

### With Line Extraction

```mdc
::prose-code-snippet{file="/app/app.vue" language="vue" start="10" offset="5"}
::
```

### From URL

```mdc
::prose-code-snippet{url="https://example.com/code.js" language="javascript" title="External Example"}
::
```

::prose-callout{title="Extending Patterns" variant="tip"}
To include more directories, edit the `import.meta.glob` array in `ProseCodeSnippet.global.vue`.
::

## Performance Considerations

### Bundle Size Impact

The `import.meta.glob` pattern includes files in your build. Be strategic:

**✅ Good Practices:**

- Use specific file extensions: `*.{vue,ts}` instead of `*`
- Exclude test files: `!**/*.test.ts`
- Only include directories you'll reference in docs
- Use `eager: false` for lazy loading (already configured)

**❌ Avoid:**

- Overly broad patterns like `/app/**/*` (includes everything)
- Including asset files (images, videos)
- Globbing node\_modules or build outputs

### Current Configuration Impact

With the default patterns (`/app/**/*.{vue,ts,css,json}`), expect:

- **Small projects** (<100 files): \~100-200KB added to bundle
- **Medium projects** (100-500 files): \~200KB-1MB added to bundle
- **Large projects** (500+ files): 1MB+ added to bundle

Files are lazy-loaded, so only referenced snippets are downloaded to the client.

### URL Fetching for Large Files

For very large files or files outside your project:

```mdc
::prose-code-snippet{url="/api/files/large-schema.json" language="json"}
::
```

This avoids bundling and fetches on-demand.

## Error Handling

The component handles errors gracefully:

### File Not Found

```mdc
::prose-code-snippet{file="/app/nonexistent.ts" language="typescript"}
::
```

Shows error callout: "Cannot load code: /app/nonexistent.ts"

::prose-callout{title="Code Snippet Error" variant="error"}
Cannot load code: `/app/nonexistent.ts`
::

### Invalid URL

```mdc
::prose-code-snippet{url="https://invalid-url-404.com/code.js" language="javascript"}
::
```

Shows error callout with the URL.

::prose-callout{title="Code Snippet Error" variant="error"}
Cannot load code: `https://invalid-url-404.com/code.js`
::

## Best Practices

::prose-callout{title="Documentation Tips" variant="tip"}
1. **Keep Docs in Sync** - Reference actual source files instead of copying code
2. **Show Relevant Code** - Use `start` and `offset` to show only what matters
3. **Add Context** - Always use `title` to explain what the code does
4. **Highlight Key Lines** - Use `highlights` to draw attention to important parts
5. **Version Control** - Reference specific branches/tags in URLs for stable examples
6. **Test Paths** - Ensure file paths match your glob patterns
7. **Performance** - For large apps, consider creating a `/docs-examples/` directory with curated files
::

## Common Patterns

### Tutorial with Progressive Examples

```mdc
## Build a User Card

### 1. Basic Structure

::prose-code-snippet{file="/app/examples/tutorial/UserCard-1.vue" language="vue" title="Step 1: Basic HTML"}
::

### 2. Add Styling

::prose-code-snippet{file="/app/examples/tutorial/UserCard-2.vue" language="vue" title="Step 2: With Tailwind"}
::

### 3. Make Interactive

::prose-code-snippet{file="/app/examples/tutorial/UserCard-3.vue" language="vue" title="Step 3: Complete Component"}
::
```

### API Endpoint Documentation

````mdc
## Users API

### List Users

::prose-code-snippet{file="/server/api/users/index.get.ts" language="typescript" title="GET /api/users"}
::

**Response:**

```json
{
"data": [...],
"total": 100,
"page": 1,
"limit": 10
}
```

### Get Single User

::prose-code-snippet{file="/server/api/users/[id].get.ts" language="typescript" title="GET /api/users/:id"}
::

````

### Component Anatomy

```mdc
## Understanding the Button Component

The button component consists of three main files:

::prose-code-snippet{file="/app/components/Ui/Button/Button.vue" language="vue" title="Component Implementation"}
::

::prose-code-snippet{file="/app/components/Ui/Button/types.ts" language="typescript" title="TypeScript Types"}
::

::prose-code-snippet{file="/app/components/Ui/Button/index.ts" language="typescript" title="Public API"}
::
```


# Code Tree

## Source code

Click :source-code-link{component="ProseCodeTree.global.vue" folder="content/prose/CodeTree"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Overview

The `ProseCodeTree` component renders an interactive file tree navigator that displays code files in a two-panel layout. The left panel shows the directory structure with expandable folders, while the right panel displays the selected file's content with syntax highlighting.

::prose-callout{title="Features" variant="info"}
- **Interactive Navigation** - Click folders to expand/collapse, click files to view content
- **Material Icons** - Beautiful file and folder icons based on file extensions
- **Auto-expansion** - Automatically expands path to selected file
- **Keyboard Accessible** - Full keyboard navigation support
- **Responsive** - Adapts to mobile and desktop screens
- **Sort Intelligence** - Folders first, then alphabetically
::

## Basic Usage

::show-case
---
prose: true
---
  :::prose-code-tree{default-value="app.vue" title="Simple Vue App"}
  ```vue [app.vue]
  <template>
    <div>
      <h1>Hello World</h1>
    </div>
  </template>
  ```

  ```ts [utils.ts]
  export function greet(name: string) {
    return `Hello, ${name}!`;
  }
  ```
  :::

#code
````mdc
::prose-code-tree{defaultValue="app.vue" title="Simple Vue App"}

```vue [app.vue]
<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>
```

```ts [utils.ts]
export function greet(name: string) {
  return `Hello, ${name}!`
}
```

::
````
::

## Project Showcase

Show a complete project structure:

::show-case
---
prose: true
---
  :::prose-code-tree{default-value="src/main.ts" title="TypeScript React App"}
  ```tsx [src/App.tsx]
  import { useState } from "react";

  import "./App.css";

  function App() {
    const [count, setCount] = useState(0);

    return (
      <div className="App">
        <h1>Counter: {count}</h1>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
  }

  export default App;
  ```

  ```ts [src/main.ts]
  import React from 'react'
  import ReactDOM from 'react-dom/client'
  import App from './App.tsx'
  import './index.css'

  ReactDOM.createRoot(
    document.getElementById('root')!
  ).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  )
  ```

  ```ts [src/vite-env.d.ts]
  /// <reference types="vite/client" />
  ```

  ```css [src/App.css]
  .App {
    text-align: center;
    padding: 2rem;
  }

  button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    background: #646cff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  button:hover {
    background: #535bf2;
  }
  ```

  ```css [src/index.css]
  :root {
    font-family: Inter, system-ui, sans-serif;
    line-height: 1.5;
    font-weight: 400;
  }

  body {
    margin: 0;
    min-height: 100vh;
  }
  ```

  ```html [index.html]
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>React App</title>
    </head>
    <body>
      <div id="root"></div>
      <script type="module" src="/src/main.ts"></script>
    </body>
  </html>
  ```

  ```json [package.json]
  {
    "name": "react-app",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
      "dev": "vite",
      "build": "tsc && vite build",
      "preview": "vite preview"
    },
    "dependencies": {
      "react": "^18.3.1",
      "react-dom": "^18.3.1"
    },
    "devDependencies": {
      "@types/react": "^18.3.3",
      "@types/react-dom": "^18.3.0",
      "@vitejs/plugin-react": "^4.3.1",
      "typescript": "^5.5.3",
      "vite": "^5.4.2"
    }
  }
  ```

  ```json [tsconfig.json]
  {
    "compilerOptions": {
      "target": "ES2020",
      "useDefineForClassFields": true,
      "lib": ["ES2020", "DOM", "DOM.Iterable"],
      "module": "ESNext",
      "skipLibCheck": true,
      "moduleResolution": "bundler",
      "allowImportingTsExtensions": true,
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx",
      "strict": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "noFallthroughCasesInSwitch": true
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }]
  }
  ```
  :::

#code
````mdc
::prose-code-tree{defaultValue="src/main.ts" title="TypeScript React App"}

```tsx [src/App.tsx]
import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  )
}

export default App
```

```ts [src/main.ts]
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(
  document.getElementById('root')!
).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
```

```ts [src/vite-env.d.ts]
/// <reference types="vite/client" />
```

```css [src/App.css]
.App {
  text-align: center;
  padding: 2rem;
}

button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background: #646cff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #535bf2;
}
```

```css [src/index.css]
:root {
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.5;
  font-weight: 400;
}

body {
  margin: 0;
  min-height: 100vh;
}
```

```html [index.html]
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
```

```json [package.json]
{
  "name": "react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "typescript": "^5.5.3",
    "vite": "^5.4.2"
  }
}
```

```json [tsconfig.json]
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
```

::

````
::

## Expand All Folders

Use `expandAll` to show the full structure at once:

::show-case
---
prose: true
---
  :::prose-code-tree{expand-all title="API Routes"}
  ```ts [server/api/users/index.get.ts]
  export default defineEventHandler(async (event) => {
    const users = await prisma.user.findMany();
    return users;
  });
  ```

  ```ts [server/api/users/[id\\].get.ts]
  export default defineEventHandler(async (event) => {
    const id = getRouterParam(event, "id");

    const user = await prisma.user.findUnique({
      where: { id: Number(id) },
    });

    if (!user) {
      throw createError({
        statusCode: 404,
        message: "User not found",
      });
    }

    return user;
  });
  ```

  ```ts [server/api/users/index.post.ts]
  export default defineEventHandler(async (event) => {
    const body = await readBody(event);

    const user = await prisma.user.create({
      data: body,
    });

    return user;
  });
  ```

  ```ts [server/api/posts/index.get.ts]
  export default defineEventHandler(async (event) => {
    const posts = await prisma.post.findMany({
      include: { author: true },
    });
    return posts;
  });
  ```
  :::

#code
````mdc
::prose-code-tree{expandAll title="API Routes"}

```ts [server/api/users/index.get.ts]
export default defineEventHandler(async (event) => {
  const users = await prisma.user.findMany()
  return users
})
```

```ts [server/api/users/[id].get.ts]
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id')

  const user = await prisma.user.findUnique({
    where: { id: Number(id) }
  })

  if (!user) {
    throw createError({
      statusCode: 404,
      message: 'User not found'
    })
  }

  return user
})
```

```ts [server/api/users/index.post.ts]
export default defineEventHandler(async (event) => {
  const body = await readBody(event)

  const user = await prisma.user.create({
    data: body
  })

  return user
})
```

```ts [server/api/posts/index.get.ts]
export default defineEventHandler(async (event) => {
  const posts = await prisma.post.findMany({
    include: { author: true }
  })
  return posts
})
```

::

````
::

## Component Library Structure

Perfect for documenting UI component libraries:

::show-case
---
prose: true
---
  :::prose-code-tree
  ---
  default-value: components/Button/Button.vue
  title: Component Library
  ---
  ```vue [components/Button/Button.vue]
  <script setup lang="ts">
    import type { ButtonProps } from "./types";

    const props = withDefaults(defineProps<ButtonProps>(), {
      variant: "primary",
      size: "md",
    });
  </script>

  <template>
    <button :class="['button', `button--${variant}`, `button--${size}`]">
      <slot />
    </button>
  </template>
  ```

  ```ts [components/Button/types.ts]
  export interface ButtonProps {
    variant?: "primary" | "secondary" | "outline";
    size?: "sm" | "md" | "lg";
    disabled?: boolean;
  }
  ```

  ```ts [components/Button/index.ts]
  export { default as Button } from "./Button.vue";
  export type { ButtonProps } from "./types";
  ```

  ```vue [components/Input/Input.vue]
  <script setup lang="ts">
    import type { InputProps } from "./types";

    const props = defineProps<InputProps>();
    const emit = defineEmits<{
      "update:modelValue": [value: string];
    }>();
  </script>

  <template>
    <input
      :type="type"
      :placeholder="placeholder"
      :value="modelValue"
      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
      class="input"
    />
  </template>
  ```

  ```ts [components/Input/types.ts]
  export interface InputProps {
    modelValue?: string;
    type?: "text" | "email" | "password";
    placeholder?: string;
  }
  ```

  ```ts [components/Input/index.ts]
  export { default as Input } from "./Input.vue";
  export type { InputProps } from "./types";
  ```

  ```ts [components/index.ts]
  export * from "./Button";
  export * from "./Input";
  ```
  :::

#code
````mdc
::prose-code-tree{defaultValue="components/Button/Button.vue" title="Component Library"}

```vue [components/Button/Button.vue]
<script setup lang="ts">
  import type { ButtonProps } from "./types";

  const props = withDefaults(defineProps<ButtonProps>(), {
    variant: "primary",
    size: "md",
  });
</script>

<template>
  <button :class="['button', `button--${variant}`, `button--${size}`]">
    <slot />
  </button>
</template>
```

```ts [components/Button/types.ts]
export interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline'
  size?: 'sm' | 'md' | 'lg'
  disabled?: boolean
}
```

```ts [components/Button/index.ts]
export { default as Button } from './Button.vue'
export type { ButtonProps } from './types'
```

```vue [components/Input/Input.vue]
<script setup lang="ts">
  import type { InputProps } from "./types";

  const props = defineProps<InputProps>();
  const emit = defineEmits<{
    "update:modelValue": [value: string];
  }>();
</script>

<template>
  <input
    :type="type"
    :placeholder="placeholder"
    :value="modelValue"
    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
    class="input"
  />
</template>
```

```ts [components/Input/types.ts]
export interface InputProps {
  modelValue?: string
  type?: 'text' | 'email' | 'password'
  placeholder?: string
}
```

```ts [components/Input/index.ts]
export { default as Input } from './Input.vue'
export type { InputProps } from './types'
```

```ts [components/index.ts]
export * from './Button'
export * from './Input'
```

::

````
::

## Configuration Files

Show configuration setups:

::show-case
---
prose: true
---
  :::prose-code-tree{default-value="vite.config.ts" title="Build Configuration"}
  ```ts [vite.config.ts]
  import { resolve } from "path";
  import vue from "@vitejs/plugin-vue";
  import { defineConfig } from "vite";

  export default defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        "@": resolve(__dirname, "src"),
      },
    },
    build: {
      outDir: "dist",
      sourcemap: true,
    },
  });
  ```

  ```json [tsconfig.json]
  {
    "compilerOptions": {
      "target": "ES2020",
      "module": "ESNext",
      "lib": ["ES2020", "DOM"],
      "moduleResolution": "bundler",
      "paths": {
        "@/*": ["./src/*"]
      },
      "strict": true
    },
    "include": ["src/**/*"]
  }
  ```

  ```js [tailwind.config.js]
  export default {
    content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
    theme: {
      extend: {
        colors: {
          primary: "#646cff",
        },
      },
    },
    plugins: [],
  };
  ```

  ```js [eslint.config.js]
  import js from "@eslint/js";
  import typescript from "@typescript-eslint/eslint-plugin";
  import vue from "eslint-plugin-vue";

  export default [
    js.configs.recommended,
    {
      files: ["**/*.{ts,tsx,vue}"],
      plugins: {
        "@typescript-eslint": typescript,
        vue: vue,
      },
      rules: {
        "no-console": "warn",
        "no-debugger": "warn",
      },
    },
  ];
  ```
  :::

#code
````mdc
::prose-code-tree{defaultValue="vite.config.ts" title="Build Configuration"}

```ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
})
```

```json [tsconfig.json]
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "moduleResolution": "bundler",
    "paths": {
      "@/*": ["./src/*"]
    },
    "strict": true
  },
  "include": ["src/**/*"]
}
```

```js [tailwind.config.js]
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "#646cff",
      },
    },
  },
  plugins: [],
};
```

```js [eslint.config.js]
import js from "@eslint/js";
import typescript from "@typescript-eslint/eslint-plugin";
import vue from "eslint-plugin-vue";

export default [
  js.configs.recommended,
  {
    files: ["**/*.{ts,tsx,vue}"],
    plugins: {
      "@typescript-eslint": typescript,
      vue: vue,
    },
    rules: {
      "no-console": "warn",
      "no-debugger": "warn",
    },
  },
];
```

::

````
::

## API Documentation

Document API endpoints:

::show-case
---
prose: true
---
  :::prose-code-tree{default-value="routes/auth.ts" title="API Endpoints"}
  ```ts [routes/auth.ts]
  import { Router } from "express";

  import { login, logout, register } from "../controllers/auth";

  const router = Router();

  router.post("/login", login);
  router.post("/register", register);
  router.post("/logout", logout);

  export default router;
  ```

  ```ts [routes/users.ts]
  import { Router } from "express";

  import { createUser, deleteUser, getUser, getUsers, updateUser } from "../controllers/users";
  import { authenticate } from "../middleware/auth";

  const router = Router();

  router.get("/", authenticate, getUsers);
  router.get("/:id", authenticate, getUser);
  router.post("/", authenticate, createUser);
  router.put("/:id", authenticate, updateUser);
  router.delete("/:id", authenticate, deleteUser);

  export default router;
  ```

  ```ts [routes/index.ts]
  import { Router } from "express";

  import authRoutes from "./auth";
  import userRoutes from "./users";

  const router = Router();

  router.use("/auth", authRoutes);
  router.use("/users", userRoutes);

  export default router;
  ```
  :::

#code
````mdc
::prose-code-tree{defaultValue="routes/auth.ts" title="API Endpoints"}

```ts [routes/auth.ts]
import { Router } from 'express'
import { login, register, logout } from '../controllers/auth'

const router = Router()

router.post('/login', login)
router.post('/register', register)
router.post('/logout', logout)

export default router
```

```ts [routes/users.ts]
import { Router } from 'express'
import { getUsers, getUser, createUser, updateUser, deleteUser } from '../controllers/users'
import { authenticate } from '../middleware/auth'

const router = Router()

router.get('/', authenticate, getUsers)
router.get('/:id', authenticate, getUser)
router.post('/', authenticate, createUser)
router.put('/:id', authenticate, updateUser)
router.delete('/:id', authenticate, deleteUser)

export default router
```

```ts [routes/index.ts]
import { Router } from 'express'
import authRoutes from './auth'
import userRoutes from './users'

const router = Router()

router.use('/auth', authRoutes)
router.use('/users', userRoutes)

export default router
```

::
````
::

## Testing Structure

Show test organization:

::show-case
---
prose: true
---
  :::prose-code-tree{default-value="tests/unit/utils.test.ts" title="Test Suite"}
  ```ts [tests/unit/utils.test.ts]
  import { calculateTotal, formatDate } from "@/utils";
  import { describe, expect, it } from "vitest";

  describe("Utils", () => {
    describe("formatDate", () => {
      it("formats date correctly", () => {
        const date = new Date("2024-01-15");
        expect(formatDate(date)).toBe("Jan 15, 2024");
      });
    });

    describe("calculateTotal", () => {
      it("calculates sum of numbers", () => {
        expect(calculateTotal([10, 20, 30])).toBe(60);
      });

      it("returns 0 for empty array", () => {
        expect(calculateTotal([])).toBe(0);
      });
    });
  });
  ```

  ```ts [tests/unit/components/Button.test.ts]
  import Button from "@/components/Button.vue";
  import { mount } from "@vue/test-utils";
  import { describe, expect, it } from "vitest";

  describe("Button", () => {
    it("renders correctly", () => {
      const wrapper = mount(Button, {
        props: { label: "Click me" },
      });

      expect(wrapper.text()).toBe("Click me");
    });

    it("emits click event", async () => {
      const wrapper = mount(Button);
      await wrapper.trigger("click");

      expect(wrapper.emitted("click")).toBeTruthy();
    });

    it("applies variant class", () => {
      const wrapper = mount(Button, {
        props: { variant: "primary" },
      });

      expect(wrapper.classes()).toContain("button--primary");
    });
  });
  ```

  ```ts [tests/integration/api.test.ts]
  import app from "@/app";
  import request from "supertest";
  import { describe, expect, it } from "vitest";

  describe("API Integration", () => {
    describe("GET /api/users", () => {
      it("returns list of users", async () => {
        const response = await request(app).get("/api/users");

        expect(response.status).toBe(200);
        expect(Array.isArray(response.body)).toBe(true);
      });
    });

    describe("POST /api/users", () => {
      it("creates new user", async () => {
        const userData = {
          email: "test@example.com",
          name: "Test User",
        };

        const response = await request(app).post("/api/users").send(userData);

        expect(response.status).toBe(201);
        expect(response.body.email).toBe(userData.email);
      });
    });
  });
  ```

  ```ts [tests/setup.ts]
  import { afterAll, afterEach, beforeAll } from "vitest";

  import { server } from "./mocks/server";

  beforeAll(() => server.listen());
  afterEach(() => server.resetHandlers());
  afterAll(() => server.close());
  ```
  :::

#code
````mdc
::prose-code-tree{defaultValue="tests/unit/utils.test.ts" title="Test Suite"}

```ts [tests/unit/utils.test.ts]
import { describe, it, expect } from 'vitest'
import { formatDate, calculateTotal } from '@/utils'

describe('Utils', () => {
  describe('formatDate', () => {
    it('formats date correctly', () => {
      const date = new Date('2024-01-15')
      expect(formatDate(date)).toBe('Jan 15, 2024')
    })
  })

  describe('calculateTotal', () => {
    it('calculates sum of numbers', () => {
      expect(calculateTotal([10, 20, 30])).toBe(60)
    })

    it('returns 0 for empty array', () => {
      expect(calculateTotal([])).toBe(0)
    })
  })
})
```

```ts [tests/unit/components/Button.test.ts]
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Button from '@/components/Button.vue'

describe('Button', () => {
  it('renders correctly', () => {
    const wrapper = mount(Button, {
      props: { label: 'Click me' }
    })

    expect(wrapper.text()).toBe('Click me')
  })

  it('emits click event', async () => {
    const wrapper = mount(Button)
    await wrapper.trigger('click')

    expect(wrapper.emitted('click')).toBeTruthy()
  })

  it('applies variant class', () => {
    const wrapper = mount(Button, {
      props: { variant: 'primary' }
    })

    expect(wrapper.classes()).toContain('button--primary')
  })
})
```

```ts [tests/integration/api.test.ts]
import { describe, it, expect } from 'vitest'
import request from 'supertest'
import app from '@/app'

describe('API Integration', () => {
  describe('GET /api/users', () => {
    it('returns list of users', async () => {
      const response = await request(app).get('/api/users')

      expect(response.status).toBe(200)
      expect(Array.isArray(response.body)).toBe(true)
    })
  })

  describe('POST /api/users', () => {
    it('creates new user', async () => {
      const userData = {
        email: 'test@example.com',
        name: 'Test User'
      }

      const response = await request(app)
        .post('/api/users')
        .send(userData)

      expect(response.status).toBe(201)
      expect(response.body.email).toBe(userData.email)
    })
  })
})
```

```ts [tests/setup.ts]
import { beforeAll, afterAll, afterEach } from 'vitest'
import { server } from './mocks/server'

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())
```

::
````
::

## Props

| Prop           | Type      | Default | Description                                                                 |
| :------------- | :-------- | :------ | :-------------------------------------------------------------------------- |
| `defaultValue` | `string`  | -       | Default file path to select on mount (e.g., `"src/main.ts"`)                |
| `expandAll`    | `boolean` | `false` | Expand all directories by default instead of just the path to selected file |
| `title`        | `string`  | -       | Optional title displayed above the file tree                                |
| `class`        | `string`  | -       | Additional CSS classes for the root container                               |

## Syntax

### Basic Structure

````mdc
::prose-code-tree

```language [path/to/file.ext]
code content
```

```language [another/file.ext]
more code
```

::
````

### With Props

````mdc
::prose-code-tree{defaultValue="src/App.vue" title="My Project"}

```vue [src/App.vue]
<template>
  <div>Hello</div>
</template>
```

::
````

### With Expand All

````mdc
::prose-code-tree{expandAll title="Full Structure"}

```ts [src/utils/helpers.ts]
export function helper() {}
```

::
````

## File Path Format

The file path in brackets `[path/to/file.ext]` determines the tree structure:

- `file.txt` - Root level file
- `folder/file.txt` - File inside folder
- `folder/subfolder/file.txt` - Nested structure
- Folders are created automatically from paths
- Files are sorted alphabetically within folders
- Folders always appear before files

## Keyboard Navigation

The component supports full keyboard navigation:

- **Arrow Up/Down** - Navigate between files and folders
- **Arrow Right** - Expand folder
- **Arrow Left** - Collapse folder
- **Enter/Space** - Select file or toggle folder
- **Tab** - Move focus to next interactive element
- **Home** - Jump to first item
- **End** - Jump to last item

## Accessibility Features

The component is built with accessibility in mind:

✅ **Semantic HTML** - Uses `<nav>`, `<button>`, and proper ARIA attributes :br
✅ **ARIA Labels** - Descriptive labels for folders and files :br
✅ **ARIA Expanded** - Indicates folder open/closed state :br
✅ **ARIA Live Regions** - Announces content changes to screen readers :br
✅ **Keyboard Navigation** - Full keyboard support :br
✅ **Focus Indicators** - Visible focus rings for keyboard users :br
✅ **Screen Reader Friendly** - Proper announcements and structure

## Vue Component Usage

You can also use it programmatically:

```vue
<template>
  <ProseCodeTree default-value="src/App.vue" title="My Project" expand-all>
    <ProsePre filename="src/App.vue" language="vue" :code="appCode" />
    <ProsePre filename="src/utils.ts" language="typescript" :code="utilsCode" />
  </ProseCodeTree>
</template>

<script setup>
  const appCode = ref(`<template>...</template>`);
  const utilsCode = ref(`export function...`);
</script>
```

## Best Practices

::prose-callout{title="Tips for Code Trees" variant="tip"}
- Use descriptive file paths that match real project structure
- Group related files in folders for better organization
- Set `defaultValue` to the most important file
- Use `title` to provide context about what's being shown
- Keep the number of files reasonable (10-20 max for best UX)
- Use meaningful file extensions for proper icon display
- Consider using `expandAll` for small structures (< 5 folders)
- Organize tests, components, and utilities in separate folders
::

## Common Patterns

### Starter Template

Show a complete starter project:

::prose-code-tree{default-value="src/App.vue" title="Vue 3 Starter"}
```vue [src/App.vue]
<template>
  <div id="app">
    <h1>Welcome to Vue 3</h1>
  </div>
</template>
```

```ts [src/main.ts]
import { createApp } from "vue";

import App from "./App.vue";

createApp(App).mount("#app");
```

```html [index.html]
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 3 Starter</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
```

```json [package.json]
{
  "name": "vue3-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.22"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.3.1",
    "typescript": "^5.5.3",
    "vite": "^5.4.2"
  }
}
```
::

### Documentation

Document a feature with related files:

::prose-code-tree
---
default-value: components/Feature.vue
title: Feature Implementation
---
```vue [components/Feature.vue]
<script setup lang="ts">
  import { useFeature } from "@/composables/useFeature";

  const { data, loading, error } = useFeature();
</script>
```

```ts [composables/useFeature.ts]
import axios from "axios";
import { ref } from "vue";

export function useFeature() {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);

  const fetchData = async () => {
    loading.value = true;
    try {
      const response = await axios.get("/api/feature");
      data.value = response.data;
    } catch (err) {
      error.value = err;
    } finally {
      loading.value = false;
    }
  };

  fetchData();

  return { data, loading, error };
}
```

```ts [types/feature.ts]
export interface FeatureData {
  id: number;
  name: string;
  description: string;
}
```
::

## Performance

The component is optimized for performance:

- **Lazy Rendering** - Only renders visible nodes
- **Smart Re-renders** - Only updates when selection changes
- **Efficient Sorting** - Cached sort results
- **Virtual Scrolling** - Tree viewport uses `max-height` with scroll


# Collapsible

## Source code

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

## Overview

The `ProseCollapsible` component allows you to show and hide content with a clickable trigger. It's perfect for FAQ sections, progressive disclosure, hiding lengthy content, or creating expandable code examples.

## Basic Usage

::show-case
---
prose: true
---
  :::prose-collapsible
  This content is hidden by default and can be revealed by clicking the trigger.
  :::

#code
```mdc
::prose-collapsible
This content is hidden by default and can be revealed by clicking the trigger.
::
```
::

### With Custom Text

::show-case
---
prose: true
---
  :::prose-collapsible{close-title="Read less" open-title="Read more"}
  You can customize the trigger text to match your content. This makes it clear what action the user will take.
  :::

#code
```mdc
::prose-collapsible{open-title="Read more" close-title="Read less"}
You can customize the trigger text to match your content. This makes it clear what action the user will take.
::
```
::

## Default Open

Start with the content expanded:

::show-case
---
prose: true
---
  :::prose-collapsible{default-open}
  This content is visible by default. Users can collapse it if they want.
  :::

#code
```mdc
::prose-collapsible{default-open}
This content is visible by default. Users can collapse it if they want.
::
```
::

## Custom Icons

Change the icons to match your design:

::show-case
---
prose: true
---
  :::prose-collapsible
  ---
  close-icon: lucide:chevron-right
  open-icon: lucide:chevron-down
  ---
  Using chevron icons provides a different visual style that some users might prefer.
  :::

  :::prose-collapsible
  ---
  close-icon: lucide:eye-off
  close-title: Hide answer
  open-icon: lucide:eye
  open-title: Reveal answer
  ---
  Use icons that match the semantic meaning of your content.
  :::

#code
```mdc
::prose-collapsible{open-icon="lucide:chevron-down" close-icon="lucide:chevron-right"}
Using chevron icons provides a different visual style that some users might prefer.
::

::prose-collapsible{open-icon="lucide:eye" close-icon="lucide:eye-off" open-title="Reveal answer" close-title="Hide answer"}
Use icons that match the semantic meaning of your content.
::
```
::

## Common Use Cases

### FAQ Section

:prose-callout{title="Frequently Asked Questions" variant="info"}

**How do I install this library?**

::prose-collapsible
---
close-title: Hide installation steps
open-title: Show installation steps
---
1. Install the package:

:prose-pm-install{name="my-library"}

2. Import in your app:

```ts
import { MyComponent } from "my-library";
```

3. Use the component:

```vue
<template>
  <MyComponent />
</template>
```
::

**What are the system requirements?**

::prose-collapsible
- Node.js 18 or higher
- Vue 3.3 or higher
- TypeScript 5.0 or higher (optional but recommended)
::

**Is it compatible with Nuxt 3?**

::prose-collapsible
Yes! This library is fully compatible with Nuxt 3. Simply install it as a dependency and import the components you need.
::

### Code Examples

Show additional code without overwhelming the page:

::prose-collapsible
---
close-title: Hide example
open-title: Show complete example
---
```vue
<script setup lang="ts">
  import { computed, ref } from "vue";

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

  function increment() {
    count.value++;
  }
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled: {{ doubled }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<style scoped>
  button {
    padding: 0.5rem 1rem;
    background: #42b883;
    color: white;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
  }

  button:hover {
    background: #35495e;
  }
</style>
```
::

### Long Content

Hide lengthy explanations until needed:

::prose-collapsible
---
close-title: Collapse explanation
open-title: Read full explanation
---
**Understanding Reactivity in Vue 3**

Vue 3 introduces a new reactivity system based on JavaScript Proxies. This provides several advantages over Vue 2's Object.defineProperty-based system:

1. **Better Performance**: Proxies allow Vue to track dependencies more efficiently
2. **Full Array Support**: No need for special array methods
3. **New Property Detection**: Adding new properties is automatically reactive
4. **Map and Set Support**: Works with built-in JavaScript collections

The `ref()` function creates a reactive reference to a value:

```ts
const count = ref(0);
console.log(count.value); // 0
count.value++; // triggers reactivity
```

The `reactive()` function creates a reactive object:

```ts
const state = reactive({ count: 0 });
console.log(state.count); // 0
state.count++; // triggers reactivity
```

**When to use `ref` vs `reactive`:**

- Use `ref` for primitive values (numbers, strings, booleans)
- Use `reactive` for objects and arrays
- `ref` requires `.value` to access/modify
- `reactive` can be used directly but loses reactivity when destructured
::

### Progressive Disclosure

Reveal information step by step:

:prose-callout{title="Tutorial: Building Your First Component" variant="tip"}

**Step 1: Create the Component File**

::prose-collapsible
---
default-open: true
close-title: Hide details
open-title: Show details
---
Create a new file `MyButton.vue`:

```vue
<template>
  <button>Click me</button>
</template>
```
::

**Step 2: Add Props**

::prose-collapsible{close-title="Hide details" open-title="Show details"}
Add props to make your button customizable:

```vue
<script setup lang="ts">
  defineProps<{
    label: string;
    variant?: "primary" | "secondary";
  }>();
</script>

<template>
  <button :class="variant">
    {{ label }}
  </button>
</template>
```
::

**Step 3: Add Emits**

::prose-collapsible{close-title="Hide details" open-title="Show details"}
Define events your component can emit:

```vue
<script setup lang="ts">
  const props = defineProps<{
    label: string;
    variant?: "primary" | "secondary";
  }>();

  const emit = defineEmits<{
    click: [];
  }>();
</script>

<template>
  <button :class="variant" @click="emit('click')">
    {{ label }}
  </button>
</template>
```
::

### Spoiler Content

Hide spoilers or answers:

::prose-callout{title="Quiz Question" variant="warning"}
What is the time complexity of accessing an element in a hash table?
::

::prose-collapsible
---
close-icon: lucide:lock
close-title: Hide answer
open-icon: lucide:lock-open
open-title: Reveal answer
---
**Answer:** O(1) on average

Hash tables provide constant-time average case for insertions, deletions, and lookups. However, in the worst case (when many collisions occur), operations can degrade to O(n).
::

## Props

| Prop           | Type      | Default          | Description                                           |
| :------------- | :-------- | :--------------- | :---------------------------------------------------- |
| `openTitle`    | `string`  | `"Show more"`    | Text shown when content is hidden (trigger to open)   |
| `closeTitle`   | `string`  | `"Show less"`    | Text shown when content is visible (trigger to close) |
| `openIcon`     | `string`  | `"lucide:minus"` | Icon displayed when content is open                   |
| `closeIcon`    | `string`  | `"lucide:plus"`  | Icon displayed when content is closed                 |
| `defaultOpen`  | `boolean` | `false`          | Whether content is expanded by default                |
| `triggerClass` | `string`  | -                | Additional CSS classes for trigger button             |
| `contentClass` | `string`  | -                | Additional CSS classes for content area               |

## Icon Options

Popular icon combinations:

| Open Icon             | Close Icon             | Use Case                 |
| :-------------------- | :--------------------- | :----------------------- |
| `lucide:minus`        | `lucide:plus`          | Default, general purpose |
| `lucide:chevron-up`   | `lucide:chevron-down`  | Vertical expansion       |
| `lucide:chevron-left` | `lucide:chevron-right` | Horizontal flow          |
| `lucide:eye-off`      | `lucide:eye`           | Show/hide content        |
| `lucide:lock-open`    | `lucide:lock`          | Reveal secrets/spoilers  |
| `lucide:x`            | `lucide:maximize-2`    | Collapse/expand          |

## Vue Component Usage

You can also use this component in your Vue files:

```vue
<template>
  <div>
    <!-- Basic usage -->
    <ProseCollapsible>
      <p>Hidden content goes here</p>
    </ProseCollapsible>

    <!-- With custom text -->
    <ProseCollapsible open-title="Show details" close-title="Hide details">
      <p>More detailed information</p>
    </ProseCollapsible>

    <!-- With custom icons -->
    <ProseCollapsible open-icon="lucide:chevron-up" close-icon="lucide:chevron-down">
      <p>Content with chevron icons</p>
    </ProseCollapsible>

    <!-- Default open -->
    <ProseCollapsible default-open>
      <p>This starts expanded</p>
    </ProseCollapsible>

    <!-- With custom classes -->
    <ProseCollapsible
      trigger-class="text-primary font-bold"
      content-class="bg-muted p-4 rounded-lg"
    >
      <p>Styled content</p>
    </ProseCollapsible>
  </div>
</template>
```

## Nested Collapsibles

You can nest collapsibles for hierarchical content:

::prose-collapsible{close-title="Hide frameworks" open-title="Show frameworks"}
**Frontend Frameworks**

  :::prose-collapsible{close-title="Hide Vue.js" open-title="Vue.js details"}
  Vue.js is a progressive JavaScript framework for building user interfaces. Key features include:

  - Reactive data binding
  - Component-based architecture
  - Virtual DOM
  - Single-file components
  :::

  :::prose-collapsible{close-title="Hide React" open-title="React details"}
  React is a JavaScript library for building user interfaces. Key features include:

  - Component-based architecture
  - Virtual DOM
  - One-way data binding
  - JSX syntax
  :::

  :::prose-collapsible{close-title="Hide Svelte" open-title="Svelte details"}
  Svelte is a compiler that generates minimal JavaScript code. Key features include:

  - No virtual DOM
  - Reactive by default
  - Smaller bundle sizes
  - Easy to learn syntax
  :::
::

## Styling

The component uses sensible defaults but can be customized:

```vue
<ProseCollapsible
  trigger-class="text-lg font-semibold text-primary hover:text-primary/80"
  content-class="mt-4 p-4 bg-muted/50 rounded-lg border"
>
  Custom styled content
</ProseCollapsible>
```

## Accessibility

The component is built on top of `UiCollapsible` which handles:

- Proper ARIA attributes
- Keyboard navigation (Space/Enter to toggle)
- Focus management
- Screen reader support

## Best Practices

::prose-callout{title="Tips for Using Collapsibles" variant="tip"}
- Use descriptive trigger text that clearly indicates what will be revealed
- Don't hide critical information that users need to see immediately
- Consider starting important content expanded (`default-open`)
- Use consistent icon patterns across your application
- Avoid nesting collapsibles more than 2-3 levels deep
- Test with keyboard navigation to ensure accessibility
::

## Examples in Context

### API Documentation

:prose-callout{title="API Reference" variant="info"}

**`createUser(data: UserData): Promise<User>`**

Creates a new user in the system.

::prose-collapsible{close-title="Hide parameters" open-title="Show parameters"}
**Parameters:**

| Name         | Type               | Required | Description                 |
| :----------- | :----------------- | :------- | :-------------------------- |
| `data.name`  | `string`           | Yes      | User's full name            |
| `data.email` | `string`           | Yes      | User's email address        |
| `data.role`  | `'admin' | 'user'` | No       | User role (default: 'user') |
::

::prose-collapsible{close-title="Hide example" open-title="Show example"}
```ts
const user = await createUser({
  name: "John Doe",
  email: "john@example.com",
  role: "admin",
});
```
::

### Migration Guide

:prose-callout{title="Breaking Changes in v2.0" variant="warning"}

::prose-collapsible
---
close-title: Hide list
open-title: Show affected components
---
The following components have breaking changes:

- `Button` - `variant` prop renamed to `appearance`
- `Input` - `onChange` removed, use `v-model` instead
- `Select` - Now uses native select element
- `Modal` - `visible` prop renamed to `open`
::

::prose-collapsible{close-title="Hide steps" open-title="Show migration steps"}
1. Update all `variant` props to `appearance`
2. Replace `onChange` handlers with `v-model`
3. Test your components thoroughly
4. Update your tests to reflect the changes
::


# Field & Field Group

## Introduction

The `Field` and `Field Group` components provide an elegant way to document component props, configuration options, or any structured data. Instead of cramped tables, these components offer a spacious, readable layout with support for markdown content, badges, and flexible styling options.

## Source code

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

## Field

The `ProseField` component displays a single property or configuration item with its name, type, description, and default value.

### Basic Usage

::show-case
---
prose: true
---
  :::prose-field
  ---
  required: true
  default-value: default
  description: The visual style variant of the component.
  name: variant
  tip: This prop is required.
  tip-icon: lucide:info
  type: string
  ---
  :::

#code
```mdc
::prose-field{name="variant" type="string" required default-value="default" description="The visual style variant of the component." tip="This prop is required." tip-icon="lucide:info"}
::
```
::

### Required Field

Mark important fields as required with the `required` prop.

::show-case
---
prose: true
---
  :::prose-field{required name="onSubmit" type="() => void"}
  Callback function called when the form is submitted.
  :::

#code
```mdc
::prose-field{name="onSubmit" type="() => void" required}
Callback function called when the form is submitted.
::
```
::

### Complex Type

Display complex types like unions or function signatures.

::show-case
---
prose: true
---
  :::prose-field{default-value="md" name="size" type="sm | md | lg | xl"}
  Controls the size of the component. Accepts predefined size values.
  :::

#code
```mdc
::prose-field{name="size" type="sm | md | lg | xl" default-value="md"}
Controls the size of the component. Accepts predefined size values.
::
```
::

### With Markdown Description

Use the default slot to provide rich markdown content as the description.

::show-case
---
prose: true
---
  :::prose-field
  ---
  default-value: "{}"
  name: theme
  type: object
  ---
  The theme configuration object. You can customize:

  - `primaryColor` - Main theme color
  - `borderRadius` - Corner radius (0-20px)
  - `fontFamily` - Custom font stack

  Example:

  ```ts
  {
    primaryColor: '#3b82f6',
    borderRadius: 8,
    fontFamily: 'Inter, sans-serif'
  }
  ```
  :::

#code
````mdc
::prose-field{name="theme" type="object" default-value="{}"}

The theme configuration object. You can customize:

- `primaryColor` - Main theme color
- `borderRadius` - Corner radius (0-20px)
- `fontFamily` - Custom font stack

Example:

```ts
{
  primaryColor: '#3b82f6',
  borderRadius: 8,
  fontFamily: 'Inter, sans-serif'
}
```

::

````
::

### Tooltip

Provide additional context with a tooltip using the `tip` prop.

You can display a custom icon in the tooltip using the `tip-icon` prop.

::show-case
---
prose: true
---
  :::prose-field
  ---
  default-value: "false"
  name: isOpen
  tip: Controls whether the modal is open or closed.
  tip-icon: lucide:info
  type: boolean
  ---
  Indicates if the modal dialog is currently open.
  :::

#code
```mdc
::prose-field{name="isOpen" type="boolean" default-value="false" tip="Controls whether the modal is open or closed." tip-icon="lucide:info"}
Indicates if the modal dialog is currently open.
::
```
::

### Custom Name Slot

Override the name display with custom content using the `#name` slot.

::show-case
---
prose: true
---
  :::prose-field
  ---
  default-value: "false"
  type: boolean
  ---
  Controlled open state of the dialog component.

  #name
  `v-model:open`{.text-emerald-500}
  :::

#code
```mdc
::prose-field{type="boolean" default-value="false"}
Controlled open state of the dialog component.
#name
<code class="text-emerald-500">v-model:open</code>
::
```
::

### Custom Default Value Slot

Provide custom rendering for default values using the `#default-value` slot.

::show-case
---
prose: true
---
  :::prose-field
  ---
  name: colors
  ---
  An example of using a custom default value slot.

  #default-value
    ::::div
    []{.rounded-full.bg-red-500.inline-block class="size-2.5"}[]{.rounded-full.bg-blue-500.inline-block.mx-2 class="size-2.5"}[]{.rounded-full.bg-green-500.inline-block class="size-2.5"}
    ::::
  :::

#code
```mdc
::prose-field{name="colors"}
An example of using a custom default value slot.
#default-value

<div>
<span class="size-2.5 rounded-full bg-red-500 inline-block"></span>
<span class="size-2.5 rounded-full bg-blue-500 inline-block mx-2"></span>
<span class="size-2.5 rounded-full bg-green-500 inline-block"></span>
</div>

::
```
::

## Field Group

The `ProseFieldGroup` component is a container for multiple `ProseField` components, providing consistent layout and optional styling variants.

### Basic Field Group

Group related fields together in a clean column layout.

::show-case
---
prose: true
---
  :::prose-field-group
    ::::prose-field
    ---
    default-value: default
    description: The visual style variant of the button.
    name: variant
    type: string
    ---
    ::::

    ::::prose-field
    ---
    default-value: md
    description: Controls the size of the button.
    name: size
    type: string
    ---
    ::::

    ::::prose-field
    ---
    default-value: "false"
    description: Whether the button is disabled.
    name: disabled
    type: boolean
    ---
    ::::
  :::

#code
```mdc
::prose-field-group

:prose-field{name="variant" type="string" default-value="default" description="The visual style variant of the button."}

:prose-field{name="size" type="string" default-value="md" description="Controls the size of the button."}

:prose-field{name="disabled" type="boolean" default-value="false" description="Whether the button is disabled."}

::
```
::

### Bordered Fields

Add visual separators between fields using the `bordered` variant.

::show-case
---
prose: true
---
  :::prose-field-group{variant="bordered"}
    ::::prose-field{default-value="false" name="open" type="boolean"}
    Controls the open state of the dialog.
    ::::

    ::::prose-field{default-value="true" name="modal" type="boolean"}
    Whether the dialog should be modal.
    ::::

    ::::prose-field{name="onClose" type="() => void"}
    Callback when the dialog closes.
    ::::
  :::

#code
```mdc
::prose-field-group{variant="bordered"}

::prose-field{name="open" type="boolean" default-value="false"}
Controls the open state of the dialog.
::

::prose-field{name="modal" type="boolean" default-value="true"}
Whether the dialog should be modal.
::

::prose-field{name="onClose" type="() => void"}
Callback when the dialog closes.
::

::
```
::

### Striped Background

Use alternating backgrounds to improve readability with the `striped` variant.

::show-case
---
prose: true
---
  :::prose-field-group{variant="striped"}
    ::::prose-field{name="placeholder" type="string"}
    Placeholder text for the input.
    ::::

    ::::prose-field{name="value" type="string"}
    The input value.
    ::::

    ::::prose-field{name="onChange" type="(value: string) => void"}
    Callback when value changes.
    ::::

    ::::prose-field{default-value="false" name="disabled" type="boolean"}
    Whether the input is disabled.
    ::::
  :::

#code
```mdc
::prose-field-group{variant="striped"}

::prose-field{name="placeholder" type="string"}
Placeholder text for the input.
::

::prose-field{name="value" type="string"}
The input value.
::

::prose-field{name="onChange" type="(value: string) => void"}
Callback when value changes.
::

::prose-field{name="disabled" type="boolean" default-value="false"}
Whether the input is disabled.
::

::
```
::

### All Variants Combined

Combine `bordered`, `divided`, and `striped` for maximum visual organization with the `all` variant.

::show-case
---
prose: true
---
  :::prose-field-group{variant="all"}
    ::::prose-field{required name="items" type="Array<Item>"}
    Array of items to display in the list.
    ::::

    ::::prose-field{default-value="null" name="selectedId" type="string | null"}
    The ID of the currently selected item.
    ::::

    ::::prose-field{name="onSelect" type="(item: Item) => void"}
    Callback when an item is selected.
    ::::

    ::::prose-field{default-value="false" name="loading" type="boolean"}
    Whether the list is in a loading state.
    ::::

    ::::prose-field
    ---
    default-value: No items found
    name: emptyMessage
    type: string
    ---
    Message to show when the list is empty.
    ::::
  :::

#code
```mdc
::prose-field-group{variant="all"}

::prose-field{name="items" type="Array<Item>" required}
Array of items to display in the list.
::

::prose-field{name="selectedId" type="string | null" default-value="null"}
The ID of the currently selected item.
::

::prose-field{name="onSelect" type="(item: Item) => void"}
Callback when an item is selected.
::

::prose-field{name="loading" type="boolean" default-value="false"}
Whether the list is in a loading state.
::

::prose-field{name="emptyMessage" type="string" default-value="No items found"}
Message to show when the list is empty.
::

::
```
::

## Real-World Example

Here's how you might document a complete component API:

::show-case
---
prose: true
---
### Button Props

  :::prose-field-group{variant="bordered"}
    ::::prose-field
    ---
    default-value: default
    name: variant
    type: default | destructive | outline | ghost | link
    ---
    The visual style variant of the button.

    - `default` - Standard button appearance
    - `destructive` - Red/danger styling for destructive actions
    - `outline` - Outlined button with transparent background
    - `ghost` - Minimal styling with hover effect
    - `link` - Styled as a hyperlink
    ::::

    ::::prose-field{default-value="md" name="size" type="sm | md | lg | icon"}
    Controls the size and padding of the button.
    ::::

    ::::prose-field{default-value="false" name="disabled" type="boolean"}
    When `true`, the button cannot be interacted with and appears visually disabled.
    ::::

    ::::prose-field{default-value="false" name="loading" type="boolean"}
    Shows a loading spinner and disables the button while an async action is in progress.
    ::::

    ::::prose-field{name="onClick" type="(event: MouseEvent) => void"}
    Callback function triggered when the button is clicked.
    ::::
  :::

#code
```mdc
<h3 class="mt-0">Button Props</h3>

::prose-field-group{variant="bordered"}

::prose-field{name="variant" type="default | destructive | outline | ghost | link" default-value="default"}
The visual style variant of the button.

- `default` - Standard button appearance
- `destructive` - Red/danger styling for destructive actions
- `outline` - Outlined button with transparent background
- `ghost` - Minimal styling with hover effect
- `link` - Styled as a hyperlink

::

::prose-field{name="size" type="sm | md | lg | icon" default-value="md"}
Controls the size and padding of the button.
::

::prose-field{name="disabled" type="boolean" default-value="false"}
When `true`, the button cannot be interacted with and appears visually disabled.
::

::prose-field{name="loading" type="boolean" default-value="false"}
Shows a loading spinner and disables the button while an async action is in progress.
::

::prose-field{name="onClick" type="(event: MouseEvent) => void"}
Callback function triggered when the button is clicked.
::

::
```
::

## Use Cases

The Field and Field Group components are perfect for:

- **Component Props Documentation** - Document Vue/React component props in a readable format
- **API Configuration** - Show configuration options for libraries or APIs
- **Function Parameters** - Document function signatures and parameters
- **Type Definitions** - Display TypeScript interface or type properties
- **CLI Options** - Document command-line interface options and flags
- **Environment Variables** - List and explain required environment variables

## Best Practices

### 1. Use Descriptive Types

Be specific with type definitions to help users understand what values are valid:

```md
<!-- ❌ Too vague -->

::prose-field{name="color" type="string"}

<!-- ✅ Better -->

::prose-field{name="color" type="'red' | 'blue' | 'green' | hex string"}
```

### 2. Provide Context in Descriptions

Use the default slot to add examples, lists, or additional context:

```md
::prose-field{name="items" type="Array<Item>" required}
Array of items to display. Each item should have:

- `id` - Unique identifier
- `label` - Display text
- `icon` - Optional icon name
  ::
```

### 3. Group Related Fields

Use Field Groups to organize props by category:

```md
### Style Props

::prose-field-group

<!-- Style-related fields -->

::

### Behavior Props

::prose-field-group

<!-- Behavior-related fields -->

::
```

### 4. Combine Variants Wisely

- Use `divided` for clear separation
- Use `striped` for long lists
- Use `bordered` to make sections distinct
- Combine `all` three for maximum organization in complex documentation

### 5. Mark Required Fields Consistently

Always use the `required` prop for mandatory fields to help users identify what's necessary at a glance.


# Icon List

## Source code

Click :source-code-link{component="ProseIconList.global.vue" folder="content/prose/Typography/Lists"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Usage

::show-case
---
prose: true
---
:prose-icon-list-example

#code
```vue [ProseIconListExample.vue]
<template>
  <div class="px-8">
    <h3 class="mt-0">Basic Usage</h3>
    <ProseIconList variant="success">
      <p>Successfully implemented authentication</p>
      <p>Database connection established</p>
      <p>API endpoints configured</p>
    </ProseIconList>

    <h3>Mixed Variants</h3>
    <ProseIconList>
      <ProseLi variant="success">Feature is working correctly</ProseLi>
      <ProseLi variant="warning">Needs further testing</ProseLi>
      <ProseLi variant="error">Bug found in production</ProseLi>
      <ProseLi variant="info">Documentation pending</ProseLi>
    </ProseIconList>

    <h3>Custom Icons</h3>
    <ProseIconList>
      <ProseLi icon="lucide:check-circle-2" variant="success">Completed task</ProseLi>
      <ProseLi icon="lucide:clock" variant="warning">In progress</ProseLi>
      <ProseLi icon="lucide:x-circle" variant="error">Failed step</ProseLi>
      <ProseLi icon="lucide:help-circle" variant="info">Needs clarification</ProseLi>
    </ProseIconList>

    <h3>Default Icon Override</h3>
    <ProseIconList icon="lucide:star" variant="default">
      <ProseLi>Premium feature</ProseLi>
      <ProseLi>Advanced analytics</ProseLi>
      <ProseLi>Priority support</ProseLi>
    </ProseIconList>

    <h3>Advanced Example</h3>
    <ProseIconList>
      <ProseLi icon="lucide:check-circle-2" variant="success">
        <ProseStrong>Installation:</ProseStrong> Run npm <code>install ui-thing</code>
      </ProseLi>
      <ProseLi icon="lucide:settings" variant="info">
        <ProseStrong>Configuration:</ProseStrong> Update your <code>config.json</code> file with
        necessary settings.
      </ProseLi>
      <ProseLi icon="lucide:play-circle" variant="warning">
        <ProseStrong>Usage:</ProseStrong> Start the application using <code>npm start</code> and
        monitor the console for logs.
      </ProseLi>
      <ProseLi icon="lucide:bug" variant="error">
        <ProseStrong>Troubleshooting:</ProseStrong> If you encounter issues, refer to the FAQ or
        open an issue on GitHub.
      </ProseLi>
    </ProseIconList>
  </div>
</template>
```
::

### Mixed Variants

Each item can have its own variant:

::prose-icon-list
  :::prose-li{variant="success"}
  Feature is working correctly
  :::

  :::prose-li{variant="warning"}
  Needs further testing
  :::

  :::prose-li{variant="error"}
  Bug found in production
  :::

  :::prose-li{variant="info"}
  Documentation pending
  :::
::

### Custom Icons

Override the default icons with custom ones:

::prose-icon-list{icon="lucide:star"}
Premium feature

Advanced analytics

Priority support
::

### Per-Item Custom Icons

Each item can have its own icon:

::prose-icon-list
  :::prose-li{icon="lucide:check-circle-2" variant="success"}
  Completed task
  :::

  :::prose-li{icon="lucide:clock" variant="warning"}
  In progress
  :::

  :::prose-li{icon="lucide:x-circle" variant="error"}
  Failed step
  :::

  :::prose-li{icon="lucide:help-circle" variant="info"}
  Needs clarification
  :::
::

## Variants

### Success

::prose-icon-list{variant="success"}
User registration completed

Email verification sent

Profile created successfully
::

### Error

::prose-icon-list{variant="error"}
Invalid credentials provided

Connection timeout

File upload failed
::

### Warning

::prose-icon-list{variant="warning"}
API rate limit approaching

Deprecated feature in use

Cache needs clearing
::

### Info

::prose-icon-list{variant="info"}
Server maintenance scheduled

New feature available

Documentation updated
::

### Default

::prose-icon-list
Standard list item

Another item

Final item
::

## Vue Component Usage

You can also use this as a regular Vue component:

```vue
<template>
  <ProseIconList variant="success">
    <ProseLi>Feature completed</ProseLi>
    <ProseLi>Tests passing</ProseLi>
    <ProseLi variant="warning">Review pending</ProseLi>
  </ProseIconList>
</template>
```

## Advanced Example

Combine different features for complex lists:

::prose-icon-list{icon="lucide:package"}
  :::prose-li{icon="lucide:download" variant="success"}
  **Installation**: Run `npm install ui-thing`

    ::::prose-icon-list{icon="lucide:check" variant="success"}
    Download the package

    Install the dependencies

    Go to the project directory
    ::::
  :::

  :::prose-li{icon="lucide:settings" variant="info"}
  **Configuration**: Set up your `nuxt.config.ts`
  :::

  :::prose-li{icon="lucide:circle-play" variant="warning"}
  **Usage**: Import components as needed
  :::

  :::prose-li{icon="lucide:rocket" variant="success"}
  **Deploy**: Push to production
  :::
::


# Images

## Source code

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

## Images

::show-case
![Wedding table decoration by @madyevents](https://images.unsplash.com/photo-1758810742974-b92459867642?ixlib=rb-4.1.0\&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\&auto=format\&fit=crop\&q=80\&w=2340)

#code
```mdc
![Wedding table decoration by @madyevents](https://images.unsplash.com/photo-1758810742974-b92459867642?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2340)
```
::

### Lifted Image

A lifted image is an image that has border and shadow, making it stand out more.

::show-case
![Building in Japan](https://images.unsplash.com/photo-1759899564526-ed590258cb4d?ixlib=rb-4.1.0\&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\&auto=format\&fit=crop\&q=80\&w=987){.h-[450px] lifted=""}

#code
```mdc
![Building in Japan](https://images.unsplash.com/photo-1759899564526-ed590258cb4d?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987){lifted .h-[450px]}
```
::

## Color Mode Image

A color mode image is an image that changes based on the current color mode (light or dark). This is useful for images that have different colors in light and dark mode.

::show-case
:prose-color-mode-image{alt="Color Mode Image" src-dark="https://images.unsplash.com/photo-1759915995368-cfd7dfa44b50?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2340" src-light="https://images.unsplash.com/photo-1738739907433-10601360cee3?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2340"}

#code
```mdc
::prose-color-mode-image{srcLight='https://images.unsplash.com/photo-1738739907433-10601360cee3?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2340' srcDark='https://images.unsplash.com/photo-1759915995368-cfd7dfa44b50?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2340' alt='Color Mode Image'}
```
::

## Embeds

::show-case
:iframe{.rounded-md allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" frameBorder="0" referrerPolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/1CzWALKazdQ?si=wn2HvIx7pWsGSiKv" style="aspect-ratio: 16/9;" title="How To Add Pinia To Your Nuxt 3 Application"}

#code
```mdc
:iframe{src="https://www.youtube.com/embed/1CzWALKazdQ?si=wn2HvIx7pWsGSiKv" class="rounded-md" title="How To Add Pinia To Your Nuxt 3 Application" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"}
```
::


# Mermaid Diagrams

## Source code

Click :source-code-link{component="ProseMermaid.global.vue" folder="content/prose/Code"} to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

## Overview

The `ProseMermaid` component renders diagrams using [Mermaid](https://mermaid.js.org/){rel="&#x22;nofollow&#x22;"}, a popular JavaScript-based diagramming and charting tool. It supports flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, and more.

::prose-callout{title="Features" variant="info"}
- **Automatic Theme Detection** - Switches between light/dark themes
- **Lazy Loading** - Only renders when scrolled into view for better performance
- **Error Handling** - Shows friendly error messages if diagram syntax is invalid
- **Loading State** - Displays spinner while rendering
::

## Basic Usage

Use code blocks with the `mermaid` language:

::show-case
---
prose: true
---
```mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[End]
```

#code
````mdc
```
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[End]
```
````
::

## Flowcharts

### Top to Bottom

```mermaid
graph TD
    Start[Start Process] --> Input[Get User Input]
    Input --> Validate{Valid?}
    Validate -->|Yes| Process[Process Data]
    Validate -->|No| Error[Show Error]
    Error --> Input
    Process --> Save[Save to Database]
    Save --> Success[Show Success Message]
    Success --> End[End]
```

### Left to Right

```mermaid
graph LR
    A[Client] --> B[Load Balancer]
    B --> C[Server 1]
    B --> D[Server 2]
    B --> E[Server 3]
    C --> F[(Database)]
    D --> F
    E --> F
```

### With Styling

::show-case
---
prose: true
---
```mermaid
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]

    style A fill:#D81313,stroke:#FF5D5D,stroke-width:4px
    style B fill:#730CF0,stroke:#A63AFE,stroke-width:2px
    style C fill:#007470,stroke:#25FFF8,stroke-width:2px
```

#code
````mdc
```mermaid
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]

    style A fill:#D81313,stroke:#FF5D5D,stroke-width:4px
    style B fill:#730CF0,stroke:#A63AFE,stroke-width:2px
    style C fill:#007470,stroke:#25FFF8,stroke-width:2px
```
````
::

## Sequence Diagrams

### API Request Flow

```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Database

    User->>Browser: Click Login
    Browser->>Server: POST /api/login
    Server->>Database: Query user
    Database-->>Server: Return user data
    Server-->>Browser: JWT Token
    Browser-->>User: Redirect to Dashboard
```

### Authentication Flow

```mermaid
sequenceDiagram
    autonumber
    actor User
    participant App
    participant Auth
    participant API

    User->>App: Enter credentials
    App->>Auth: Validate credentials

    alt Credentials valid
        Auth->>API: Request token
        API-->>Auth: Return JWT
        Auth-->>App: Authentication successful
        App-->>User: Show dashboard
    else Credentials invalid
        Auth-->>App: Authentication failed
        App-->>User: Show error message
    end
```

### Loops and Notes

```mermaid
sequenceDiagram
    participant Client
    participant Server
    participant Cache

    Note over Client,Server: Initial request
    Client->>Server: GET /api/data

    loop Every 5 seconds
        Server->>Cache: Check cache
        alt Cache hit
            Cache-->>Server: Return cached data
        else Cache miss
            Server->>Server: Fetch fresh data
            Server->>Cache: Update cache
        end
    end

    Server-->>Client: Return data
    Note over Client: Data displayed
```

## Class Diagrams

### Simple Class Structure

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
        +eat()
    }

    class Dog {
        +String breed
        +bark()
        +fetch()
    }

    class Cat {
        +String color
        +meow()
        +scratch()
    }

    Animal <|-- Dog
    Animal <|-- Cat
```

### Full Example with Relationships

```mermaid
classDiagram
    class User {
        +String id
        +String email
        +String name
        +login()
        +logout()
    }

    class Post {
        +String id
        +String title
        +String content
        +Date createdAt
        +publish()
        +delete()
    }

    class Comment {
        +String id
        +String text
        +Date createdAt
        +edit()
        +delete()
    }

    User "1" --> "*" Post : creates
    User "1" --> "*" Comment : writes
    Post "1" --> "*" Comment : has
```

## State Diagrams

### Order Status

```mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Pending : Submit
    Pending --> Approved : Approve
    Pending --> Rejected : Reject
    Rejected --> Draft : Revise
    Approved --> Processing : Start
    Processing --> Shipped : Ship
    Shipped --> Delivered : Deliver
    Delivered --> [*]

    Pending --> Cancelled : Cancel
    Processing --> Cancelled : Cancel
    Cancelled --> [*]
```

### Complex State Machine

```mermaid
stateDiagram-v2
    [*] --> Idle

    Idle --> Loading : fetchData()
    Loading --> Success : data received
    Loading --> Error : request failed

    Success --> Idle : reset()
    Error --> Idle : retry()
    Error --> Idle : reset()

    state Loading {
        [*] --> Fetching
        Fetching --> Parsing
        Parsing --> [*]
    }
```

## Entity Relationship Diagrams

### Database Schema

```mermaid
erDiagram
    USER ||--o{ POST : creates
    USER ||--o{ COMMENT : writes
    POST ||--o{ COMMENT : has
    POST }o--|| CATEGORY : belongs_to

    USER {
        string id PK
        string email
        string name
        datetime created_at
    }

    POST {
        string id PK
        string user_id FK
        string category_id FK
        string title
        text content
        datetime published_at
    }

    COMMENT {
        string id PK
        string user_id FK
        string post_id FK
        text content
        datetime created_at
    }

    CATEGORY {
        string id PK
        string name
        string slug
    }
```

## Pie Charts

### Simple Distribution

```mermaid
pie title Project Time Distribution
    "Planning" : 15
    "Development" : 50
    "Testing" : 20
    "Deployment" : 10
    "Maintenance" : 5
```

### Technology Stack Usage

```mermaid
pie title Technology Preferences
    "Vue.js" : 35
    "React" : 30
    "Angular" : 15
    "Svelte" : 10
    "Other" : 10
```

## Gantt Charts

### Project Timeline

```mermaid
gantt
    title Project Development Timeline
    dateFormat YYYY-MM-DD
    section Planning
        Requirements gathering     :a1, 2024-01-01, 14d
        Design mockups            :a2, after a1, 10d
    section Development
        Backend API               :b1, after a2, 21d
        Frontend Components       :b2, after a2, 21d
        Integration              :b3, after b1, 7d
    section Testing
        Unit Tests               :c1, after b3, 7d
        Integration Tests        :c2, after c1, 5d
    section Deployment
        Staging Deploy           :d1, after c2, 2d
        Production Deploy        :d2, after d1, 1d
```

## Git Graph

### Branch Strategy

```mermaid
gitGraph
    commit id: "Initial commit"
    commit id: "Add base structure"
    branch develop
    checkout develop
    commit id: "Setup dev environment"
    branch feature/auth
    checkout feature/auth
    commit id: "Add login"
    commit id: "Add registration"
    checkout develop
    merge feature/auth
    branch feature/dashboard
    checkout feature/dashboard
    commit id: "Create dashboard"
    commit id: "Add widgets"
    checkout develop
    merge feature/dashboard
    checkout main
    merge develop tag: "v1.0.0"
```

## Journey Diagrams

### User Experience

```mermaid
journey
    title User Shopping Experience
    section Browse
        Visit homepage: 5: User
        Search products: 3: User
        View results: 4: User
    section Select
        Click product: 5: User
        Read details: 4: User
        Check reviews: 3: User
    section Purchase
        Add to cart: 5: User
        Enter payment: 2: User
        Complete order: 5: User
    section Post-Purchase
        Receive confirmation: 5: User, System
        Track shipment: 4: User, System
        Receive product: 5: User
```

## Quadrant Chart

### Feature Prioritization

```mermaid
quadrantChart
    title Feature Prioritization Matrix
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Plan for Later
    quadrant-2 Do First
    quadrant-3 Don't Do
    quadrant-4 Quick Wins

    User Authentication: [0.8, 0.9]
    Dark Mode: [0.2, 0.6]
    Email Notifications: [0.6, 0.7]
    Analytics Dashboard: [0.7, 0.8]
    Social Sharing: [0.3, 0.3]
    Export to PDF: [0.4, 0.5]
    Mobile App: [0.9, 0.85]
    Search Function: [0.3, 0.8]
```

## Error Handling

If there's an error in your diagram syntax, you'll see a helpful error message:

```mermaid
graph TD
    This is invalid syntax
    It will show an error
```

## Code Fence Meta Options

You can add options to the code fence:

````mdc
```mermaid
graph TD
    A --> B
```
````

## Common Use Cases

### Documentation

Use flowcharts to explain processes:

```mermaid
graph TD
    A[User visits site] --> B{Authenticated?}
    B -->|Yes| C[Show Dashboard]
    B -->|No| D[Show Login]
    D --> E[User logs in]
    E --> C
    C --> F[User interacts]
```

### Architecture Diagrams

Show system components:

```mermaid
graph TB
    subgraph Frontend
        A[React App]
        B[Vue App]
    end

    subgraph Backend
        C[API Gateway]
        D[Auth Service]
        E[Data Service]
    end

    subgraph Database
        F[(PostgreSQL)]
        G[(Redis Cache)]
    end

    A --> C
    B --> C
    C --> D
    C --> E
    D --> F
    E --> F
    E --> G
```

### Process Flows

Document workflows:

```mermaid
graph LR
    A[Pull Request] --> B{CI Passed?}
    B -->|No| C[Fix Issues]
    C --> A
    B -->|Yes| D{Review Approved?}
    D -->|No| E[Address Feedback]
    E --> A
    D -->|Yes| F[Merge to Main]
    F --> G[Deploy to Staging]
    G --> H{Tests Pass?}
    H -->|No| I[Rollback]
    H -->|Yes| J[Deploy to Production]
```

## Performance

The component uses:

- **Intersection Observer** - Only renders when scrolled into view
- **Lazy Loading** - Improves initial page load time
- **Smart Re-rendering** - Only re-renders on theme or code changes

## Theme Switching

The component automatically detects your color mode and applies the appropriate Mermaid theme:

- **Light Mode** - Uses default Mermaid theme
- **Dark Mode** - Uses dark Mermaid theme

When you switch themes, diagrams automatically re-render with the new theme.

## Configuration

The Mermaid instance is configured in `app/plugins/mermaid.client.ts`:

:prose-code-snippet{file="/plugins/mermaid.client.ts" language="ts" title="Mermaid Plugin Configuration"}

You can customize these settings based on your needs.

## Best Practices

::prose-callout{title="Tips for Mermaid Diagrams" variant="tip"}
- Keep diagrams simple and focused on one concept
- Use descriptive labels for better understanding
- Add notes to explain complex parts
- Use subgraphs to group related nodes
- Choose appropriate diagram types for your content
- Test your diagrams for syntax errors before publishing
- Use styling sparingly to highlight important elements
::

## Resources

::prose-icon-list
  :::prose-li{icon="lucide:book"}
  [Official Mermaid Documentation](https://mermaid.js.org/){rel=""nofollow"" target="\_blank"}
  :::

  :::prose-li{icon="lucide:pen"}
  [Live Editor](https://mermaid.live/){rel=""nofollow"" target="\_blank"}
  :::

  :::prose-li{icon="lucide:file-text"}
  [Mermaid Cheat Sheet](https://jojozhuang.github.io/tutorial/mermaid-cheat-sheet/){rel=""nofollow"" target="\_blank"}
  :::

  :::prose-li{icon="lucide:github"}
  [GitHub Integration](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/){rel=""nofollow"" target="\_blank"}
  :::
::

## Troubleshooting

::prose-collapsible
---
close-title: Hide common issues
open-title: Show common issues
---
**Diagram not rendering**

- Check your syntax using the [Live Editor](https://mermaid.live/){rel=""nofollow""}
- Ensure you're using the correct diagram type keyword
- Look for error messages in the browser console

**Theme not switching**

- The component watches color mode changes automatically
- Ensure `useColorMode()` is properly configured in your Nuxt app

**Performance issues with many diagrams**

- The component already uses lazy loading via IntersectionObserver
- Consider splitting content into multiple pages
::

## Advanced Examples

### Complex Sequence Diagram

```mermaid
sequenceDiagram
    autonumber
    participant U as User
    participant A as App
    participant API as API Server
    participant DB as Database
    participant Cache as Redis
    participant Queue as Job Queue

    U->>A: Submit form
    A->>API: POST /api/submit

    Note over API: Validate request

    API->>Cache: Check rate limit
    Cache-->>API: OK

    API->>DB: Begin transaction
    API->>DB: Insert record
    DB-->>API: Record created

    API->>Queue: Enqueue job
    Queue-->>API: Job queued

    API->>DB: Commit transaction
    DB-->>API: Committed

    API-->>A: 201 Created
    A-->>U: Show success

    Note over Queue,DB: Background processing
    Queue->>DB: Process job
    DB-->>Queue: Done
```

### Multi-Level State Diagram

```mermaid
stateDiagram-v2
    [*] --> Application

    state Application {
        [*] --> Init
        Init --> Ready

        state Ready {
            [*] --> Idle
            Idle --> Active : user action
            Active --> Processing : submit
            Processing --> Idle : complete

            state Processing {
                [*] --> Validating
                Validating --> Submitting
                Submitting --> [*]
            }
        }

        Ready --> Error : exception
        Error --> Ready : retry
    }

    Application --> [*] : shutdown
```


# Package Manager

## Source code

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

## Overview

The Package Manager components automatically generate code blocks showing the equivalent command across different package managers (npm, pnpm, bun, and yarn). This makes your documentation more accessible to users regardless of their preferred package manager.

## Components

There are three main components for different command types:

- **ProsePmInstall** - For installing packages
- **ProsePmRun** - For running scripts
- **ProsePmX** - For executing packages (npx, pnpm dlx, etc.)

All components support syncing, which allows users to switch between package managers once and have all command blocks update automatically.

---

## ProsePmInstall

Use this component to show package installation commands across all package managers.

### Basic Installation

Install a package

::show-case
---
prose: true
---
:prose-pm-install{name="vue"}

#code
```mdc
:prose-pm-install{name="vue"}
```
::

### Install Multiple Packages

::show-case
---
prose: true
---
:prose-pm-install{name="vue vue-router pinia"}

#code
```mdc
:prose-pm-install{name="vue vue-router pinia"}
```
::

### Dev Dependencies

Install packages as dev dependencies using the `save-dev` prop

::show-case
---
prose: true
---
  :::prose-pm-install{save-dev name="typescript"}
  :::

#code
```mdc
:prose-pm-install{name="typescript" save-dev}
```
::

### Multiple Dev Dependencies

::show-case
---
prose: true
---
  :::prose-pm-install
  ---
  save-dev: true
  name: "@types/node @typescript-eslint/parser eslint"
  ---
  :::

#code
```mdc
:prose-pm-install{name="@types/node @typescript-eslint/parser eslint" save-dev}
```
::

### Install All Dependencies

Show the install command without a package name

::show-case
---
prose: true
---
:prose-pm-install

#code
```mdc
:prose-pm-install
```
::

### Without Syncing

Disable syncing for standalone examples:

::show-case
---
prose: true
---
  :::prose-pm-install{no-sync name="lodash"}
  :::

#code
```mdc
:prose-pm-install{name="lodash" no-sync}
```
::

### Custom Sync Key

Use a custom sync key to create separate sync groups

::show-case
---
prose: true
---
:prose-pm-install{name="react" sync="react-group"}

:prose-pm-install{name="react-dom" sync="react-group"}

#code
```mdc
::prose-pm-install{name="react" sync="react-group"}
::

::prose-pm-install{name="react-dom" sync="react-group"}
::

```
::

## ProsePmRun

Use this component to show script execution commands.

### Run Development Server

::show-case
---
prose: true
---
:prose-pm-run{script="dev"}

#code
```mdc
:prose-pm-run{script="dev"}
```
::

### Run Build

:prose-pm-run{script="build"}

### Run Tests

:prose-pm-run{script="test"}

### Run Custom Scripts

:prose-pm-run{script="lint"}

:prose-pm-run{script="format"}

### Run with Arguments

::show-case
---
prose: true
---
:prose-pm-run{script="test -- --watch"}

#code
```mdc
:prose-pm-run{script="test -- --watch"}
```
::

### Without Syncing

::prose-pm-run{no-sync script="preview"}
::

## ProsePmX

Use this component for package execution commands (npx, pnpm dlx, bun x, yarn dlx).

### Create New Project

::show-case
---
prose: true
---
:prose-pm-x{command="create-vue@latest my-app"}

#code
```mdc
:prose-pm-x{command="create-vue@latest my-app"}
```
::

### Initialize Nuxt Project

:prose-pm-x{command="nuxi init my-nuxt-app"}

### Run Create Next App

:prose-pm-x{command="create-next-app@latest"}

### Execute CLI Tools

:prose-pm-x{command="prettier --write ."}

:prose-pm-x{command="eslint --fix src/"}

### TypeScript Init

:prose-pm-x{command="tsc --init"}

### Without Syncing

::prose-pm-x{no-sync command="vite build"}
::

## In-Stack Layout

All components support the `in-stack` prop for use within code groups or when you want a more compact display.

### Installation in Stack

::prose-pm-install{in-stack name="axios"}
::

### Run Script in Stack

::prose-pm-run{in-stack script="start"}
::

### Execute Command in Stack

::prose-pm-x{in-stack command="create-vite@latest"}
::

## Complete Setup Example

Here's a complete example showing a typical project setup workflow:

::prose-callout{title="Getting Started" variant="tip"}
Follow these steps to set up your new project:
::

### Step 1: Create Project

:prose-pm-x{command="create-vue@latest my-project"}

### Step 2: Navigate to Directory

```bash
cd my-project
```

### Step 3: Install Dependencies

:prose-pm-install

### Step 4: Install Additional Packages

:prose-pm-install{name="axios pinia"}

### Step 5: Install Dev Dependencies

::prose-pm-install{save-dev name="@types/node typescript"}
::

### Step 6: Run Development Server

:prose-pm-run{script="dev"}

## Props Reference

### ProsePmInstall Props

| Prop       | Type      | Default | Description                                            |
| :--------- | :-------- | :------ | :----------------------------------------------------- |
| `name`     | `string`  | -       | Package name(s) to install. Omit for `install` command |
| `save-dev` | `boolean` | `false` | Install as dev dependency                              |
| `in-stack` | `boolean` | `false` | Use stack layout                                       |
| `sync`     | `string`  | `"_pm"` | Sync group identifier                                  |
| `no-sync`  | `boolean` | `false` | Disable syncing                                        |

### ProsePmRun Props

| Prop       | Type      | Default  | Description           |
| :--------- | :-------- | :------- | :-------------------- |
| `script`   | `string`  | Required | Script name to run    |
| `in-stack` | `boolean` | `false`  | Use stack layout      |
| `sync`     | `string`  | `"_pm"`  | Sync group identifier |
| `no-sync`  | `boolean` | `false`  | Disable syncing       |

### ProsePmX Props

| Prop       | Type      | Default  | Description           |
| :--------- | :-------- | :------- | :-------------------- |
| `command`  | `string`  | Required | Command to execute    |
| `in-stack` | `boolean` | `false`  | Use stack layout      |
| `sync`     | `string`  | `"_pm"`  | Sync group identifier |
| `no-sync`  | `boolean` | `false`  | Disable syncing       |

---

## Package Manager Differences

The components handle package manager-specific syntax automatically:

### Install Command

| Package Manager | Install    | Install (empty) | Save Dev |
| :-------------- | :--------- | :-------------- | :------- |
| npm             | `npm i`    | `npm install`   | `-D`     |
| pnpm            | `pnpm i`   | `pnpm install`  | `-D`     |
| bun             | `bun add`  | `bun install`   | `-d`     |
| yarn            | `yarn add` | `yarn install`  | `-D`     |

### Run Command

| Package Manager | Run Script |
| :-------------- | :--------- |
| npm             | `npm run`  |
| pnpm            | `pnpm run` |
| bun             | `bun run`  |
| yarn            | `yarn run` |

### Execute Command

| Package Manager | Execute    |
| :-------------- | :--------- |
| npm             | `npx`      |
| pnpm            | `pnpm dlx` |
| bun             | `bun x`    |
| yarn            | `yarn dlx` |

## Syncing Behavior

By default, all package manager components within a page share the same sync group (`_pm`). When a user selects a package manager in one component, all other synced components update automatically.

### Default Sync Group

These will sync together:

:prose-pm-install{name="vue"}

:prose-pm-run{script="dev"}

:prose-pm-x{command="vite build"}

### Custom Sync Groups

Create separate sync groups for different contexts:

:prose-callout{title="Frontend Dependencies" variant="info"}

:prose-pm-install{name="react react-dom" sync="frontend"}

::prose-pm-install{save-dev name="@types/react" sync="frontend"}
::

:prose-callout{title="Backend Dependencies" variant="info"}

:prose-pm-install{name="express" sync="backend"}

::prose-pm-install{save-dev name="@types/express" sync="backend"}
::

### Disable Syncing

Use `no-sync` for standalone examples:

::prose-pm-install{no-sync name="standalone-package"}
::

## Real-World Examples

### React Project Setup

:prose-callout{title="Setting up a React + TypeScript Project" variant="example"}

Create a new Vite project:

:prose-pm-x{command="create-vite@latest my-react-app -- --template react-ts"}

Install additional dependencies:

:prose-pm-install{name="react-router-dom zustand"}

Install dev tools:

::prose-pm-install{save-dev name="@types/node eslint prettier"}
::

Start the development server:

:prose-pm-run{script="dev"}

### Vue Project Setup

:prose-callout{title="Setting up a Vue 3 Project" variant="example"}

Create a new Vue project:

:prose-pm-x{command="create-vue@latest my-vue-app"}

Install Vue Router and Pinia:

:prose-pm-install{name="vue-router pinia"}

Install dev dependencies:

::prose-pm-install{save-dev name="@vue/test-utils vitest"}
::

Run the dev server:

:prose-pm-run{script="dev"}

### Nuxt Project Setup

:prose-callout{title="Setting up a Nuxt 3 Project" variant="example"}

Initialize a new Nuxt project:

:prose-pm-x{command="nuxi init my-nuxt-app"}

Navigate to the project:

```bash
cd my-nuxt-app
```

Install dependencies:

:prose-pm-install

Add UI library:

:prose-pm-install{name="@nuxt/ui"}

Start development:

:prose-pm-run{script="dev"}

## Tips

::prose-callout{title="Best Practices" variant="tip"}
- Use syncing to provide a consistent experience across your documentation
- Disable syncing for isolated examples or tutorials with different contexts
- Use custom sync groups when you have multiple unrelated command sequences on the same page
- Always show the installation command when introducing new dependencies
::

::prose-callout{title="Note" variant="note"}
The package manager selection is persisted in the user's browser, so their preference is remembered across pages and sessions.
::


# Steps

## Source code

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

## Overview

The `Steps` and `Step` components work together to create visually appealing numbered step sequences. Using CSS counters, each step automatically increments without manual numbering. The components are ideal for tutorials, setup guides, migration instructions, and any sequential process documentation.

## Basic Usage

::steps
  :::step
  ### First Step

  This is the content of the first step. The number is automatically generated.
  :::

  :::step
  ### Second Step

  Each subsequent step increments the counter automatically.
  :::

  :::step
  ### Third Step

  You can include any markdown content inside a step.
  :::
::

## Installation Guide Example

::steps
  :::step
  ### Install Dependencies

  Install the required packages for your project:

  :prose-pm-install{name="vue"}
  :::

  :::step
  ### Create Configuration File

  Create a `vue.config.js` file in your project root:

  ```js
  module.exports = {
    publicPath: "/",
    outputDir: "dist",
    assetsDir: "static",
  };
  ```
  :::

  :::step
  ### Update Package.json

  Add scripts to your `package.json`:

  ```json
  {
    "scripts": {
      "dev": "vite",
      "build": "vite build",
      "preview": "vite preview"
    }
  }
  ```
  :::

  :::step
  ### Start Development Server

  Run the development server:

  :prose-pm-run{script="dev"}
  :::
::

## Tutorial Example

::steps
  :::step
  ### Create Component File

  Create a new file `MyButton.vue` in your components directory.
  :::

  :::step
  ### Add Template

  Define your component's structure:

  ```vue
  <template>
    <button class="btn">Click me</button>
  </template>
  ```
  :::

  :::step
  ### Add Script Setup

  Add your component logic:

  ```vue
  <script setup lang="ts">
    const handleClick = () => {
      console.log("Button clicked!");
    };
  </script>
  ```
  :::

  :::step
  ### Add Styles

  Style your button:

  ```vue
  <style scoped>
    .btn {
      padding: 0.5rem 1rem;
      background: #42b883;
      color: white;
      border: none;
      border-radius: 0.25rem;
      cursor: pointer;
    }

    .btn:hover {
      background: #35495e;
    }
  </style>
  ```
  :::

  :::step
  ### Import and Use

  Import your component in `App.vue`:

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

  <template>
    <MyButton @click="handleClick" />
  </template>
  ```
  :::
::

## With Lists and Code

::steps
  :::step
  ### Prerequisites

  Before you begin, ensure you have:

  - Node.js 18 or higher
  - A package manager (npm, pnpm, yarn, or bun)
  - Basic knowledge of Vue 3
  - A code editor (VS Code recommended)
  :::

  :::step
  ### Project Setup

  Initialize a new project:

  :prose-pm-x{command="create-vue@latest my-project"}

  Navigate to the project:

  ```bash
  cd my-project
  ```
  :::

  :::step
  ### Install Additional Packages

  Add the UI library:

    ::::prose-pm-install{save-dev name="@ui-thing/components"}
    ::::
  :::

  :::step
  ### Configure Tailwind

  Update your `tailwind.config.js`:

  ```js
  export default {
    content: [
      "./index.html",
      "./src/**/*.{vue,js,ts,jsx,tsx}",
      "./node_modules/@ui-thing/**/*.{vue,js,ts,jsx,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  };
  ```
  :::
::

## Migration Guide Example

::steps
  :::step
  ### Backup Your Project

  Before making changes, create a backup:

  ```bash
  git add .
  git commit -m "Backup before v2 migration"
  git branch backup-v1
  ```
  :::

  :::step
  ### Update Dependencies

  Update to the latest versions:

  :prose-pm-install{name="ui-thing@latest"}

    ::::prose-callout{title="Breaking Changes" variant="warning"}
    Version 2.0 includes breaking changes. Review the changelog before proceeding.
    ::::
  :::

  :::step
  ### Update Component Imports

  Change old import syntax:

  ```ts
  // Before

  // After
  import { UiButton } from "ui-thing/components";
  import { Button } from "ui-thing/v1";
  ```
  :::

  :::step
  ### Update Props

  Several components have renamed props:

  | Component | Old Prop   | New Prop              |
  | :-------- | :--------- | :-------------------- |
  | Button    | `variant`  | `appearance`          |
  | Input     | `onChange` | Use `v-model` instead |
  | Modal     | `visible`  | `open`                |
  :::

  :::step
  ### Test Your Application

  Run your test suite:

  :prose-pm-run{script="test"}

  Fix any failing tests based on the new API.
  :::

  :::step
  ### Update Styles

  Some class names have changed:

  ```diff
  - <UiButton class="btn-primary">
  + <UiButton appearance="primary">
  ```
  :::

  :::step
  ### Deploy

  Once everything is working, deploy your updated application:

  :prose-pm-run{script="build"}

  Deploy to your hosting provider

  :prose-pm-run{script="deploy"}
  :::
::

## API Setup Example

::steps
  :::step
  ### Install Server Framework

  Install Express and required middleware:

  :prose-pm-install{name="express cors dotenv"}
  :::

  :::step
  ### Create Server File

  Create `server.js`:

  ```js
  import cors from "cors";
  import dotenv from "dotenv";
  import express from "express";

  dotenv.config();

  const app = express();
  const PORT = process.env.PORT || 3000;

  app.use(cors());
  app.use(express.json());

  app.get("/api/health", (req, res) => {
    res.json({ status: "ok" });
  });

  app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
  });
  ```
  :::

  :::step
  ### Configure Environment

  Create `.env` file:

  ```bash
  PORT=3000
  DATABASE_URL=postgresql://localhost:5432/mydb
  JWT_SECRET=your-secret-key
  ```
  :::

  :::step
  ### Add Database

  Install Prisma for database management:

    ::::prose-pm-install{save-dev name="@prisma/client"}
    ::::

    ::::prose-pm-install{save-dev name="prisma"}
    ::::
  :::

  :::step
  ### Initialize Prisma

  Set up your database schema:

  :prose-pm-x{command="prisma init"}
  :::

  :::step
  ### Create Schema

  Define your data models in `prisma/schema.prisma`:

  ```prisma
  datasource db {
    provider = "postgresql"
    url      = env("DATABASE_URL")
  }

  generator client {
    provider = "prisma-client-js"
  }

  model User {
    id        Int      @id @default(autoincrement())
    email     String   @unique
    name      String?
    createdAt DateTime @default(now())
  }
  ```
  :::

  :::step
  ### Run Migrations

  Create and apply database migrations:

  :prose-pm-x{command="prisma migrate dev --name init"}
  :::

  :::step
  ### Start Server

  Run your API server:

  :prose-pm-run{script="dev"}
  :::
::

## Nested Content

::steps
  :::step
  ### Understanding Components

  Components are reusable pieces of UI. They can contain:

  1. **Template** - The HTML structure
  2. **Script** - The component logic
  3. **Style** - The component styling

    ::::prose-callout{title="Single File Components" variant="info"}
    Vue uses SFC (Single File Components) that combine all three parts in one `.vue` file.
    ::::
  :::

  :::step
  ### Component Communication

  Components communicate through

    ::::prose-icon-list
      :::::prose-li{icon="lucide:arrow-down"}
      **Props**: Pass data from parent to child
      :::::

      :::::prose-li{icon="lucide:arrow-up"}
      **Emits**: Send events from child to parent
      :::::

      :::::prose-li{icon="lucide:git-branch"}
      **Provide/Inject**: Share data across component tree
      :::::

      :::::prose-li{icon="lucide:link-2"}
      **State Management**: Global state (Pinia, Vuex)
      :::::
    ::::
  :::

  :::step
  ### Best Practices

    ::::prose-callout{title="Component Guidelines" variant="tip"}
    Follow these best practices:

    - Keep components small and focused
    - Use TypeScript for type safety
    - Document props and emits
    - Write unit tests
    - Follow naming conventions
    ::::

    ::::prose-collapsible{close-title="Hide example" open-title="Show example"}
    ```vue
    <script setup lang="ts">
      interface Props {
        title: string;
        count?: number;
      }

      const props = withDefaults(defineProps<Props>(), {
        count: 0,
      });

      const emit = defineEmits<{
        increment: [];
      }>();
    </script>

    <template>
      <div>
        <h3>{{ title }}</h3>
        <p>Count: {{ count }}</p>
        <button @click="emit('increment')">+</button>
      </div>
    </template>
    ```
    ::::
  :::
::

## Troubleshooting Guide

::steps
  :::step
  ### Identify the Issue

  First, gather information about the problem:

  - What error message do you see?
  - When did the issue start?
  - What were you doing when it occurred?
  - Can you reproduce it consistently?
  :::

  :::step
  ### Check the Console

  Open browser DevTools (F12) and look for:

    ::::prose-icon-list{variant="error"}
      :::::prose-li{icon="lucide:x-circle"}
      Red error messages
      :::::

      :::::prose-li{icon="lucide:alert-triangle"}
      Warning messages
      :::::

      :::::prose-li{icon="lucide:wifi-off"}
      Network failures
      :::::
    ::::
  :::

  :::step
  ### Review Recent Changes

  Use git to check recent modifications:

  ```bash
  git log --oneline -10
  git diff HEAD~1
  ```
  :::

  :::step
  ### Search Documentation

  Check if this is a known issue:

  1. Search the official docs
  2. Check GitHub issues
  3. Look for related discussions
  4. Review the changelog
  :::

  :::step
  ### Try Basic Solutions

  Common fixes:

    ::::prose-collapsible{close-title="Hide solutions" open-title="Show solutions"}
    **Clear cache and reinstall:**

    ```bash
    rm -rf node_modules package-lock.json
    ```

    :prose-pm-install

    **Update dependencies:**

    :prose-pm-install{name="ui-thing@latest"}

    **Restart dev server:**

    :prose-pm-run{script="dev"}
    ::::
  :::

  :::step
  ### Ask for Help

  If you're still stuck, ask for help with:

  - A clear description of the problem
  - Steps to reproduce
  - Your environment details (OS, Node version, etc.)
  - Relevant code snippets
  - Error messages and stack traces

    ::::prose-callout{title="Get Help" variant="info"}
    Post your issue on:

    - GitHub Issues
    - Discord community
    - Stack Overflow
    ::::
  :::
::

## Props

### Steps

| Prop    | Type  | Default | Description                              |
| :------ | :---- | :------ | :--------------------------------------- |
| `class` | `any` | -       | Additional CSS classes for the container |

### Step

| Prop    | Type  | Default | Description                              |
| :------ | :---- | :------ | :--------------------------------------- |
| `class` | `any` | -       | Additional CSS classes for the step item |

## How It Works

The components use CSS counters to automatically number steps:

1. **`Steps`** - Initializes the counter with `[counter-reset:_step]`
2. **`Step`** - Displays and increments the counter with `before:content-[counter(step)]` and `before:[counter-increment:_step]`

This means you don't need to manually number your steps - the browser handles it automatically!

## Styling

The step indicator is created using CSS `::before` pseudo-element:

- **Size**: 32px x 32px (8 Tailwind units)
- **Background**: Secondary color
- **Text**: Secondary foreground color
- **Position**: Absolute, left of the step content
- **Border**: Left border connects all steps

### Custom Styling

You can customize the appearance with the `class` prop:

::steps{.border-primary}
  :::step
  ### Customized Step

  This step has a primary colored indicator.
  :::
::

## Vue Component Usage

```vue
<template>
  <div>
    <!-- Basic usage -->
    <Steps>
      <Step>
        <h3>First Step</h3>
        <p>Step content goes here</p>
      </Step>
      <Step>
        <h3>Second Step</h3>
        <p>More content</p>
      </Step>
    </Steps>

    <!-- With custom classes -->
    <Steps class="border-primary">
      <Step class="before:bg-primary">
        <h3>Custom Styled Step</h3>
        <p>Custom indicator color</p>
      </Step>
    </Steps>
  </div>
</template>
```

## Best Practices

::prose-callout{title="Tips for Using Steps" variant="tip"}
- Use clear, action-oriented headings (e.g., "Install Dependencies" not "Dependencies")
- Keep each step focused on one task
- Include code examples where appropriate
- Add visual elements (callouts, icons) to enhance clarity
- Consider using collapsibles for optional or advanced content
- Test the flow to ensure steps are in logical order
- Use consistent heading levels (usually `###` for step titles)
::

## Accessibility

The components provide a clear visual hierarchy:

- Numbers help users track progress
- Vertical line shows connection between steps
- Clear spacing between steps
- Works with keyboard navigation
- Compatible with screen readers

## Common Patterns

### Installation + Configuration

Perfect for documenting software setup:

::steps
  :::step
  ### Install

  :prose-pm-install{name="package-name"}
  :::

  :::step
  ### Configure

  Add to your config file...
  :::

  :::step
  ### Use

  Import and use the package...
  :::
::

### Problem → Solution

Document troubleshooting workflows:

::steps
  :::step
  ### Identify Issue

  Check error messages...
  :::

  :::step
  ### Find Cause

  Debug the problem...
  :::

  :::step
  ### Apply Fix

  Implement the solution...
  :::

  :::step
  ### Verify

  Test that it works...
  :::
::

### Before → During → After

Show transformation processes:

::steps
  :::step
  ### Preparation

  Set up your environment...
  :::

  :::step
  ### Execution

  Run the migration...
  :::

  :::step
  ### Validation

  Verify the changes...
  :::
::


# Tabs

## Source code

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

## Variants

### Separate

::show-case
---
prose: true
---
  :::prose-tabs
    ::::div{icon="logos:postgresql" label="PostgreSQL"}
    ### PostgreSQL Column Types

    ```ts
    import { integer, pgTable } from "drizzle-orm/pg-core";

    export const table = pgTable("table", {
      int: integer("int"),
    });
    ```
    ::::

    ::::div{icon="logos:mysql-icon" label="MySQL"}
    ### MySQL Column Types

    ```ts
    import { int, mysqlTable } from "drizzle-orm/mysql-core";

    const table = mysqlTable("table", {
      int: int("int"),
    });
    ```
    ::::

    ::::div{icon="logos:sqlite" label="SQLite"}
    ### SQLite Column Types

    ```ts lines
    import { integer, sqliteTable } from "drizzle-orm/sqlite-core";

    const table = sqliteTable("table", {
      id: integer("id"),
    });

    // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
    integer("id", { mode: "number" });
    integer("id", { mode: "boolean" });
    integer("id", { mode: "timestamp_ms" });
    integer("id", { mode: "timestamp" }); // Date
    ```
    ::::
  :::

#code
````mdc [Tabs.md]
::prose-tabs

::div{label="PostgreSQL" icon="logos:postgresql"}

### PostgreSQL Column Types

```ts
import { integer, pgTable } from "drizzle-orm/pg-core";

export const table = pgTable("table", {
  int: integer("int"),
});
```

::

::div{label="MySQL" icon="logos:mysql-icon"}

### MySQL Column Types

```ts
import { int, mysqlTable } from "drizzle-orm/mysql-core";

const table = mysqlTable("table", {
  int: int("int"),
});
```

::
::div{label="SQLite" icon="logos:sqlite"}

### SQLite Column Types

```ts lines
import { integer, sqliteTable } from "drizzle-orm/sqlite-core";

const table = sqliteTable("table", {
  id: integer("id"),
});

// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
integer("id", { mode: "number" });
integer("id", { mode: "boolean" });
integer("id", { mode: "timestamp_ms" });
integer("id", { mode: "timestamp" }); // Date
```
::

::
````
::

### Card

::show-case
---
prose: true
---
  :::prose-tabs{variant="card"}
    ::::div{icon="lucide:download" label="Installation"}
    ### Setting Up Express API

    First, initialize your project and install the required dependencies:

    ```bash
    mkdir my-express-api && cd my-express-api
    npm init -y

    # Install core dependencies
    npm install express cors helmet morgan

    # Install development dependencies
    npm install -D nodemon @types/node typescript ts-node
    ```

    Create your basic project structure:

    ```bash
    mkdir src routes middleware controllers
    touch src/app.ts src/server.ts
    ```

    Update your `package.json` scripts:

    ```json [package.json] noFormat
    {
      "scripts": {
        "dev": "nodemon src/server.ts",
        "build": "tsc",
        "start": "node dist/server.js",
        "test": "jest"
      }
    }
    ```
    ::::

    ::::div{icon="lucide:settings" label="Configuration"}
    ### Project Configuration

    Create your TypeScript configuration:

    ```json [tsconfig.json] noFormat
    {
      "compilerOptions": {
        "target": "ES2020",
        "module": "commonjs",
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true
      },
      "include": ["src/**/*"],
      "exclude": ["node_modules", "dist"]
    }
    ```

    Set up your main application file:

    ```ts [src/app.ts] noFormat
    import cors from "cors";
    import express from "express";
    import helmet from "helmet";
    import morgan from "morgan";

    const app = express();

    // Middleware
    app.use(helmet());
    app.use(cors());
    app.use(morgan("combined"));
    app.use(express.json({ limit: "10mb" }));
    app.use(express.urlencoded({ extended: true }));

    // Health check
    app.get("/health", (req, res) => {
      res.status(200).json({
        status: "OK",
        timestamp: new Date().toISOString(),
      });
    });

    export default app;
    ```
    ::::

    ::::div{icon="lucide:code" label="Usage Examples"}
    ### Building API Endpoints

    Create your server entry point:

    ```ts [src/server.ts] noFormat
    import app from "./app";
    import userRoutes from "./routes/users";

    const PORT = process.env.PORT || 3000;

    // Routes
    app.use("/api/users", userRoutes);

    // 404 handler
    app.use("*", (req, res) => {
      res.status(404).json({ error: "Route not found" });
    });

    app.listen(PORT, () => {
      console.log(`🚀 Server running on port ${PORT}`);
    });
    ```

    Create your user routes:

    ```ts [routes/users.ts] noFormat
    import { Router } from "express";

    import { UserController } from "../controllers/UserController";

    const router = Router();
    const userController = new UserController();

    router.get("/", userController.getAllUsers);
    router.get("/:id", userController.getUserById);
    router.post("/", userController.createUser);
    router.put("/:id", userController.updateUser);
    router.delete("/:id", userController.deleteUser);

    export default router;
    ```

    Implement your controller:

    ```ts [controllers/UserController.ts] noFormat
    import { Request, Response } from "express";

    export class UserController {
      private users = [
        { id: 1, name: "John Doe", email: "john@example.com" },
        { id: 2, name: "Jane Smith", email: "jane@example.com" },
      ];

      getAllUsers = (req: Request, res: Response) => {
        res.json({ data: this.users, count: this.users.length });
      };

      getUserById = (req: Request, res: Response) => {
        const user = this.users.find((u) => u.id === parseInt(req.params.id));
        if (!user) {
          return res.status(404).json({ error: "User not found" });
        }
        res.json({ data: user });
      };

      createUser = (req: Request, res: Response) => {
        const { name, email } = req.body;
        const newUser = {
          id: this.users.length + 1,
          name,
          email,
        };
        this.users.push(newUser);
        res.status(201).json({ data: newUser });
      };
    }
    ```
    ::::

    ::::div{icon="lucide:lightbulb" label="Advanced Tips"}
    ### Pro Tips & Best Practices

    #### Environment Configuration

    Use environment variables for configuration:

    ```ts [src/config/index.ts] noFormat
    import dotenv from "dotenv";

    dotenv.config();

    export const config = {
      port: process.env.PORT || 3000,
      nodeEnv: process.env.NODE_ENV || "development",
      dbUrl: process.env.DATABASE_URL,
      jwtSecret: process.env.JWT_SECRET || "fallback-secret",
      corsOrigin: process.env.CORS_ORIGIN || "*",
    };
    ```

    #### Error Handling Middleware

    Implement global error handling:

    ```ts [middleware/errorHandler.ts] noFormat
    import { NextFunction, Request, Response } from "express";

    export const errorHandler = (err: Error, req: Request, res: Response, next: NextFunction) => {
      console.error(err.stack);

      res.status(500).json({
        error: "Something went wrong!",
        ...(process.env.NODE_ENV === "development" && {
          stack: err.stack,
        }),
      });
    };
    ```

    #### Input Validation

    Use validation middleware for request validation:

    ```ts [middleware/validation.ts] noFormat
    import { NextFunction, Request, Response } from "express";
    import { body, validationResult } from "express-validator";

    export const validateUser = [
      body("name").notEmpty().withMessage("Name is required"),
      body("email").isEmail().withMessage("Valid email is required"),

      (req: Request, res: Response, next: NextFunction) => {
        const errors = validationResult(req);
        if (!errors.isEmpty()) {
          return res.status(400).json({ errors: errors.array() });
        }
        next();
      },
    ];
    ```

    #### Performance & Security

    - Use compression middleware for response compression
    - Implement rate limiting with `express-rate-limit`
    - Add request logging and monitoring
    - Use HTTPS in production
    - Implement proper authentication and authorization
    ::::

  ```bash [.env.example] noFormat
  PORT=3000
  DATABASE_URL=mongodb://localhost:27017/myapp
  JWT_SECRET=mysecretkey
  CORS_ORIGIN=http://localhost:3000
  ```
  :::

#code
````mdc [Card Tabs]

::prose-tabs{variant="card"}

::div{label="Installation" icon="lucide:download"}

### Setting Up Express API

First, initialize your project and install the required dependencies:

```bash
mkdir my-express-api && cd my-express-api
npm init -y

# Install core dependencies
npm install express cors helmet morgan

# Install development dependencies
npm install -D nodemon @types/node typescript ts-node
```

Create your basic project structure:

```bash
mkdir src routes middleware controllers
touch src/app.ts src/server.ts
```

Update your `package.json` scripts:

```json [package.json] noFormat
{
  "scripts": {
    "dev": "nodemon src/server.ts",
    "build": "tsc",
    "start": "node dist/server.js",
    "test": "jest"
  }
}
```

::

::div{label="Configuration" icon="lucide:settings"}

### Project Configuration

Create your TypeScript configuration:

```json [tsconfig.json] noFormat
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}
```

Set up your main application file:

```ts [src/app.ts] noFormat
import cors from "cors";
import express from "express";
import helmet from "helmet";
import morgan from "morgan";

const app = express();

// Middleware
app.use(helmet());
app.use(cors());
app.use(morgan("combined"));
app.use(express.json({ limit: "10mb" }));
app.use(express.urlencoded({ extended: true }));

// Health check
app.get("/health", (req, res) => {
  res.status(200).json({
    status: "OK",
    timestamp: new Date().toISOString(),
  });
});

export default app;
```

::

::div{label="Usage Examples" icon="lucide:code"}

### Building API Endpoints

Create your server entry point:

```ts [src/server.ts] noFormat
import app from "./app";
import userRoutes from "./routes/users";

const PORT = process.env.PORT || 3000;

// Routes
app.use("/api/users", userRoutes);

// 404 handler
app.use("*", (req, res) => {
  res.status(404).json({ error: "Route not found" });
});

app.listen(PORT, () => {
  console.log(`🚀 Server running on port ${PORT}`);
});
```

Create your user routes:

```ts [routes/users.ts] noFormat
import { Router } from "express";

import { UserController } from "../controllers/UserController";

const router = Router();
const userController = new UserController();

router.get("/", userController.getAllUsers);
router.get("/:id", userController.getUserById);
router.post("/", userController.createUser);
router.put("/:id", userController.updateUser);
router.delete("/:id", userController.deleteUser);

export default router;
```

Implement your controller:

```ts [controllers/UserController.ts] noFormat
import { Request, Response } from "express";

export class UserController {
  private users = [
    { id: 1, name: "John Doe", email: "john@example.com" },
    { id: 2, name: "Jane Smith", email: "jane@example.com" },
  ];

  getAllUsers = (req: Request, res: Response) => {
    res.json({ data: this.users, count: this.users.length });
  };

  getUserById = (req: Request, res: Response) => {
    const user = this.users.find((u) => u.id === parseInt(req.params.id));
    if (!user) {
      return res.status(404).json({ error: "User not found" });
    }
    res.json({ data: user });
  };

  createUser = (req: Request, res: Response) => {
    const { name, email } = req.body;
    const newUser = {
      id: this.users.length + 1,
      name,
      email,
    };
    this.users.push(newUser);
    res.status(201).json({ data: newUser });
  };
}
```

::

::div{label="Advanced Tips" icon="lucide:lightbulb"}

### Pro Tips & Best Practices

#### Environment Configuration

Use environment variables for configuration:

```ts [src/config/index.ts] noFormat
import dotenv from "dotenv";

dotenv.config();

export const config = {
  port: process.env.PORT || 3000,
  nodeEnv: process.env.NODE_ENV || "development",
  dbUrl: process.env.DATABASE_URL,
  jwtSecret: process.env.JWT_SECRET || "fallback-secret",
  corsOrigin: process.env.CORS_ORIGIN || "*",
};
```

#### Error Handling Middleware

Implement global error handling:

```ts [middleware/errorHandler.ts] noFormat
import { NextFunction, Request, Response } from "express";

export const errorHandler = (err: Error, req: Request, res: Response, next: NextFunction) => {
  console.error(err.stack);

  res.status(500).json({
    error: "Something went wrong!",
    ...(process.env.NODE_ENV === "development" && {
      stack: err.stack,
    }),
  });
};
```

#### Input Validation

Use validation middleware for request validation:

```ts [middleware/validation.ts] noFormat
import { NextFunction, Request, Response } from "express";
import { body, validationResult } from "express-validator";

export const validateUser = [
  body("name").notEmpty().withMessage("Name is required"),
  body("email").isEmail().withMessage("Valid email is required"),

  (req: Request, res: Response, next: NextFunction) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }
    next();
  },
];
```

#### Performance & Security

- Use compression middleware for response compression
- Implement rate limiting with `express-rate-limit`
- Add request logging and monitoring
- Use HTTPS in production
- Implement proper authentication and authorization

::

```bash [.env.example] noFormat
PORT=3000
DATABASE_URL=mongodb://localhost:27017/myapp
JWT_SECRET=mysecretkey
CORS_ORIGIN=http://localhost:3000
```

::

````
::

### Line Style

::show-case
---
prose: true
---
  :::prose-tabs{variant="line"}
    ::::div{label="Button Group"}
    :docs-button-group
    ::::

    ::::div{label="Dialog"}
    :docs-dialog
    ::::

    ::::div{label="Gradient Button"}
    :docs-button-gradient-flow
    ::::

  ```sh [.env.example] noFormat lines
  PORT=3000
  DATABASE_URL=mongodb://localhost:27017/myapp
  JWT_SECRET=mysecretkey
  CORS_ORIGIN=http://localhost:3000
  ```
  :::

#code
````mdc [Line Style Tabs]
::prose-tabs{variant="line"}

::div{label="Button Group"}
  :DocsButtonGroup
::

::div{label="Dialog"}
  :DocsDialog
::

::div{label="Gradient Button"}
  :DocsButtonGradientFlow
::

```sh [.env.example] noFormat lines
PORT=3000
DATABASE_URL=mongodb://localhost:27017/myapp
JWT_SECRET=mysecretkey
CORS_ORIGIN=http://localhost:3000
```

::
````
::

### Combobox

::show-case
---
prose: true
---
  :::prose-tabs{variant="combobox"}
    ::::div{icon="logos:postgresql" label="PostgreSQL"}
    ### PostgreSQL Column Types

    ```ts
    import { integer, pgTable } from "drizzle-orm/pg-core";

    export const table = pgTable("table", {
      int: integer("int"),
    });
    ```
    ::::

    ::::div{icon="logos:mysql-icon" label="MySQL"}
    ### MySQL Column Types

    ```ts
    import { int, mysqlTable } from "drizzle-orm/mysql-core";

    const table = mysqlTable("table", {
      int: int("int"),
    });
    ```
    ::::

    ::::div{icon="logos:sqlite" label="SQLite"}
    ### SQLite Column Types

    ```ts lines
    import { integer, sqliteTable } from "drizzle-orm/sqlite-core";

    const table = sqliteTable("table", {
      id: integer("id"),
    });

    // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
    integer("id", { mode: "number" });
    integer("id", { mode: "boolean" });
    integer("id", { mode: "timestamp_ms" });
    integer("id", { mode: "timestamp" }); // Date
    ```
    ::::

  ```sh [.env.example] noFormat lines
  PORT=3000
  DATABASE_URL=mongodb://localhost:27017/myapp
  JWT_SECRET=mysecretkey
  CORS_ORIGIN=http://localhost:3000
  ```
  :::

#code
````mdc [Combobox Tabs]
::prose-tabs{variant="combobox" }

::div{label="PostgreSQL" icon="logos:postgresql"}

### PostgreSQL Column Types

```ts
import { integer, pgTable } from "drizzle-orm/pg-core";

export const table = pgTable("table", {
  int: integer("int"),
});
```

::

::div{label="MySQL" icon="logos:mysql-icon"}

### MySQL Column Types

```ts
import { int, mysqlTable } from "drizzle-orm/mysql-core";

const table = mysqlTable("table", {
  int: int("int"),
});
```

::
::div{label="SQLite" icon="logos:sqlite"}

### SQLite Column Types

```ts lines
import { integer, sqliteTable } from "drizzle-orm/sqlite-core";

const table = sqliteTable("table", {
  id: integer("id"),
});

// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
integer("id", { mode: "number" });
integer("id", { mode: "boolean" });
integer("id", { mode: "timestamp_ms" });
integer("id", { mode: "timestamp" }); // Date
```
::

```sh [.env.example] noFormat lines
PORT=3000
DATABASE_URL=mongodb://localhost:27017/myapp
JWT_SECRET=mysecretkey
CORS_ORIGIN=http://localhost:3000
```

::
````
::

### Synced Tabs

::show-case
---
prose: true
---
#### Scope 1

  :::prose-tabs{sync="your-scope-name" variant="card"}
    ::::div{label="Card Tab"}
    ### This is a card-style tab
    ::::

  ```ts [Code Tab]
  console.log("Hello World!");
  ```
  :::

  :::prose-tabs{sync="your-scope-name" variant="card"}
    ::::div{label="Card Tab"}
    ### This is a card-style tab
    ::::

    ::::div{icon="lucide:atom" label="Tab 2"}
    This is Tab #2
    ::::

  ```ts [Code Tab]
  console.log("Hello World!");
  ```
  :::

#### Scope 2

  :::prose-tabs{sync="scope2" variant="line"}
    ::::div{label="Card Tab"}
    ### This is a card-style tab
    ::::

    ::::div{icon="lucide:atom" label="Tab 2"}
    This is Tab #2
    ::::

  ```ts [Code Tab]
  console.log("Hello World!");
  ```
  :::

  :::prose-tabs{sync="scope2" variant="separate"}
    ::::div{label="Card Tab"}
    ### This is a card-style tab
    ::::

    ::::div{icon="lucide:atom" label="Tab 2"}
    This is Tab #2
    ::::

  ```ts [Code Tab]
  console.log("Hello World!");
  ```
  :::

#code
````mdc [Synced Tabs]

#### Scope 1

::prose-tabs{variant="card" sync="your-scope-name"}

::div{label="Card Tab"}

### This is a card-style tab

::

```ts [Code Tab]
console.log("Hello World!");
```

::

::prose-tabs{variant="card" sync="your-scope-name"}

::div{label="Card Tab"}

### This is a card-style tab

::

::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::

```ts [Code Tab]
console.log("Hello World!");
```

::

#### Scope 2

::prose-tabs{variant="line" sync="scope2"}

::div{label="Card Tab"}

### This is a card-style tab

::

::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::

```ts [Code Tab]
console.log("Hello World!");
```

::

::prose-tabs{variant="separate" sync="scope2"}

::div{label="Card Tab"}
### This is a card-style tab
::

::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::

```ts [Code Tab]
console.log("Hello World!");
```

````
::


# Typography

## Source code

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

## Usage

This page demonstrates all the typography and prose components available in the UI library. The example below showcases headings, paragraphs, lists, tables, blockquotes, links, emphasis, code blocks, images, and more.

## Complete Example

::show-case
---
prose: true
---
# Building a Modern Web Application

  :::prose-lead
  In this comprehensive guide, we'll explore the essential components and best practices for building a modern web application. From setting up your development environment to deploying to production, we'll cover everything you need to know.
  :::

## Getting Started

Before we dive into the code, let's understand what makes a modern web application. **Modern web apps** are characterized by their *responsiveness*, *performance*, and *user experience*. They leverage cutting-edge technologies to deliver seamless interactions across all devices.

### Prerequisites

Before you begin, ensure you have the following installed on your system:

  :::prose-icon-list{variant="info"}
  Node.js (v18 or higher)

  A modern code editor like VS Code

  Git for version control

  Basic understanding of the command line
  :::

#### Additional Tools

For an optimal development experience, consider installing these optional tools:

  :::prose-icon-list{variant="info"}
    ::::prose-li{icon="lucide:package"}
    Package manager like pnpm or yarn
    ::::

    ::::prose-li{icon="lucide:terminal"}
    Terminal enhancer like Oh My Zsh
    ::::

    ::::prose-li{icon="lucide:chrome"}
    Browser DevTools extensions
    ::::

    ::::prose-li{icon="lucide:git-branch"}
    Git GUI client (optional)
    ::::
  :::

---

## Installation Process

Let's start by setting up our project. Follow these steps carefully:

1. **Create a new project directory**
2. **Initialize your package manager**
3. **Install dependencies**
4. **Configure your build tools**

### Step 1: Project Initialization

Open your terminal and run the following commands:

  :::prose-code-group
  ```bash [npm] icon="devicon:npm" hideHeader
  npm create vite@latest my-app
  cd my-app
  npm install
  ```

  ```bash [pnpm] icon="devicon:pnpm" hideHeader
  pnpm create vite my-app
  cd my-app
  pnpm install
  ```

  ```bash [yarn] icon="devicon:yarn" hideHeader
  yarn create vite my-app
  cd my-app
  yarn install
  ```

  ```bash [bun] icon="devicon:bun" hideHeader
  bun create vite my-app
  cd my-app
  bun install
  ```
  :::

### Step 2: Project Structure

Your project should now have the following structure:

  :::prose-code-tree{expand-all default-value="src/App.vue"}
  ```vue [src/App.vue]
  <template>
    <div>
      <h1>Hello World</h1>
    </div>
  </template>
  ```

  ```ts [src/main.ts]
  import { createApp } from "vue";

  import App from "./App.vue";

  createApp(App).mount("#app");
  ```

  ```json [package.json]
  {
    "name": "my-app",
    "version": "1.0.0",
    "scripts": {
      "dev": "vite",
      "build": "vite build"
    }
  }
  ```

  ```html [index.html]
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>My App</title>
    </head>
    <body>
      <div id="app"></div>
    </body>
  </html>
  ```
  :::

---

## Core Concepts

> The secret to building great applications is understanding the fundamentals and applying them consistently. Focus on writing clean, maintainable code that others can easily understand and extend.

### Component Architecture

Modern frameworks encourage a component-based architecture. Here's what you need to know:

  :::prose-icon-list{variant="default"}
    ::::prose-li{icon="lucide:box"}
    **Encapsulation**: Each component manages its own state and logic
    ::::

    ::::prose-li{icon="lucide:repeat"}
    **Reusability**: Write once, use everywhere with proper abstractions
    ::::

    ::::prose-li{icon="lucide:layers"}
    **Composition**: Build complex UIs from simple, focused components
    ::::

    ::::prose-li{icon="lucide:workflow"}
    **Data Flow**: Understand how data moves through your application
    ::::
  :::

### State Management

As your application grows, managing state becomes crucial:

- **Local State**: Component-specific data using `useState` or `ref`
- **Global State**: Application-wide data using stores or context
- **Server State**: Data fetched from APIs with proper caching
- **URL State**: Navigation and routing parameters

#### State Management Patterns

  :::prose-tabs{variant="card"}
    ::::div{icon="logos:pinia" label="Pinia"}
    ```ts
    import { defineStore } from "pinia";

    export const useUserStore = defineStore("user", {
      state: () => ({
        name: "",
        email: "",
        isAuthenticated: false,
      }),
      actions: {
        login(email: string) {
          this.email = email;
          this.isAuthenticated = true;
        },
        logout() {
          this.email = "";
          this.isAuthenticated = false;
        },
      },
    });
    ```
    ::::

    ::::div{icon="logos:vue" label="Vuex"}
    ```ts
    import { createStore } from "vuex";

    export default createStore({
      state: {
        user: {
          name: "",
          email: "",
          isAuthenticated: false,
        },
      },
      mutations: {
        SET_USER(state, user) {
          state.user = user;
        },
      },
      actions: {
        login({ commit }, userData) {
          commit("SET_USER", userData);
        },
      },
    });
    ```
    ::::

    ::::div{icon="logos:typescript-icon" label="Composition API"}
    ```ts
    import { computed, ref } from "vue";

    export function useAuth() {
      const user = ref(null);
      const isAuthenticated = computed(() => !!user.value);

      const login = async (credentials) => {
        user.value = await loginUser(credentials);
      };

      const logout = () => {
        user.value = null;
      };

      return { user, isAuthenticated, login, logout };
    }
    ```
    ::::
  :::

---

## Performance Optimization

Optimizing your application is critical for user experience. Here are the key areas to focus on:

| Technique          | Impact | Difficulty | Priority     |
| :----------------- | :----- | :--------- | :----------- |
| Code Splitting     | High   | Medium     | Must Have    |
| Lazy Loading       | High   | Easy       | Must Have    |
| Image Optimization | High   | Easy       | Must Have    |
| Caching Strategy   | Medium | Medium     | Should Have  |
| Bundle Analysis    | Medium | Easy       | Should Have  |
| Tree Shaking       | Low    | Auto       | Nice to Have |

### Common Pitfalls

  :::prose-icon-list{variant="warning"}
    ::::prose-li{icon="lucide:alert-triangle"}
    **Over-optimization**: Don't optimize prematurely. Measure first, then optimize
    ::::

    ::::prose-li{icon="lucide:zap-off"}
    **Ignoring Bundle Size**: Large bundles slow down initial load time
    ::::

    ::::prose-li{icon="lucide:refresh-cw"}
    **Too Many Re-renders**: Unnecessary re-renders waste CPU cycles
    ::::

    ::::prose-li{icon="lucide:database"}
    **Poor Data Fetching**: Fetch data efficiently and cache when possible
    ::::
  :::

---

## Styling Approaches

There are several ways to style your components:

1. **Traditional CSS**: Separate CSS files with class-based styling
2. **CSS Modules**: Scoped styles that won't leak globally
3. **CSS-in-JS**: Write styles in JavaScript with dynamic values
4. **Utility-First**: Use frameworks like Tailwind CSS
5. **Component Libraries**: Pre-styled components you can customize

### Example with Tailwind CSS

  :::prose-tabs{variant="line"}
    ::::div{label="Component"}
    ```vue
    <template>
      <button
        class="rounded-lg bg-primary px-4 py-2 font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:opacity-50"
      >
        Click me
      </button>
    </template>
    ```
    ::::

    ::::div{label="With Variants"}
    ```vue
    <script setup lang="ts">
      import { tv } from "tailwind-variants";

      const button = tv({
        base: "rounded-lg px-4 py-2 font-semibold transition-colors",
        variants: {
          variant: {
            primary: "bg-primary text-primary-foreground hover:bg-primary/90",
            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90",
            outline: "border-2 border-primary text-primary hover:bg-primary/10",
          },
          size: {
            sm: "px-3 py-1.5 text-sm",
            md: "px-4 py-2",
            lg: "px-6 py-3 text-lg",
          },
        },
        defaultVariants: {
          variant: "primary",
          size: "md",
        },
      });
    </script>

    <template>
      <button :class="button({ variant, size })">Click me</button>
    </template>
    ```
    ::::
  :::

---

## Testing Strategy

  :::prose-callout{variant="success"}
  A well-tested application is easier to maintain and refactor.
  :::

Your testing strategy should include multiple layers:

  :::prose-icon-list
    ::::prose-li{icon="lucide:check-circle" variant="success"}
    **Unit Tests**: Test individual functions and components in isolation
    ::::

    ::::prose-li{icon="lucide:puzzle" variant="success"}
    **Integration Tests**: Verify that different parts work together correctly
    ::::

    ::::prose-li{icon="lucide:monitor" variant="success"}
    **E2E Tests**: Test complete user workflows from start to finish
    ::::

    ::::prose-li{icon="lucide:eye" variant="info"}
    **Visual Regression**: Catch unintended UI changes automatically
    ::::
  :::

### Testing Tools Comparison

| Tool            | Type        | Learning Curve | Best For              |
| :-------------- | :---------- | :------------- | :-------------------- |
| Vitest          | Unit        | Easy           | Component testing     |
| Jest            | Unit        | Easy           | General testing       |
| Cypress         | E2E         | Medium         | User flows            |
| Playwright      | E2E         | Medium         | Cross-browser testing |
| Testing Library | Integration | Easy           | React/Vue components  |

---

## Deployment

Once your application is ready, it's time to deploy. Here are common deployment options:

### Cloud Platforms

  :::prose-icon-list{variant="info"}
    ::::prose-li{icon="lucide:cloud"}
    **Vercel**: Zero-config deployments for modern frameworks
    ::::

    ::::prose-li{icon="lucide:server"}
    **Netlify**: Continuous deployment with powerful build plugins
    ::::

    ::::prose-li{icon="lucide:box"}
    **AWS**: Scalable infrastructure with full control
    ::::

    ::::prose-li{icon="lucide:globe"}
    **Cloudflare Pages**: Edge-first platform with great performance
    ::::
  :::

### Deployment Checklist

Before deploying to production, ensure you've completed these tasks:

- Run all tests and ensure they pass
- Optimize images and assets
- Configure environment variables
- Set up error monitoring (e.g., Sentry)
- Configure analytics
- Set up CI/CD pipeline
- Review security headers
- Test in production-like environment

---

## Best Practices

> "Code is like humor. When you have to explain it, it's bad." - Cory House

Follow these principles to write better code:

### Code Quality

1. **Keep it Simple**: Write code that's easy to understand
2. **Be Consistent**: Follow established patterns and conventions
3. **Document Wisely**: Write comments that explain *why*, not *what*
4. **Refactor Regularly**: Clean up as you go, don't let technical debt accumulate

### Security Considerations

  :::prose-icon-list{variant="error"}
    ::::prose-li{icon="lucide:shield-alert"}
    Never expose API keys or secrets in client-side code
    ::::

    ::::prose-li{icon="lucide:lock"}
    Always validate and sanitize user input
    ::::

    ::::prose-li{icon="lucide:key"}
    Use HTTPS everywhere, especially for authentication
    ::::

    ::::prose-li{icon="lucide:user-check"}
    Implement proper authentication and authorization
    ::::
  :::

---

## Additional Resources

Want to learn more? Check out these resources:

- Official framework documentation
- Community forums and Discord servers
- YouTube tutorials and courses
- GitHub repositories with example projects

  :::prose-callout{icon="lucide:book-open" title="Further Reading"}
  Explore the [official documentation](https://uithing.com/#) for detailed API references and advanced techniques.
  :::

---

## Conclusion

Building modern web applications requires understanding many concepts and tools. *Start small*, **iterate often**, and don't be afraid to experiment. The web platform is constantly evolving, and there's always something new to learn.

**Remember:** The goal is not perfection, but continuous improvement. Focus on delivering value to your users while writing maintainable code that your team can work with effectively.

Happy coding! :prose-smart-icon{.inline-block name="lucide:sparkles"}

#code
````mdc
# Building a Modern Web Application

::prose-lead
In this comprehensive guide, we'll explore the essential components and best practices for building a modern web application. From setting up your development environment to deploying to production, we'll cover everything you need to know.
::

## Getting Started

Before we dive into the code, let's understand what makes a modern web application. **Modern web apps** are characterized by their _responsiveness_, _performance_, and _user experience_. They leverage cutting-edge technologies to deliver seamless interactions across all devices.

### Prerequisites

Before you begin, ensure you have the following installed on your system:

::prose-icon-list{variant="info"}

Node.js (v18 or higher)

A modern code editor like VS Code

Git for version control

Basic understanding of the command line

::

#### Additional Tools

For an optimal development experience, consider installing these optional tools:

::prose-icon-list{variant="info"}
::prose-li{icon="lucide:package"}
Package manager like pnpm or yarn
::
::prose-li{icon="lucide:terminal"}
Terminal enhancer like Oh My Zsh
::
::prose-li{icon="lucide:chrome"}
Browser DevTools extensions
::
::prose-li{icon="lucide:git-branch"}
Git GUI client (optional)
::
::

---

## Installation Process

Let's start by setting up our project. Follow these steps carefully:

1. **Create a new project directory**
2. **Initialize your package manager**
3. **Install dependencies**
4. **Configure your build tools**

### Step 1: Project Initialization

Open your terminal and run the following commands:

::prose-code-group

```bash [npm] icon="devicon:npm" hideHeader
npm create vite@latest my-app
cd my-app
npm install
```

```bash [pnpm] icon="devicon:pnpm" hideHeader
pnpm create vite my-app
cd my-app
pnpm install
```

```bash [yarn] icon="devicon:yarn" hideHeader
yarn create vite my-app
cd my-app
yarn install
```

```bash [bun] icon="devicon:bun" hideHeader
bun create vite my-app
cd my-app
bun install
```

::

### Step 2: Project Structure

Your project should now have the following structure:

::prose-code-tree{defaultValue="src/App.vue" expandAll}

```vue [src/App.vue]
<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>
```

```ts [src/main.ts]
import { createApp } from "vue";

import App from "./App.vue";

createApp(App).mount("#app");
```

```json [package.json]
{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}
```

```html [index.html]
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
```

::

---

## Core Concepts

> The secret to building great applications is understanding the fundamentals and applying them consistently. Focus on writing clean, maintainable code that others can easily understand and extend.

### Component Architecture

Modern frameworks encourage a component-based architecture. Here's what you need to know:

::prose-icon-list{variant="default"}
::prose-li{icon="lucide:box"}
**Encapsulation**: Each component manages its own state and logic
::
::prose-li{icon="lucide:repeat"}
**Reusability**: Write once, use everywhere with proper abstractions
::
::prose-li{icon="lucide:layers"}
**Composition**: Build complex UIs from simple, focused components
::
::prose-li{icon="lucide:workflow"}
**Data Flow**: Understand how data moves through your application
::
::

### State Management

As your application grows, managing state becomes crucial:

- **Local State**: Component-specific data using `useState` or `ref`
- **Global State**: Application-wide data using stores or context
- **Server State**: Data fetched from APIs with proper caching
- **URL State**: Navigation and routing parameters

#### State Management Patterns

::prose-tabs{variant="card"}
::div{label="Pinia" icon="logos:pinia"}

```ts
import { defineStore } from "pinia";

export const useUserStore = defineStore("user", {
  state: () => ({
    name: "",
    email: "",
    isAuthenticated: false,
  }),
  actions: {
    login(email: string) {
      this.email = email;
      this.isAuthenticated = true;
    },
    logout() {
      this.email = "";
      this.isAuthenticated = false;
    },
  },
});
```

::

::div{label="Vuex" icon="logos:vue"}

```ts
import { createStore } from "vuex";

export default createStore({
  state: {
    user: {
      name: "",
      email: "",
      isAuthenticated: false,
    },
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user;
    },
  },
  actions: {
    login({ commit }, userData) {
      commit("SET_USER", userData);
    },
  },
});
```

::

::div{label="Composition API" icon="logos:typescript-icon"}

```ts
import { computed, ref } from "vue";

export function useAuth() {
  const user = ref(null);
  const isAuthenticated = computed(() => !!user.value);

  const login = async (credentials) => {
    user.value = await loginUser(credentials);
  };

  const logout = () => {
    user.value = null;
  };

  return { user, isAuthenticated, login, logout };
}
```

::
::

---

## Performance Optimization

Optimizing your application is critical for user experience. Here are the key areas to focus on:

| Technique          | Impact | Difficulty | Priority     |
| :----------------- | :----- | :--------- | :----------- |
| Code Splitting     | High   | Medium     | Must Have    |
| Lazy Loading       | High   | Easy       | Must Have    |
| Image Optimization | High   | Easy       | Must Have    |
| Caching Strategy   | Medium | Medium     | Should Have  |
| Bundle Analysis    | Medium | Easy       | Should Have  |
| Tree Shaking       | Low    | Auto       | Nice to Have |

### Common Pitfalls

::prose-icon-list{variant="warning"}
::prose-li{icon="lucide:alert-triangle"}
**Over-optimization**: Don't optimize prematurely. Measure first, then optimize
::
::prose-li{icon="lucide:zap-off"}
**Ignoring Bundle Size**: Large bundles slow down initial load time
::
::prose-li{icon="lucide:refresh-cw"}
**Too Many Re-renders**: Unnecessary re-renders waste CPU cycles
::
::prose-li{icon="lucide:database"}
**Poor Data Fetching**: Fetch data efficiently and cache when possible
::
::

---

## Styling Approaches

There are several ways to style your components:

1. **Traditional CSS**: Separate CSS files with class-based styling
2. **CSS Modules**: Scoped styles that won't leak globally
3. **CSS-in-JS**: Write styles in JavaScript with dynamic values
4. **Utility-First**: Use frameworks like Tailwind CSS
5. **Component Libraries**: Pre-styled components you can customize

### Example with Tailwind CSS

::prose-tabs{variant="line"}
::div{label="Component"}

```vue
<template>
  <button
    class="rounded-lg bg-primary px-4 py-2 font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:opacity-50"
  >
    Click me
  </button>
</template>
```

::

::div{label="With Variants"}

```vue
<script setup lang="ts">
  import { tv } from "tailwind-variants";

  const button = tv({
    base: "rounded-lg px-4 py-2 font-semibold transition-colors",
    variants: {
      variant: {
        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90",
        outline: "border-2 border-primary text-primary hover:bg-primary/10",
      },
      size: {
        sm: "px-3 py-1.5 text-sm",
        md: "px-4 py-2",
        lg: "px-6 py-3 text-lg",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "md",
    },
  });
</script>

<template>
  <button :class="button({ variant, size })">Click me</button>
</template>
```

::
::

---

## Testing Strategy

::prose-callout{variant="success"}
A well-tested application is easier to maintain and refactor.
::

Your testing strategy should include multiple layers:

::prose-icon-list
::prose-li{icon="lucide:check-circle" variant="success"}
**Unit Tests**: Test individual functions and components in isolation
::
::prose-li{icon="lucide:puzzle" variant="success"}
**Integration Tests**: Verify that different parts work together correctly
::
::prose-li{icon="lucide:monitor" variant="success"}
**E2E Tests**: Test complete user workflows from start to finish
::
::prose-li{icon="lucide:eye" variant="info"}
**Visual Regression**: Catch unintended UI changes automatically
::
::

### Testing Tools Comparison

| Tool            | Type        | Learning Curve | Best For              |
| :-------------- | :---------- | :------------- | :-------------------- |
| Vitest          | Unit        | Easy           | Component testing     |
| Jest            | Unit        | Easy           | General testing       |
| Cypress         | E2E         | Medium         | User flows            |
| Playwright      | E2E         | Medium         | Cross-browser testing |
| Testing Library | Integration | Easy           | React/Vue components  |

---

## Deployment

Once your application is ready, it's time to deploy. Here are common deployment options:

### Cloud Platforms

::prose-icon-list{variant="info"}
::prose-li{icon="lucide:cloud"}
**Vercel**: Zero-config deployments for modern frameworks
::
::prose-li{icon="lucide:server"}
**Netlify**: Continuous deployment with powerful build plugins
::
::prose-li{icon="lucide:box"}
**AWS**: Scalable infrastructure with full control
::
::prose-li{icon="lucide:globe"}
**Cloudflare Pages**: Edge-first platform with great performance
::
::

### Deployment Checklist

Before deploying to production, ensure you've completed these tasks:

- [x] Run all tests and ensure they pass
- [x] Optimize images and assets
- [x] Configure environment variables
- [x] Set up error monitoring (e.g., Sentry)
- [ ] Configure analytics
- [ ] Set up CI/CD pipeline
- [ ] Review security headers
- [ ] Test in production-like environment

---

## Best Practices

> "Code is like humor. When you have to explain it, it's bad." - Cory House

Follow these principles to write better code:

### Code Quality

1. **Keep it Simple**: Write code that's easy to understand
2. **Be Consistent**: Follow established patterns and conventions
3. **Document Wisely**: Write comments that explain _why_, not _what_
4. **Refactor Regularly**: Clean up as you go, don't let technical debt accumulate

### Security Considerations

::prose-icon-list{variant="error"}
::prose-li{icon="lucide:shield-alert"}
Never expose API keys or secrets in client-side code
::
::prose-li{icon="lucide:lock"}
Always validate and sanitize user input
::
::prose-li{icon="lucide:key"}
Use HTTPS everywhere, especially for authentication
::
::prose-li{icon="lucide:user-check"}
Implement proper authentication and authorization
::
::

---

## Additional Resources

Want to learn more? Check out these resources:

- Official framework documentation
- Community forums and Discord servers
- YouTube tutorials and courses
- GitHub repositories with example projects

::prose-callout{icon="lucide:book-open" title="Further Reading"}
Explore the [official documentation](#) for detailed API references and advanced techniques.
::

---

## Conclusion

Building modern web applications requires understanding many concepts and tools. _Start small_, **iterate often**, and don't be afraid to experiment. The web platform is constantly evolving, and there's always something new to learn.

**Remember:** The goal is not perfection, but continuous improvement. Focus on delivering value to your users while writing maintainable code that your team can work with effectively.

Happy coding! :prose-smart-icon{name="lucide:sparkles" class="inline-block"}

````
::


## 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)