chore(release): 2.1.0

Resolves #172

.eslintrc.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  root: true,
+  extends: ['@nuxt/eslint-config'],
+  rules: {
+    'vue/multi-word-component-names': 0,
+    'vue/max-attributes-per-line': ['error', {
+      singleline: {
+        max: 5
+      }
+    }]
+  }
+}

.eslintrc.js

@@ -1,9 +0,0 @@
-module.exports = {
-  root: true,
-  extends: [
-    '@nuxtjs/eslint-config-typescript'
-  ],
-  rules: {
-    'vue/multi-word-component-names': 0
-  }
-}

.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,31 @@
+---
+name: Bug report
+about: Report a bug report to help us improve the module.
+title: ''
+labels: 'bug'
+assignees: ''
+
+---
+
+<!-- **IMPORTANT!**
+Before reporting a bug, please make sure that you have read through our documentation and you think your problem is indeed an issue related to our module. -->
+
+### Version
+@nuxthq/ui: <!-- ex: v2.0.0 -->
+nuxt: <!-- ex: v3.5.0 -->
+
+### Reproduction Link
+
+<!--
+A minimal test case based on one of:
+- a GitHub repository that can reproduce the bug
+- https://stackblitz.com/edit/nuxtlabs-ui
+-->
+
+### Steps to reproduce
+
+
+### What is Expected?
+
+
+### What is actually happening?

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Nuxt Community Discord
+    url: https://discord.nuxtjs.org/
+    about: Consider asking questions about the module here.

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea or enhancement for the module.
+title: ''
+labels: 'enhancement'
+assignees: ''
+
+---
+
+### Is your feature request related to a problem? Please describe.
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
+
+### Describe the solution you'd like
+<!-- A clear and concise description of what you want to happen. -->
+
+### Describe alternatives you've considered
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+### Additional context
+<!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,16 @@
+---
+name: Question
+about: Ask a question about the module.
+title: ''
+labels: 'question'
+assignees: ''
+
+---
+
+<!-- **IMPORTANT!**
+Please make sure to look for an answer to your question in our documentation and the documentation before asking a question here.
+
+If you have a general question regarding the module use Discord `modules` channel. Thanks!
+
+Nuxt Discord: https://discord.nuxtjs.org/
+-->

.github/workflows/ci-dev.yml

@@ -15,10 +15,10 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest] # macos-latest, windows-latest
-        node: [16]
+        node: [18]
 
     steps:
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
 
@@ -29,7 +29,7 @@ jobs:
           fetch-depth: 0
 
       - name: Cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: node_modules
           key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}

.github/workflows/ci.yml

@@ -15,10 +15,10 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest] # macos-latest, windows-latest
-        node: [16]
+        node: [18]
 
     steps:
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
 
@@ -29,7 +29,7 @@ jobs:
           fetch-depth: 0
 
       - name: Cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: node_modules
           key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}

CHANGELOG.md

@@ -2,6 +2,201 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.1.0](https://github.com/nuxtlabs/ui/compare/v2.0.4...v2.1.0) (2023-05-19)
+
+
+### Bug Fixes
+
+* **app.config:** trailing space ([703fdef](https://github.com/nuxtlabs/ui/commit/703fdef9bd4c0e26b0e38a13c30aff5b1d9d19aa))
+* **ButtonGroup/AvatarGroup:** allow `v-for` ([#173](https://github.com/nuxtlabs/ui/issues/173)) ([3fa10aa](https://github.com/nuxtlabs/ui/commit/3fa10aa4ebf9ff7d443f8f2564dcaf9b63ce1fa8))
+* **DocsPageHeader:** github component link ([#182](https://github.com/nuxtlabs/ui/issues/182)) ([7f00ec6](https://github.com/nuxtlabs/ui/commit/7f00ec6c3d059e5e78172a8e4bab905a7f02fa63))
+* **Input:** expose ref ([2ded24b](https://github.com/nuxtlabs/ui/commit/2ded24bec90a5ea6665ab6895ced15d9dd49e8ef))
+* **module:** add `.mjs` extension to tailwind `content` when builded ([246449b](https://github.com/nuxtlabs/ui/commit/246449b32850db805c1133151b8449687e7c14be)), closes [#172](https://github.com/nuxtlabs/ui/issues/172)
+* **Textarea:** expose ref ([ea740bf](https://github.com/nuxtlabs/ui/commit/ea740bf10a6090545ed58ff26322ee3a679b5452))
+
+### [2.0.4](https://github.com/nuxtlabs/ui/compare/v2.0.3...v2.0.4) (2023-05-15)
+
+
+### Bug Fixes
+
+* **SelectMenu:** add missing `inline-flex` on wrapper ([e8b4654](https://github.com/nuxtlabs/ui/commit/e8b46540d8767c7a63c0ff8e28263615626916e7))
+
+### [2.0.3](https://github.com/nuxtlabs/ui/compare/v2.0.2...v2.0.3) (2023-05-15)
+
+### [2.0.2](https://github.com/nuxtlabs/ui/compare/v2.0.1...v2.0.2) (2023-05-11)
+
+
+### Bug Fixes
+
+* **LinkCustom:** handle `button` when no `to` prop ([c7c78cb](https://github.com/nuxtlabs/ui/commit/c7c78cb47b00963c8a9ea0c0599fbc7e128cff66))
+
+### [2.0.1](https://github.com/nuxtlabs/ui/compare/v2.0.0...v2.0.1) (2023-05-11)
+
+
+### Bug Fixes
+
+* **app.config:** remove old `u-` classes ([939efba](https://github.com/nuxtlabs/ui/commit/939efba47ceb660e5448a3ea42f2acd71b9837ee))
+* **Avatar:** `gray` missing for `chipColor` ([fd4c80a](https://github.com/nuxtlabs/ui/commit/fd4c80acd4c70c7d378ebf780cd843115d8f434d))
+* **Avatar:** shrink chip ring ([ebf5fd6](https://github.com/nuxtlabs/ui/commit/ebf5fd6aeb2a5363e80457cf8245fbab5fbc17ca))
+* **Button:** `variant` validator takes color into account ([d1d8ab3](https://github.com/nuxtlabs/ui/commit/d1d8ab3c647d50f37832d1ae531550944d5aa8e3))
+* **colors:** missing `useNuxtApp` import ([76a0d61](https://github.com/nuxtlabs/ui/commit/76a0d61a0f7b3936b0eceff16e17bc6540fb946c))
+* **CommandPalette:** expose input ref to template ([192bf4c](https://github.com/nuxtlabs/ui/commit/192bf4c375293b16d952b94cc098a0260f47996a))
+* **CommandPalette:** put back searchable on `v-show` to input ref always exists ([aacb7e9](https://github.com/nuxtlabs/ui/commit/aacb7e98412d2973c6fc61d9cb3b6da9bd433eb0))
+* **CommandPalette:** wrong type usage ([4665563](https://github.com/nuxtlabs/ui/commit/4665563e6f9c4054cb1c859991369fe2cc844047))
+* **docs:** sticky search button `z-index` ([f48ead6](https://github.com/nuxtlabs/ui/commit/f48ead6faf6fd14deeff84ca7b25d6bb7fae6f12))
+* **Icon:** missing import ([cd430a4](https://github.com/nuxtlabs/ui/commit/cd430a4cad5143c5bd45c003086091f769e4f015))
+* **module:** remove `.ts` ext from app.config ([a076cae](https://github.com/nuxtlabs/ui/commit/a076cae4bfa387e1fd9800741b10702896c21ad2))
+* **Notifications:** missing `computed` from vue ([9ce43ac](https://github.com/nuxtlabs/ui/commit/9ce43ac68bcef3fb7fff8a9e317ad6d4a5ac2cb9))
+* prefix imported components ([0c69385](https://github.com/nuxtlabs/ui/commit/0c69385771ff1815cdcbff812962056da381a541))
+* put back app.config for hmr ([626409e](https://github.com/nuxtlabs/ui/commit/626409e1014ddcacaf6ee155830bd9862b335058))
+* remove augmentation of app ([#152](https://github.com/nuxtlabs/ui/issues/152)) ([f5c0030](https://github.com/nuxtlabs/ui/commit/f5c0030a198579e5929fd517b80e2e20c9bac769))
+* revert back to runtime app for hmr ([#153](https://github.com/nuxtlabs/ui/issues/153)) ([97b1a85](https://github.com/nuxtlabs/ui/commit/97b1a85ea12499289866a6baf15661c1f15279ce))
+* **Select:** move types from template ([fa05653](https://github.com/nuxtlabs/ui/commit/fa05653f23c4e9b1732eb4b9cd5e034f9bdca272))
+* **Toggle:** wrong `icon-off` positioning ([d5471f4](https://github.com/nuxtlabs/ui/commit/d5471f4d371b72df0ca5fac36e698066aca3864e))
+* update to fix type issues ([#151](https://github.com/nuxtlabs/ui/issues/151)) ([11e00a1](https://github.com/nuxtlabs/ui/commit/11e00a10e4781881e293e5fcd382331008c15346))
+* **VerticalNavigation:** improve focus ([034a95d](https://github.com/nuxtlabs/ui/commit/034a95d3c92eee9a54bd266e02d7446f7792d051))
+* **VerticalNavigation:** improve stacking context ([28ee917](https://github.com/nuxtlabs/ui/commit/28ee9179f5fbc006a47719ee632adf54f0e0ec4d))
+
+## [2.0.0](https://github.com/nuxtlabs/ui/compare/v1.2.11...v2.0.0) (2023-05-04)
+
+
+### Features
+
+* rewrite to use app config and rework docs ([#143](https://github.com/nuxtlabs/ui/issues/143)) ([6da0db0](https://github.com/nuxtlabs/ui/commit/6da0db0113733df1a03220cb528bea862b553f37))
+
+### [1.2.11](https://github.com/nuxtlabs/ui/compare/v1.2.10...v1.2.11) (2023-05-04)
+
+
+### Bug Fixes
+
+* **defineShortcuts:** use `useEventListener` ([#150](https://github.com/nuxtlabs/ui/issues/150)) ([59f62d3](https://github.com/nuxtlabs/ui/commit/59f62d322f07919d16a8d35340c3aa038cd09520))
+
+### [1.2.10](https://github.com/nuxtlabs/ui/compare/v1.2.9...v1.2.10) (2023-04-07)
+
+
+### Bug Fixes
+
+* **CommandPalette:** typecheck ([cfce152](https://github.com/nuxtlabs/ui/commit/cfce1524b209212d9ce635b61376ff0d6bc3601b))
+
+### [1.2.9](https://github.com/nuxtlabs/ui/compare/v1.2.8...v1.2.9) (2023-04-07)
+
+### [1.2.8](https://github.com/nuxtlabs/ui/compare/v1.2.7...v1.2.8) (2023-04-04)
+
+### [1.2.7](https://github.com/nuxtlabs/ui/compare/v1.2.6...v1.2.7) (2023-04-04)
+
+
+### Bug Fixes
+
+* **useTimer:** remaining after pause ([aafdfdb](https://github.com/nuxtlabs/ui/commit/aafdfdb59c365c542f93703dd52b4306ac935040))
+
+### [1.2.6](https://github.com/nuxtlabs/ui/compare/v1.2.5...v1.2.6) (2023-04-04)
+
+### [1.2.5](https://github.com/nuxtlabs/ui/compare/v1.2.4...v1.2.5) (2023-04-04)
+
+### [1.2.4](https://github.com/nuxtlabs/ui/compare/v1.2.3...v1.2.4) (2023-04-04)
+
+### [1.2.3](https://github.com/nuxtlabs/ui/compare/v1.2.2...v1.2.3) (2023-03-22)
+
+### [1.2.2](https://github.com/nuxtlabs/ui/compare/v1.2.1...v1.2.2) (2023-03-20)
+
+### [1.2.1](https://github.com/nuxtlabs/ui/compare/v1.2.0...v1.2.1) (2023-03-20)
+
+
+### Bug Fixes
+
+* **defineShortcuts:** shift + alphabetic character handling ([#140](https://github.com/nuxtlabs/ui/issues/140)) ([377b418](https://github.com/nuxtlabs/ui/commit/377b4189ca85603db0b7f040949260ba7494c46f))
+
+## [1.2.0](https://github.com/nuxtlabs/ui/compare/v1.1.4...v1.2.0) (2023-03-09)
+
+
+### Bug Fixes
+
+* **defineShortcuts:** add missing import ([37b2271](https://github.com/nuxtlabs/ui/commit/37b2271bf04adfe6bee4d984fa12452b2168318c))
+* **Tooltip:** `shortcutsClass` prop type ([fa49d52](https://github.com/nuxtlabs/ui/commit/fa49d52f17752eaa06f997a9b6e8df8adcab983f))
+
+### [1.1.4](https://github.com/nuxtlabs/ui/compare/v1.1.3...v1.1.4) (2023-03-02)
+
+### [1.1.3](https://github.com/nuxtlabs/ui/compare/v1.1.2...v1.1.3) (2023-03-02)
+
+### [1.1.2](https://github.com/nuxtlabs/ui/compare/v1.1.1...v1.1.2) (2023-02-28)
+
+
+### Bug Fixes
+
+* **Tooltip:** truncate ([d08e64d](https://github.com/nuxtlabs/ui/commit/d08e64d53fa439f34d51909bcb6812f1bcd95d83))
+* **VerticalNavigation:** links `to` type ([7970aef](https://github.com/nuxtlabs/ui/commit/7970aefcb032ce01fcb11e9285fa61ce87f59519))
+
+### [1.1.1](https://github.com/nuxtlabs/ui/compare/v1.1.0...v1.1.1) (2023-02-20)
+
+## [1.1.0](https://github.com/nuxtlabs/ui/compare/v1.0.0...v1.1.0) (2023-02-17)
+
+
+### Features
+
+* **CommandPalette:** handle async search for specific groups ([efa9674](https://github.com/nuxtlabs/ui/commit/efa9674815ab4de756079690da0a381c3703d564))
+
+
+### Bug Fixes
+
+* **CommandPalette:** types ([4702a4f](https://github.com/nuxtlabs/ui/commit/4702a4f10379201c167cc52099519778756a5780))
+
+## [1.0.0](https://github.com/nuxtlabs/ui/compare/v0.2.1...v1.0.0) (2023-02-17)
+
+
+### Features
+
+* migrate to `@egoist/tailwindcss-icons` ([ee33522](https://github.com/nuxtlabs/ui/commit/ee3352278cf03fdd12f2a4663b403052de3f089a))
+
+### [0.2.1](https://github.com/nuxtlabs/ui/compare/v0.2.0...v0.2.1) (2023-02-16)
+
+## [0.2.0](https://github.com/nuxtlabs/ui/compare/v0.1.39...v0.2.0) (2023-02-16)
+
+### [0.1.39](https://github.com/nuxtlabs/ui/compare/v0.1.38...v0.1.39) (2023-02-16)
+
+
+### Features
+
+* use `nuxt-icon` ([f5d068b](https://github.com/nuxtlabs/ui/commit/f5d068be9d5778b3d4fcdc11d06d9d765e62075d))
+
+
+### Bug Fixes
+
+* **SelectCustom:** handle search on string arrays ([6018f00](https://github.com/nuxtlabs/ui/commit/6018f009a86cca196d15e4e72dd5eb41aaeb4bad))
+
+### [0.1.38](https://github.com/nuxtlabs/ui/compare/v0.1.37...v0.1.38) (2023-02-03)
+
+### [0.1.37](https://github.com/nuxtlabs/ui/compare/v0.1.36...v0.1.37) (2023-02-03)
+
+
+### Bug Fixes
+
+* **CommandPalette:** improve accessibility ([#129](https://github.com/nuxtlabs/ui/issues/129)) ([bea47b5](https://github.com/nuxtlabs/ui/commit/bea47b5906d1bc665717830d6dc2f3ff2a0374f3))
+
+### [0.1.36](https://github.com/nuxtlabs/ui/compare/v0.1.35...v0.1.36) (2023-02-02)
+
+
+### Bug Fixes
+
+* **CommandPalette:** put back cursor on top only when query changes ([5bf5a31](https://github.com/nuxtlabs/ui/commit/5bf5a314c414b96c656190719bd56acca10676f5))
+
+### [0.1.35](https://github.com/nuxtlabs/ui/compare/v0.1.34...v0.1.35) (2023-02-01)
+
+
+### Bug Fixes
+
+* **AvatarGroup:** preset size prop ([c90cd9c](https://github.com/nuxtlabs/ui/commit/c90cd9c4f37bc3ce5f6e13f3279dc2c574c76524))
+* **Dropdown:** lint ([1c4d46e](https://github.com/nuxtlabs/ui/commit/1c4d46e056adf84d69462a12af8ac29f93cbf87a))
+* **Dropdown:** prevent panel display when no items ([a764486](https://github.com/nuxtlabs/ui/commit/a7644860b8c22a0163e01ca2c0eab2c48b09745a))
+
+### [0.1.34](https://github.com/nuxtlabs/ui/compare/v0.1.33...v0.1.34) (2023-01-27)
+
+
+### Bug Fixes
+
+* **CommandPalette:** typecheck ([27717a5](https://github.com/nuxtlabs/ui/commit/27717a55b3e5120f32fba2bcea30f5a91262f1c5))
+
+### [0.1.33](https://github.com/nuxtlabs/ui/compare/v0.1.32...v0.1.33) (2023-01-27)
+
 ### [0.1.32](https://github.com/nuxtlabs/ui/compare/v0.1.31...v0.1.32) (2023-01-23)
 
 ### [0.1.31](https://github.com/nuxtlabs/ui/compare/v0.1.30...v0.1.31) (2023-01-17)

LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2023 NuxtLabs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,6 +1,22 @@
-# @nuxthq/ui
+# NuxtLabs UI
 
-Components library as a Nuxt module using [TailwindCSS](https://tailwindcss.com).
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+This module has been developed by [NuxtLabs](https://nuxtlabs.com/) for [Volta](https://volta.net) and [Nuxt Studio](https://nuxt.studio/). It provides everything related to UI when building a Nuxt application, including components, icons, colors, dark mode and also keyboard shortcuts.
+
+[![social preview](https://repository-images.githubusercontent.com/428329515/5a18c5dd-bb58-4874-b6ef-1c44e4884344)](https://ui.nuxtlabs.com)
+
+## Features
+
+- Built with [Headless UI](https://headlessui.dev/) and [Tailwind CSS](https://tailwindcss.com/)
+- HMR support through Nuxt App Config
+- Dark mode support
+- Keyboard shortcuts
+- Bundled icons
+- Fully typed
 
 ## Installation
 
@@ -8,13 +24,11 @@ Components library as a Nuxt module using [TailwindCSS](https://tailwindcss.com)
 yarn add --dev @nuxthq/ui
 ```
 
-Then, register the module in your `nuxt.config.js`:
+Then, register the module in your `nuxt.config.ts`:
 
 ```js
-import { defineNuxtConfig } from 'nuxt'
-
 export default defineNuxtConfig({
-  buildModules: [
+  modules: [
     '@nuxthq/ui'
   ]
 })
@@ -30,42 +44,33 @@ If you want latest updates, please use `@nuxthq/ui-edge` in your `package.json`:
 }
 ```
 
-## Options
+## Documentation
 
-- `primary`
+Visit http://ui.nuxtlabs.com to view the documentation.
 
-Define the primary variant. Defaults to `indigo`. You can specify your own object of colors like here:
+## Credits
 
-**Example:**
+- [nuxt/nuxt](https://github.com/nuxt/nuxt)
+- [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
+- [nuxt-modules/tailwindcss](https://github.com/nuxt-modules/tailwindcss)
+- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
+- [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui)
+- [vueuse/vueuse](https://github.com/vueuse/vueuse)
+- [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons)
 
-```js
-import { defineNuxtConfig } from 'nuxt'
+## License
 
-export default defineNuxtConfig({
-  buildModules: [
-    '@nuxthq/ui'
-  ],
-  ui: {
-    primary: 'blue'
-  }
-})
-```
+Licensed under the [MIT license](https://github.com/nuxtlabs/ui/blob/dev/LICENSE.md).
 
-- `prefix`
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/@nuxthq/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/@nuxthq/ui
 
-Define the prefix of the imported components. Defaults to `u`.
+[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxthq/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/@nuxthq/ui
 
-**Example:**
+[license-src]: https://img.shields.io/github/license/nuxtlabs/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://github.com/nuxtlabs/ui/blob/main/LICENSE
 
-```js
-import { defineNuxtConfig } from 'nuxt'
-
-export default defineNuxtConfig({
-  buildModules: [
-    '@nuxthq/ui'
-  ],
-  ui: {
-    prefix: 'tw'
-  }
-})
-```
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

build.config.ts

@@ -1,12 +0,0 @@
-import fs from 'node:fs/promises'
-import { join, resolve } from 'node:path'
-import { defineBuildConfig } from 'unbuild'
-
-export default defineBuildConfig({
-  hooks: {
-    'rollup:done': async (ctx) => {
-      // copy env.d.ts to dist
-      await fs.copyFile(resolve('src/env.d.ts'), join(ctx.options.outDir, 'env.d.ts'))
-    }
-  }
-})

docs/app.vue

@@ -1,95 +1,68 @@
 <template>
   <div>
-    <nav class="u-bg-white border-b u-border-gray-200 fixed top-0 inset-x-0 z-10">
-      <UContainer padded>
-        <div class="flex items-center justify-between h-16">
-          <div class="flex items-center">
-            <NuxtLink to="/" class="block font-bold text-lg u-text-gray-900">
-              @nuxthq/ui
-            </NuxtLink>
-          </div>
+    <Header />
 
-          <div class="flex items-center gap-3">
-            <ColorScheme placeholder="" tag="span">
-              <UButton variant="transparent" :icon="colorMode.value === 'dark' ? 'heroicons-outline:moon' : 'heroicons-outline:sun'" @click="toggleDark" />
-            </ColorScheme>
-            <UButton to="https://github.com/nuxtlabs/ui" target="_blank" variant="transparent" icon="fa-brands:github" />
-          </div>
-        </div>
-      </UContainer>
-    </nav>
+    <UContainer>
+      <div class="relative grid lg:grid-cols-10 lg:gap-8">
+        <DocsAside class="lg:col-span-2" />
 
-    <UContainer class="mt-16">
-      <div class="lg:grid lg:grid-cols-10 lg:gap-10 lg:relative">
-        <aside class="lg:flex lg:flex-col pb-8 lg:pb-0 lg:sticky lg:top-0 px-4 sm:px-6 lg:px-0 lg:pt-16 lg:-mt-16 lg:self-start lg:col-span-2 lg:overflow-hidden lg:h-screen">
-          <nav class="overflow-y-auto h-auto pt-8 lg:py-12">
-            <ul class="space-y-6">
-              <li v-for="section of sections" :key="section">
-                <h5 class="mb-3 uppercase tracking-wide font-semibold text-xs u-text-gray-900">
-                  {{ section.label }}
-                </h5>
-                <ul class="space-y-1.5">
-                  <li v-for="(link, index) of section.links" :key="index">
-                    <ULink
-                      :to="link.to"
-                      class="relative block text-sm rounded-md"
-                      active-class="text-primary-600"
-                      inactive-class="u-text-gray-500 hover:u-text-gray-700"
-                      exact
-                    >
-                      {{ link.label }}
-                    </ULink>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </nav>
-        </aside>
+        <div class="relative pt-8 pb-16" :class="[toc ? 'lg:col-span-6' : 'lg:col-span-8']">
+          <DocsPageHeader />
 
-        <div class="space-y-6 sm:px-6 lg:px-0 lg:col-span-8 lg:py-12">
           <NuxtPage />
+
+          <DocsPageFooter class="mt-12" />
+
+          <hr class="border-gray-200 dark:border-gray-800 my-6">
+
+          <DocsPrevNext />
+
+          <DocsFooter class="mt-16" />
         </div>
+
+        <DocsToc v-if="toc" class="lg:col-span-2 order-first lg:order-last" />
       </div>
     </UContainer>
 
     <ClientOnly>
-      <UNotifications />
+      <DocsSearch />
     </ClientOnly>
+
+    <UNotifications />
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+const { toc } = useContent()
+const colorMode = useColorMode()
+
+// Computed
+
+const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
+
+// Head
+
 useHead({
-  title: '@nuxthq/ui',
+  titleTemplate: title => title && title.includes('NuxtLabs UI') ? title : `${title} - NuxtLabs UI`,
   meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
+    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' },
+    { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
-    { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' }
+    { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' },
+    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
   ],
+  htmlAttrs: {
+    lang: 'en'
+  },
   bodyAttrs: {
-    class: 'antialiased font-sans text-gray-700 bg-gray-50 dark:bg-gray-900 dark:text-gray-200 bg-white dark:bg-black'
+    class: 'antialiased font-sans text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900'
   }
 })
 
-const colorMode = useColorMode()
-const toggleDark = () => {
-  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-}
-
-const sections = [
-  { label: 'Getting Started', links: [{ label: 'Usage', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
-  { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }] },
-  { label: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }, { label: 'AlertDialog', to: '/components/AlertDialog' }] },
-  { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'FormGroup', to: '/components/FormGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'Select', to: '/components/Select' }, { label: 'SelectCustom', to: '/components/SelectCustom' }, { label: 'Textarea', to: '/components/Textarea' }, { label: 'Toggle', to: '/components/Toggle' }] },
-  { label: 'Layout', links: [{ label: 'Card', to: '/components/Card' }, { label: 'Container', to: '/components/Container' }] },
-  { label: 'Navigation', links: [{ label: 'Pills', to: '/components/Pills' }, { label: 'Tabs', to: '/components/Tabs' }, { label: 'VerticalNavigation', to: '/components/VerticalNavigation' }, { label: 'CommandPalette', to: '/components/CommandPalette' }] },
-  { label: 'Overlays', links: [{ label: 'Modal', to: '/components/Modal' }, { label: 'Notification', to: '/components/Notification' }, { label: 'Popover', to: '/components/Popover' }, { label: 'Slideover', to: '/components/Slideover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }
-]
+useSeoMeta({
+  ogImage: '/social-preview.jpg',
+  twitterImage: '/social-preview.jpg',
+  twitterCard: 'summary_large_image'
+})
 </script>
-
-<style>
-html.dark {
-  @apply bg-black;
-}
-</style>

docs/app/router.options.ts

@@ -0,0 +1,48 @@
+import type { RouterConfig } from '@nuxt/schema'
+
+function findHashPosition (hash): { el: any, behavior: ScrollBehavior, top: number } {
+  const el = document.querySelector(hash)
+  // vue-router does not incorporate scroll-margin-top on its own.
+  if (el) {
+    const top = parseFloat(getComputedStyle(el).scrollMarginTop)
+
+    return {
+      el: hash,
+      behavior: 'smooth',
+      top
+    }
+  }
+}
+
+// https://router.vuejs.org/api/#routeroptions
+export default <RouterConfig>{
+  scrollBehavior (to, from, savedPosition) {
+    const nuxtApp = useNuxtApp()
+
+    // If history back
+    if (savedPosition) {
+      // Handle Suspense resolution
+      return new Promise((resolve) => {
+        nuxtApp.hooks.hookOnce('page:finish', () => {
+          setTimeout(() => resolve(savedPosition), 50)
+        })
+      })
+    }
+
+    // Scroll to heading on click
+    if (to.hash) {
+      return new Promise((resolve) => {
+        if (to.path === from.path) {
+          setTimeout(() => resolve(findHashPosition(to.hash)), 50)
+        } else {
+          nuxtApp.hooks.hookOnce('page:finish', () => {
+            setTimeout(() => resolve(findHashPosition(to.hash)), 50)
+          })
+        }
+      })
+    }
+
+    // Scroll to top of window
+    return { top: 0 }
+  }
+}

docs/components/Header.vue

@@ -0,0 +1,117 @@
+<template>
+  <header class="sticky top-0 z-50 w-full backdrop-blur flex-none border-b border-gray-900/10 dark:border-gray-50/[0.06] bg-white/75 dark:bg-gray-900/75">
+    <UContainer>
+      <div class="flex items-center justify-between h-16">
+        <div class="flex items-center gap-3">
+          <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+            <Logo class="w-8 h-8 text-primary-500 dark:text-primary-400" />
+
+            NuxtLabs<span class="text-primary-500 dark:text-primary-400">UI</span>
+          </NuxtLink>
+        </div>
+
+        <div class="flex items-center -mr-1.5">
+          <div class="mr-1.5 hidden lg:block">
+            <ThemeSelect />
+          </div>
+
+          <UButton
+            color="gray"
+            variant="ghost"
+            class="lg:hidden"
+            icon="i-heroicons-magnifying-glass-20-solid"
+            @click="openDocsSearch"
+          />
+
+          <ClientOnly>
+            <UButton
+              :icon="isDark ? 'i-heroicons-moon' : 'i-heroicons-sun'"
+              color="gray"
+              variant="ghost"
+              aria-label="Theme"
+              @click="isDark = !isDark"
+            />
+
+            <template #fallback>
+              <div class="w-8 h-8" />
+            </template>
+          </ClientOnly>
+
+          <UButton
+            to="https://github.com/nuxtlabs/ui"
+            target="_blank"
+            color="gray"
+            variant="ghost"
+            icon="i-simple-icons-github"
+          />
+
+          <UButton
+            color="gray"
+            variant="ghost"
+            class="lg:hidden"
+            icon="i-heroicons-bars-3-20-solid"
+            @click="isDialogOpen = true"
+          />
+        </div>
+      </div>
+    </UContainer>
+
+    <TransitionRoot :show="isDialogOpen" as="template">
+      <Dialog as="div" @close="isDialogOpen = false">
+        <DialogPanel class="fixed inset-0 z-50 overflow-y-auto bg-white dark:bg-gray-900 lg:hidden">
+          <div class="px-4 sm:px-6 sticky top-0 border-b border-gray-900/10 dark:border-gray-50/[0.06] bg-white/75 dark:bg-gray-900/75 backdrop-blur z-10">
+            <div class="flex items-center justify-between h-16">
+              <div class="flex items-center gap-3">
+                <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-gray-900 dark:text-white">
+                  <Logo class="w-8 h-8 text-primary-500 dark:text-primary-400" />
+
+                  nuxthq/ui
+                </NuxtLink>
+              </div>
+
+              <div class="flex -mr-1.5">
+                <UButton
+                  color="gray"
+                  variant="ghost"
+                  icon="i-heroicons-x-mark-20-solid"
+                  @click="isDialogOpen = false"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="px-4 sm:px-6 py-4 sm:py-6">
+            <ThemeSelect class="mb-4 sm:mb-6 w-full" />
+
+            <DocsAsideLinks @click="isDialogOpen = false" />
+          </div>
+        </DialogPanel>
+      </Dialog>
+    </TransitionRoot>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { Dialog, DialogPanel, TransitionRoot } from '@headlessui/vue'
+
+const { isSearchModalOpen } = useDocs()
+const colorMode = useColorMode()
+
+const isDialogOpen = ref(false)
+
+const isDark = computed({
+  get () {
+    return colorMode.value === 'dark'
+  },
+  set () {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+
+function openDocsSearch () {
+  isDialogOpen.value = false
+
+  setTimeout(() => {
+    isSearchModalOpen.value = true
+  }, 100)
+}
+</script>

docs/components/Logo.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="900" height="900" viewBox="0 0 900 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M504.908 750H839.476C850.103 750.001 860.542 747.229 869.745 741.963C878.948 736.696 886.589 729.121 891.9 719.999C897.211 710.876 900.005 700.529 900 689.997C899.995 679.465 897.193 669.12 891.873 660.002L667.187 274.289C661.876 265.169 654.237 257.595 645.036 252.329C635.835 247.064 625.398 244.291 614.773 244.291C604.149 244.291 593.711 247.064 584.511 252.329C575.31 257.595 567.67 265.169 562.36 274.289L504.908 372.979L392.581 179.993C387.266 170.874 379.623 163.301 370.42 158.036C361.216 152.772 350.777 150 340.151 150C329.525 150 319.086 152.772 309.883 158.036C300.679 163.301 293.036 170.874 287.721 179.993L8.12649 660.002C2.80743 669.12 0.00462935 679.465 5.72978e-06 689.997C-0.00461789 700.529 2.78909 710.876 8.10015 719.999C13.4112 729.121 21.0523 736.696 30.255 741.963C39.4576 747.229 49.8973 750.001 60.524 750H270.538C353.748 750 415.112 713.775 457.336 643.101L559.849 467.145L614.757 372.979L779.547 655.834H559.849L504.908 750ZM267.114 655.737L120.551 655.704L340.249 278.586L449.87 467.145L376.474 593.175C348.433 639.03 316.577 655.737 267.114 655.737Z" fill="currentColor" />
+  </svg>
+</template>

docs/components/LogoLabs.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg width="312" height="78" viewBox="0 0 312 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M65.6381 78H109.132C110.513 78.0002 111.87 77.6398 113.067 76.9552C114.263 76.2705 115.257 75.2857 115.947 74.0998C116.637 72.9139 117.001 71.5688 117 70.1996C116.999 68.8305 116.635 67.4856 115.944 66.3003L86.7343 16.1575C86.0439 14.9719 85.0508 13.9873 83.8547 13.3028C82.6586 12.6183 81.3017 12.2579 79.9205 12.2579C78.5393 12.2579 77.1825 12.6183 75.9864 13.3028C74.7903 13.9873 73.7971 14.9719 73.1067 16.1575L65.6381 28.9873L51.0356 3.89908C50.3446 2.71356 49.351 1.72914 48.1546 1.04472C46.9581 0.360308 45.6011 0 44.2196 0C42.8382 0 41.4811 0.360308 40.2847 1.04472C39.0883 1.72914 38.0947 2.71356 37.4037 3.89908L1.05644 66.3003C0.364965 67.4856 0.000601816 68.8305 7.44871e-07 70.1996C-0.000600326 71.5688 0.362582 72.9139 1.05302 74.0998C1.74346 75.2857 2.7368 76.2705 3.93315 76.9552C5.12949 77.6398 6.48665 78.0002 7.86812 78H35.1699C45.9872 78 53.9645 73.2907 59.4537 64.1032L72.7803 41.2289L79.9184 28.9873L101.341 65.7584H72.7803L65.6381 78ZM34.7248 65.7458L15.6717 65.7416L44.2324 16.7162L58.483 41.2289L48.9416 57.6127C45.2963 63.5739 41.155 65.7458 34.7248 65.7458Z" fill="currentColor" />
+    <path d="M175.417 77.3598V66.9562H149.03V21.3406H136.5V77.3598H175.417Z" fill="currentColor" />
+    <path d="M198.81 78C203.706 78 208.103 76.0793 210.178 73.1183V77.3598H221.795V37.026H210.178V41.0274C207.854 38.2264 203.706 36.3858 198.644 36.3858C186.446 36.3858 179.061 44.6286 179.061 57.1929C179.061 69.7572 186.446 78 198.81 78ZM200.635 68.3967C194.495 68.3967 190.429 63.9152 190.429 57.1929C190.429 50.3906 194.495 45.909 200.635 45.909C206.859 45.909 210.925 50.3906 210.925 57.1929C210.925 63.9152 206.859 68.3967 200.635 68.3967Z" fill="currentColor" />
+    <path d="M254.606 78C266.97 78 274.604 69.7572 274.604 57.1929C274.604 44.6286 266.97 36.3858 254.772 36.3858C249.544 36.3858 245.478 38.3064 243.155 41.2674V19.5H231.621V77.3598H243.155V72.9583C245.478 76.0793 249.793 78 254.606 78ZM252.78 68.3967C246.557 68.3967 242.491 63.9152 242.491 57.1929C242.491 50.3906 246.557 45.909 252.78 45.909C258.838 45.909 262.987 50.3906 262.987 57.1929C262.987 63.9152 258.838 68.3967 252.78 68.3967Z" fill="currentColor" />
+    <path d="M295.736 78C305.528 78 312 72.9583 312 65.2757C312 47.0294 289.098 56.3926 289.098 48.1498C289.098 45.5889 291.339 44.2285 294.575 44.2285C297.728 44.2285 300.964 46.0691 301.462 49.5103H311.502C311.087 41.5876 304.283 36.3858 294.243 36.3858C285.696 36.3858 279.307 41.4275 279.307 48.5499C279.307 65.5157 301.794 57.433 301.794 65.6758C301.794 67.9166 299.304 69.5971 295.736 69.5971C291.422 69.5971 288.517 67.3564 288.102 63.7551H278.145C278.56 72.4781 285.53 78 295.736 78Z" fill="currentColor" />
+  </svg>
+</template>

docs/components/ThemeSelect.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="flex items-center shadow-sm">
+    <USelectMenu
+      v-model="primary"
+      name="primary"
+      class="w-full [&>div>button]:!rounded-r-none"
+      appearance="gray"
+      :ui="{ width: 'w-[194px]' }"
+      :popper="{ placement: 'bottom-start' }"
+      :options="primaryOptions"
+    >
+      <template #label>
+        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${primary.hex}`}" />
+
+        {{ primary.text }}
+      </template>
+
+      <template #option="{ option }">
+        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
+
+        {{ option.text }}
+      </template>
+    </USelectMenu>
+
+    <USelectMenu
+      v-model="gray"
+      name="gray"
+      class="w-full [&>div>button]:!rounded-l-none [&>div>button]:-ml-px"
+      appearance="gray"
+      :ui="{ width: 'w-[194px]' }"
+      :popper="{ placement: 'bottom-end' }"
+      :options="grayOptions"
+    >
+      <template #label>
+        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${gray.hex}`}" />
+
+        {{ gray.text }}
+      </template>
+
+      <template #option="{ option }">
+        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
+
+        {{ option.text }}
+      </template>
+    </USelectMenu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import colors from '#tailwind-config/theme/colors'
+
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+const primaryCookie = useCookie('primary', { path: '/', default: () => appConfig.ui.primary })
+const grayCookie = useCookie('gray', { path: '/', default: () => appConfig.ui.gray })
+
+watch(primaryCookie, (primary) => {
+  appConfig.ui.primary = primary
+}, { immediate: true })
+
+watch(grayCookie, (gray) => {
+  appConfig.ui.gray = gray
+}, { immediate: true })
+
+// Computed
+
+const primaryOptions = computed(() => useWithout(appConfig.ui.colors, 'primary').map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
+const primary = computed({
+  get () {
+    return primaryOptions.value.find(option => option.value === primaryCookie.value)
+  },
+  set (option) {
+    primaryCookie.value = option.value
+  }
+})
+
+const grayOptions = computed(() => ['slate', 'cool', 'zinc', 'neutral', 'stone'].map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
+const gray = computed({
+  get () {
+    return grayOptions.value.find(option => option.value === grayCookie.value)
+  },
+  set (option) {
+    grayCookie.value = option.value
+  }
+})
+</script>

docs/components/content/Alert.vue

@@ -0,0 +1,33 @@
+<template>
+  <component
+    :is="to ? NuxtLink : 'div'"
+    :to="to"
+    class="block pl-4 pr-6 py-3 rounded-md !border !border-gray-200 dark:!border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 text-sm leading-6 my-5 last:mb-0 font-normal group relative"
+    :class="[to ? 'hover:!border-primary-500 dark:hover:!border-primary-400 hover:text-primary-500 dark:hover:text-primary-400 border-dashed' : '']"
+  >
+    <UIcon v-if="!!to" name="i-heroicons-link-20-solid" class="w-3 h-3 absolute right-2 top-2 text-gray-400 dark:text-gray-500 group-hover:text-primary-500 dark:group-hover:text-primary-400" />
+
+    <UIcon v-if="icon" :name="icon" class="w-4 h-4 mr-2 inline-flex items-center align-text-top" :class="color" />
+
+    <ContentSlot :use="$slots.default" unwrap="p" />
+  </component>
+</template>
+
+<script setup lang="ts">
+const NuxtLink = resolveComponent('NuxtLink')
+
+defineProps({
+  icon: {
+    type: String,
+    default: null
+  },
+  color: {
+    type: String,
+    default: 'text-primary-500 dark:text-primary-400'
+  },
+  to: {
+    type: String,
+    default: null
+  }
+})
+</script>

docs/components/content/BadgeShortcut.vue

@@ -0,0 +1,18 @@
+<template>
+  <UKbd class="!my-0 align-text-top">
+    {{ shortcut }}
+  </UKbd>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  value: {
+    type: String,
+    required: true
+  }
+})
+
+const { metaSymbol } = useShortcuts()
+
+const shortcut = computed(() => props.value === 'meta' ? metaSymbol.value : props.value)
+</script>

docs/components/content/CodeGroup.vue

@@ -0,0 +1,53 @@
+<template>
+  <div :selected-index="selectedIndex" @change="changeTab">
+    <div class="flex border border-gray-200 dark:border-gray-700 border-b-0 rounded-t-md overflow-hidden -mb-px">
+      <div
+        v-for="(tab, index) in tabs"
+        :key="index"
+        as="template"
+        @click="selectedIndex = index"
+      >
+        <button
+          class="px-4 py-2 focus:outline-none text-sm border-r border-r-gray-200 dark:border-r-gray-700 transition-colors"
+          tabindex="-1"
+          :class="[selectedIndex === index ? 'font-medium text-primary-500 dark:text-primary-400 bg-gray-50 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800']"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="[&>div>pre]:!rounded-t-none">
+      <component :is="selectedTab.component" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const slots = useSlots()
+
+const selectedIndex = ref(0)
+
+// Computed
+
+const tabs = computed(() => slots.default?.().map((slot, index) => {
+  return {
+    label: slot.props?.filename || slot.props?.label || `${index}`,
+    component: slot
+  }
+}) || [])
+
+const selectedTab = computed(() => tabs.value.find((_, index) => index === selectedIndex.value))
+
+// Methods
+
+function changeTab (index) {
+  selectedIndex.value = index
+}
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>

docs/components/content/ComponentCard.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <div v-if="propsToSelect.length" class="relative flex border border-gray-200 dark:border-gray-700 rounded-t-md overflow-hidden not-prose">
+      <div v-for="prop in propsToSelect" :key="prop.name" class="flex flex-col gap-0.5 justify-between py-1.5 font-medium bg-gray-50 dark:bg-gray-800 border-r border-r-gray-200 dark:border-r-gray-700">
+        <label :for="prop.name" class="block text-xs px-3 font-medium text-gray-400 dark:text-gray-500 -my-px">{{ prop.label }}</label>
+        <UCheckbox
+          v-if="prop.type === 'boolean'"
+          v-model="componentProps[prop.name]"
+          :name="prop.name"
+          appearance="none"
+          class="justify-center"
+        />
+        <USelectMenu
+          v-else-if="prop.type === 'string' && prop.options.length"
+          v-model="componentProps[prop.name]"
+          :options="prop.options"
+          :name="prop.name"
+          :label="componentProps[prop.name]"
+          appearance="none"
+          class="inline-flex"
+          :ui="{ width: 'w-32 !-mt-px', rounded: 'rounded-b-md' }"
+          :ui-select="{ custom: '!py-0' }"
+          :popper="{ strategy: 'fixed', placement: 'bottom-start' }"
+        />
+        <UInput
+          v-else
+          :model-value="componentProps[prop.name]"
+          :type="prop.type === 'number' ? 'number' : 'text'"
+          :name="prop.name"
+          appearance="none"
+          autocomplete="off"
+          :ui="{ custom: '!py-0' }"
+          @update:model-value="val => componentProps[prop.name] = prop.type === 'number' ? Number(val) : val"
+        />
+      </div>
+    </div>
+
+    <div class="flex border border-b-0 border-gray-200 dark:border-gray-700 relative not-prose" :class="[{ 'p-4': padding }, propsToSelect.length ? 'border-t-0' : 'rounded-t-md', backgroundClass]">
+      <component :is="name" v-model="vModel" v-bind="fullProps">
+        <ContentSlot v-if="$slots.default" :use="$slots.default" />
+      </component>
+    </div>
+
+    <ContentRenderer :value="ast" class="[&>div>pre]:!rounded-t-none" />
+  </div>
+</template>
+
+<script setup lang="ts">
+// @ts-expect-error
+import { transformContent } from '@nuxt/content/transformers'
+
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null
+  },
+  padding: {
+    type: Boolean,
+    default: true
+  },
+  props: {
+    type: Object,
+    default: () => ({})
+  },
+  code: {
+    type: String,
+    default: null
+  },
+  baseProps: {
+    type: Object,
+    default: () => ({})
+  },
+  ui: {
+    type: Object,
+    default: () => ({})
+  },
+  excludedProps: {
+    type: Array,
+    default: () => []
+  },
+  backgroundClass: {
+    type: String,
+    default: 'bg-white dark:bg-gray-900'
+  }
+})
+
+const baseProps = reactive({ ...props.baseProps })
+const componentProps = reactive({ ...props.props })
+
+const appConfig = useAppConfig()
+const route = useRoute()
+const slug = props.slug || route.params.slug[1]
+const camelName = useCamelCase(slug)
+const name = `U${useUpperFirst(camelName)}`
+
+const meta = await fetchComponentMeta(name)
+
+// Computed
+
+const ui = computed(() => ({ ...appConfig.ui[camelName], ...props.ui }))
+
+const fullProps = computed(() => ({ ...props.baseProps, ...componentProps }))
+const vModel = computed({
+  get: () => baseProps.modelValue,
+  set: (value) => {
+    baseProps.modelValue = value
+  }
+})
+
+const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
+  if (props.excludedProps.includes(key)) {
+    return null
+  }
+
+  const prop = meta?.meta?.props?.find((prop: any) => prop.name === key)
+  const dottedKey = useKebabCase(key).replaceAll('-', '.')
+  const keys = useGet(ui.value, dottedKey, {})
+  let options = typeof keys === 'object' && Object.keys(keys)
+  if (key.toLowerCase().endsWith('color')) {
+    options = appConfig.ui.colors
+  }
+
+  return {
+    type: prop?.type || 'string',
+    name: key,
+    label: key === 'modelValue' ? 'value' : useCamelCase(key),
+    options
+  }
+}).filter(Boolean))
+
+const code = computed(() => {
+  let code = `\`\`\`html
+<${name}`
+  for (const [key, value] of Object.entries(componentProps)) {
+    if (value === 'undefined' || value === null) {
+      continue
+    }
+
+    const prop = meta?.meta?.props?.find((prop: any) => prop.name === key)
+
+    code += ` ${(prop?.type === 'boolean' && value !== true) || typeof value === 'object' ? ':' : ''}${key === 'modelValue' ? 'value' : useKebabCase(key)}${prop?.type === 'boolean' && !!value && key !== 'modelValue' ? '' : `="${typeof value === 'object' ? renderObject(value) : value}"`}`
+  }
+  if (props.code) {
+    const lineBreaks = (props.code.match(/\n/g) || []).length
+    if (lineBreaks > 1) {
+      code += `>
+  ${props.code}</${name}>`
+    } else {
+      code += `>${props.code}</${name}>`
+    }
+  } else {
+    code += ' />'
+  }
+  code += `
+\`\`\`
+`
+  return code
+})
+
+function renderObject (obj: any) {
+  if (Array.isArray(obj)) {
+    return `[${obj.map(renderObject).join(', ')}]`
+  }
+
+  if (typeof obj === 'object') {
+    return `{ ${Object.entries(obj).map(([key, value]) => `${key}: ${renderObject(value)}`).join(', ')} }`
+  }
+
+  if (typeof obj === 'string') {
+    return `'${obj}'`
+  }
+
+  return obj
+}
+
+const { data: ast } = await useAsyncData(`${name}-ast-${JSON.stringify(componentProps)}`, () => transformContent('content:_markdown.md', code.value, {
+  highlight: {
+    theme: {
+      light: 'material-lighter',
+      dark: 'material-palenight'
+    }
+  }
+}), { watch: [code] })
+</script>

docs/components/content/ComponentExample.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="[&>div>pre]:!rounded-t-none">
+    <div class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md" :class="[{ 'p-4': padding, 'rounded-b-md': !$slots.code, 'border-b-0': !!$slots.code }, backgroundClass]">
+      <ContentSlot v-if="$slots.default" :use="$slots.default" />
+    </div>
+
+    <ContentSlot v-if="$slots.code" :use="$slots.code" />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  padding: {
+    type: Boolean,
+    default: true
+  },
+  backgroundClass: {
+    type: String,
+    default: 'bg-white dark:bg-gray-900'
+  }
+})
+</script>

docs/components/content/ComponentPreset.vue

@@ -0,0 +1,36 @@
+<template>
+  <ContentRenderer :value="ast" />
+</template>
+
+<script setup lang="ts">
+// @ts-expect-error
+import { transformContent } from '@nuxt/content/transformers'
+
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null
+  }
+})
+
+const appConfig = useAppConfig()
+const route = useRoute()
+const slug = props.slug || route.params.slug[1]
+const camelName = useCamelCase(slug)
+const name = `U${useUpperFirst(camelName)}`
+
+const preset = appConfig.ui[camelName]
+
+const { data: ast } = await useAsyncData(`${name}-preset`, () => transformContent('content:_markdown.md', `
+\`\`\`json
+${JSON.stringify(preset, null, 2)}
+\`\`\`\
+`, {
+  highlight: {
+    theme: {
+      light: 'material-lighter',
+      dark: 'material-palenight'
+    }
+  }
+}))
+</script>

docs/components/content/ComponentProps.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <table class="table-fixed">
+      <thead>
+        <tr>
+          <th class="w-[25%]">
+            Prop
+          </th>
+          <th class="w-[50%]">
+            Default
+          </th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="prop in metaProps" :key="prop.name">
+          <td class="relative flex-shrink-0">
+            <code>{{ prop.name }}</code><span v-if="prop.required" class="font-bold text-red-500 dark:text-red-400 absolute top-0 ml-1">*</span>
+          </td>
+          <td>
+            <code v-if="prop.default">{{ prop.default }}</code>
+          </td>
+          <td>
+            <a v-if="prop.name === 'ui'" href="#preset">
+              <code>{{ prop.type }}</code>
+            </a>
+            <code v-else class="break-all">
+              {{ prop.type }}
+            </code>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null
+  }
+})
+
+const route = useRoute()
+const slug = props.slug || route.params.slug[1]
+const camelName = useCamelCase(slug)
+const name = `U${useUpperFirst(camelName)}`
+
+const meta = await fetchComponentMeta(name)
+
+const metaProps = computed(() => useSortBy(meta?.meta?.props || [], [
+  prop => ['string', 'number', 'boolean', 'any'].indexOf(prop.type)
+]))
+</script>

docs/components/content/ComponentSlots.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <table>
+      <thead>
+        <tr>
+          <th>Slot</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="slot in (meta.meta.slots as any[])" :key="slot.name">
+          <td class="whitespace-nowrap">
+            <code>{{ slot.name }}</code>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null
+  }
+})
+
+const route = useRoute()
+const slug = props.slug || route.params.slug[1]
+const camelName = useCamelCase(slug)
+const name = `U${useUpperFirst(camelName)}`
+
+const meta = await fetchComponentMeta(name)
+</script>

docs/components/content/Placeholder.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="relative overflow-hidden rounded border border-dashed border-gray-400 dark:border-gray-500 opacity-75">
+    <svg class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10" fill="none">
+      <defs>
+        <pattern
+          id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+          x="0"
+          y="0"
+          width="10"
+          height="10"
+          patternUnits="userSpaceOnUse"
+        >
+          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+        </pattern>
+      </defs>
+      <rect stroke="none" fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)" width="100%" height="100%" />
+    </svg>
+
+    <slot />
+  </div>
+</template>

docs/components/content/VoltaEmbed.vue

@@ -0,0 +1,16 @@
+<template>
+  <iframe :src="src" class="w-full min-h-[calc(100vh/1.5)] border border-gray-200 dark:border-gray-800 rounded-md" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  token: {
+    type: String,
+    required: true
+  }
+})
+
+const appConfig = useAppConfig()
+
+const src = computed(() => `https://volta.net/embed/${props.token}?gray=${appConfig.ui.gray}&primary=${appConfig.ui.primary}`)
+</script>

docs/components/content/examples/CardExample.vue

@@ -0,0 +1,13 @@
+<template>
+  <UCard>
+    <template #header>
+      <Placeholder class="h-8" />
+    </template>
+
+    <Placeholder class="h-32" />
+
+    <template #footer>
+      <Placeholder class="h-8" />
+    </template>
+  </UCard>
+</template>

docs/components/content/examples/CommandPaletteExampleAsync.vue

@@ -0,0 +1,21 @@
+<script setup>
+const groups = computed(() => {
+  return [{
+    key: 'users',
+    label: q => q && `Users matching “${q}”...`,
+    search: async (q) => {
+      if (!q) {
+        return []
+      }
+
+      const users = await $fetch(`https://jsonplaceholder.typicode.com/users`, { params: { q } })
+
+      return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
+    }
+  }].filter(Boolean)
+})
+</script>
+
+<template>
+  <UCommandPalette :groups="groups" :autoselect="false" />
+</template>

docs/components/content/examples/CommandPaletteExampleBasic.vue

@@ -0,0 +1,27 @@
+<script setup>
+const people = [
+  { id: 1, label: 'Wade Cooper' },
+  { id: 2, label: 'Arlene Mccoy' },
+  { id: 3, label: 'Devon Webb' },
+  { id: 4, label: 'Tom Cook' },
+  { id: 5, label: 'Tanya Fox' },
+  { id: 6, label: 'Hellen Schmidt' },
+  { id: 7, label: 'Caroline Schultz' },
+  { id: 8, label: 'Mason Heaney' },
+  { id: 9, label: 'Claudie Smitham' },
+  { id: 10, label: 'Emil Schaefer' }
+]
+
+const selected = ref([people[3]])
+</script>
+
+<template>
+  <UCommandPalette
+    v-model="selected"
+    multiple
+    nullable
+    :autoselect="false"
+    :groups="[{ key: 'people', commands: people }]"
+    :fuse="{ resultLimit: 6, fuseOptions: { threshold: 0.1 } }"
+  />
+</template>

docs/components/content/examples/CommandPaletteExampleGroups.vue

@@ -0,0 +1,46 @@
+<script setup>
+const router = useRouter()
+
+const commandPaletteRef = ref()
+
+const users = [
+  { id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } },
+  { id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' } },
+  { id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' } }
+]
+
+const actions = [
+  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => alert('New file'), shortcuts: ['⌘', 'N'] },
+  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => alert('New folder'), shortcuts: ['⌘', 'F'] },
+  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => alert('Add hashtag'), shortcuts: ['⌘', 'H'] },
+  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => alert('Add label'), shortcuts: ['⌘', 'L'] }
+]
+
+const groups = computed(() => commandPaletteRef.value?.query
+  ? [{
+      key: 'users',
+      commands: users
+    }]
+  : [{
+      key: 'recent',
+      label: 'Recent searches',
+      commands: users.slice(0, 1)
+    }, {
+      key: 'actions',
+      commands: actions
+    }])
+
+function onSelect (option) {
+  if (option.click) {
+    option.click()
+  } else if (option.to) {
+    router.push(option.to)
+  } else if (option.href) {
+    window.open(option.href, '_blank')
+  }
+}
+</script>
+
+<template>
+  <UCommandPalette ref="commandPaletteRef" :groups="groups" :autoselect="false" @update:model-value="onSelect" />
+</template>

docs/components/content/examples/CommandPaletteExampleModal.vue

@@ -0,0 +1,33 @@
+<script setup>
+const isOpen = ref(false)
+
+const people = [
+  { id: 1, label: 'Wade Cooper' },
+  { id: 2, label: 'Arlene Mccoy' },
+  { id: 3, label: 'Devon Webb' },
+  { id: 4, label: 'Tom Cook' },
+  { id: 5, label: 'Tanya Fox' },
+  { id: 6, label: 'Hellen Schmidt' },
+  { id: 7, label: 'Caroline Schultz' },
+  { id: 8, label: 'Mason Heaney' },
+  { id: 9, label: 'Claudie Smitham' },
+  { id: 10, label: 'Emil Schaefer' }
+]
+
+const selected = ref([])
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen">
+      <UCommandPalette
+        v-model="selected"
+        multiple
+        nullable
+        :groups="[{ key: 'people', commands: people }]"
+      />
+    </UModal>
+  </div>
+</template>

docs/components/content/examples/ContainerExample.vue

@@ -0,0 +1,5 @@
+<template>
+  <UContainer>
+    <Placeholder class="h-32" />
+  </UContainer>
+</template>

docs/components/content/examples/ContextMenuExample.vue

@@ -0,0 +1,35 @@
+<script setup>
+const { x, y } = useMouse()
+const { y: windowY } = useWindowScroll()
+
+const isOpen = ref(false)
+const virtualElement = ref({ getBoundingClientRect: () => ({}) })
+
+function onContextMenu () {
+  const top = unref(y) - unref(windowY)
+  const left = unref(x)
+
+  virtualElement.value.getBoundingClientRect = () => ({
+    width: 0,
+    height: 0,
+    top,
+    left
+  })
+
+  isOpen.value = true
+}
+</script>
+
+<template>
+  <div class="w-full" @contextmenu.prevent="onContextMenu">
+    <Placeholder class="h-96 select-none w-full flex items-center justify-center">
+      Right click here
+    </Placeholder>
+
+    <UContextMenu v-model="isOpen" :virtual-element="virtualElement">
+      <div class="p-4">
+        Menu
+      </div>
+    </UContextMenu>
+  </div>
+</template>

docs/components/content/examples/DropdownExample.vue

@@ -0,0 +1,34 @@
+<script setup>
+const items = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }], [{
+    label: 'Edit',
+    icon: 'i-heroicons-pencil-square-20-solid',
+    shortcuts: ['E']
+  }, {
+    label: 'Duplicate',
+    icon: 'i-heroicons-document-duplicate-20-solid',
+    shortcuts: ['D']
+  }], [{
+    label: 'Archive',
+    icon: 'i-heroicons-archive-box-20-solid'
+  }, {
+    label: 'Move',
+    icon: 'i-heroicons-arrow-right-circle-20-solid'
+  }], [{
+    label: 'Delete',
+    icon: 'i-heroicons-trash-20-solid',
+    shortcuts: ['⌘', 'D']
+  }]
+]
+</script>
+
+<template>
+  <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
+    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+  </UDropdown>
+</template>

docs/components/content/examples/KbdExample.vue

@@ -0,0 +1,10 @@
+<script setup>
+const { metaSymbol } = useShortcuts()
+</script>
+
+<template>
+  <div class="flex items-center gap-0.5">
+    <UKbd>{{ metaSymbol }}</UKbd>
+    <UKbd>K</UKbd>
+  </div>
+</template>

docs/components/content/examples/ModalExampleBasic.vue

@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen">
+      <div class="p-4">
+        <Placeholder class="h-48" />
+      </div>
+    </UModal>
+  </div>
+</template>

docs/components/content/examples/ModalExampleCard.vue

@@ -0,0 +1,23 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen">
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <Placeholder class="h-8" />
+        </template>
+
+        <Placeholder class="h-32" />
+
+        <template #footer>
+          <Placeholder class="h-8" />
+        </template>
+      </UCard>
+    </UModal>
+  </div>
+</template>

docs/components/content/examples/NotificationExampleActions.vue

@@ -0,0 +1,15 @@
+<script setup>
+const toast = useToast()
+
+const actions = ref([{
+  label: 'Action 1',
+  click: () => alert('Action 1 clicked!')
+}, {
+  label: 'Action 2',
+  click: () => alert('Action 2 clicked!')
+}])
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'With actions', actions })" />
+</template>

docs/components/content/examples/NotificationExampleBasic.vue

@@ -0,0 +1,7 @@
+<script setup>
+const toast = useToast()
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
+</template>

docs/components/content/examples/NotificationExampleCallback.vue

@@ -0,0 +1,11 @@
+<script setup>
+const toast = useToast()
+
+function onCallback () {
+  alert('Notification expired!')
+}
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Expires soon...', timeout: 1000, callback: onCallback })" />
+</template>

docs/components/content/examples/NotificationExampleClick.vue

@@ -0,0 +1,11 @@
+<script setup>
+const toast = useToast()
+
+function onClick () {
+  alert('Clicked!')
+}
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Click me', click: onClick })" />
+</template>

docs/components/content/examples/PopoverExample.vue

@@ -0,0 +1,11 @@
+<template>
+  <UPopover>
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel>
+      <div class="p-4">
+        <Placeholder class="h-20 w-48" />
+      </div>
+    </template>
+  </UPopover>
+</template>

docs/components/content/examples/SelectMenuExampleBasic.vue

@@ -0,0 +1,9 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" />
+</template>

docs/components/content/examples/SelectMenuExampleButton.vue

@@ -0,0 +1,15 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[3])
+</script>
+
+<template>
+  <USelectMenu v-slot="{ open }" v-model="selected" :options="people">
+    <UButton>
+      {{ selected }}
+
+      <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform" :class="[open && 'transform rotate-90']" />
+    </UButton>
+  </USelectMenu>
+</template>

docs/components/content/examples/SelectMenuExampleMultiple.vue

@@ -0,0 +1,14 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref([])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" multiple>
+    <template #label>
+      <span v-if="selected.length" class="font-medium truncate">{{ selected.join(', ') }}</span>
+      <span v-else class="block truncate text-gray-400 dark:text-gray-500">Select people</span>
+    </template>
+  </USelectMenu>
+</template>

docs/components/content/examples/SelectMenuExampleObjects.vue

@@ -0,0 +1,41 @@
+<script setup>
+const people = [{
+  id: 'benjamincanac',
+  label: 'benjamincanac',
+  href: 'https://github.com/benjamincanac',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
+},
+{
+  id: 'Atinux',
+  label: 'Atinux',
+  href: 'https://github.com/Atinux',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' }
+},
+{
+  id: 'smarroufin',
+  label: 'smarroufin',
+  href: 'https://github.com/smarroufin',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' }
+},
+{
+  id: 'nobody',
+  label: 'Nobody',
+  icon: 'i-heroicons-user-circle'
+}]
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people">
+    <template #label>
+      <UIcon v-if="selected.icon" :name="selected.icon" class="w-4 h-4" />
+      <UAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" />
+
+      {{ selected.label }}
+    </template>
+  </USelectMenu>
+</template>

docs/components/content/examples/SkeletonExample.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex items-center space-x-4">
+    <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" />
+    <div class="space-y-2">
+      <USkeleton class="h-4 w-[250px]" />
+      <USkeleton class="h-4 w-[200px]" />
+    </div>
+  </div>
+</template>

docs/components/content/examples/SlideoverExample.vue

@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen">
+      <div class="p-4 h-full">
+        <Placeholder class="w-full h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>

docs/components/content/examples/TooltipExample.vue

@@ -0,0 +1,5 @@
+<template>
+  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']">
+    <UButton color="gray" label="Hover me" />
+  </UTooltip>
+</template>

docs/components/content/examples/VerticalNavigationExample.vue

@@ -0,0 +1,24 @@
+<script setup>
+const links = [{
+  label: 'Profile',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  }
+}, {
+  label: 'Installation',
+  icon: 'i-heroicons-home',
+  to: '/getting-started/installation'
+}, {
+  label: 'Vertical Navigation',
+  icon: 'i-heroicons-chart-bar',
+  to: '/navigation/vertical-navigation'
+}, {
+  label: 'Command Palette',
+  icon: 'i-heroicons-command-line',
+  to: '/navigation/command-palette'
+}]
+</script>
+
+<template>
+  <UVerticalNavigation :links="links" />
+</template>

docs/components/content/prose/ProseCode.vue

@@ -0,0 +1,71 @@
+<script lang="ts">
+import { defineComponent } from '#imports'
+
+export default defineComponent({
+  props: {
+    code: {
+      type: String,
+      default: ''
+    },
+    language: {
+      type: String,
+      default: null
+    },
+    filename: {
+      type: String,
+      default: null
+    },
+    highlights: {
+      type: Array as () => number[],
+      default: () => []
+    },
+    meta: {
+      type: String,
+      default: null
+    }
+  },
+  setup (props) {
+    const clipboard = useCopyToClipboard({ timeout: 2000 })
+    const icon = ref('i-heroicons-clipboard-document')
+
+    function copy () {
+      clipboard.copy(props.code, { title: 'Copied to clipboard!' })
+
+      icon.value = 'i-heroicons-clipboard-document-check'
+
+      setTimeout(() => {
+        icon.value = 'i-heroicons-clipboard-document'
+      }, 2000)
+    }
+
+    return {
+      icon,
+      copy
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="group relative" :class="`language-${language}`">
+    <UButton
+      :icon="icon"
+      variant="solid"
+      class="absolute right-3 top-3 opacity-0 group-hover:opacity-100 transition-opacity z-[1]"
+      size="xs"
+      tabindex="-1"
+      @click="copy"
+    />
+
+    <span v-if="filename" class="text-gray-400 dark:text-gray-500 absolute right-3 bottom-3 text-sm group-hover:opacity-0 transition-opacity">{{ filename }}</span>
+
+    <slot />
+  </div>
+</template>
+
+<style>
+pre code .line {
+  display: block;
+  min-height: 1rem;
+}
+</style>

docs/components/content/prose/ProseH2.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>
+
+<template>
+  <h2 :id="id" class="scroll-mt-[161px] lg:scroll-mt-[112px]">
+    <NuxtLink :href="`#${id}`" class="group">
+      <div class="-ml-6 pr-2 py-2 inline-flex opacity-0 group-hover:opacity-100 transition-opacity absolute">
+        <UIcon name="i-heroicons-hashtag-20-solid" class="w-4 h-4 text-primary-500 dark:text-primary-400" />
+      </div>
+
+      <slot />
+    </NuxtLink>
+  </h2>
+</template>

docs/components/content/prose/ProseH3.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>
+
+<template>
+  <h3 :id="id" class="scroll-mt-[145px] lg:scroll-mt-[96px]">
+    <NuxtLink :href="`#${id}`" class="group">
+      <div class="-ml-6 pr-2 py-2 inline-flex opacity-0 group-hover:opacity-100 transition-opacity absolute">
+        <UIcon name="i-heroicons-hashtag-20-solid" class="w-4 h-4 text-primary-500 dark:text-primary-400" />
+      </div>
+
+      <slot />
+    </NuxtLink>
+  </h3>
+</template>

docs/components/content/themes/CommandPaletteThemeAlgolia.vue

@@ -0,0 +1,76 @@
+<script setup>
+const commandPaletteRef = ref()
+
+const { navigation } = useContent()
+
+const { data: files } = await useLazyAsyncData('search', () => queryContent().where({ _type: 'markdown' }).find(), { default: () => [] })
+
+const groups = computed(() => navigation.value.map(item => ({
+  key: item._path,
+  label: item.title,
+  commands: files.value.filter(file => file._path.startsWith(item._path)).map(file => ({
+    id: file._id,
+    icon: 'i-heroicons-document',
+    title: file.navigation?.title || file.title,
+    category: item.title,
+    to: file._path
+  }))
+})))
+
+const close = computed(() => commandPaletteRef.value?.query ? ({ icon: 'i-heroicons-x-mark', color: 'black', variant: 'ghost', size: 'lg', padded: false }) : null)
+const empty = computed(() => commandPaletteRef.value?.query ? ({ icon: 'i-heroicons-magnifying-glass', queryLabel: 'No results' }) : ({ icon: '', label: 'No recent searches' }))
+
+const ui = {
+  wrapper: 'flex flex-col flex-1 min-h-0 bg-gray-50 dark:bg-gray-800',
+  input: {
+    wrapper: 'relative flex items-center mx-3 py-3',
+    base: 'w-full rounded border-2 border-primary-500 placeholder-gray-400 dark:placeholder-gray-500 focus:border-primary-500 focus:outline-none focus:ring-0 bg-white dark:bg-gray-900',
+    padding: 'px-4',
+    height: 'h-14',
+    size: 'text-lg',
+    icon: {
+      base: 'pointer-events-none absolute left-3 text-primary-500 dark:text-primary-400',
+      size: 'h-6 w-6'
+    }
+  },
+  group: {
+    wrapper: 'p-3 relative',
+    label: '-mx-3 px-3 -mt-4 mb-2 py-1 text-sm font-semibold text-primary-500 dark:text-primary-400 font-semibold sticky top-0 bg-gray-50 dark:bg-gray-800 z-10',
+    container: 'space-y-1',
+    command: {
+      base: 'flex justify-between select-none items-center rounded px-2 py-4 gap-2 relative font-medium text-sm group shadow',
+      active: 'bg-primary-500 dark:bg-primary-400 text-white',
+      inactive: 'bg-white dark:bg-gray-900',
+      label: 'flex flex-col min-w-0',
+      suffix: 'text-xs',
+      icon: {
+        base: 'flex-shrink-0 w-6 h-6',
+        active: 'text-white',
+        inactive: 'text-gray-400 dark:text-gray-500'
+      }
+    }
+  },
+  empty: {
+    wrapper: 'flex flex-col items-center justify-center flex-1 py-9',
+    label: 'text-sm text-center text-gray-500 dark:text-gray-400',
+    queryLabel: 'text-lg text-center text-gray-900 dark:text-white',
+    icon: 'w-12 h-12 mx-auto text-gray-400 dark:text-gray-500 mb-4'
+  }
+}
+</script>
+
+<template>
+  <UCommandPalette
+    ref="commandPaletteRef"
+    :groups="groups"
+    :ui="ui"
+    :close="close"
+    :empty="empty"
+    :autoselect="false"
+    command-attribute="title"
+    :fuse="{
+      fuseOptions: { keys: ['title', 'category'] },
+    }"
+    placeholder="Search docs"
+  />
+</template>

docs/components/content/themes/CommandPaletteThemeRaycast.vue

@@ -0,0 +1,64 @@
+<script setup>
+const commandPaletteRef = ref()
+
+const suggestions = [
+  { id: 'linear', label: 'Linear', icon: 'i-simple-icons-linear' },
+  { id: 'figma', label: 'Figma', icon: 'i-simple-icons-figma' },
+  { id: 'slack', label: 'Slack', icon: 'i-simple-icons-slack' },
+  { id: 'youtube', label: 'YouTube', icon: 'i-simple-icons-youtube' },
+  { id: 'github', label: 'GitHub', icon: 'i-simple-icons-github' }
+]
+
+const commands = [
+  { id: 'clipboard-history', label: 'Clipboard History', icon: 'i-heroicons-clipboard', click: () => alert('New file') },
+  { id: 'import-extension', label: 'Import Extension', icon: 'i-heroicons-wrench-screwdriver', click: () => alert('New folder') },
+  { id: 'manage-extensions', label: 'Manage Extensions', icon: 'i-heroicons-wrench-screwdriver', click: () => alert('Add hashtag') }
+]
+
+const groups = [{
+  key: 'suggestions',
+  label: 'Suggestions',
+  inactive: 'Application',
+  commands: suggestions
+}, {
+  key: 'commands',
+  label: 'Commands',
+  inactive: 'Command',
+  commands
+}]
+
+const ui = {
+  wrapper: 'flex flex-col flex-1 min-h-0 divide-y divide-gray-200 dark:divide-gray-700 bg-gray-50 dark:bg-gray-800',
+  container: 'relative flex-1 overflow-y-auto divide-y divide-gray-200 dark:divide-gray-700 scroll-py-2',
+  input: {
+    base: 'w-full h-14 px-4 placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0'
+  },
+  group: {
+    label: 'px-2 my-2 text-xs font-semibold text-gray-500 dark:text-gray-400',
+    command: {
+      base: 'flex justify-between select-none cursor-default items-center rounded-md px-2 py-2 gap-2 relative',
+      active: 'bg-gray-200 dark:bg-gray-700/50 text-gray-900 dark:text-white',
+      container: 'flex items-center gap-3 min-w-0',
+      icon: {
+        base: 'flex-shrink-0 w-5 h-5',
+        active: 'text-gray-900 dark:text-white',
+        inactive: 'text-gray-400 dark:text-gray-500'
+      },
+      avatar: {
+        size: '2xs'
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <UCommandPalette
+    ref="commandPaletteRef"
+    :groups="groups"
+    icon=""
+    :ui="ui"
+    :autoselect="false"
+    placeholder="Search for apps and commands"
+  />
+</template>

docs/components/docs/DocsAside.vue

@@ -0,0 +1,32 @@
+<template>
+  <aside class="hidden pb-8 overflow-y-auto lg:block lg:self-start lg:top-16 lg:max-h-[calc(100vh-64px)] lg:sticky lg:pr-8 lg:pl-[2px]">
+    <div class="relative">
+      <div class="sticky top-0 pointer-events-none z-[1]">
+        <div class="h-8 bg-white dark:bg-gray-900" />
+        <div class="bg-white dark:bg-gray-900 relative pointer-events-auto">
+          <UButton
+            icon="i-heroicons-magnifying-glass-20-solid"
+            class="w-full"
+            color="gray"
+            @click="isSearchModalOpen = true"
+          >
+            Search
+
+            <div class="hidden lg:flex items-center gap-0.5 ml-auto -my-1">
+              <UKbd>{{ metaSymbol }}</UKbd>
+              <UKbd>K</UKbd>
+            </div>
+          </UButton>
+        </div>
+        <div class="h-8 bg-gradient-to-b from-white dark:from-gray-900" />
+      </div>
+
+      <DocsAsideLinks />
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+const { isSearchModalOpen } = useDocs()
+const { metaSymbol } = useShortcuts()
+</script>

docs/components/docs/DocsAsideLinks.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="space-y-8">
+    <div v-for="(group, index) in navigation" :key="index" class="space-y-3">
+      <div class="text-sm font-semibold text-gray-900 dark:text-gray-200">
+        <span class="truncate">{{ group.title }}</span>
+      </div>
+
+      <UVerticalNavigation
+        :links="mapContentLinks(group.children)"
+        class="mt-1"
+        :ui="{
+          wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
+          padding: 'pl-4',
+          base: 'group text-sm block border-l -ml-px lg:leading-6',
+          active: 'text-primary-500 dark:text-primary-400 border-current font-semibold',
+          inactive: 'border-transparent hover:border-gray-400 dark:hover:border-gray-500 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300'
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+const { navigation } = useContent() as { navigation: NavItem[] }
+
+function mapContentLinks (links: NavItem[]) {
+  return links?.map(link => ({ label: link.title, icon: link.icon, to: link._path })) || []
+}
+</script>

docs/components/docs/DocsFooter.vue

@@ -0,0 +1,10 @@
+<template>
+  <footer class="flex items-center justify-end gap-1.5">
+    <div class="flex items-baseline gap-1.5 text-sm text-center text-gray-500 dark:text-gray-400">
+      Made by
+      <NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs">
+        <LogoLabs class="text-white w-14 h-auto" />
+      </NuxtLink>
+    </div>
+  </footer>
+</template>

docs/components/docs/DocsPageFooter.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="flex items-center justify-between gap-1.5">
+    <UButton
+      v-if="page"
+      :to="`https://github.com/nuxtlabs/ui/edit/dev/docs/content/${page._file}`"
+      label="Edit this page on GitHub"
+      color="primary"
+      variant="link"
+      :padded="false"
+      icon="i-heroicons-pencil-square"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { page } = useContent()
+</script>

docs/components/docs/DocsPageHeader.vue

@@ -0,0 +1,37 @@
+<template>
+  <header v-if="page" class="relative border-b border-gray-200 dark:border-gray-800 pb-8 mb-12">
+    <p class="mb-4 text-sm leading-6 font-semibold text-primary-500 dark:text-primary-400 capitalize">
+      {{ useLowerCase(page._dir) }}
+    </p>
+    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
+      <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight dark:text-white">
+        {{ page.title }}
+      </h1>
+
+      <div class="flex items-center gap-2 mt-4 lg:mt-0">
+        <UButton
+          v-if="page.headlessui"
+          :label="page.headlessui.label"
+          :to="page.headlessui.to"
+          icon="i-simple-icons-headlessui"
+          color="white"
+        />
+
+        <UButton
+          v-if="page.github"
+          label="GitHub"
+          icon="i-simple-icons-github"
+          color="white"
+          :to="`https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/${page._dir}/${page.title.replace(' ', '')}.vue`"
+        />
+      </div>
+    </div>
+    <p v-if="page.description" class="mt-4 text-lg">
+      {{ page.description }}
+    </p>
+  </header>
+</template>
+
+<script setup lang="ts">
+const { page } = useContent()
+</script>

docs/components/docs/DocsPrevNext.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="grid gap-6 sm:grid-cols-2">
+    <DocsPrevNextCard v-if="prev" :title="prev.navigation?.title || prev.title" :description="prev.navigation?.description || prev.description" :to="prev._path" icon="i-heroicons-arrow-left-20-solid" />
+    <span v-else>&nbsp;</span>
+    <DocsPrevNextCard
+      v-if="next"
+      :title="next.navigation?.title || next.title"
+      :description="next.navigation?.description || next.description"
+      :to="next._path"
+      icon="i-heroicons-arrow-right-20-solid"
+      class="text-right"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { prev, next } = useContent()
+</script>

docs/components/docs/DocsPrevNextCard.vue

@@ -0,0 +1,36 @@
+<template>
+  <NuxtLink :to="to" class="block px-5 py-8 border not-prose rounded-lg border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/25 group">
+    <div v-if="icon" class="inline-flex items-center rounded-full p-1.5 bg-gray-50 dark:bg-gray-800 group-hover:bg-primary-50 dark:group-hover:bg-primary-400/10 ring-1 ring-gray-300 dark:ring-gray-700 mb-4 group-hover:ring-primary-500/50 dark:group-hover:ring-primary-400/50">
+      <UIcon :name="icon" class="w-5 h-5 text-gray-900 dark:text-gray-100 group-hover:text-primary-500 dark:group-hover:text-primary-400" />
+    </div>
+
+    <p class="text-gray-900 dark:text-gray-50 font-medium text-[15px] mb-1">
+      {{ title }}
+    </p>
+
+    <p class="text-sm font-normal text-gray-500 dark:text-gray-400">
+      {{ description }}
+    </p>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  icon: {
+    type: String,
+    default: null
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  to: {
+    type: String,
+    required: true
+  }
+})
+</script>

docs/components/docs/DocsSearch.vue

@@ -0,0 +1,172 @@
+<template>
+  <UModal
+    v-model="isSearchModalOpen"
+    :ui="{
+      padding: 'sm:p-4',
+      rounded: 'sm:rounded-lg',
+      width: 'sm:max-w-3xl',
+      height: 'h-screen sm:h-[28rem]'
+    }"
+  >
+    <UCommandPalette
+      ref="commandPaletteRef"
+      :groups="groups"
+      command-attribute="title"
+      :fuse="{
+        fuseOptions: { ignoreLocation: true, includeMatches: true, threshold: 0, keys: ['title', 'description', 'children.children.value', 'children.children.children.value'] },
+        resultLimit: 10
+      }"
+      @update:model-value="onSelect"
+      @close="isSearchModalOpen = false"
+    />
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import type { Command } from '../../../src/runtime/types'
+
+const { navigation } = useContent()
+const router = useRouter()
+const { usingInput } = useShortcuts()
+const { isSearchModalOpen } = useDocs()
+
+const commandPaletteRef = ref<HTMLElement & { query: Ref<string>, results: { item: Command }[] }>()
+
+const { data: files } = await useLazyAsyncData('search', () => queryContent().where({ _type: 'markdown' }).find(), { default: () => [] })
+
+// Computed
+
+const defaultGroups = computed(() => navigation.value.map(item => ({
+  key: item._path,
+  label: item.title,
+  commands: files.value.filter(file => file._path.startsWith(item._path)).map(file => ({
+    id: file._id,
+    title: file.navigation?.title || file.title,
+    to: file._path,
+    suffix: file.description,
+    icon: file.icon
+  }))
+})))
+
+const queryGroups = computed(() => navigation.value.map(item => ({
+  key: item._path,
+  label: item.title,
+  commands: files.value.filter(file => file._path.startsWith(item._path)).flatMap((file) => {
+    return [{
+      id: file._id,
+      title: file.navigation?.title || file.title,
+      to: file._path,
+      description: file.description,
+      icon: file.icon
+    },
+    // @ts-ignore
+    ...Object.entries(groupByHeading(file.body.children)).map(([hash, { title, children }]) => ({
+      id: `${file._path}${hash}`,
+      title,
+      prefix: `${file.navigation?.title || file.title} ->`,
+      prefixClass: 'text-gray-700 dark:text-gray-200',
+      to: `${file._path}${hash}`,
+      children: concatChildren(children),
+      icon: file.icon
+    }))]
+  })
+})))
+
+const groups = computed(() => commandPaletteRef.value?.query ? queryGroups.value : defaultGroups.value)
+
+// avoid conflicts between multiple meta_k shortcuts
+const canToggleModal = computed(() => isSearchModalOpen.value || !usingInput.value)
+
+// Methods
+
+function remapChildren (children: any[]) {
+  return children?.map((grandChild) => {
+    if (['code-inline', 'em', 'a', 'strong'].includes(grandChild.tag)) {
+      return { type: 'text', value: grandChild.children.find(child => child.type === 'text')?.value || '' }
+    }
+
+    return grandChild
+  })
+}
+
+function concatChildren (children: any[]) {
+  return children.map((child) => {
+    if (['alert'].includes(child.tag)) {
+      child.children = concatChildren(child.children)
+    }
+    if (child.tag === 'p') {
+      child.children = remapChildren(child.children)
+
+      child.children = child.children?.reduce((acc, grandChild) => {
+        if (grandChild.type === 'text') {
+          if (acc.length && acc[acc.length - 1].type === 'text') {
+            acc[acc.length - 1].value += grandChild.value
+          } else {
+            acc.push(grandChild)
+          }
+        } else {
+          acc.push(grandChild)
+        }
+        return acc
+      }, [])
+    }
+    if (['style'].includes(child.tag)) {
+      return null
+    }
+
+    return child
+  })
+}
+
+function groupByHeading (children: any[]) {
+  const groups = {} // grouped by path
+  let hash = '' // file.page with potential `#anchor` concat
+  let title: string | null
+  for (const node of children) {
+    // if heading found, udpate current path
+    if (['h2', 'h3'].includes(node.tag)) {
+      // find heading text value
+      title = node.children?.find(child => child.type === 'text')?.value
+      if (title) {
+        hash = `#${node.props.id}`
+      }
+    }
+    // push to existing/new group based on path
+    if (groups[hash]) {
+      groups[hash].children.push(node)
+    } else {
+      groups[hash] = { children: [node], title }
+    }
+  }
+  return groups
+}
+
+function onSelect (option) {
+  isSearchModalOpen.value = false
+
+  if (option.click) {
+    option.click()
+  } else if (option.to) {
+    router.push(option.to)
+  } else if (option.href) {
+    window.open(option.href, '_blank')
+  }
+}
+
+// Shortcuts
+
+defineShortcuts({
+  meta_k: {
+    usingInput: true,
+    whenever: [canToggleModal],
+    handler: () => {
+      isSearchModalOpen.value = !isSearchModalOpen.value
+    }
+  },
+  escape: {
+    usingInput: true,
+    whenever: [isSearchModalOpen],
+    handler: () => { isSearchModalOpen.value = false }
+  }
+})
+</script>

docs/components/docs/DocsToc.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="sticky top-16 bg-white/75 dark:bg-gray-900/75 backdrop-blur group lg:self-start -mx-4 sm:-mx-6 lg:mx-0 px-4 sm:px-6 lg:pl-8 lg:pr-0">
+    <div class="py-3 lg:py-8 border-b border-dashed border-gray-200 dark:border-gray-800 lg:border-0">
+      <button class="flex items-center gap-2" tabindex="-1" @click="isTocOpen = !isTocOpen">
+        <span class="text-sm text-slate-900 font-semibold text-sm leading-6 dark:text-slate-100 truncate">Table of Contents</span>
+
+        <UIcon name="i-heroicons-chevron-right-20-solid" class="lg:hidden w-4 h-4 transition-transform duration-100 transform text-gray-400 dark:text-gray-500" :class="[isTocOpen ? 'rotate-90' : 'rotate-0']" />
+      </button>
+
+      <DocsTocLinks class="mt-2 lg:mt-4" :links="toc.links" :class="[isTocOpen ? 'lg:block' : 'hidden lg:block']" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { toc } = useContent()
+
+const isTocOpen = ref(false)
+</script>

docs/components/docs/DocsTocLinks.vue

@@ -0,0 +1,49 @@
+<template>
+  <ul>
+    <li v-for="link in links" :key="link.text" :class="{ 'ml-3': link.depth === 3 }">
+      <a
+        :href="`#${link.id}`"
+        class="block py-1 font-medium text-sm"
+        :class="[activeHeadings.includes(link.id) ? 'text-primary-500 dark:text-primary-400' : 'hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300']"
+        @click.prevent="scrollToHeading(link.id)"
+      >
+        {{ link.text }}
+      </a>
+
+      <DocsTocLinks v-if="link.children" :links="link.children" />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { TocLink } from '@nuxt/content/dist/runtime/types'
+
+defineProps({
+  links: {
+    type: Array as PropType<TocLink[]>,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['move'])
+
+const route = useRoute()
+const router = useRouter()
+const { activeHeadings, updateHeadings } = useScrollspy()
+
+watch(() => route.path, () => {
+  setTimeout(() => {
+    if (process.client) {
+      updateHeadings([
+        ...document.querySelectorAll('h2'),
+        ...document.querySelectorAll('h3')
+      ])
+    }
+  }, 300)
+}, { immediate: true })
+
+const scrollToHeading = (id: string) => {
+  router.push(`#${id}`)
+  emit('move', id)
+}
+</script>

docs/composables/useComponentMeta.ts

@@ -0,0 +1,19 @@
+const useComponentsMetaState = () => useState('components-meta', () => ({}))
+
+export async function fetchComponentMeta (name: string) {
+  const state = useComponentsMetaState()
+
+  if (state.value[name]?.then) {
+    await state.value[name]
+    return state.value[name]
+  }
+  if (state.value[name]) { return state.value[name] }
+
+  // Store promise to avoid multiple calls
+  state.value[name] = $fetch(`/api/component-meta/${name}`).then((meta) => {
+    state.value[name] = meta
+  })
+
+  await state.value[name]
+  return state.value[name]
+}

docs/composables/useDocs.ts

@@ -0,0 +1,11 @@
+import { createSharedComposable } from '@vueuse/core'
+
+const _useDocs = () => {
+  const isSearchModalOpen = ref(false)
+
+  return {
+    isSearchModalOpen
+  }
+}
+
+export const useDocs = createSharedComposable(_useDocs)

docs/composables/useScrollspy.ts

@@ -0,0 +1,37 @@
+/**
+ * Scrollspy allows you to watch visible headings in a specific page.
+ * Useful for table of contents live style updates.
+ */
+export const useScrollspy = () => {
+  const observer = ref() as Ref<IntersectionObserver>
+  const visibleHeadings = ref([]) as Ref<string[]>
+  const activeHeadings = ref([]) as Ref<string[]>
+
+  const observerCallback = (entries: IntersectionObserverEntry[]) =>
+    entries.forEach((entry) => {
+      const id = entry.target.id
+
+      if (entry.isIntersecting) { visibleHeadings.value.push(id) } else { visibleHeadings.value = visibleHeadings.value.filter(t => t !== id) }
+    })
+
+  const updateHeadings = (headings: Element[]) =>
+    headings.forEach((heading) => {
+      observer.value.observe(heading)
+    })
+
+  watch(visibleHeadings, (val, oldVal) => {
+    if (val.length === 0) { activeHeadings.value = oldVal } else { activeHeadings.value = val }
+  })
+
+  // Create intersection observer
+  onBeforeMount(() => (observer.value = new IntersectionObserver(observerCallback)))
+
+  // Destroy it
+  onBeforeUnmount(() => observer.value?.disconnect())
+
+  return {
+    visibleHeadings,
+    activeHeadings,
+    updateHeadings
+  }
+}

docs/content/1.getting-started/1.index.md

@@ -0,0 +1,36 @@
+---
+title: Introduction
+description: 'Fully styled and customizable components for Nuxt.'
+head:
+  title: 'NuxtLabs UI: Fully styled and customizable components for Nuxt'
+  description: 'It provides everything related to UI when building your Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts. Built with Headless UI and Tailwind CSS, published under MIT License.'
+---
+
+This module has been developed by the [NuxtLabs](https://nuxtlabs.com/) team for [Volta](https://volta.net) and [Nuxt Studio](https://nuxt.studio/), its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.
+
+::alert{icon="i-heroicons-light-bulb"}
+[Volta](https://volta.net/) entire UI is built with this module alongside the 50+ keyboard shortcuts defined.
+::
+
+## Features
+
+- Built with [Headless UI](https://headlessui.dev/) and [Tailwind CSS](https://tailwindcss.com/)
+- HMR support through Nuxt App Config
+- Dark mode support
+- Keyboard shortcuts
+- Bundled icons
+- Fully typed
+
+## Credits
+
+- [nuxt/nuxt](https://github.com/nuxt/nuxt)
+- [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
+- [nuxt-modules/tailwindcss](https://github.com/nuxt-modules/tailwindcss)
+- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
+- [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui)
+- [vueuse/vueuse](https://github.com/vueuse/vueuse)
+- [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons)
+
+::alert{icon="i-heroicons-exclamation-triangle"}
+This documentation is still a work in progress and will be updated regularly.
+::

docs/content/1.getting-started/2.installation.md

@@ -0,0 +1,63 @@
+---
+description: 'Learn how to install and configure the module in your Nuxt app.'
+---
+
+1. Install `@nuxthq/ui` dependency to your project:
+
+::code-group
+
+```bash [yarn]
+yarn add -D @nuxthq/ui
+```
+
+```bash [npm]
+npm install -D @nuxthq/ui
+```
+
+```sh [pnpm]
+pnpm i -D @nuxthq/ui
+```
+
+::
+
+2. Add it to your `modules` section in your `nuxt.config`:
+
+```ts [nuxt.config]
+export default defineNuxtConfig({
+  modules: ['@nuxthq/ui']
+})
+```
+
+That's it! You can now use all the components and composables in your Nuxt app ✨
+
+::alert{icon="i-heroicons-exclamation-triangle"}
+As this module installs [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/) and [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) for you, you should remove them from your `modules` and `dependencies` if you've previously installed them manually.
+::
+
+## Playground
+
+:u-button{icon="i-simple-icons-stackblitz" label="Play on StackBlitz" size="lg" to="https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue" target="_blank"}
+
+## Options
+
+| Key                      | Default                | Description                                      |
+| ------------------------ | ---------------------- | ------------------------------------------------ |
+| `prefix`                 | `u`                    | Define the prefix of the imported components.    |
+| `global`                 | `false`                | Expose components globally.                      |
+| `icons`                  | `['heroicons']`        | Icon collections to load.                        |
+
+## Edge
+
+To use the latest updates pushed on the [`dev`](https://github.com/nuxtlabs/ui/tree/dev) branch, you can use `@nuxthq/ui-edge`.
+
+Update your `package.json` to the following:
+
+```json [package.json]
+{
+  "devDependencies": {
+    "@nuxthq/ui": "npm:@nuxthq/ui-edge@latest"
+  }
+}
+```
+
+Then run `npm install` or `yarn install`.

docs/content/1.getting-started/3.theming.md

@@ -0,0 +1,189 @@
+---
+description: 'Learn how to customize the look and feel of the components.'
+---
+
+## Overview
+
+This module relies on Nuxt [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) file to customize the look and feel of the components at runtime with HMR (hot-module-replacement).
+
+## Colors
+
+Components are based on a `primary` and a `gray` color. You can change them in your `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    primary: 'green',
+    gray: 'cool'
+  }
+})
+```
+
+As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `green` and the `gray` color is `cool`.
+
+To provide dynamic colors that can be changed at runtime, this module uses CSS variables. As Tailwind CSS already has a `gray` color, the module automatically renames it to `cool` to avoid conflicts (`coolGray` was renamed to `gray` when Tailwind CSS v3.0 was released).
+
+::alert{icon="i-heroicons-light-bulb"}
+Try to change the `primary` and `gray` colors in the navbar and see the colors change live.
+::
+
+Components that have a `color` prop like [Avatar](/elements/avatar), [Badge](/elements/badge) and [Button](/elements/button) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
+
+## Dark mode
+
+All the components are styled with dark mode in mind.
+
+Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) `class` strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.
+
+## Components
+
+Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts) file. You can override them in your `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    container: {
+      constrained: 'max-w-5xl'
+    }
+  }
+})
+```
+
+Each component has a `ui` prop that allows you to customize everything specifically.
+
+```vue
+<template>
+  <UContainer :ui="{ constrained: 'max-w-2xl' }">
+    <slot />
+  </UContainer>
+</template>
+```
+
+::alert{icon="i-heroicons-light-bulb"}
+You can find the default classes for each component under the `Preset` section.
+::
+
+Some component props like `size`, `color`, `variant`, etc. have a default value that you can override in your `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    button: {
+      default: {
+        size: 'md',
+        color: 'gray',
+        variant: 'ghost'
+      }
+    }
+  }
+})
+```
+
+## Icons
+
+You can use any icon (100,000+) from [Iconify](https://iconify.design/).
+
+Some components have an `icon` prop that allows you to add an icon to the component.
+
+```vue
+<template>
+  <UButton icon="i-heroicons-magnifying-glass" />
+</template>
+```
+
+You can also use the [Icon](/elements/icon) component to add an icon anywhere in your app by following this pattern: `i-{collection_name}-{icon_name}`.
+
+```vue
+<template>
+  <UIcon name="i-heroicons-moon" />
+</template>
+```
+
+By default, the module uses [Heroicons](https://heroicons.com/) but you can change it from the module options in your `nuxt.config.ts`.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  ui: {
+    icons: ['mdi', 'simple-icons']
+  }
+})
+```
+
+::alert{icon="i-heroicons-light-bulb"}
+Search the icon you want to use on https://icones.js.org built by [@antfu](https://github.com/antfu).
+::
+
+Unlike the official [nuxt-icon](https://github.com/nuxt-modules/icon/) module, this module will not fetch any icon from the web and will only bundle the icons you use in your app thanks to [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons).
+
+However, you will need to install either `@iconify/json` (full icon collections, 50MB) or the individual icon packages you want to use in your app.
+
+::code-group
+
+```bash [yarn]
+yarn add -D @iconify-json/{collection_name}
+```
+
+```bash [npm]
+npm install -D @iconify-json/{collection_name}
+```
+
+```sh [pnpm]
+pnpm i -D @iconify-json/{collection_name}
+```
+
+::
+
+When using `@iconify/json`, you can specifiy `icons: 'all'` in your `nuxt.config.ts` to use any icon in your app.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  ui: {
+    icons: 'all'
+  }
+})
+```
+
+You can easily replace all the default icons of the components in your `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    button: {
+      default: {
+        loadingIcon: 'i-octicon-sync-24'
+      }
+    },
+    input: {
+      default: {
+        loadingIcon: 'i-octicon-sync-24'
+      }
+    },
+    select: {
+      default: {
+        trailingIcon: 'i-octicon-chevron-down-24'
+      }
+    },
+    selectMenu: {
+      default: {
+        selectedIcon: 'i-octicon-check-24'
+      }
+    },
+    notification: {
+      default: {
+        close: {
+          icon: 'i-octicon-x-24'
+        }
+      }
+    },
+    commandPalette: {
+      default: {
+        icon: 'i-octicon-search-24',
+        selectedIcon: 'i-octicon-check-24',
+        empty: {
+          icon: 'i-octicon-search-24'
+        }
+      }
+    }
+  }
+})
+```

docs/content/1.getting-started/4.shortcuts.md

@@ -0,0 +1,123 @@
+---
+description: 'Learn how to display and define keyboard shortcuts in your app.'
+---
+
+## Overview
+
+Some components like [Dropdown](/elements/dropdown), [Command Palette](/navigation/command-palette) and [Tooltip](/overlays/tooltip) support the display of keyboard shortcuts.
+
+```vue
+<UDropdown :items="[{ label: 'Edit', shortcuts: ['E'] }]" />
+```
+
+Shortcuts are displayed and styled through the [Kbd](/elements/kbd) component.
+
+```vue
+<template>
+  <div class="flex items-center gap-0.5">
+    <UKbd>⌘</UKbd>
+    <UKbd>K</UKbd>
+  </div>
+</template>
+```
+
+::alert{icon="i-heroicons-light-bulb"}
+You will have a preview of how shortcuts are rendered in each component page.
+::
+
+## `defineShortcuts`
+
+This module provides a `defineShortcuts` composable that allows you to define keyboard shortcuts in your app really easily.
+
+```vue
+<template>
+  <UModal v-model="isOpen" />
+</template>
+
+<script setup lang="ts">
+const isOpen = ref(false)
+
+defineShortcuts({
+  meta_k: {
+    usingInput: true,
+    handler: () => {
+      isOpen.value = !isOpen.value
+    }
+  }
+})
+</script>
+```
+
+### `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.
+
+```vue
+<template>
+  <UInput v-model="query" name="queryInput" />
+</template>
+
+<script setup lang="ts">
+const query = ref('')
+
+defineShortcuts({
+  enter: {
+    usingInput: 'queryInput',
+    handler: () => {
+      // TODO
+    }
+  }
+})
+</script>
+```
+_`enter` shortcut will only trigger when `queryInput` is focused._
+
+### `whenever`
+
+Prop: `whenever?: WatchSource<Boolean>[]`
+
+`whenever` allows to add constraints on the shortcut triggering behavior. This array can contain `Ref<Boolean>`, `ComputedRef<Boolean>` or `() => Boolean`.
+
+```ts
+defineShortcuts({
+  meta_k: {
+    usingInput: true,
+    handler: () => { isOpen.value = !isOpen.value }
+  },
+  escape: {
+    usingInput: true,
+    whenever: [isOpen],
+    handler: () => { isOpen.value = false }
+  }
+})
+```
+_`escape` shortcut will only trigger when `isOpen` is `true`._
+
+### Simple shortcut
+
+In case the shortcut does not need any config, it can be written as a function.
+
+```ts
+defineShortcuts({
+  '?': () => openHelpModal()
+})
+```
+
+## `useShortcuts`
+
+To display shortcuts in your app according to the user's OS, you can use the `useShortcuts` composable.
+
+```vue
+<script setup>
+const { metaSymbol } = useShortcuts()
+</script>
+
+<template>
+  <UKbd>{{ metaSymbol }}</UKbd>
+</template>
+```
+_`metaSymbol` will display either `⌘` on MacOS or `Ctrl` on any other OS_

docs/content/1.getting-started/5.roadmap.md

@@ -0,0 +1,7 @@
+---
+title: Roadmap
+description: Discover our Volta board for @nuxthq/ui development status.
+toc: false
+---
+
+:volta-embed{token="eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiXSwiYm9hcmRMaW5rZWRQcnMiOnRydWUsImxpc3RHcm91cCI6InN0YXRlIiwibGlzdE9yZGVyIjoiY3JlYXRlZF9hdCIsInRpbWVsaW5lWm9vbSI6Im1vbnRoIiwidGltZWxpbmVPcmRlciI6InN0YXRlIiwidGltZWxpbmVEaXNwbGF5IjoiYWxsX21pbGVzdG9uZXMiLCJmaWx0ZXJzIjp7fSwib3duZXIiOiJudXh0bGFicyIsIm5hbWUiOiJ1aSJ9"}

docs/content/2.elements/1.avatar.md

@@ -0,0 +1,101 @@
+---
+github: true
+description: Display an image that represents a resource or a group of resources.
+---
+
+## Usage
+
+::component-card
+---
+props:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  alt: 'Avatar'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Avatar.
+
+::component-card
+---
+props:
+  size: 'sm'
+baseProps:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  alt: 'Avatar'
+---
+::
+
+### Chip
+
+Use the `chipColor`, `chipVariant` and `chipPosition` props to display a chip on the Avatar.
+
+::component-card
+---
+props:
+  chipColor: 'primary'
+  chipVariant: 'solid'
+  chipPosition: 'top-right'
+baseProps:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  alt: 'Avatar'
+---
+::
+
+### Placeholder
+
+If there is an error loading the `src` of the avatar or `src` is null a background placeholder will be displayed, customizable in `ui.avatar.background`.
+
+If there's an `alt` prop initials will be displayed on top of the background, customizable in `ui.avatar.placeholder`.
+
+::component-card
+---
+props:
+  alt: 'Benjamin Canac'
+---
+::
+
+### Group
+
+To stack avatars as a group, use the `AvatarGroup` component.
+
+- To limit the amount of avatars to show, use the `max` prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars)
+- To size all the avatars equally, pass the `size` prop
+- To adjust the spacing or the ring between avatars, customize with `ui.avatarGroup.margin` or `ui.avatarGroup.ring`
+
+::component-card{slug="AvatarGroup"}
+---
+props:
+  size: 'sm'
+  max: 2
+ui:
+  size:
+    '3xs': ''
+    '2xs': ''
+    xs: ''
+    sm: ''
+    md: ''
+    lg: ''
+    xl: ''
+    '2xl': ''
+    '3xl': ''
+code: |
+  <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
+---
+
+#default
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Avatar"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="Avatar"}
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/2.elements/2.badge.md

@@ -0,0 +1,60 @@
+---
+github: true
+description: Display a short text to represent a status or a category.
+---
+
+## Usage
+
+Use the default slot to set the text of the Badge.
+
+::component-card
+---
+code: Badge
+---
+
+Badge
+::
+
+You can also use the `label` prop:
+
+::component-card
+---
+props:
+  label: Badge
+---
+::
+
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Badge.
+
+::component-card
+---
+props:
+  color: 'primary'
+  variant: 'solid'
+---
+
+Badge
+::
+
+### Size
+
+Use the `size` prop to change the size of the Badge.
+
+::component-card
+---
+props:
+  size: 'sm'
+---
+
+Badge
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/2.elements/3.button.md

@@ -0,0 +1,284 @@
+---
+github: true
+description: Create a button with icon or link capabilities.
+---
+
+## Usage
+
+Use the default slot to set the text of the Button.
+
+::component-card
+---
+code: Button
+---
+
+Button
+::
+
+You can also use the `label` prop.
+
+::component-card
+---
+props:
+  label: Button
+---
+::
+
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Button.
+
+::component-card
+---
+props:
+  color: 'primary'
+  variant: 'solid'
+---
+
+Button
+::
+
+Besides all the colors from the `ui.colors` object, you can also use the `white`, `gray` and `black` colors with their pre-defined variants.
+
+#### White
+
+::component-card
+---
+backgroundClass: 'bg-gray-50 dark:bg-gray-800'
+props:
+  color: 'white'
+  variant: 'solid'
+ui:
+  variant:
+    solid: 1
+    ghost: 1
+excludedProps:
+  - color
+---
+
+Button
+::
+
+#### Gray
+
+::component-card
+---
+props:
+  color: 'gray'
+  variant: 'solid'
+ui:
+  variant:
+    solid: 1
+    ghost: 1
+    link: 1
+excludedProps:
+  - color
+---
+
+Button
+::
+
+#### Black
+
+::component-card
+---
+props:
+  color: 'black'
+  variant: 'solid'
+ui:
+  variant:
+    solid: 1
+    link: 1
+excludedProps:
+  - color
+---
+
+Button
+::
+
+### Size
+
+Use the `size` prop to change the size of the Button.
+
+::component-card
+---
+props:
+  size: 'sm'
+---
+
+Button
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+Use the `leading` and `trailing` props to set the icon position or the `leadingIcon` and `trailingIcon` props to set a different icon for each position.
+
+::component-card
+---
+props:
+  icon: 'i-heroicons-pencil-square'
+  size: 'sm'
+  color: 'primary'
+  variant: 'solid'
+  label: Button
+  trailing: false
+excludedProps:
+  - icon
+  - label
+---
+::
+
+The `label` as prop or slot is optional so you can use the Button as an icon-only button.
+
+::component-card
+---
+props:
+  icon: 'i-heroicons-pencil-square'
+  size: 'sm'
+  color: 'primary'
+  square: true
+  variant: 'solid'
+excludedProps:
+  - icon
+  - square
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Button.
+
+::component-card
+---
+props:
+  disabled: true
+---
+
+Button
+::
+
+### Loading
+
+Use the `loading` prop to show a loading icon and disable the Button.
+
+Use the `loadingIcon` prop to set a different icon or change it globally in `ui.button.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-card
+---
+props:
+  loading: true
+---
+
+Button
+::
+
+### Block
+
+Use the `block` prop to make the Button fill the width of its container.
+
+::component-card
+---
+props:
+  block: true
+---
+
+Button
+::
+
+### Link
+
+Use the `to` prop to make the Button a link.
+
+::component-card
+---
+props:
+  to: 'https://volta.net'
+  target: '_blank'
+---
+
+Button
+::
+
+### Padded
+
+Use the `padded` prop to remove the padding of the Button.
+
+::component-card
+---
+props:
+  padded: false
+baseProps:
+  color: 'gray'
+  variant: 'link'
+  icon: 'i-heroicons-x-mark-20-solid'
+---
+::
+
+### Square
+
+Use the `square` prop to force the Button to have the same padding horizontally and vertically.
+
+::component-card
+---
+props:
+  square: true
+baseProps:
+  label: 'Button'
+  color: 'gray'
+  variant: 'solid'
+---
+::
+
+### Truncate
+
+Use the `truncate` prop to truncate the label of the Button.
+
+::component-card
+---
+props:
+  truncate: true
+  class: 'w-20'
+  label: 'Button with a long text'
+excludedProps:
+  - class
+---
+::
+
+### Group
+
+To stack buttons as a group, use the `ButtonGroup` component.
+
+- To size all the buttons equally, pass the `size` prop
+- To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow`
+
+::component-card{slug="ButtonGroup"}
+---
+props:
+  size: 'sm'
+ui:
+  size:
+    2xs: ''
+    xs: ''
+    sm: ''
+    md: ''
+    lg: ''
+    xl: ''
+code: |
+  <UButton label="Action" color="white" />
+    <UButton icon="i-heroicons-chevron-down-20-solid" color="gray" />
+---
+
+#default
+:u-button{label="Action" color="white"}
+:u-button{icon="i-heroicons-chevron-down-20-solid" color="gray"}
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/2.elements/4.dropdown.md

@@ -0,0 +1,60 @@
+---
+github: true
+description: Display a list of actions in a dropdown menu.
+headlessui:
+  label: 'Menu'
+  to: 'https://headlessui.com/vue/menu'
+---
+
+## Usage
+
+::component-example
+#default
+:dropdown-example
+
+#code
+```vue
+<script setup>
+const items = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }], [{
+    label: 'Edit',
+    icon: 'i-heroicons-pencil-square-20-solid',
+    shortcuts: ['E']
+  }, {
+    label: 'Duplicate',
+    icon: 'i-heroicons-document-duplicate-20-solid',
+    shortcuts: ['D']
+  }], [{
+    label: 'Archive',
+    icon: 'i-heroicons-archive-box-20-solid'
+  }, {
+    label: 'Move',
+    icon: 'i-heroicons-arrow-right-circle-20-solid'
+  }], [{
+    label: 'Delete',
+    icon: 'i-heroicons-trash-20-solid',
+    shortcuts: ['⌘', 'D']
+  }]
+]
+</script>
+
+<template>
+  <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
+    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+  </UDropdown>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/2.elements/5.icon.md

@@ -0,0 +1,21 @@
+---
+github: true
+description: Display an icon from Iconify library.
+---
+
+## Usage
+
+::component-card
+---
+props:
+  name: 'i-heroicons-light-bulb'
+---
+::
+
+::alert{icon="i-heroicons-exclamation-triangle"}
+When playing with the `name` prop above, you won't be able to use any icon you want as icons are bundled on build as explained in the [theming section](/getting-started/theming#icons).
+::
+
+## Props
+
+:component-props

docs/content/2.elements/6.kbd.md

@@ -0,0 +1,71 @@
+---
+github: true
+title: 'Keyboard Key'
+description: Display a keyboard key in a text block.
+navigation:
+  title: 'Kbd'
+---
+
+## Usage
+
+Use the default slot to set the text of the Kbd.
+
+::component-card
+---
+code: K
+---
+
+K
+::
+
+You can also use the `value` prop:
+
+::component-card
+---
+props:
+  value: K
+---
+::
+
+As explained in the [Shortcuts](/getting-started/shortcuts) page, you can use the `metaSymbol` property of the `useShortcuts` composable to display the meta key according to the user's OS.
+
+::component-example
+#default
+:kbd-example
+
+#code
+```vue
+<script setup>
+const { metaSymbol } = useShortcuts()
+</script>
+
+<template>
+  <div class="flex items-center gap-0.5">
+    <UKbd>{{ metaSymbol }}</UKbd>
+    <UKbd>K</UKbd>
+  </div>
+</template>
+```
+::
+
+### Size
+
+Use the `size` prop to change the size of the Kbd.
+
+::component-card
+---
+props:
+  size: 'sm'
+code: 'U'
+---
+
+U
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/3.forms/1.input.md

@@ -0,0 +1,144 @@
+---
+github: true
+description: Display an input field.
+---
+
+## Usage
+
+::component-card
+---
+baseProps:
+  name: 'input'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Input.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+props:
+  size: 'sm'
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+props:
+  placeholder: 'Search...'
+---
+::
+
+### Appearance
+
+Use the `appearance` prop to change the style of the Input.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+props:
+  appearance: 'white'
+---
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+Use the `leading` and `trailing` props to set the icon position or the `leadingIcon` and `trailingIcon` props to set a different icon for each position.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+props:
+  icon: 'i-heroicons-magnifying-glass-20-solid'
+  appearance: 'white'
+  size: 'sm'
+  trailing: false
+excludedProps:
+  - icon
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Input.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+props:
+  placeholder: 'Search...'
+  appearance: 'white'
+  disabled: true
+excludedProps:
+  - placeholder
+---
+::
+
+### Loading
+
+Use the `loading` prop to show a loading icon and disable the Input.
+
+Use the `loadingIcon` prop to set a different icon or change it globally in `ui.input.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Searching...'
+props:
+  loading: true
+  icon: 'i-heroicons-magnifying-glass-20-solid'
+excludedProps:
+  - icon
+---
+::
+
+### Group
+
+You can use the `InputGroup` component to add a label and additional informations to a form element.
+
+::component-card{slug="InputGroup"}
+---
+baseProps:
+  name: 'group'
+props:
+  label: 'Email'
+  help: "We'll only use this for spam."
+  hint: 'Required'
+  required: true
+code: >-
+
+  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{name="group" placeholder="you@example.com" icon="i-heroicons-envelope"}
+::
+
+::alert{icon="i-heroicons-light-bulb"}
+This also works with `Textarea`, `Select` and `SelectMenu` components.
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/3.forms/2.textarea.md

@@ -0,0 +1,76 @@
+---
+github: true
+description: Display a textarea field.
+---
+
+## Usage
+
+::component-card
+---
+baseProps:
+  name: 'textarea'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Textarea.
+
+::component-card
+---
+baseProps:
+  name: 'textarea'
+props:
+  size: 'sm'
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-card
+---
+baseProps:
+  name: 'textarea'
+props:
+  placeholder: 'Search...'
+---
+::
+
+### Appearance
+
+Use the `appearance` prop to change the style of the Textarea.
+
+::component-card
+---
+baseProps:
+  name: 'textarea'
+  placeholder: 'Search...'
+props:
+  appearance: 'white'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Textarea.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+props:
+  appearance: 'white'
+  disabled: true
+---
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/3.forms/3.select.md

@@ -0,0 +1,126 @@
+---
+github: true
+description: Display a select field.
+---
+
+## Usage
+
+The Select component is a wrapper around the native `<select>` HTML element. For more advanced use cases like searching or multiple selection, consider using the [SelectMenu](/forms/select-menu) component.
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  modelValue: 'United States'
+props:
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+excludedProps:
+  - options
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Input.
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  size: 'sm'
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  placeholder: 'Search...'
+---
+::
+
+### Appearance
+
+Use the `appearance` prop to change the style of the Select.
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+  placeholder: 'Search...'
+props:
+  appearance: 'white'
+---
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+Use the `trailingIcon` prop to set a different icon or change it globally in `ui.select.default.trailingIcon`. Defaults to `i-heroicons-chevron-down-20-solid`.
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+  placeholder: 'Search...'
+props:
+  icon: 'i-heroicons-magnifying-glass-20-solid'
+  appearance: 'white'
+  size: 'sm'
+excludedProps:
+  - icon
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Input.
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+  placeholder: 'Search...'
+props:
+  appearance: 'white'
+  disabled: true
+---
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/3.forms/4.select-menu.md

@@ -0,0 +1,179 @@
+---
+github: true
+description: Display a select menu with advanced features.
+headlessui:
+  label: 'Listbox'
+  to: 'https://headlessui.com/vue/listbox'
+---
+
+## Usage
+
+The SelectMenu component renders by default a [Select](/forms/select) component and is based on the `ui.select` preset. You can use most of the Select props to configure the display if you don't want to override the default slot such as [size](/forms/select#size), [placeholder](/forms/select#placeholder), [appearance](/forms/select#appearance), [icon](/forms/select#icon), [disabled](/forms/select#disabled), etc.
+
+Like the Select component, you can use the `options` prop to pass an array of strings or objects.
+
+::component-example
+#default
+:select-menu-example-basic{class="max-w-[12rem] w-full"}
+
+#code
+```vue
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" />
+</template>
+```
+::
+
+You can use the `multiple` prop to select multiple values but you have to override the `#label` slot and handle the display yourself.
+
+::component-example
+#default
+:select-menu-example-multiple{class="max-w-[12rem] w-full"}
+
+#code
+```vue
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref([])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" multiple>
+    <template #label>
+      <span v-if="selected.length" class="font-medium truncate">{{ selected.join(', ') }}</span>
+      <span v-else class="block truncate text-gray-400 dark:text-gray-500">Select people</span>
+    </template>
+  </USelectMenu>
+</template>
+```
+::
+
+You can also override the default slot entirely.
+
+::component-example
+#default
+:select-menu-example-button{class="max-w-[12rem] w-full"}
+
+#code
+```vue
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[3])
+</script>
+
+<template>
+  <USelectMenu v-slot="{ open }" v-model="selected" :options="people">
+    <UButton>
+      {{ selected }}
+
+      <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform" :class="[open && 'transform rotate-90']" />
+    </UButton>
+  </USelectMenu>
+</template>
+```
+::
+
+You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key. You can configure which field will be used to display the label through the `optionAttribute` prop that defaults to `label`.
+
+::component-example
+#default
+:select-menu-example-objects{class="max-w-[12rem] w-full"}
+#code
+```vue
+<script setup>
+const people = [{
+  id: 'benjamincanac',
+  label: 'benjamincanac',
+  href: 'https://github.com/benjamincanac',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
+},
+{
+  id: 'Atinux',
+  label: 'Atinux',
+  href: 'https://github.com/Atinux',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' }
+},
+{
+  id: 'smarroufin',
+  label: 'smarroufin',
+  href: 'https://github.com/smarroufin',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' }
+},
+{
+  id: 'nobody',
+  label: 'Nobody',
+  icon: 'i-heroicons-user-circle'
+}]
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people">
+    <template #label>
+      <UIcon v-if="selected.icon" :name="selected.icon" class="w-4 h-4" />
+      <UAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" />
+
+      {{ selected.label }}
+    </template>
+  </USelectMenu>
+</template>
+```
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+Use the `trailingIcon` prop to set a different icon or change it globally in `ui.select.default.trailingIcon`. Defaults to `i-heroicons-chevron-down-20-solid`.
+
+Use the `selectedIcon` prop to set a different icon or change it globally in `ui.selectMenu.default.selectedIcon`. Defaults to `i-heroicons-check-20-solid`.
+
+::component-card
+---
+baseProps:
+  class: 'max-w-[12rem] w-full'
+  placeholder: 'Select a person'
+  options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+props:
+  icon: 'i-heroicons-magnifying-glass-20-solid'
+excludedProps:
+  - icon
+---
+::
+
+### Search
+
+Use the `searchable` prop to enable search.
+
+This will use Headless UI [Combobox](https://headlessui.com/vue/combobox) component instead of [Listbox](https://headlessui.com/vue/listbox).
+
+::component-card
+---
+baseProps:
+  class: 'max-w-[12rem] w-full'
+  placeholder: 'Select a person'
+  options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+props:
+  searchable: true
+---
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/3.forms/5.checkbox.md

@@ -0,0 +1,76 @@
+---
+github: true
+description: Display a checkbox field.
+---
+
+## Usage
+
+::component-card
+---
+baseProps:
+  name: 'checkbox'
+---
+::
+
+### Label
+
+Use the `label` prop to display a label on the right.
+
+::component-card
+---
+baseProps:
+  name: 'checkbox1'
+props:
+  label: 'Label'
+---
+::
+
+### Required
+
+Use the `required` prop to display a red star next to the label.
+
+::component-card
+---
+baseProps:
+  name: 'checkbox2'
+props:
+  label: 'Label'
+  required: true
+---
+::
+
+### Help
+
+Use the `help` prop to display some text under the Checkbox.
+
+::component-card
+---
+baseProps:
+  name: 'checkbox3'
+props:
+  label: 'Label'
+  help: 'Please check this box'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Checkbox.
+
+::component-card
+---
+baseProps:
+  name: 'checkbox4'
+  modelValue: true
+props:
+  disabled: true
+---
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/3.forms/6.radio.md

@@ -0,0 +1,76 @@
+---
+github: true
+description: Display a radio field.
+---
+
+## Usage
+
+::component-card
+---
+baseProps:
+  name: 'radio'
+---
+::
+
+### Label
+
+Use the `label` prop to display a label on the right.
+
+::component-card
+---
+baseProps:
+  name: 'radio1'
+props:
+  label: 'Label'
+---
+::
+
+### Required
+
+Use the `required` prop to display a red star next to the label.
+
+::component-card
+---
+baseProps:
+  name: 'radio2'
+props:
+  label: 'Label'
+  required: true
+---
+::
+
+### Help
+
+Use the `help` prop to display some text under the Radio.
+
+::component-card
+---
+baseProps:
+  name: 'radio3'
+props:
+  label: 'Label'
+  help: 'Please choose one'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Radio.
+
+::component-card
+---
+baseProps:
+  name: 'radio4'
+  value: true
+props:
+  disabled: true
+---
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/3.forms/7.toggle.md

@@ -0,0 +1,35 @@
+---
+github: true
+description: Display a toggle field.
+headlessui:
+  label: 'Switch'
+  to: 'https://headlessui.com/vue/switch'
+---
+
+## Usage
+
+::component-card
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon-on` and `icon-off` props by using this pattern: `i-{collection_name}-{icon_name}`.
+
+::component-card
+---
+props:
+  iconOn: 'i-heroicons-check-20-solid'
+  iconOff: 'i-heroicons-x-mark-20-solid'
+excludedProps:
+  - iconOn
+  - iconOff
+---
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/4.navigation/1.vertical-navigation.md

@@ -0,0 +1,47 @@
+---
+github: true
+description: Display a vertical navigation.
+---
+
+## Usage
+
+::component-example
+#default
+:vertical-navigation-example
+
+#code
+```vue
+<script setup>
+const links = [{
+  label: 'Profile',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  }
+}, {
+  label: 'Installation',
+  icon: 'i-heroicons-home',
+  to: '/getting-started/installation'
+}, {
+  label: 'Vertical Navigation',
+  icon: 'i-heroicons-chart-bar',
+  to: '/navigation/vertical-navigation'
+}, {
+  label: 'Command Palette',
+  icon: 'i-heroicons-command-line',
+  to: '/navigation/command-palette'
+}]
+</script>
+
+<template>
+  <UVerticalNavigation :links="links" />
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/4.navigation/2.command-palette.md

@@ -0,0 +1,342 @@
+---
+github: true
+description: Add a customizable command palette to your app.
+headlessui:
+  label: 'Combobox'
+  to: 'https://headlessui.com/vue/combobox'
+---
+
+## Usage
+
+Use a `v-model` to display a searchable and selectable list of commands.
+
+::component-example
+---
+padding: false
+---
+
+#default
+:command-palette-example-basic{class="h-[257px]"}
+
+#code
+```vue
+<script setup>
+const people = [
+  { id: 1, label: 'Wade Cooper' },
+  { id: 2, label: 'Arlene Mccoy' },
+  { id: 3, label: 'Devon Webb' },
+  { id: 4, label: 'Tom Cook' },
+  { id: 5, label: 'Tanya Fox' },
+  { id: 6, label: 'Hellen Schmidt' },
+  { id: 7, label: 'Caroline Schultz' },
+  { id: 8, label: 'Mason Heaney' },
+  { id: 9, label: 'Claudie Smitham' },
+  { id: 10, label: 'Emil Schaefer' }
+]
+
+const selected = ref([people[3]])
+</script>
+
+<template>
+  <UCommandPalette
+    v-model="selected"
+    multiple
+    nullable
+    :groups="[{ key: 'people', commands: people }]"
+    :fuse="{ resultLimit: 6, fuseOptions: { threshold: 0.1 } }"
+  />
+</template>
+```
+::
+
+You can put a `CommandPalette` anywhere you want but it's most commonly used inside of a modal.
+
+::component-example
+#default
+:command-palette-example-modal
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+
+const people = [
+  { id: 1, label: 'Wade Cooper' },
+  { id: 2, label: 'Arlene Mccoy' },
+  { id: 3, label: 'Devon Webb' },
+  { id: 4, label: 'Tom Cook' },
+  { id: 5, label: 'Tanya Fox' },
+  { id: 6, label: 'Hellen Schmidt' },
+  { id: 7, label: 'Caroline Schultz' },
+  { id: 8, label: 'Mason Heaney' },
+  { id: 9, label: 'Claudie Smitham' },
+  { id: 10, label: 'Emil Schaefer' }
+]
+
+const selected = ref([])
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen">
+      <UCommandPalette
+        v-model="selected"
+        multiple
+        nullable
+        :groups="[{ key: 'people', commands: people }]"
+      />
+    </UModal>
+  </div>
+</template>
+```
+::
+
+You can pass multiple groups of commands to the component. Each group will be separated by a divider and will display a label.
+
+Without a `v-model`, you can also listen on `@update:model-value` to navigate to a link or do something else when a command is clicked.
+
+::component-example
+---
+padding: false
+---
+
+#default
+:command-palette-example-groups{class="h-[274px]"}
+
+#code
+```vue
+<script setup>
+const router = useRouter()
+
+const commandPaletteRef = ref()
+
+const users = [
+  { id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } },
+  { id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' } },
+  { id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' } }
+]
+
+const actions = [
+  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => alert('New file'), shortcuts: ['⌘', 'N'] },
+  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => alert('New folder'), shortcuts: ['⌘', 'F'] },
+  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => alert('Add hashtag'), shortcuts: ['⌘', 'H'] },
+  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => alert('Add label'), shortcuts: ['⌘', 'L'] }
+]
+
+const groups = computed(() => commandPaletteRef.value?.query
+  ? [{
+      key: 'users',
+      commands: users
+    }]
+  : [{
+      key: 'recent',
+      label: 'Recent searches',
+      commands: users.slice(0, 1)
+    }, {
+      key: 'actions',
+      commands: actions
+    }])
+
+function onSelect (option) {
+  if (option.click) {
+    option.click()
+  } else if (option.to) {
+    router.push(option.to)
+  } else if (option.href) {
+    window.open(option.href, '_blank')
+  }
+}
+</script>
+
+<template>
+  <UCommandPalette ref="commandPaletteRef" :groups="groups" @update:model-value="onSelect" />
+</template>
+```
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+Use the `selectedIcon` prop to set a different icon or change it globally in `ui.commandPalette.default.selectedIcon`. Defaults to `i-heroicons-check-20-solid`.
+
+::component-card
+---
+padding: false
+baseProps:
+  empty: null
+props:
+  icon: 'i-heroicons-command-line'
+excludedProps:
+  - icon
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to change the input placeholder
+
+::component-card
+---
+padding: false
+baseProps:
+  empty: null
+props:
+  placeholder: 'Type a command...'
+excludedProps:
+  - icon
+---
+::
+
+### Close
+
+Use the `close` prop to display a close button on the right side of the input.
+
+You can pass all the props of the [Button](/elements/button) component to customize it through the `close` prop or globally through `ui.commandPalette.default.close`.
+
+::component-card
+---
+padding: false
+baseProps:
+  empty: null
+props:
+  close:
+    icon: 'i-heroicons-x-mark-20-solid'
+    color: 'gray'
+    variant: 'link'
+    padded: false
+excludedProps:
+  - close
+---
+::
+
+### Empty
+
+Use the `empty` prop to display a message when there are no results.
+
+You can pass an `object` through the `empty` prop or globally through `ui.commandPalette.default.empty`. Here is the default:
+
+::component-card
+---
+padding: false
+baseProps:
+  placeholder: 'Type something to see the empty label change'
+props:
+  empty:
+    icon: 'i-heroicons-magnifying-glass-20-solid'
+    label: "We couldn't find any items."
+    queryLabel: "We couldn't find any items with that term. Please try again."
+excludedProps:
+  - empty
+---
+::
+
+## Full-text search
+
+The CommandPalette component takes care of the full-text search for you with [Fuse.js](https://fusejs.io). You can pass all the options of Fuse.js through the `fuse` prop.
+
+When searching for a command, the component will look for a `label` property on the command by default. You can customize this behaviour by overriding the `commandAttribute` prop. This will also affect the display of the command.
+
+You can also highlight the matches in the command by setting the `fuse.fuseOptions.includeMatches` to `true`. The CommandPalette component automatically takes care of the highlighting for you.
+
+```vue
+<template>
+  <UCommandPalette
+    command-attribute="title"
+    :fuse="{
+      fuseOptions: {
+        ignoreLocation: true,
+        includeMatches: true,
+        threshold: 0,
+        keys: ['title', 'description', 'children.children.value', 'children.children.children.value']
+      },
+      resultLimit: 10
+    }"
+  />
+</template>
+```
+
+::alert{icon="i-heroicons-light-bulb"}
+Try it yourself in this documentation's search by pressing :badge-shortcut{value="meta"} :badge-shortcut{value="K" class="ml-1"}.
+::
+
+## Async search
+
+You can also pass an `async` function to the `search` property of a group to perform an async search. The function will receive the query as its first argument and should return an array of commands.
+
+::component-example
+---
+padding: false
+---
+
+#default
+:command-palette-example-async{class="h-[274px]"}
+#code
+```vue
+<script setup>
+const groups = computed(() => {
+  return [{
+    key: 'users',
+    label: q => q && `Users matching “${q}”...`,
+    search: async (q) => {
+      if (!q) {
+        return []
+      }
+
+      const users = await $fetch(`https://jsonplaceholder.typicode.com/users`, { params: { q } })
+
+      return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
+    }
+  }].filter(Boolean)
+})
+</script>
+
+<template>
+  <UCommandPalette :groups="groups" />
+</template>
+```
+::
+
+## Themes
+
+Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.
+
+### Algolia
+
+::component-example
+---
+padding: false
+---
+
+#default
+:command-palette-theme-algolia{class="max-h-[480px] rounded-md"}
+::
+
+::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
+Take a look at the component!
+::
+
+### Raycast
+
+::component-example
+---
+padding: false
+---
+
+#default
+:command-palette-theme-raycast{class="max-h-[480px] rounded-md"}
+::
+
+::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
+Take a look at the component!
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/5.overlays/1.modal.md

@@ -0,0 +1,73 @@
+---
+github: true
+description: Display a modal within your application.
+headlessui:
+  label: 'Dialog'
+  to: 'https://headlessui.com/vue/dialog'
+---
+
+## Usage
+
+::component-example
+#default
+:modal-example-basic
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen">
+      <!-- Content -->
+    </UModal>
+  </div>
+</template>
+```
+::
+
+You can put a [Card](/layout/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots:
+
+::component-example
+#default
+:modal-example-card
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen">
+      <UCard :ui="{ divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <!-- Content -->
+        </template>
+
+        <!-- Content -->
+
+        <template #footer>
+          <!-- Content -->
+        </template>
+      </UCard>
+    </UModal>
+  </div>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/5.overlays/2.slideover.md

@@ -0,0 +1,38 @@
+---
+github: true
+description: Display a dialog that slides in from the edge of the screen.
+headlessui:
+  label: 'Dialog'
+  to: 'https://headlessui.com/vue/dialog'
+---
+
+## Usage
+
+::component-example
+#default
+:slideover-example
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen">
+      <!-- Content -->
+    </USlideover>
+  </div>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/5.overlays/3.popover.md

@@ -0,0 +1,34 @@
+---
+github: true
+description: Display a non-modal dialog that floats around a trigger element.
+headlessui:
+  label: 'Popover'
+  to: 'https://headlessui.com/vue/popover'
+---
+
+## Usage
+
+::component-example
+#default
+:popover-example
+#code
+```vue
+<template>
+  <UPopover>
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel>
+      <!-- Content -->
+    </template>
+  </UPopover>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/5.overlays/4.tooltip.md

@@ -0,0 +1,27 @@
+---
+github: true
+description: Display content that appears on hover next to an element.
+---
+
+## Usage
+
+::component-example
+#default
+:tooltip-example
+#code
+```vue
+<template>
+  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']">
+    <UButton color="gray" label="Hover me" />
+  </UTooltip>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/5.overlays/5.context-menu.md

@@ -0,0 +1,51 @@
+---
+github: true
+description: Display a menu that appears on right click.
+---
+
+## Usage
+
+::component-example
+#default
+:context-menu-example
+#code
+```vue
+<script setup>
+const { x, y } = useMouse()
+const { y: windowY } = useWindowScroll()
+
+const isOpen = ref(false)
+const virtualElement = ref({ getBoundingClientRect: () => ({}) })
+
+function onContextMenu () {
+  const top = unref(y) - unref(windowY)
+  const left = unref(x)
+
+  virtualElement.value.getBoundingClientRect = () => ({
+    width: 0,
+    height: 0,
+    top,
+    left
+  })
+
+  isOpen.value = true
+}
+</script>
+
+<template>
+  <div @contextmenu.prevent="onContextMenu">
+    <UContextMenu v-model="isOpen" :virtual-element="virtualElement">
+      <!-- Content -->
+    </UContextMenu>
+  </div>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/5.overlays/6.notification.md

@@ -0,0 +1,261 @@
+---
+github: true
+description: Display a toast notification in your app.
+---
+
+## Usage
+
+First of all, add the `Notifications` component to your app, preferably inside `app.vue`.
+
+```vue [app.vue]
+<template>
+  <div>
+    <UContainer>
+      <NuxtPage />
+    </UContainer>
+
+    <UNotifications />
+  </div>
+</template>
+```
+
+Then, you can use the `useToast` composable to add notifications to your app:
+
+::component-example
+#default
+:notification-example-basic
+#code
+```vue
+<script setup>
+const toast = useToast()
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
+</template>
+```
+::
+
+This component will render by default the notifications at the bottom right of the screen. You can configure its behaviour in the `app.config.ts` through `ui.notifications`:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    notifications: {
+      // Show toasts at the top right of the screen
+      position: 'top-0 right-0'
+    }
+  }
+})
+```
+
+### Description
+
+You can add a `description` in addition of the `title`.
+
+::component-card
+---
+baseProps:
+  id: 2
+  timeout: 0
+props:
+  title: 'Notification'
+  description: 'This is a notification.'
+---
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+::component-card
+---
+baseProps:
+  id: 3
+  timeout: 0
+  title: 'Notification'
+props:
+  icon: 'i-heroicons-check-circle'
+  description: 'This is a notification.'
+excludedProps:
+  - icon
+---
+::
+
+### Avatar
+
+Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props.
+
+::component-card
+---
+baseProps:
+  id: 4
+  timeout: 0
+  title: 'Notification'
+  description: 'This is a notification.'
+props:
+  avatar:
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+excludedProps:
+  - avatar
+---
+::
+
+### Timeout
+
+Use the `timeout` prop to configure how long the Notification will remain. Set it to `0` to disable the timeout.
+
+You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused.
+
+::component-card
+---
+baseProps:
+  id: 5
+  title: 'Notification'
+  description: 'This is a notification.'
+props:
+  timeout: 10000
+---
+::
+
+### Click
+
+Use the `click` prop to execute a function when the Notification is clicked.
+
+::component-example
+#default
+:notification-example-click
+#code
+```vue
+<script setup>
+const toast = useToast()
+
+function onClick () {
+  alert('Clicked!')
+}
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Click me', click: onClick })" />
+</template>
+```
+::
+
+### Callback
+
+Use the `callback` prop to execute a function when the Notification expires.
+
+::component-example
+#default
+:notification-example-callback
+#code
+```vue
+<script setup>
+const toast = useToast()
+
+function onCallback () {
+  alert('Notification expired!')
+}
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Expires soon...', timeout: 1000, callback: onCallback })" />
+</template>
+```
+::
+
+### Close
+
+Use the `close` prop to hide or customize the close button on the Notification.
+
+You can pass all the props of the [Button](/elements/button) component to customize it through the `close` prop or globally through `ui.notifications.default.close`.
+
+::component-card
+---
+baseProps:
+  id: 6
+  title: 'Notification'
+  timeout: 0
+props:
+  close:
+    icon: 'i-heroicons-archive-box-x-mark'
+    color: 'primary'
+    variant: 'outline'
+    padded: true
+    size: '2xs'
+    ui:
+      rounded: 'rounded-full'
+excludedProps:
+  - close
+---
+::
+
+### Actions
+
+Use the `actions` prop to add actions to the Notification.
+
+::component-example
+#default
+:notification-example-actions
+#code
+```vue
+<script setup>
+const toast = useToast()
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Click me', click: () => alert('Clicked!') })" />
+</template>
+```
+::
+
+Like for `close`, you can pass all the props of the [Button](/elements/button) component inside the action or globally through `ui.notifications.default.action`.
+
+::component-card
+---
+baseProps:
+  id: 6
+  title: 'Notification'
+  timeout: 0
+props:
+  actions:
+    - variant: 'ghost'
+      color: 'gray'
+      label: Action 1
+    - variant: 'solid'
+      color: 'gray'
+      label: Action 2
+excludedProps:
+  - actions
+---
+::
+
+Actions will render differently whether you have a `description` set.
+
+::component-card
+---
+baseProps:
+  id: 6
+  title: 'Notification'
+  description: 'This is a notification.'
+  timeout: 0
+props:
+  actions:
+    - variant: 'solid'
+      color: 'primary'
+      label: Action 1
+    - variant: 'outline'
+      color: 'primary'
+      label: Action 2
+excludedProps:
+  - actions
+---
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/6.layout/1.card.md

@@ -0,0 +1,36 @@
+---
+github: true
+description: Display a card for content with a header, body and footer.
+---
+
+## Usage
+
+::component-example
+#default
+:card-example{class="w-full"}
+
+#code
+```vue
+<template>
+  <UCard>
+    <template #header />
+
+    Body
+
+    <template #footer />
+  </UCard>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Slots
+
+:component-slots
+
+## Preset
+
+:component-preset

docs/content/6.layout/2.container.md

@@ -0,0 +1,26 @@
+---
+github: true
+description: A container lets you center and constrain the width of your content.
+---
+
+## Usage
+
+::component-example
+#default
+:container-example{class="w-full"}
+
+#code
+```vue
+<template>
+  <UContainer>Content</UContainer>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/6.layout/3.skeleton.md

@@ -0,0 +1,34 @@
+---
+github: true
+description: Display a placeholder while content is loading.
+---
+
+## Usage
+
+Use to show a placeholder while content is loading.
+
+::component-example
+#default
+:skeleton-example
+
+#code
+```vue
+<template>
+  <div class="flex items-center space-x-4">
+    <USkeleton class="h-12 w-12 rounded-full" />
+    <div class="space-y-2">
+      <USkeleton class="h-4 w-[250px]" />
+      <USkeleton class="h-4 w-[200px]" />
+    </div>
+  </div>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="prose prose-primary dark:prose-invert max-w-none">
+    <slot />
+  </div>
+</template>