chore(release): 2.4.0

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

.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

@@ -22,30 +22,41 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
 
-      - name: Checkout
+      - name: checkout
         uses: actions/checkout@master
-        with:
-          persist-credentials: false
-          fetch-depth: 0
 
-      - name: Cache
-        uses: actions/cache@v3
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
         with:
-          path: node_modules
-          key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
+          version: 7
+          run_install: false
 
-      - name: Dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
 
       - name: Lint
-        run: yarn lint
+        run: pnpm run lint
 
       - name: Typecheck
-        run: yarn typecheck
+        run: pnpm run typecheck
 
       - name: Build
-        run: yarn build
+        run: pnpm run build
 
       - name: Release Edge
         if: github.event_name == 'push'

.github/workflows/ci.yml

@@ -22,30 +22,41 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
 
-      - name: Checkout
+      - name: checkout
         uses: actions/checkout@master
-        with:
-          persist-credentials: false
-          fetch-depth: 0
 
-      - name: Cache
-        uses: actions/cache@v3
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
         with:
-          path: node_modules
-          key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
+          version: 7
+          run_install: false
 
-      - name: Dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
 
       - name: Lint
-        run: yarn lint
+        run: pnpm run lint
 
       - name: Typecheck
-        run: yarn typecheck
+        run: pnpm run typecheck
 
       - name: Build
-        run: yarn build
+        run: pnpm run build
 
       - name: Version Check
         id: check

.gitignore

@@ -6,3 +6,4 @@ nuxt.d.ts
 dist
 .DS_Store
 .history
+.vercel

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

CHANGELOG.md

@@ -2,6 +2,145 @@
 
 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.4.0](https://github.com/nuxtlabs/ui/compare/v2.3.0...v2.4.0) (2023-06-13)
+
+
+### ⚠ BREAKING CHANGES
+
+* **forms:** bind `$attrs` to elements (#279)
+* **Select:** rename `text-attribute` to `option-attribute` and defaults to `label`
+
+### Features
+
+* **CommandPalette:** handle `empty-state` ([#271](https://github.com/nuxtlabs/ui/issues/271)) ([652af93](https://github.com/nuxtlabs/ui/commit/652af93f5c7cd4b34044a5597f3c14441ed6d998))
+* **module:** smart safelisting ([#268](https://github.com/nuxtlabs/ui/issues/268)) ([20fa4d2](https://github.com/nuxtlabs/ui/commit/20fa4d2317fc1e14fe87fa273957b92e63668945))
+* **Pagination:** new component ([#257](https://github.com/nuxtlabs/ui/issues/257)) ([f0b24ba](https://github.com/nuxtlabs/ui/commit/f0b24ba25d52184b8683e364016ed8fb800fc96b))
+* **table:** add loading state ([#259](https://github.com/nuxtlabs/ui/issues/259)) ([4741532](https://github.com/nuxtlabs/ui/commit/47415322ea56b5388e55c404c901531e807a9f00))
+* **table:** add slot for empty state ([#260](https://github.com/nuxtlabs/ui/issues/260)) ([f7a34c8](https://github.com/nuxtlabs/ui/commit/f7a34c8feeda6a4e1e1daff87b37b375aaa0c90d))
+
+
+### Bug Fixes
+
+* **ButtonGroup:** invalid `size` validator ([a617672](https://github.com/nuxtlabs/ui/commit/a6176720c75b26768ba91efcab50689a932931ad))
+* **ButtonGroup:** use `-space-x-px` on wrapper ([d91c0bb](https://github.com/nuxtlabs/ui/commit/d91c0bb8944224d4e8eb62f99a33a6be94e5cd92))
+* **Button:** same size when no label + uniformize form elements ([a6903df](https://github.com/nuxtlabs/ui/commit/a6903df58fb91da44e6f83cc2bd9c963827fe5dd))
+* **CommandPalette:** input focus after be5f352 ([cbc8ef1](https://github.com/nuxtlabs/ui/commit/cbc8ef13cc3253690c22c32d90ea9746970c345a))
+* **deps:** move `@tailwindcss/container-queries` to dependencies ([9559d0b](https://github.com/nuxtlabs/ui/commit/9559d0b3bc09956d7fe17ee0deeef03599d02d45))
+* **forms:** `padded` prop with `p-0` class ([207444f](https://github.com/nuxtlabs/ui/commit/207444fdea773b8ee64dd4f80b4f70b76462a9d6))
+* **forms:** bind `$attrs` to elements ([#279](https://github.com/nuxtlabs/ui/issues/279)) ([e12e974](https://github.com/nuxtlabs/ui/commit/e12e9740c97b75d3b7b70c38978e249b5e26eead))
+* **module:** deduplicate default safelist as components may share same rules ([2cfa1f8](https://github.com/nuxtlabs/ui/commit/2cfa1f8d0355d4c9cec5d4294d63e043d223cd64))
+* **module:** hardcode `gray` safelist instead of deduplicate complex logic ([a733c13](https://github.com/nuxtlabs/ui/commit/a733c13866cdb74398f3e6f022cc63223e269e19))
+* **module:** only safelist known colors ([cdce519](https://github.com/nuxtlabs/ui/commit/cdce519742b86ff29460aa50264d7bb34ad24bd0))
+* **module:** prevent safelisting dynamic `:color` variables ([ccd9ca5](https://github.com/nuxtlabs/ui/commit/ccd9ca5106d0b81aed6591097f121eb81dcc9b47))
+* **module:** transform `vue` files to detect multi-line components ([88c1930](https://github.com/nuxtlabs/ui/commit/88c1930845d26c66c2fbd32f99f52dbd23244341))
+* **module:** use `@tailwindcss/forms` class strategy ([#278](https://github.com/nuxtlabs/ui/issues/278)) ([be5f352](https://github.com/nuxtlabs/ui/commit/be5f352296cf4e0c9099cf468ed905283b31007d))
+* **Notification:** class priority for icon color ([07f7855](https://github.com/nuxtlabs/ui/commit/07f7855a263e516250f62d0730afc69753d0322c))
+* **Radio/Checkbox:** split preset as `indeterminate` is checkbox only ([429791d](https://github.com/nuxtlabs/ui/commit/429791dab0fbb84bae1e1e13e7e688708f0b5c98))
+* **SelectMenu:** input focus after `be5f352` ([717a514](https://github.com/nuxtlabs/ui/commit/717a5144511c4db013a57869ac06421accf51e38))
+* **Table:** colspan of `empty` and `loading` is wrong when selection enabled ([#284](https://github.com/nuxtlabs/ui/issues/284)) ([786d776](https://github.com/nuxtlabs/ui/commit/786d7765f5517a7e8cdd718ce93fd9fecc427ba7))
+* **Toggle:** missing `disabled` prop ([fe833eb](https://github.com/nuxtlabs/ui/commit/fe833eb2b2b4d1d32eb9e082b437a0259b6f75c6))
+
+
+* **Select:** rename `text-attribute` to `option-attribute` and defaults to `label` ([b4a96a8](https://github.com/nuxtlabs/ui/commit/b4a96a8b01b52751c9a9c6609ed8cf7ccf516a04))
+
+## [2.3.0](https://github.com/nuxtlabs/ui/compare/v2.2.1...v2.3.0) (2023-06-05)
+
+
+### ⚠ BREAKING CHANGES
+
+* **Input:** move pointer class inside its own preset class
+* **SelectMenu:** remove `inline-flex` from wrapper to behave like other form elements
+* **Notification:** rename to `closeButton` and `actionButton` for consistency
+* **CommandPalette:** rename props to `emptyState` and `closeButton` for consistency
+* **Toggle:** rename icons to `onIcon` / `offIcon` for consistency
+
+### Features
+
+* add `Table` component ([#237](https://github.com/nuxtlabs/ui/issues/237)) ([cce000a](https://github.com/nuxtlabs/ui/commit/cce000ab2b2af1079216e0e79769703fc4d9933e))
+
+
+### Bug Fixes
+
+* **Avatar:** placeholder font size ([71edb91](https://github.com/nuxtlabs/ui/commit/71edb91c4ff17a258d6229ed6c6fa6a4b54bdd53))
+* **Badge:** remove `console.log` in validator ([f9b935f](https://github.com/nuxtlabs/ui/commit/f9b935f5f59b872fd952a2739d305d6574bf7cf8))
+* **Button:** invalid padding when using `square` prop ([1ebaa5a](https://github.com/nuxtlabs/ui/commit/1ebaa5aa00752cd276f7c754d64ac7f85b14dc26))
+* **CommandPalette:** override of `closeButton` and `emptyState` props ([2c673f5](https://github.com/nuxtlabs/ui/commit/2c673f5377dbbcdefa6b57eddba2c19d065d5f1f))
+* **defineShortcuts:** err with input autocomplete that triggers `keydown` ([01fa85c](https://github.com/nuxtlabs/ui/commit/01fa85c7a3e476d4f710ed3a36c1e815fc986a94))
+* **SelectMenu:** disable on loading ([8951923](https://github.com/nuxtlabs/ui/commit/8951923a11d533ebf53dbec5f852800555af253c))
+* **Table:** add missing `text-left` in `th.base` ([6bd5142](https://github.com/nuxtlabs/ui/commit/6bd5142a377694599952e0f9b53fde0d0132b61b))
+* **Table:** missing `ref` import from `vue` ([272af9d](https://github.com/nuxtlabs/ui/commit/272af9d24c7cda8341e66b57f76acdb9f46ea23e))
+* **Table:** override of `sortButton` and `emptyState` props ([192b0e6](https://github.com/nuxtlabs/ui/commit/192b0e63018ae73e8acaa8b4b1771cda2b59bdb6))
+* **Table:** type `sort` prop ([3ba0aed](https://github.com/nuxtlabs/ui/commit/3ba0aedcba578350e2fdd9c180505ed8920e0404))
+* use `cloneVNode` when altering props in render functions ([5e50eb9](https://github.com/nuxtlabs/ui/commit/5e50eb9eb82571d22e0a2f1a2fe985addf7efe18)), closes [#252](https://github.com/nuxtlabs/ui/issues/252)
+
+
+* **CommandPalette:** rename props to `emptyState` and `closeButton` for consistency ([daca463](https://github.com/nuxtlabs/ui/commit/daca46371cab1344bd87ffb0abe0f7e9cdb08609))
+* **Input:** move pointer class inside its own preset class ([f59a92c](https://github.com/nuxtlabs/ui/commit/f59a92ca1533a44e17fbc8b7945bdaa9a83e805a))
+* **Notification:** rename to `closeButton` and `actionButton` for consistency ([4458656](https://github.com/nuxtlabs/ui/commit/4458656be5547fc9505a5c4758bea4818ada408b))
+* **SelectMenu:** remove `inline-flex` from wrapper to behave like other form elements ([ba44c58](https://github.com/nuxtlabs/ui/commit/ba44c58a80252a4394fcf2f84611ea2696883120))
+* **Toggle:** rename icons to `onIcon` / `offIcon` for consistency ([8ee2ac1](https://github.com/nuxtlabs/ui/commit/8ee2ac10e7eda4c54418f613a5ef87dd89e1f7eb))
+
+### [2.2.1](https://github.com/nuxtlabs/ui/compare/v2.2.0...v2.2.1) (2023-05-27)
+
+
+### Bug Fixes
+
+* **FormGroup:** missing `h` import from `vue` ([a96dc19](https://github.com/nuxtlabs/ui/commit/a96dc192157725143503b1a5e4b404cb48dc9d3f)), closes [#236](https://github.com/nuxtlabs/ui/issues/236)
+
+## [2.2.0](https://github.com/nuxtlabs/ui/compare/v2.1.0...v2.2.0) (2023-05-26)
+
+
+### ⚠ BREAKING CHANGES
+
+* handle color states on form elements (#234)
+* **Notification:** rename `progressColor` to `color` and style icon
+* **Avatar:** remove `chipVariant` prop
+* **VerticalNavigation:** split preset
+
+### Features
+
+* handle color states on form elements ([#234](https://github.com/nuxtlabs/ui/issues/234)) ([9ce531a](https://github.com/nuxtlabs/ui/commit/9ce531a06f1a972bc003876162e0503c1bbbdbd8))
+
+
+### Bug Fixes
+
+* **Notification:** remove default color on icon ([1a9dc5c](https://github.com/nuxtlabs/ui/commit/1a9dc5c980d8477cdf9386a17e20fc9fec0d883e))
+* **Radio/Checkbox:** remove ring offset on focus ([a56dbea](https://github.com/nuxtlabs/ui/commit/a56dbeab351a5c58e5bb49f5762669e2884c6483))
+* **VerticalNavigation:** badge display ([d2ee505](https://github.com/nuxtlabs/ui/commit/d2ee5058f819fc17f281f323dab2f0b3d80cf7bd)), closes [#205](https://github.com/nuxtlabs/ui/issues/205)
+
+
+* **Avatar:** remove `chipVariant` prop ([1f22f84](https://github.com/nuxtlabs/ui/commit/1f22f84360c20498eea8971b21db9293a4c9c3dc))
+* **Notification:** rename `progressColor` to `color` and style icon ([1b61ec7](https://github.com/nuxtlabs/ui/commit/1b61ec72e292325d7776a4719f14a75bdb18e110))
+* **VerticalNavigation:** split preset ([19923cb](https://github.com/nuxtlabs/ui/commit/19923cbf1edc6c6d4aefb9ffab9f908b116e1c69))
+
+## [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)
 
 

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) and [HeadlessUI](https://headlessui.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'
   ]
 })
@@ -29,3 +43,34 @@ If you want latest updates, please use `@nuxthq/ui-edge` in your `package.json`:
   }
 }
 ```
+
+## Documentation
+
+Visit http://ui.nuxtlabs.com to view the documentation.
+
+## 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)
+
+## License
+
+Licensed under the [MIT license](https://github.com/nuxtlabs/ui/blob/dev/LICENSE.md).
+
+<!-- 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
+
+[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
+
+[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
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

docs/app.vue

@@ -6,46 +6,51 @@
       <div class="relative grid lg:grid-cols-10 lg:gap-8">
         <DocsAside class="lg:col-span-2" />
 
-        <div class="relative lg:col-span-6 pt-8 pb-16">
+        <div class="relative pt-8 pb-16" :class="[toc ? 'lg:col-span-6' : 'lg:col-span-8']">
           <DocsPageHeader />
 
           <NuxtPage />
 
-          <hr class="border-gray-200 dark:border-gray-800 my-12">
+          <DocsPageFooter class="mt-12" />
+
+          <hr class="border-gray-200 dark:border-gray-800 my-6">
 
           <DocsPrevNext />
+
+          <DocsFooter class="mt-16" />
         </div>
 
-        <DocsToc class="lg:col-span-2 order-first lg:order-last" />
+        <DocsToc v-if="toc" class="lg:col-span-2 order-first lg:order-last" />
       </div>
     </UContainer>
 
-    <DocsSearch />
+    <ClientOnly>
+      <DocsSearch />
+    </ClientOnly>
 
     <UNotifications />
   </div>
 </template>
 
 <script setup lang="ts">
-const colorScheme = usePreferredColorScheme()
+const { toc } = useContent()
 const colorMode = useColorMode()
 
 // Computed
 
-const href = computed(() => colorScheme.value === 'dark' ? '/icon-dark.svg' : '/icon-light.svg')
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
 // Head
 
 useHead({
-  titleTemplate: title => title && title !== 'nuxthq/ui' ? `${title} - nuxthq/ui` : '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' },
     { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
     { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' },
-    { rel: 'icon', type: 'image/svg+xml', href }
+    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
   ],
   htmlAttrs: {
     lang: 'en'
@@ -54,4 +59,10 @@ useHead({
     class: 'antialiased font-sans text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900'
   }
 })
+
+useSeoMeta({
+  ogImage: '/social-preview.jpg',
+  twitterImage: '/social-preview.jpg',
+  twitterCard: 'summary_large_image'
+})
 </script>

docs/app/router.options.ts

@@ -1,38 +1,48 @@
 import type { RouterConfig } from '@nuxt/schema'
-// https://router.vuejs.org/api/interfaces/routeroptions.html
-export default <RouterConfig> {
-  scrollBehavior (to, _form, savedPosition) {
-    if (history.state.stop) { return }
 
-    if (history.state.smooth) {
-      return {
-        el: history.state.smooth,
-        behavior: 'smooth'
-      }
-    }
+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)
 
-    if (to.hash) {
-      const el = document.querySelector(to.hash) as any
-
-      if (!el) { return }
-
-      const { marginTop } = getComputedStyle(el)
-
-      const marginTopValue = parseInt(marginTop)
-
-      const offset = (document.querySelector(to.hash) as any).offsetTop - marginTopValue
-
-      return {
-        top: offset,
-        behavior: 'smooth'
-      }
-    }
-
-    // Scroll to top of window
-    if (savedPosition) {
-      return savedPosition
-    } else {
-      return { top: 0 }
+    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

@@ -3,15 +3,15 @@
     <UContainer>
       <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">
+          <NuxtLink to="/getting-started" 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" />
 
-            nuxthq/ui
+            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">
+        <div class="flex items-center -mr-1.5 gap-1.5">
+          <div class="hidden lg:block">
             <ThemeSelect />
           </div>
 
@@ -62,10 +62,9 @@
           <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">
+                <NuxtLink to="/getting-started" 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" />
-
-                  nuxthq/ui
+                  NuxtLabs<span class="text-primary-500 dark:text-primary-400">UI</span>
                 </NuxtLink>
               </div>
 

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

@@ -1,49 +1,51 @@
 <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}`}" />
+  <ClientOnly>
+    <div class="inline-flex shadow-sm rounded-md">
+      <USelectMenu
+        v-model="primary"
+        name="primary"
+        class="!rounded-r-none !shadow-none focus:z-[1]"
+        color="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>
+          {{ primary.text }}
+        </template>
 
-      <template #option="{ option }">
-        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
+        <template #option="{ option }">
+          <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
 
-        {{ option.text }}
-      </template>
-    </USelectMenu>
+          {{ 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}`}" />
+      <USelectMenu
+        v-model="gray"
+        name="gray"
+        class="!rounded-l-none !shadow-none"
+        color="gray"
+        :ui="{ width: 'w-[194px]', wrapper: '-ml-px' }"
+        :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>
+          {{ gray.text }}
+        </template>
 
-      <template #option="{ option }">
-        <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
+        <template #option="{ option }">
+          <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
 
-        {{ option.text }}
-      </template>
-    </USelectMenu>
-  </div>
+          {{ option.text }}
+        </template>
+      </USelectMenu>
+    </div>
+  </ClientOnly>
 </template>
 
 <script setup lang="ts">
@@ -68,7 +70,7 @@ watch(grayCookie, (gray) => {
 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)
+    return primaryOptions.value.find(option => option.value === primaryCookie.value) || primaryOptions.value.find(option => option.value === 'green')
   },
   set (option) {
     primaryCookie.value = option.value
@@ -78,10 +80,49 @@ const primary = computed({
 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)
+    return grayOptions.value.find(option => option.value === grayCookie.value) || grayOptions.value.find(option => option.value === 'cool')
   },
   set (option) {
     grayCookie.value = option.value
   }
 })
+
+// Hack for SSG
+const hexToRgb = (hex) => {
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+  hex = hex.replace(shorthandRegex, function (_, r, g, b) {
+    return r + r + g + g + b + b
+  })
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result
+    ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}`
+    : null
+}
+const root = computed(() => {
+    return `:root {
+${Object.entries(colors[primary.value.value] || colors.green).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join('\n')}
+${Object.entries(colors[gray.value.value] || colors.cool).map(([key, value]) => `--color-gray-${key}: ${hexToRgb(value)};`).join('\n')}
+}`
+  })
+if (process.client) {
+  watch(root, () => {
+    window.localStorage.setItem('nuxt-ui-root', root.value)
+  }, { immediate: true })
+}
+if (process.server) {
+  useHead({
+    script: [
+      {
+        innerHTML: `
+            if (localStorage.getItem('nuxt-ui-root')) {
+              document.querySelector('style#nuxt-ui-colors').innerHTML = localStorage.getItem('nuxt-ui-root')
+            }`.replace(/\s+/g, ' '),
+        type: 'text/javascript',
+        tagPriority: -1
+      }
+    ]
+  })
+}
 </script>

docs/components/content/Alert.vue

@@ -2,8 +2,8 @@
   <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 prose-code:bg-gray-200 dark:prose-code:bg-gray-800"
-    :class="[to ? 'hover:!border-primary-500 dark:hover:!border-primary-400 hover:text-primary-500 dark:hover:text-primary-400 border-dashed' : '']"
+    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 text-sm leading-6 my-5 last:mb-0 font-normal group relative prose-code:bg-white dark:prose-code:bg-gray-900"
+    :class="[to ? 'hover:!border-primary-500 dark:hover:!border-primary-400 hover:text-primary-500 dark:hover:text-primary-400 border-dashed hover:text-gray-800 dark:hover:text-gray-200' : '']"
   >
     <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" />
 

docs/components/content/BadgeShortcut.vue

@@ -1,9 +1,7 @@
 <template>
-  <kbd class="inline-flex items-center justify-center font-sans font-semibold px-1 h-5 min-w-[20px] text-[11px] rounded !my-0 align-text-top ring-1 ring-gray-300 dark:ring-gray-700">
-    <ClientOnly>
-      {{ shortcut }}
-    </ClientOnly>
-  </kbd>
+  <UKbd class="!my-0 align-text-top">
+    {{ shortcut }}
+  </UKbd>
 </template>
 
 <script setup lang="ts">

docs/components/content/ComponentCard.vue

@@ -2,42 +2,46 @@
   <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>
+        <label :for="`prop-${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"
+          :name="`prop-${prop.name}`"
+          variant="none"
+          :ui="{ wrapper: 'relative flex items-start 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' }"
+          :name="`prop-${prop.name}`"
+          variant="none"
+          :ui="{ width: 'w-32 !-mt-px', rounded: 'rounded-b-md', wrapper: 'relative inline-flex' }"
+          class="!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"
+          :name="`prop-${prop.name}`"
+          variant="none"
           autocomplete="off"
-          :ui="{ custom: '!py-0' }"
+          class="!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]">
+    <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, overflowClass]">
       <component :is="name" v-model="vModel" v-bind="fullProps">
         <ContentSlot v-if="$slots.default" :use="$slots.default" />
+
+        <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
+          <ClientOnly>
+            <ContentSlot v-if="$slots[slot]" :use="$slots[slot]" />
+          </ClientOnly>
+        </template>
       </component>
     </div>
 
@@ -49,6 +53,7 @@
 // @ts-expect-error
 import { transformContent } from '@nuxt/content/transformers'
 
+// eslint-disable-next-line vue/no-dupe-keys
 const props = defineProps({
   slug: {
     type: String,
@@ -66,6 +71,10 @@ const props = defineProps({
     type: String,
     default: null
   },
+  slots: {
+    type: Object,
+    default: null
+  },
   baseProps: {
     type: Object,
     default: () => ({})
@@ -78,17 +87,27 @@ const props = defineProps({
     type: Array,
     default: () => []
   },
+  extraColors: {
+    type: Array,
+    default: () => []
+  },
   backgroundClass: {
     type: String,
     default: 'bg-white dark:bg-gray-900'
+  },
+  overflowClass: {
+    type: String,
+    default: ''
   }
 })
 
+// eslint-disable-next-line vue/no-dupe-keys
 const baseProps = reactive({ ...props.baseProps })
 const componentProps = reactive({ ...props.props })
 
 const appConfig = useAppConfig()
 const route = useRoute()
+// eslint-disable-next-line vue/no-dupe-keys
 const slug = props.slug || route.params.slug[1]
 const camelName = useCamelCase(slug)
 const name = `U${useUpperFirst(camelName)}`
@@ -97,9 +116,10 @@ const meta = await fetchComponentMeta(name)
 
 // Computed
 
+// eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => ({ ...appConfig.ui[camelName], ...props.ui }))
 
-const fullProps = computed(() => ({ ...props.baseProps, ...componentProps }))
+const fullProps = computed(() => ({ ...baseProps, ...componentProps }))
 const vModel = computed({
   get: () => baseProps.modelValue,
   set: (value) => {
@@ -117,7 +137,8 @@ const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
   const keys = useGet(ui.value, dottedKey, {})
   let options = typeof keys === 'object' && Object.keys(keys)
   if (key.toLowerCase().endsWith('color')) {
-    options = appConfig.ui.colors
+    // @ts-ignore
+    options = [...appConfig.ui.colors, ...props.extraColors]
   }
 
   return {
@@ -128,6 +149,7 @@ const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
   }
 }).filter(Boolean))
 
+// eslint-disable-next-line vue/no-dupe-keys
 const code = computed(() => {
   let code = `\`\`\`html
 <${name}`
@@ -140,7 +162,14 @@ const code = computed(() => {
 
     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) {
+
+  if (props.slots) {
+    code += `>
+  ${Object.entries(props.slots).map(([key, value]) => `<template #${key}>
+    ${value}
+  </template>`).join('\n  ')}
+</${name}>`
+  } else if (props.code) {
     const lineBreaks = (props.code.match(/\n/g) || []).length
     if (lineBreaks > 1) {
       code += `>
@@ -173,7 +202,7 @@ function renderObject (obj: any) {
   return obj
 }
 
-const { data: ast } = await useAsyncData(`${name}-ast-${JSON.stringify(componentProps)}`, () => transformContent('content:_markdown.md', code.value, {
+const { data: ast } = await useAsyncData(`${name}-ast-${JSON.stringify(props)}`, () => transformContent('content:_markdown.md', code.value, {
   highlight: {
     theme: {
       light: 'material-lighter',

docs/components/content/ComponentExample.vue

@@ -1,6 +1,6 @@
 <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]">
+    <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, overflowClass]">
       <ContentSlot v-if="$slots.default" :use="$slots.default" />
     </div>
 
@@ -17,6 +17,10 @@ defineProps({
   backgroundClass: {
     type: String,
     default: 'bg-white dark:bg-gray-900'
+  },
+  overflowClass: {
+    type: String,
+    default: ''
   }
 })
 </script>

docs/components/content/ComponentPreset.vue

@@ -15,6 +15,7 @@ const props = defineProps({
 
 const appConfig = useAppConfig()
 const route = useRoute()
+// eslint-disable-next-line vue/no-dupe-keys
 const slug = props.slug || route.params.slug[1]
 const camelName = useCamelCase(slug)
 const name = `U${useUpperFirst(camelName)}`

docs/components/content/ComponentProps.vue

@@ -43,6 +43,7 @@ const props = defineProps({
 })
 
 const route = useRoute()
+// eslint-disable-next-line vue/no-dupe-keys
 const slug = props.slug || route.params.slug[1]
 const camelName = useCamelCase(slug)
 const name = `U${useUpperFirst(camelName)}`

docs/components/content/ComponentSlots.vue

@@ -26,6 +26,7 @@ const props = defineProps({
 })
 
 const route = useRoute()
+// eslint-disable-next-line vue/no-dupe-keys
 const slug = props.slug || route.params.slug[1]
 const camelName = useCamelCase(slug)
 const name = `U${useUpperFirst(camelName)}`

docs/components/content/VoltaEmbed.vue

@@ -0,0 +1,17 @@
+<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 colorMode = useColorMode()
+
+const src = computed(() => `https://volta.net/embed/${props.token}?theme=${colorMode.value}&gray=${appConfig.ui.gray}&primary=${appConfig.ui.primary}`)
+</script>

docs/components/content/examples/CheckboxExample.vue

@@ -0,0 +1,7 @@
+<script setup>
+const selected = ref(false)
+</script>
+
+<template>
+  <UCheckbox v-model="selected" name="notifications" label="Notifications" />
+</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/CommandPaletteExampleEmptySlot.vue

@@ -0,0 +1,10 @@
+<template>
+  <UCommandPalette>
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center py-6 gap-3">
+        <span class="italic text-sm">Nothing here!</span>
+        <UButton label="Add item" />
+      </div>
+    </template>
+  </UCommandPalette>
+</template>

docs/components/content/examples/CommandPaletteExampleModal.vue

@@ -1,5 +1,5 @@
 <script setup>
-const open = ref(false)
+const isOpen = ref(false)
 
 const people = [
   { id: 1, label: 'Wade Cooper' },
@@ -19,9 +19,9 @@ const selected = ref([])
 
 <template>
   <div>
-    <UButton label="Open" @click="open = true" />
+    <UButton label="Open" @click="isOpen = true" />
 
-    <UModal v-model="open">
+    <UModal v-model="isOpen">
       <UCommandPalette
         v-model="selected"
         multiple

docs/components/content/examples/ContextMenuExample.vue

@@ -1,11 +1,12 @@
 <script setup>
 const { x, y } = useMouse()
+const { y: windowY } = useWindowScroll()
 
 const isOpen = ref(false)
 const virtualElement = ref({ getBoundingClientRect: () => ({}) })
 
-function openContextMenu () {
-  const top = unref(y)
+function onContextMenu () {
+  const top = unref(y) - unref(windowY)
   const left = unref(x)
 
   virtualElement.value.getBoundingClientRect = () => ({
@@ -20,8 +21,8 @@ function openContextMenu () {
 </script>
 
 <template>
-  <div class="w-full" @contextmenu.prevent="openContextMenu">
-    <Placeholder class="h-20 w-full flex items-center justify-center">
+  <div class="w-full" @contextmenu.prevent="onContextMenu">
+    <Placeholder class="h-96 select-none w-full flex items-center justify-center">
       Right click here
     </Placeholder>
 

docs/components/content/examples/DropdownExampleBasic.vue

@@ -8,11 +8,15 @@ const items = [
   }], [{
     label: 'Edit',
     icon: 'i-heroicons-pencil-square-20-solid',
-    shortcuts: ['E']
+    shortcuts: ['E'],
+    click: () => {
+      console.log('Edit')
+    }
   }, {
     label: 'Duplicate',
     icon: 'i-heroicons-document-duplicate-20-solid',
-    shortcuts: ['D']
+    shortcuts: ['D'],
+    disabled: true
   }], [{
     label: 'Archive',
     icon: 'i-heroicons-archive-box-20-solid'

docs/components/content/examples/DropdownExampleMode.vue

@@ -0,0 +1,16 @@
+<script setup>
+const items = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }]
+]
+</script>
+
+<template>
+  <UDropdown :items="items" mode="hover" :popper="{ placement: 'bottom-start' }">
+    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+  </UDropdown>
+</template>

docs/components/content/examples/InputExample.vue

@@ -0,0 +1,7 @@
+<script setup>
+const value = ref('')
+</script>
+
+<template>
+  <UInput v-model="value" />
+</template>

docs/components/content/examples/InputExampleClearable.vue

@@ -0,0 +1,18 @@
+<template>
+  <UInput v-model="q" name="q" placeholder="Search..." icon="i-heroicons-magnifying-glass-20-solid" :ui="{ icon: { trailing: { pointer: '' } } }">
+    <template #trailing>
+      <UButton
+        v-show="q !== ''"
+        color="gray"
+        variant="link"
+        icon="i-heroicons-x-mark-20-solid"
+        :padded="false"
+        @click="q = ''"
+      />
+    </template>
+  </UInput>
+</template>
+
+<script setup lang="ts">
+const q = ref('')
+</script>

docs/components/content/examples/KbdExample.vue

@@ -5,6 +5,6 @@ const { metaSymbol } = useShortcuts()
 <template>
   <div class="flex items-center gap-0.5">
     <UKbd>{{ metaSymbol }}</UKbd>
-    <UKbd>U</UKbd>
+    <UKbd>K</UKbd>
   </div>
 </template>

docs/components/content/examples/ModalExampleBasic.vue

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

docs/components/content/examples/ModalExampleCard.vue

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

docs/components/content/examples/PaginationExampleBasic.vue

@@ -0,0 +1,8 @@
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<template>
+  <UPagination v-model="page" :page-count="5" :total="items.length" />
+</template>

docs/components/content/examples/PaginationExamplePrevNextSlots.vue

@@ -0,0 +1,20 @@
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<template>
+  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-l-md last-of-type:rounded-r-md' }">
+    <template #prev="{ onClick }">
+      <UTooltip text="Previous page">
+        <UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="mr-2" @click="onClick" />
+      </UTooltip>
+    </template>
+
+    <template #next="{ onClick }">
+      <UTooltip text="Next page">
+        <UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="ml-2" @click="onClick" />
+      </UTooltip>
+    </template>
+  </UPagination>
+</template>

docs/components/content/examples/RadioExample.vue

@@ -0,0 +1,23 @@
+<script setup>
+const methods = [{
+  name: 'email',
+  value: 'email',
+  label: 'Email'
+}, {
+  name: 'sms',
+  value: 'sms',
+  label: 'Phone (SMS)'
+}, {
+  name: 'push',
+  value: 'push',
+  label: 'Push notification'
+}]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <div class="space-y-1">
+    <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
+  </div>
+</template>

docs/components/content/examples/SelectExample.vue

@@ -0,0 +1,9 @@
+<script setup>
+const countries = ['United States', 'Canada', 'Mexico']
+
+const country = ref(countries[0])
+</script>
+
+<template>
+  <USelect v-model="country" :options="countries" />
+</template>

docs/components/content/examples/SelectExampleObjects.vue

@@ -0,0 +1,18 @@
+<script setup>
+const countries = [{
+  name: 'United States',
+  value: 'US'
+}, {
+  name: 'Canada',
+  value: 'CA'
+}, {
+  name: 'Mexico',
+  value: 'MX'
+}]
+
+const country = ref('CA')
+</script>
+
+<template>
+  <USelect v-model="country" :options="countries" option-attribute="name" />
+</template>

docs/components/content/examples/SelectMenuExampleButton.vue

@@ -6,10 +6,10 @@ const selected = ref(people[3])
 
 <template>
   <USelectMenu v-slot="{ open }" v-model="selected" :options="people">
-    <UButton>
+    <UButton color="gray">
       {{ selected }}
 
-      <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform" :class="[open && 'transform rotate-90']" />
+      <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500" :class="[open && 'transform rotate-90']" />
     </UButton>
   </USelectMenu>
 </template>

docs/components/content/examples/SelectMenuExampleMultiple.vue

@@ -5,10 +5,5 @@ 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>
+  <USelectMenu v-model="selected" :options="people" multiple placeholder="Select people" />
 </template>

docs/components/content/examples/SelectMenuExampleMultipleSlot.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="truncate">{{ selected.join(', ') }}</span>
+      <span v-else>Select people</span>
+    </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

@@ -1,14 +1,29 @@
 <script setup>
-const open = ref(false)
+const isOpen = ref(false)
 </script>
 
 <template>
   <div>
-    <UButton label="Open" @click="open = true" />
+    <UButton label="Open" @click="isOpen = true" />
 
-    <USlideover v-model="open">
-      <div class="p-4 h-full">
-        <Placeholder class="w-full h-full" />
+    <USlideover v-model="isOpen">
+      <div class="p-4 sm:p-6 flex flex-col flex-1 gap-4 sm:gap-6">
+        <div class="flex items-center justify-between">
+          <h2 class="font-semibold text-gray-900 dark:text-white">
+            Title
+          </h2>
+
+          <UButton
+            icon="i-heroicons-x-mark-20-solid"
+            color="gray"
+            variant="link"
+            size="md"
+            :padded="false"
+            @click="isOpen = false"
+          />
+        </div>
+
+        <Placeholder class="flex-1 w-full" />
       </div>
     </USlideover>
   </div>

docs/components/content/examples/TableExampleBasic.vue

@@ -0,0 +1,43 @@
+<script setup>
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member'
+}]
+</script>
+
+<template>
+  <UTable :rows="people" />
+</template>

docs/components/content/examples/TableExampleColumns.vue

@@ -0,0 +1,59 @@
+<script setup>
+const columns = [{
+  key: 'id',
+  label: 'ID'
+}, {
+  key: 'name',
+  label: 'User name'
+}, {
+  key: 'title',
+  label: 'Job position'
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role'
+}]
+
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member'
+}]
+</script>
+
+<template>
+  <UTable :columns="columns" :rows="people" />
+</template>

docs/components/content/examples/TableExampleColumnsSelectable.vue

@@ -0,0 +1,68 @@
+<script setup>
+const columns = [{
+  key: 'id',
+  label: 'ID'
+}, {
+  key: 'name',
+  label: 'Name'
+}, {
+  key: 'title',
+  label: 'Title'
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role',
+  label: 'Role'
+}]
+
+const selectedColumns = ref([...columns])
+
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member'
+}]
+</script>
+
+<template>
+  <div>
+    <div class="flex px-3 py-3.5 border-b border-gray-200 dark:border-gray-700">
+      <USelectMenu v-model="selectedColumns" :options="columns" multiple placeholder="Columns" />
+    </div>
+
+    <UTable :columns="selectedColumns" :rows="people" />
+  </div>
+</template>

docs/components/content/examples/TableExampleColumnsSortable.vue

@@ -0,0 +1,64 @@
+<script setup>
+const columns = [{
+  key: 'id',
+  label: 'ID'
+}, {
+  key: 'name',
+  label: 'Name',
+  sortable: true
+}, {
+  key: 'title',
+  label: 'Title',
+  sortable: true
+}, {
+  key: 'email',
+  label: 'Email',
+  sortable: true,
+  direction: 'desc'
+}, {
+  key: 'role',
+  label: 'Role'
+}]
+
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member'
+}]
+</script>
+
+<template>
+  <UTable :columns="columns" :rows="people" :sort="{ column: 'title' }" />
+</template>

docs/components/content/examples/TableExampleEmptySlot.vue

@@ -0,0 +1,30 @@
+<script setup>
+const columns = [{
+  key: 'name',
+  label: 'Name'
+}, {
+  key: 'title',
+  label: 'Title'
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role',
+  label: 'Role'
+}, {
+  key: 'actions'
+}]
+
+const people = []
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns">
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center py-6 gap-3">
+        <span class="italic text-sm">No one here!</span>
+        <UButton label="Add people" />
+      </div>
+    </template>
+  </UTable>
+</template>

docs/components/content/examples/TableExampleLoadingSlot.vue

@@ -0,0 +1,86 @@
+<script setup>
+const columns = [{
+  key: 'name',
+  label: 'Name'
+}, {
+  key: 'title',
+  label: 'Title'
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role',
+  label: 'Role'
+}, {
+  key: 'actions'
+}]
+
+const people = []
+
+const pending = ref(true)
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns" :loading="pending">
+    <template #loading-state>
+      <div class="flex items-center justify-center h-32">
+        <i class="loader --6" />
+      </div>
+    </template>
+  </UTable>
+</template>
+
+<style scoped>
+/* https://codepen.io/jenning/pen/YzNmzaV */
+
+.loader {
+	--color: rgb(var(--color-primary-400));
+	--size-mid: 6vmin;
+	--size-dot: 1.5vmin;
+	--size-bar: 0.4vmin;
+	--size-square: 3vmin;
+
+	display: block;
+	position: relative;
+	width: 50%;
+	display: grid;
+	place-items: center;
+}
+
+.loader::before,
+.loader::after {
+	content: '';
+	box-sizing: border-box;
+	position: absolute;
+}
+
+/**
+	loader --6
+**/
+.loader.--6::before {
+	width: var(--size-square);
+	height: var(--size-square);
+	background-color: var(--color);
+	top: calc(50% - var(--size-square));
+	left: calc(50% - var(--size-square));
+	animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+}
+
+@keyframes loader-6 {
+	0%, 100% {
+		transform: none;
+	}
+
+	25% {
+		transform: translateX(100%);
+	}
+
+	50% {
+		transform: translateX(100%) translateY(100%);
+	}
+
+	75% {
+		transform: translateY(100%);
+	}
+}
+</style>

docs/components/content/examples/TableExamplePaginable.vue

@@ -0,0 +1,98 @@
+<script setup>
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member'
+}, {
+  id: 7,
+  name: 'Emily Selman',
+  title: 'VP, User Experience',
+  email: '',
+  role: 'Admin'
+}, {
+  id: 8,
+  name: 'Kristin Watson',
+  title: 'VP, Human Resources',
+  email: '',
+  role: 'Member'
+}, {
+  id: 9,
+  name: 'Emma Watson',
+  title: 'Front-end Developer',
+  email: '',
+  role: 'Member'
+}, {
+  id: 10,
+  name: 'John Doe',
+  title: 'Designer',
+  email: '',
+  role: 'Admin'
+}, {
+  id: 11,
+  name: 'Jane Doe',
+  title: 'Director of Product',
+  email: '',
+  role: 'Member'
+}, {
+  id: 12,
+  name: 'John Smith',
+  title: 'Copywriter',
+  email: '',
+  role: 'Admin'
+}, {
+  id: 13,
+  name: 'Jane Smith',
+  title: 'Senior Designer',
+  email: '',
+  role: 'Owner'
+}]
+
+const page = ref(1)
+const pageCount = 5
+
+const rows = computed(() => {
+  return people.slice((page.value - 1) * pageCount, (page.value) * pageCount)
+})
+</script>
+
+<template>
+  <div>
+    <UTable :rows="rows" />
+
+    <div class="flex justify-end px-3 py-3.5 border-t border-gray-200 dark:border-gray-700">
+      <UPagination v-model="page" :page-count="pageCount" :total="people.length" />
+    </div>
+  </div>
+</template>

docs/components/content/examples/TableExampleSearchable.vue

@@ -0,0 +1,80 @@
+<script setup>
+const columns = [{
+  key: 'id',
+  label: 'ID'
+}, {
+  key: 'name',
+  label: 'Name'
+}, {
+  key: 'title',
+  label: 'Title'
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role',
+  label: 'Role'
+}]
+
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member'
+}]
+
+const q = ref('')
+
+const filteredRows = computed(() => {
+  if (!q.value) {
+    return people
+  }
+
+  return people.filter((person) => {
+    return Object.values(person).some((value) => {
+      return String(value).toLowerCase().includes(q.value.toLowerCase())
+    })
+  })
+})
+</script>
+
+<template>
+  <div>
+    <div class="flex px-3 py-3.5 border-b border-gray-200 dark:border-gray-700">
+      <UInput v-model="q" placeholder="Filter people..." />
+    </div>
+
+    <UTable :rows="filteredRows" :columns="columns" />
+  </div>
+</template>

docs/components/content/examples/TableExampleSelectable.vue

@@ -0,0 +1,45 @@
+<script setup>
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member'
+}]
+
+const selected = ref([people[1]])
+</script>
+
+<template>
+  <UTable v-model="selected" :rows="people" />
+</template>

docs/components/content/examples/TableExampleSlots.vue

@@ -0,0 +1,91 @@
+<script setup>
+const columns = [{
+  key: 'name',
+  label: 'Name'
+}, {
+  key: 'title',
+  label: 'Title'
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role',
+  label: 'Role'
+}, {
+  key: 'actions'
+}]
+
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member'
+}]
+
+const items = (row) => [
+  [{
+    label: 'Edit',
+    icon: 'i-heroicons-pencil-square-20-solid',
+    click: () => console.log('Edit', row.id)
+  }, {
+    label: 'Duplicate',
+    icon: 'i-heroicons-document-duplicate-20-solid'
+  }], [{
+    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'
+  }]
+]
+
+const selected = ref([people[1]])
+</script>
+
+<template>
+  <UTable v-model="selected" :rows="people" :columns="columns">
+    <template #name-data="{ row }">
+      <span :class="[selected.find(person => person.id === row.id) && 'text-primary-500 dark:text-primary-400']">{{ row.name }}</span>
+    </template>
+
+    <template #actions-data="{ row }">
+      <UDropdown :items="items(row)">
+        <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
+      </UDropdown>
+    </template>
+  </UTable>
+</template>

docs/components/content/examples/TextareaExample.vue

@@ -0,0 +1,7 @@
+<script setup>
+const value = ref('')
+</script>
+
+<template>
+  <UTextarea v-model="value" />
+</template>

docs/components/content/examples/ToggleExample.vue

@@ -0,0 +1,7 @@
+<script setup>
+const selected = ref(false)
+</script>
+
+<template>
+  <UToggle v-model="selected" />
+</template>

docs/components/content/examples/VerticalNavigationExample.vue

@@ -3,7 +3,8 @@ const links = [{
   label: 'Profile',
   avatar: {
     src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-  }
+  },
+  badge: 100
 }, {
   label: 'Installation',
   icon: 'i-heroicons-home',

docs/components/content/prose/ProseCode.vue

@@ -50,7 +50,7 @@ export default defineComponent({
   <div class="group relative" :class="`language-${language}`">
     <UButton
       :icon="icon"
-      variant="link"
+      variant="solid"
       class="absolute right-3 top-3 opacity-0 group-hover:opacity-100 transition-opacity z-[1]"
       size="xs"
       tabindex="-1"

docs/components/content/themes/CommandPaletteThemeAlgolia.vue

@@ -17,8 +17,8 @@ const groups = computed(() => navigation.value.map(item => ({
   }))
 })))
 
-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 closeButton = computed(() => commandPaletteRef.value?.query ? ({ icon: 'i-heroicons-x-mark', color: 'black', variant: 'ghost', size: 'lg', padded: false }) : null)
+const emptyState = 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',
@@ -50,7 +50,7 @@ const ui = {
       }
     }
   },
-  empty: {
+  emptyState: {
     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',
@@ -64,8 +64,8 @@ const ui = {
     ref="commandPaletteRef"
     :groups="groups"
     :ui="ui"
-    :close="close"
-    :empty="empty"
+    :close-button="closeButton"
+    :empty-state="emptyState"
     :autoselect="false"
     command-attribute="title"
     :fuse="{

docs/components/content/themes/PaginationThemeRounded.vue

@@ -0,0 +1,21 @@
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<template>
+  <UPagination
+    v-model="page"
+    :total="items.length"
+    :ui="{
+      wrapper: 'flex items-center gap-1',
+      rounded: 'rounded-full min-w-[32px] justify-center'
+    }"
+    :prev-button="null"
+    :next-button="{
+      icon: 'i-heroicons-arrow-small-right-20-solid',
+      color: 'primary',
+      variant: 'outline'
+    }"
+  />
+</template>

docs/components/content/themes/VerticalNavigationThemeTailwind.vue

@@ -0,0 +1,28 @@
+<script setup>
+const links = [{
+  label: 'Installation',
+  to: '/getting-started/installation'
+}, {
+  label: 'Vertical Navigation',
+  to: '/navigation/vertical-navigation'
+}, {
+  label: 'Command Palette',
+  to: '/navigation/command-palette'
+}]
+</script>
+
+<template>
+  <UVerticalNavigation
+    :links="links"
+    :ui="{
+      wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
+      base: 'group block border-l -ml-px lg:leading-6',
+      padding: 'pl-4',
+      rounded: '',
+      font: '',
+      ring: '',
+      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'
+    }"
+  />
+</template>

docs/components/docs/DocsAsideLinks.vue

@@ -10,12 +10,21 @@
         class="mt-1"
         :ui="{
           wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
+          base: 'group block border-l -ml-px lg:leading-6 flex items-center gap-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',
+          rounded: '',
+          font: '',
+          ring: '',
+          active: 'text-primary-500 dark:text-primary-400 border-current',
           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'
         }"
-      />
+      >
+        <template #badge="{ link }">
+          <UBadge v-if="link.badge" size="xs" :ui="{ rounded: 'rounded-full' }">
+            {{ link.badge }}
+          </UBadge>
+        </template>
+      </UVerticalNavigation>
     </div>
   </div>
 </template>
@@ -26,6 +35,6 @@ 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 })) || []
+  return links?.map(link => ({ label: link.title, icon: link.icon, to: link._path, badge: link.badge })) || []
 }
 </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-primary-500 w-14 h-auto dark:text-primary-400" />
+      </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

@@ -1,14 +1,14 @@
 <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) }}
+      {{ page._dir?.title ? page._dir.title : 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">
+      <div v-if="page.headlessui || page.github" class="flex items-center gap-2 mt-4 lg:mt-0">
         <UButton
           v-if="page.headlessui"
           :label="page.headlessui.label"
@@ -22,7 +22,7 @@
           label="GitHub"
           icon="i-simple-icons-github"
           color="white"
-          :to="`https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/${page._dir}/U${page.title}.vue`"
+          :to="`https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/${page._dir}/${page.title.replace(' ', '')}${page.github.suffix || '.vue'}`"
         />
       </div>
     </div>

docs/components/docs/DocsPrevNext.vue

@@ -1,8 +1,15 @@
 <template>
-  <div class="flex items-center justify-between">
-    <UButton v-if="prev" :label="prev.navigation?.title || prev.title" :to="prev._path" icon="i-heroicons-arrow-small-left-20-solid" color="white" />
-    <span v-else>&nbsp;</span>
-    <UButton v-if="next" :label="next.navigation?.title || next.title" :to="next._path" trailing-icon="i-heroicons-arrow-small-right-20-solid" color="white" />
+  <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 class="hidden sm:block">&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>
 

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/DocsToc.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="toc" 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="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>

docs/composables/useComponentMeta.ts

@@ -10,7 +10,16 @@ export async function fetchComponentMeta (name: string) {
   if (state.value[name]) { return state.value[name] }
 
   // Store promise to avoid multiple calls
-  state.value[name] = $fetch(`/api/component-meta/${name}`).then((meta) => {
+
+  // add to nitro prerender
+  if (process.server) {
+    const event = useRequestEvent()
+    event.node.res.setHeader(
+      'x-nitro-prerender',
+      [event.node.res.getHeader('x-nitro-prerender'), `/api/component-meta/${name}.json`].filter(Boolean).join(',')
+    )
+  }
+  state.value[name] = $fetch(`/api/component-meta/${name}.json`).then((meta) => {
     state.value[name] = meta
   })
 

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

@@ -1,12 +1,7 @@
 ---
-title: 'nuxthq/ui'
-description: 'Components library as a Nuxt module using TailwindCSS and HeadlessUI.'
-navigation:
-  title: Installation
+description: 'Learn how to install and configure the module in your Nuxt app.'
 ---
 
-## Installation
-
 1. Install `@nuxthq/ui` dependency to your project:
 
 ::code-group
@@ -33,10 +28,16 @@ export default defineNuxtConfig({
 })
 ```
 
-::alert
 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                                      |
@@ -44,8 +45,9 @@ That's it! You can now use all the components and composables in your Nuxt app
 | `prefix`                 | `u`                    | Define the prefix of the imported components.    |
 | `global`                 | `false`                | Expose components globally.                      |
 | `icons`                  | `['heroicons']`        | Icon collections to load.                        |
+| `safelistColors`         | `['primary']`          | Force safelisting of colors.                     |
 
-## Edge channel
+## Edge
 
 To use the latest updates pushed on the [`dev`](https://github.com/nuxtlabs/ui/tree/dev) branch, you can use `@nuxthq/ui-edge`.
 

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

@@ -1,5 +0,0 @@
----
-navigation: false
----
-
-## Overview

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

@@ -1,11 +0,0 @@
----
-navigation: false
----
-
-## Overview
-
-## Composables
-
-## `defineShortcuts`
-
-## `useShortcuts`

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

@@ -0,0 +1,241 @@
+---
+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'
+  }
+})
+```
+
+::alert{icon="i-heroicons-light-bulb"}
+Try to change the `primary` and `gray` colors in the navbar and see the documentation change live.
+::
+
+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).
+
+Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it would conflict with the `primary` color defined by the module.
+
+::alert{icon="i-heroicons-light-bulb"}
+We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`.
+::
+
+Components having a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style), [Input](/elements/input#style) (inherited in [Select](/forms/select) and [SelectMenu](/forms/select-menu)) and [Notification](/overlays/notification#timeout) 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.
+
+Variant classes of those components are defined with a syntax like `bg-{color}-500 dark:bg-{color}-400` so they can be used with any color. However, this means that Tailwind will not find those classes and therefore will not generate the corresponding CSS.
+
+The module uses the [Tailwind CSS safelist](https://tailwindcss.com/docs/content-configuration#safelisting-classes) feature to force the generation of all the classes for the `primary` color **only** as it is the default color for all the components.
+
+Then, the module will automatically detect when you use one of those components with a color and will safelist it for you. This means that if you use a `red` color for a Button component, the `red` color classes will be safelisted for the Button component only. This will allow to keep the CSS bundle size as small as possible.
+
+There is one case where you would want to force the safelisting of a color. For example, if you've set the default color of the Button component to `orange` in your `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    button: {
+      default: {
+        color: 'orange'
+      }
+    }
+  }
+})
+```
+
+This will apply the orange color when using a default `<UButton />`. You'll need to safelist this color manually in your `nuxt.config.ts` ui options as we won't be able to detect it automatically. You can do so through the `safelistColors` option which defaults to `['primary']`.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  ui: {
+    safelistColors: ['orange']
+  }
+})
+```
+
+This can also happen when you bind a dynamic color to a component: `<UBadge :color="color" />`, `<UAvatar :chip-color="statuses[user.status]" />`, etc. In this case, you'll need to safelist the possible color values manually as well.
+
+## 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: {
+        loadingIcon: 'i-octicon-sync-24',
+        trailingIcon: 'i-octicon-chevron-down-24'
+      }
+    },
+    selectMenu: {
+      default: {
+        selectedIcon: 'i-octicon-check-24'
+      }
+    },
+    notification: {
+      default: {
+        closeButton: {
+          icon: 'i-octicon-x-24'
+        }
+      }
+    },
+    commandPalette: {
+      default: {
+        icon: 'i-octicon-search-24',
+        loadingIcon: 'i-octicon-sync-24',
+        selectedIcon: 'i-octicon-check-24',
+        emptyState: {
+          icon: 'i-octicon-search-24'
+        }
+      }
+    },
+    table: {
+      default: {
+        sortAscIcon: 'i-octicon-sort-asc-24',
+        sortDescIcon: 'i-octicon-sort-desc-24',
+        sortButton: {
+          icon: 'i-octicon-arrow-switch-24'
+        },
+        emptyState: {
+          icon: 'i-octicon-database-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/1.getting-started/_dir.yml

@@ -0,0 +1 @@
+title: Getting Started

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

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display an image that represents a resource or a group of resources.
 ---
 
 ## Usage
@@ -28,14 +29,15 @@ baseProps:
 
 ### Chip
 
-Use the `chipColor`, `chipVariant` and `chipPosition` props to display a chip on the Avatar.
+Use the `chip-color` and `chip-position` props to display a chip on the Avatar.
 
 ::component-card
 ---
 props:
   chipColor: 'primary'
-  chipVariant: 'solid'
   chipPosition: 'top-right'
+extraColors:
+  - gray
 baseProps:
   src: 'https://avatars.githubusercontent.com/u/739984?v=4'
   alt: 'Avatar'
@@ -52,6 +54,7 @@ If there's an `alt` prop initials will be displayed on top of the background, cu
 ---
 props:
   alt: 'Benjamin Canac'
+  size: 'sm'
 ---
 ::
 

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

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a short text to represent a status or a category.
 ---
 
 ## Usage

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

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Create a button with icon or link capabilities.
 ---
 
 ## Usage
@@ -37,7 +38,7 @@ props:
 Button
 ::
 
-Besides all the colors from the `ui.colors` object, you can also use the `white` and `gray` and `black` colors with their pre-defined variants.
+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
 
@@ -112,7 +113,7 @@ Button
 
 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.
+Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
 
 ::component-card
 ---
@@ -125,6 +126,7 @@ props:
   trailing: false
 excludedProps:
   - icon
+  - label
 ---
 ::
 
@@ -161,6 +163,8 @@ Button
 
 Use the `loading` prop to show a loading icon and disable the Button.
 
+Use the `loading-icon` 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:
@@ -255,7 +259,7 @@ props:
   size: 'sm'
 ui:
   size:
-    xxs: ''
+    2xs: ''
     xs: ''
     sm: ''
     md: ''
@@ -271,6 +275,48 @@ code: |
 :u-button{icon="i-heroicons-chevron-down-20-solid" color="gray"}
 ::
 
+## Slots
+
+### `leading`
+
+Use the `#leading` slot to set the content of the leading icon.
+
+::component-card
+---
+slots:
+  leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" />
+baseProps:
+  color: 'gray'
+props:
+  label: Button
+  color: 'gray'
+excludedProps:
+  - color
+---
+
+#leading
+  :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs"}
+::
+
+### `trailing`
+
+Use the `#trailing` slot to set the content of the trailing icon.
+
+::component-card
+---
+slots:
+  trailing: <UIcon name="i-heroicons-arrow-right-20-solid" />
+props:
+  label: Button
+  color: 'gray'
+excludedProps:
+  - color
+---
+
+#trailing
+  :u-icon{name="i-heroicons-arrow-right-20-solid"}
+::
+
 ## Props
 
 :component-props

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

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a list of actions in a dropdown menu.
 headlessui:
   label: 'Menu'
   to: 'https://headlessui.com/vue/menu'
@@ -7,9 +8,20 @@ headlessui:
 
 ## Usage
 
+Pass an array of arrays to the `items` prop of the Dropdown component. Each array represents a group of items. Each item can have the following properties:
+
+- `label` - The label of the item.
+- `icon` - The icon of the item.
+- `avatar` - The avatar of the item. You can pass all the props of the [Avatar](/elements/avatar) component.
+- `shortcuts` - The shortcuts of the item.
+- `disabled` - Whether the item is disabled.
+- `click` - The click handler of the item.
+
+You can also pass properties from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
+
 ::component-example
 #default
-:dropdown-example
+:dropdown-example-basic
 
 #code
 ```vue
@@ -23,11 +35,15 @@ const items = [
   }], [{
     label: 'Edit',
     icon: 'i-heroicons-pencil-square-20-solid',
-    shortcuts: ['E']
+    shortcuts: ['E'],
+    click: () => {
+      console.log('Edit')
+    }
   }, {
     label: 'Duplicate',
     icon: 'i-heroicons-document-duplicate-20-solid',
-    shortcuts: ['D']
+    shortcuts: ['D'],
+    disabled: true
   }], [{
     label: 'Archive',
     icon: 'i-heroicons-archive-box-20-solid'
@@ -50,6 +66,35 @@ const items = [
 ```
 ::
 
+### Mode
+
+Use the `mode` prop to switch between `click` and `hover` modes.
+
+::component-example
+#default
+:dropdown-example-mode
+
+#code
+```vue
+<script setup>
+const items = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }]
+]
+</script>
+
+<template>
+  <UDropdown :items="items" mode="hover" :popper="{ placement: 'bottom-start' }">
+    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+  </UDropdown>
+</template>
+```
+::
+
 ## Props
 
 :component-props

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

@@ -1,12 +1,34 @@
 ---
 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
@@ -20,7 +42,7 @@ const { metaSymbol } = useShortcuts()
 <template>
   <div class="flex items-center gap-0.5">
     <UKbd>{{ metaSymbol }}</UKbd>
-    <UKbd>U</UKbd>
+    <UKbd>K</UKbd>
   </div>
 </template>
 ```
@@ -34,6 +56,7 @@ Use the `size` prop to change the size of the Kbd.
 ---
 props:
   size: 'sm'
+code: 'U'
 ---
 
 U

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

@@ -1,13 +1,72 @@
 ---
 github: true
+description: Display an input field.
 ---
 
 ## Usage
 
+Use a `v-model` to make the Input reactive.
+
+::component-example
+#default
+:input-example
+
+#code
+```vue
+<script setup>
+const value = ref('')
+</script>
+
+<template>
+  <UInput v-model="value" />
+</template>
+```
+::
+
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Input.
+
 ::component-card
 ---
 baseProps:
   name: 'input'
+  placeholder: 'Search...'
+props:
+  color: 'primary'
+  variant: 'outline'
+---
+::
+
+Besides all the colors from the `ui.colors` object, you can also use the `white` (default) and `gray` colors with their pre-defined variants.
+
+#### White
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+props:
+  color: 'white'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+#### Gray
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+props:
+  color: 'gray'
+  variant: 'outline'
+excludedProps:
+  - color
 ---
 ::
 
@@ -24,25 +83,40 @@ props:
 ---
 ::
 
-### Icon
+### Placeholder
 
-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.
+Use the `placeholder` prop to set a placeholder text.
 
 ::component-card
 ---
 baseProps:
   name: 'input'
 props:
-  icon: 'i-heroicons-magnifying-glass-20-solid'
-  appearance: 'white'
-  size: 'sm'
-  trailing: false
   placeholder: 'Search...'
+---
+::
+
+### 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 `leading-icon` and `trailing-icon` props to set a different icon for each position.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+props:
+  icon: 'i-heroicons-magnifying-glass-20-solid'
+  size: 'sm'
+  color: 'white'
+  trailing: false
+extraColors:
+  - white
+  - gray
 excludedProps:
   - icon
-  - placeholder
 ---
 ::
 
@@ -54,12 +128,9 @@ Use the `disabled` prop to disable the Input.
 ---
 baseProps:
   name: 'input'
-props:
   placeholder: 'Search...'
-  appearance: 'white'
+props:
   disabled: true
-excludedProps:
-  - placeholder
 ---
 ::
 
@@ -67,11 +138,13 @@ excludedProps:
 
 Use the `loading` prop to show a loading icon and disable the Input.
 
+Use the `loading-icon` 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: 'Search'
+  placeholder: 'Searching...'
 props:
   loading: true
   icon: 'i-heroicons-magnifying-glass-20-solid'
@@ -80,7 +153,74 @@ excludedProps:
 ---
 ::
 
-### Group
+## Slots
+
+### `leading`
+
+Use the `#leading` slot to set the content of the leading icon.
+
+::component-card
+---
+slots:
+  leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" />
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+---
+
+#leading
+  :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs"}
+::
+
+### `trailing`
+
+Use the `#trailing` slot to set the content of the trailing icon.
+
+::component-card
+---
+slots:
+  trailing: <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+---
+
+#trailing
+  [EUR]{class="text-gray-500 dark:text-gray-400 text-xs"}
+::
+
+You can for example create a clearable Input by injecting a [Button](/elements/button) in the `trailing` slot that displays when some text is entered.
+
+::component-example
+#default
+:input-example-clearable
+
+#code
+```vue
+<template>
+  <UInput v-model="q" name="q" placeholder="Search..." icon="i-heroicons-magnifying-glass-20-solid" :ui="{ icon: { trailing: { pointer: '' } } }">
+    <template #trailing>
+      <UButton
+        v-show="q !== ''"
+        color="gray"
+        variant="link"
+        icon="i-heroicons-x-mark-20-solid"
+        :padded="false"
+        @click="q = ''"
+      />
+    </template>
+  </UInput>
+</template>
+
+<script setup lang="ts">
+const q = ref('')
+</script>
+```
+::
+
+::alert{icon="i-heroicons-exclamation-triangle-20-solid"}
+As leading and trailing icons are wrapped around a `pointer-events-none` class, if you inject a clickable element in the slot, you need to remove this class to make it clickable by adding `:ui="{ icon: { trailing: { pointer: '' } } }"` to the Input.
+::
 
 ## Props
 

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

@@ -1,13 +1,155 @@
 ---
 github: true
+description: Display a textarea field.
 ---
 
 ## Usage
 
+Use a `v-model` to make the Textarea reactive.
+
+::component-example
+#default
+:textarea-example
+
+#code
+```vue
+<script setup>
+const value = ref('')
+</script>
+
+<template>
+  <UTextarea v-model="value" />
+</template>
+```
+::
+
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Textarea.
+
 ::component-card
 ---
 baseProps:
   name: 'textarea'
+  placeholder: 'Search...'
+props:
+  color: 'primary'
+  variant: 'outline'
+---
+::
+
+Besides all the colors from the `ui.colors` object, you can also use the `white` (default) and `gray` colors with their pre-defined variants.
+
+#### White
+
+::component-card
+---
+baseProps:
+  name: 'textarea'
+  placeholder: 'Search...'
+props:
+  color: 'white'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+#### Gray
+
+::component-card
+---
+baseProps:
+  name: 'textarea'
+  placeholder: 'Search...'
+props:
+  color: 'gray'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+### 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...'
+---
+::
+
+### Rows
+
+Use the `rows` prop to set the number of rows of the Textarea.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+props:
+  rows: 1
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Textarea.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+props:
+  disabled: true
+---
+::
+
+### Autoresize
+
+Use the `autoresize` prop to enable the autoresize. Writing more lines than the `rows` prop will make the Textarea grow up.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+  modelValue: 'Here is an autoresize Textarea, write new lines to make the Textarea grow up...'
+props:
+  autoresize: true
+---
+::
+
+### Resize
+
+Use the `resize` prop to enable the resize control.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+props:
+  resize: true
 ---
 ::
 

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

@@ -1,21 +1,259 @@
 ---
 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.
+
+Use a `v-model` to make the Select reactive alongside the `options` prop to pass an array of strings or objects.
+
+::component-example
+#default
+:select-example
+
+#code
+```vue
+<script setup>
+const countries = ['United States', 'Canada', 'Mexico']
+
+const country = ref(countries[0])
+</script>
+
+<template>
+  <USelect v-model="country" :options="countries" />
+</template>
+```
+::
+
+When using objects, you can configure which field will be used for display through the `option-attribute` prop that defaults to `label` and which field will be used for comparison through the `value-attribute` prop that defaults to `value`.
+
+::component-example
+#default
+:select-example-objects
+
+#code
+```vue
+<script setup>
+const countries = [{
+  name: 'United States',
+  value: 'US'
+}, {
+  name: 'Canada',
+  value: 'CA'
+}, {
+  name: 'Mexico',
+  value: 'MX'
+}]
+
+const country = ref('CA')
+</script>
+
+<template>
+  <USelect v-model="country" :options="countries" option-attribute="name" />
+</template>
+```
+::
+
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Select.
+
 ::component-card
 ---
 baseProps:
   name: 'select'
-  modelValue: 'Canada'
   options:
     - 'United States'
     - 'Canada'
     - 'Mexico'
+props:
+  color: 'primary'
+  variant: 'outline'
 ---
 ::
 
+Besides all the colors from the `ui.colors` object, you can also use the `white` (default) and `gray` colors with their pre-defined variants.
+
+#### White
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  color: 'white'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+#### Gray
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  color: 'gray'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Select.
+
+::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...'
+---
+::
+
+### 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 `trailing-icon` 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'
+  color: 'white'
+  size: 'sm'
+extraColors:
+  - white
+  - gray
+excludedProps:
+  - icon
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Select.
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+  placeholder: 'Search...'
+props:
+  disabled: true
+---
+::
+
+### Loading
+
+Use the `loading` prop to show a loading icon and disable the Input.
+
+Use the `loading-icon` prop to set a different icon or change it globally in `ui.select.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+  placeholder: 'Search...'
+props:
+  loading: true
+  icon: 'i-heroicons-magnifying-glass-20-solid'
+excludedProps:
+  - icon
+---
+::
+
+## Slots
+
+### `leading`
+
+Use the `#leading` slot to set the content of the leading icon.
+
+::component-card
+---
+slots:
+  leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" />
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+  placeholder: 'Search...'
+---
+
+#leading
+  :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs"}
+::
+
+### `trailing`
+
+Use the `#trailing` slot to set the content of the trailing icon.
+
+::component-card
+---
+slots:
+  trailing: <UIcon name="i-heroicons-arrows-up-down-20-solid" />
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+---
+
+#trailing
+  :u-icon{name="i-heroicons-arrows-up-down-20-solid"}
+::
+
 ## Props
 
 :component-props

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

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a select menu with advanced features.
 headlessui:
   label: 'Listbox'
   to: 'https://headlessui.com/vue/listbox'
@@ -7,6 +8,10 @@ headlessui:
 
 ## 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 [color](/forms/select#style), [variant](/forms/select#style), [size](/forms/select#size), [placeholder](/forms/select#placeholder), [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"}
@@ -25,7 +30,9 @@ const selected = ref(people[0])
 ```
 ::
 
-You can use multiple values but you have to override the `#label` slot and handle the display yourself.
+### Multiple
+
+You can use the `multiple` prop to select multiple values.
 
 ::component-example
 #default
@@ -34,49 +41,20 @@ You can use multiple values but you have to override the `#label` slot and handl
 #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 people = [...]
 
 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>
+  <USelectMenu v-model="selected" :options="people" multiple placeholder="Select people" />
 </template>
 ```
 ::
 
-You can also override the default slot entirely.
+### Objects
 
-::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 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 `option-attribute` prop that defaults to `label`.
 
 ::component-example
 #default
@@ -129,7 +107,7 @@ const selected = ref(people[0])
 
 ### 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 `selected-icon` prop to set a different icon or change it globally in `ui.selectMenu.default.selectedIcon`. Defaults to `i-heroicons-check-20-solid`.
 
 ::component-card
 ---
@@ -138,17 +116,23 @@ baseProps:
   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'
+  selectedIcon: 'i-heroicons-hand-thumb-up-solid'
 excludedProps:
-  - icon
+  - selectedIcon
 ---
 ::
 
+::alert{icon="i-heroicons-light-bulb"}
+Learn how to customize icons from the [Select](/forms/select#icon) component.
+::
+
 ### Search
 
 Use the `searchable` prop to enable search.
 
-This will use HeadlessUI [Combobox](https://headlessui.com/vue/combobox) component instead of [Listbox](https://headlessui.com/vue/listbox).
+Use the `searchable-placeholder` prop to set a different placeholder.
+
+This will use Headless UI [Combobox](https://headlessui.com/vue/combobox) component instead of [Listbox](https://headlessui.com/vue/listbox).
 
 ::component-card
 ---
@@ -158,22 +142,65 @@ baseProps:
   options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 props:
   searchable: true
+  searchablePlaceholder: 'Search a person...'
 ---
 ::
 
-### Disabled
+## Slots
 
-Use the `disabled` prop to disable the SelectMenu.
+### `label`
 
-::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:
-  disabled: true
----
+You can override the `#label` slot and handle the display yourself.
+
+::component-example
+#default
+:select-menu-example-multiple-slot{class="max-w-[12rem] w-full"}
+
+#code
+```vue
+<script setup>
+const people = [...]
+
+const selected = ref([])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" multiple>
+    <template #label>
+      <span v-if="selected.length" class="truncate">{{ selected.join(', ') }}</span>
+      <span v-else>Select people</span>
+    </template>
+  </USelectMenu>
+</template>
+```
+::
+
+### `default`
+
+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 = [...]
+
+const selected = ref(people[3])
+</script>
+
+<template>
+  <USelectMenu v-slot="{ open }" v-model="selected" :options="people">
+    <UButton color="gray">
+      {{ selected }}
+
+      <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform" :class="[open && 'transform rotate-90']" />
+    </UButton>
+  </USelectMenu>
+</template>
+```
 ::
 
 ## Props

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

@@ -1,10 +1,81 @@
 ---
 github: true
+description: Display a checkbox field.
 ---
 
 ## Usage
 
+Use a `v-model` to make the Checkbox reactive.
+
+::component-example
+#default
+:checkbox-example
+
+#code
+```vue
+<script setup>
+const selected = ref(false)
+</script>
+
+<template>
+  <UCheckbox v-model="selected" name="notifications" label="Notifications" />
+</template>
+```
+::
+
+### 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

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

@@ -1,10 +1,95 @@
 ---
 github: true
+description: Display a radio field.
 ---
 
 ## Usage
 
+Use a `v-model` to make the Radio reactive.
+
+::component-example
+#default
+:radio-example
+
+#code
+```vue
+<script setup>
+const methods = [{
+  name: 'email',
+  value: 'email',
+  label: 'Email'
+}, {
+  name: 'sms',
+  value: 'sms',
+  label: 'Phone (SMS)'
+}, {
+  name: 'push',
+  value: 'push',
+  label: 'Push notification'
+}]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
+</template>
+```
+::
+
+### 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

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

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a toggle field.
 headlessui:
   label: 'Switch'
   to: 'https://headlessui.com/vue/switch'
@@ -7,24 +8,51 @@ headlessui:
 
 ## Usage
 
-::component-card
+Use a `v-model` to make the Toggle reactive.
+
+::component-example
+#default
+:toggle-example
+
+#code
+```vue
+<script setup>
+const selected = ref(false)
+</script>
+
+<template>
+  <UToggle v-model="selected" />
+</template>
+```
 ::
 
 ### 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}`.
+Use any icon from [Iconify](https://icones.js.org) by setting the `on-icon` and `off-icon` props by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.toggle.default.onIcon` and `ui.toggle.default.offIcon`.
 
 ::component-card
 ---
 props:
-  iconOn: 'i-heroicons-check-20-solid'
-  iconOff: 'i-heroicons-x-mark-20-solid'
+  onIcon: 'i-heroicons-check-20-solid'
+  offIcon: 'i-heroicons-x-mark-20-solid'
 excludedProps:
-  - iconOn
-  - iconOff
+  - onIcon
+  - offIcon
 ---
 ::
 
+### Disabled
+
+Use the `disabled` prop to disable the Toggle.
+
+::component-card
+---
+props:
+  disabled: true
+---
+::
+
+
 ## Props
 
 :component-props

docs/content/3.forms/8.form-group.md

@@ -0,0 +1,141 @@
+---
+github: 
+  suffix: .ts
+description: Display a label and additional informations around a form element.
+---
+
+
+## Usage
+
+Use the FormGroup component around an [Input](/forms/input), [Textarea](/forms/textarea), [Select](/forms/select) or a [SelectMenu](/forms/select-menu) with the `name` prop to automatically associate a `<label>` element with the form element.
+
+::component-card
+---
+props:
+  name: 'email'
+  label: 'Email'
+code: >-
+
+  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
+::
+
+### Required
+
+Use the `required` prop to indicate that the form element is required.
+
+::component-card
+---
+baseProps:
+  name: 'group-required'
+props:
+  label: 'Email'
+  required: true
+code: >-
+
+  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
+::
+
+### Description
+
+Use the `description` prop to display a description below the label.
+
+::component-card
+---
+baseProps:
+  name: 'group-description'
+props:
+  label: 'Email'
+  description: "We'll only use this for spam."
+code: >-
+
+  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
+::
+
+### Hint
+
+Use the `hint` prop to display a hint above the form element.
+
+::component-card
+---
+baseProps:
+  name: 'group-hint'
+props:
+  label: 'Email'
+  hint: 'Optional'
+code: >-
+
+  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
+::
+
+### Help
+
+Use the `help` prop to display an help message below the form element.
+
+::component-card
+---
+baseProps:
+  name: 'group-help'
+props:
+  label: 'Email'
+  help: 'We will never share your email with anyone else.'
+code: >-
+
+  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
+::
+
+### Error
+
+Use the `error` prop to display an error message below the form element.
+
+When used together with the `help` prop, the `error` prop will take precedence.
+
+::component-card
+---
+baseProps:
+  name: 'group-error'
+props:
+  label: 'Email'
+  help: 'We will never share your email with anyone else.'
+  error: "Not a valid email address."
+code: >-
+
+  <UInput placeholder="you@example.com" trailing-icon="i-heroicons-exclamation-triangle-20-solid" />
+---
+
+#default
+:u-input{model-value="benjamincanac" placeholder="you@example.com" trailing-icon="i-heroicons-exclamation-triangle-20-solid"}
+::
+
+You can also use the `error` prop as a boolean to mark the form element as invalid.
+
+::alert{icon="i-heroicons-light-bulb"}
+  The `error` prop will automatically set the `color` prop of the form element to `red`.
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/4.data/1.table.md

@@ -0,0 +1,647 @@
+---
+github: true
+description: 'Display data in a table.'
+---
+
+## Usage
+
+Use the `rows` prop to set the data to display in the table. By default, the table will display all the fields of the rows.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-basic{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member'
+}]
+</script>
+
+<template>
+  <UTable :rows="people" />
+</template>
+```
+::
+
+### Columns
+
+Use the `columns` prop to configure which columns to display. It's an array of objects with the following properties:
+
+- `label` - The label to display in the table header. Can be changed through the `column-attribute` prop.
+- `key` - The field to display from the row data.
+- `sortable` - Whether the column is sortable. Defaults to `false`.
+- `direction` - The sort direction to use on first click. Defaults to `asc`.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-columns{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const columns = [{
+  key: 'id',
+  label: 'ID'
+}, {
+  key: 'name',
+  label: 'User name'
+}, {
+  key: 'title',
+  label: 'Job position'
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role'
+}]
+
+const people = [...]
+</script>
+
+<template>
+  <UTable :columns="columns" :rows="people" />
+</template>
+```
+::
+
+You can easily use the [SelectMenu](/forms/select-menu) component to change the columns to display.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-columns-selectable{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const columns = [{
+  key: 'id',
+  label: 'ID'
+}, {
+  key: 'name',
+  label: 'Name'
+}, {
+  key: 'title',
+  label: 'Title'
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role',
+  label: 'Role'
+}]
+
+const selectedColumns = ref([...columns])
+
+const people = [...]
+</script>
+
+<template>
+  <div>
+    <USelectMenu v-model="selectedColumns" :options="columns" multiple placeholder="Columns" />
+
+    <UTable :columns="selectedColumns" :rows="people" />
+  </div>
+</template>
+```
+::
+
+### Sortable
+
+You can make the columns sortable by setting the `sortable` property to `true` in the column configuration.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-columns-sortable{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const columns = [{
+  key: 'id',
+  label: 'ID'
+}, {
+  key: 'name',
+  label: 'Name',
+  sortable: true
+}, {
+  key: 'title',
+  label: 'Title',
+  sortable: true
+}, {
+  key: 'email',
+  label: 'Email',
+  sortable: true,
+  direction: 'desc'
+}, {
+  key: 'role',
+  label: 'Role'
+}]
+
+const people = [...]
+</script>
+
+<template>
+  <UTable :columns="columns" :rows="people" :sort="{ column: 'title' }" />
+</template>
+```
+::
+
+You can specify the default direction of each column through the `direction` property. It can be either `asc` or `desc` and defaults to `asc`.
+
+You can specify a default sort for the table through the `sort` prop. It's an object with the following properties:
+
+- `column` - The column to sort by.
+- `direction` - The sort direction. Can be either `asc` or `desc` and defaults to `asc`.
+
+::alert{icon="i-heroicons-light-bulb"}
+This will set the default sort and will work even if no column is set as `sortable`.
+::
+
+Use the `sort-button` prop to customize the sort button in the header. You can pass all the props of the [Button](/elements/button) component to customize it through this prop or globally through `ui.table.default.sortButton`. Its icon defaults to `i-heroicons-arrows-up-down-20-solid`.
+
+::component-card{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+baseProps:
+  class: 'w-full'
+  columns:
+    - key: 'id'
+      label: 'ID'
+    - key: 'name'
+      label: 'Name'
+      sortable: true
+    - key: 'title'
+      label: 'Title'
+      sortable: true
+    - key: 'email'
+      label: 'Email'
+      sortable: true
+    - key: 'role'
+      label: 'Role'
+  rows:
+    - id: 1
+      name: 'Lindsay Walton'
+      title: 'Front-end Developer'
+      email: 'lindsay.walton@example.com'
+      role: 'Member'
+    - id: 2
+      name: 'Courtney Henry'
+      title: 'Designer'
+      email: 'courtney.henry@example.com'
+      role: 'Admin'
+    - id: 3
+      name: 'Tom Cook'
+      title: 'Director of Product'
+      email: 'tom.cook@example.com'
+      role: 'Member'
+    - id: 4
+      name: 'Whitney Francis'
+      title: 'Copywriter'
+      email: 'whitney.francis@example.com'
+      role: 'Admin'
+    - id: 5
+      name: 'Leonard Krasner'
+      title: 'Senior Designer'
+      email: 'leonard.krasner@example.com'
+      role: 'Owner'
+    - id: 6
+      name: 'Floyd Miles'
+      title: 'Principal Designer'
+      email: 'floyd.miles@example.com'
+      role: 'Member'
+props:
+  sortAscIcon: 'i-heroicons-arrow-up-20-solid'
+  sortDescIcon: 'i-heroicons-arrow-down-20-solid'
+  sortButton:
+    icon: 'i-heroicons-sparkles-20-solid'
+    color: 'primary'
+    variant: 'outline'
+    size: '2xs'
+    square: false
+    ui:
+      rounded: 'rounded-full'
+excludedProps:
+  - sortButton
+  - sortAscIcon
+  - sortDescIcon
+---
+::
+
+Use the `sort-asc-icon` prop to set a different icon or change it globally in `ui.table.default.sortAscIcon`. Defaults to `i-heroicons-bars-arrow-up-20-solid`.
+
+Use the `sort-desc-icon` prop to set a different icon or change it globally in `ui.table.default.sortDescIcon`. Defaults to `i-heroicons-bars-arrow-down-20-solid`.
+
+::alert{icon="i-heroicons-light-bulb"}
+You can also customize the entire header cell, read more in the [Slots](#slots) section.
+::
+
+### Selectable
+
+Use a `v-model` to make the table selectable. The `v-model` will be an array of the selected rows.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-selectable{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const people = [...]
+
+const selected = ref([people[1]])
+</script>
+
+<template>
+  <UTable v-model="selected" :rows="people" />
+</template>
+```
+::
+
+::alert{icon="i-heroicons-light-bulb"}
+You can use the `by` prop to compare objects by a field instead of comparing object instances. We've replicated the behavior of Headless UI [Combobox](https://headlessui.com/vue/combobox#binding-objects-as-values).
+::
+
+### Searchable
+
+You can easily use the [Input](/forms/input) component to filter the rows.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-searchable{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const people = [...]
+
+const q = ref('')
+
+const filteredRows = computed(() => {
+  if (!q.value) {
+    return people
+  }
+
+  return people.filter((person) => {
+    return Object.values(person).some((value) => {
+      return String(value).toLowerCase().includes(q.value.toLowerCase())
+    })
+  })
+})
+</script>
+
+<template>
+  <div>
+    <UInput v-model="q" placeholder="Filter people..." />
+
+    <UTable :rows="filteredRows" />
+  </div>
+</template>
+```
+::
+
+### Paginable
+
+You can easily use the [Pagination](/navigation/pagination) component to paginate the rows.
+
+::component-example
+---
+padding: false
+---
+
+#default
+:table-example-paginable{class="w-full"}
+
+#code
+```vue
+<script setup>
+const people = [...]
+
+const page = ref(1)
+const pageCount = 5
+
+const rows = computed(() => {
+  return people.slice((page.value - 1) * pageCount, (page.value) * pageCount)
+})
+</script>
+
+<template>
+  <div>
+    <UTable :rows="rows" />
+
+    <UPagination v-model="page" :page-count="pageCount" :total="people.length" />
+  </div>
+</template>
+```
+::
+
+### Loading :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+
+Use the `loading` prop to display a loading state.
+
+Use the `loading-state` prop to customize the `icon` and `label` or change them globally in `ui.table.default.loadingState`.
+
+You can also set it to `null` to hide the loading state.
+
+::component-card
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+baseProps:
+  class: 'w-full'
+  columns:
+    - key: 'id'
+      label: 'ID'
+    - key: 'name'
+      label: 'Name'
+    - key: 'title'
+      label: 'Title'
+    - key: 'email'
+      label: 'Email'
+    - key: 'role'
+      label: 'Role'
+props:
+  loading: true
+  loadingState:
+    icon: 'i-heroicons-arrow-path-20-solid'
+    label: "Loading..."
+excludedProps:
+  - loadingState
+---
+::
+
+This can be easily used with Nuxt `useAsyncData` composable.
+
+```vue
+<script setup>
+const columns = [...]
+
+const { pending, data: people } = await useLazyAsyncData('people', () => $fetch('/api/people'))
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns" :loading="pending" />
+</template>
+```
+
+### Empty
+
+An empty state will be displayed when there are no results.
+
+Use the `empty-state` prop to customize the `icon` and `label` or change them globally in `ui.table.default.emptyState`.
+
+You can also set it to `null` to hide the empty state.
+
+::component-card
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+baseProps:
+  class: 'w-full'
+  columns:
+    - key: 'id'
+      label: 'ID'
+    - key: 'name'
+      label: 'Name'
+    - key: 'title'
+      label: 'Title'
+    - key: 'email'
+      label: 'Email'
+    - key: 'role'
+      label: 'Role'
+props:
+  emptyState:
+    icon: 'i-heroicons-circle-stack-20-solid'
+    label: "No items."
+excludedProps:
+  - emptyState
+---
+::
+
+## Slots
+
+You can use slots to customize the header and data cells of the table.
+
+### `<column>-header`
+
+Use the `#<column>-header` slot to customize the header cell of a column. You will have access to the `column`, `sort` and `on-sort` properties in the slot scope.
+
+The `sort` property is an object with the following properties:
+
+- `field` - The field to sort by.
+- `direction` - The direction to sort by. Can be `asc` or `desc`.
+
+The `on-sort` property is a function that you can call to sort the table and accepts the column as parameter.
+
+::alert{icon="i-heroicons-light-bulb"}
+Even though you can customize the sort button as mentioned in the [Sortable](#sortable) section, you can use this slot to completely override its behavior, with a custom dropdown for example.
+::
+
+### `<column>-data`
+
+Use the `#<column>-data` slot to customize the data cell of a column. You will have access to the `row` and `column` properties in the slot scope.
+
+You can for example create an extra column for actions with a [Dropdown](/elements/dropdown) component inside or change the color of the rows based on a selection.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-slots{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const columns = [..., {
+  key: 'actions'
+}]
+
+const people = [...]
+
+const items = (row) => [
+  [{
+    label: 'Edit',
+    icon: 'i-heroicons-pencil-square-20-solid',
+    click: () => console.log('Edit', row.id)
+  }, {
+    label: 'Duplicate',
+    icon: 'i-heroicons-document-duplicate-20-solid'
+  }], [{
+    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'
+  }]
+]
+
+const selected = ref([people[1]])
+</script>
+
+<template>
+  <UTable v-model="selected" :rows="people" :columns="columns">
+    <template #name-data="{ row }">
+      <span :class="[selected.find(person => person.id === row.id) && 'text-primary-500 dark:text-primary-400']">{{ row.name }}</span>
+    </template>
+
+    <template #actions-data="{ row }">
+      <UDropdown :items="items(row)">
+        <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
+      </UDropdown>
+    </template>
+  </UTable>
+</template>
+```
+::
+
+### `loading-state` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+
+Use the `#loading-state` slot to customize the loading state.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-loading-slot{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const columns = [...]
+
+const people = []
+
+const pending = ref(true)
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns" :loading="pending">
+    <template #loading-state>
+      <div class="flex items-center justify-center h-32">
+        <i class="loader --6" />
+      </div>
+    </template>
+  </UTable>
+</template>
+
+<style scoped>
+/* https://codepen.io/jenning/pen/YzNmzaV */
+</style>
+```
+::
+
+### `empty-state` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+
+Use the `#empty-state` slot to customize the empty state.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-empty-slot{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const columns = [...]
+const people = [...]
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns">
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center py-6 gap-3">
+        <span class="italic text-sm">No one here!</span>
+        <UButton label="Add people" />
+      </div>
+    </template>
+  </UTable>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

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

@@ -1,46 +0,0 @@
----
-github: true
----
-
-## 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/5.navigation/1.vertical-navigation.md

@@ -0,0 +1,88 @@
+---
+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'
+  },
+  badge: 100
+}, {
+  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>
+```
+::
+
+## Theme
+
+Our theming system provides a lot of flexibility to customize the component. Here is an example of what you can do.
+
+::component-example
+#default
+:vertical-navigation-theme-tailwind
+#code
+```vue
+<script setup>
+const links = [{
+  label: 'Installation',
+  to: '/getting-started/installation'
+}, {
+  label: 'Vertical Navigation',
+  to: '/navigation/vertical-navigation'
+}, {
+  label: 'Command Palette',
+  to: '/navigation/command-palette'
+}]
+</script>
+
+<template>
+  <UVerticalNavigation
+    :links="links"
+    :ui="{
+      wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
+      base: 'group block border-l -ml-px lg:leading-6',
+      padding: 'pl-4',
+      rounded: '',
+      font: '',
+      ring: '',
+      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'
+    }"
+  />
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

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

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Add a customizable command palette to your app.
 headlessui:
   label: 'Combobox'
   to: 'https://headlessui.com/vue/combobox'
@@ -57,7 +58,7 @@ You can put a `CommandPalette` anywhere you want but it's most commonly used ins
 #code
 ```vue
 <script setup>
-const open = ref(false)
+const isOpen = ref(false)
 
 const people = [
   { id: 1, label: 'Wade Cooper' },
@@ -77,9 +78,9 @@ const selected = ref([])
 
 <template>
   <div>
-    <UButton label="Open" @click="open = true" />
+    <UButton label="Open" @click="isOpen = true" />
 
-    <UModal v-model="open">
+    <UModal v-model="isOpen">
       <UCommandPalette
         v-model="selected"
         multiple
@@ -159,11 +160,13 @@ function onSelect (option) {
 
 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 `selected-icon` 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
+  emptyState: null
 props:
   icon: 'i-heroicons-command-line'
 excludedProps:
@@ -171,6 +174,24 @@ excludedProps:
 ---
 ::
 
+### Loading
+
+Use the `loading` prop to show a loading icon.
+
+Use the `loading-icon` prop to set a different icon or change it globally in `ui.commandPalette.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-card
+---
+padding: false
+baseProps:
+  emptyState: null
+props:
+  loading: true
+excludedProps:
+  - icon
+---
+::
+
 ### Placeholder
 
 Use the `placeholder` prop to change the input placeholder
@@ -179,7 +200,7 @@ Use the `placeholder` prop to change the input placeholder
 ---
 padding: false
 baseProps:
-  empty: null
+  emptyState: null
 props:
   placeholder: 'Type a command...'
 excludedProps:
@@ -189,31 +210,33 @@ excludedProps:
 
 ### Close
 
-Use the `close` prop to display a close button on the right side of the input.
+Use the `close-button` 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`.
+You can pass all the props of the [Button](/elements/button) component to customize it through the `close-button` prop or globally through `ui.commandPalette.default.closeButton`.
 
 ::component-card
 ---
 padding: false
 baseProps:
-  empty: null
+  emptyState: null
 props:
-  close:
+  closeButton:
     icon: 'i-heroicons-x-mark-20-solid'
     color: 'gray'
     variant: 'link'
     padded: false
 excludedProps:
-  - close
+  - closeButton
 ---
 ::
 
 ### Empty
 
-Use the `empty` prop to display a message when there are no results.
+An empty state will be displayed 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:
+Use the `empty-state` prop to customize the `icon` and `label` or change them globally in `ui.commandPalette.default.emptyState`.
+
+You can also set it to `null` to hide the empty state.
 
 ::component-card
 ---
@@ -221,15 +244,85 @@ padding: false
 baseProps:
   placeholder: 'Type something to see the empty label change'
 props:
-  empty:
+  emptyState:
     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
+  - emptyState
 ---
 ::
 
+## 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 behavior by overriding the `command-attribute` 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>
+```
+::
+
+::alert{icon="i-heroicons-light-bulb"}
+The `loading` state will automatically be enabled when a `search` function is loading. You can disable this behavior by setting the `loading-icon` prop to `null` or globally in `ui.commandPalette.default.loadingIcon`.
+::
+
 ## Themes
 
 Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.
@@ -245,7 +338,7 @@ padding: false
 :command-palette-theme-algolia{class="max-h-[480px] rounded-md"}
 ::
 
-::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/docs/rework/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
+::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!
 ::
 
@@ -260,10 +353,44 @@ padding: false
 :command-palette-theme-raycast{class="max-h-[480px] rounded-md"}
 ::
 
-::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/docs/rework/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
+::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!
 ::
 
+## Slots
+
+### `empty-state` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+
+Use the `#empty-state` slot to customize the empty state.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:command-palette-example-empty-slot{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const groups = [...]
+</script>
+
+<template>
+  <UCommandPalette :groups="groups">
+    <template #empty-state>
+      <div class="flex flex-col items-center justify-center py-6 gap-3">
+        <span class="italic text-sm">Nothing here!</span>
+        <UButton label="Add item" />
+      </div>
+    </template>
+  </UCommandPalette>
+</template>
+```
+::
+
 ## Props
 
 :component-props

docs/content/5.navigation/3.pagination.md

@@ -0,0 +1,188 @@
+---
+github: true
+description: Add a pagination to handle pages.
+navigation:
+  badge: 'Edge'
+---
+
+## Usage
+
+Use a `v-model` to get a reactive page alongside a `total` which represents the total of items. You can also use the `page-count` prop to define the number of items per page which defaults to `10`.
+
+::component-example
+#default
+:pagination-example-basic
+
+#code
+```vue
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<template>
+  <UPagination v-model="page" :page-count="5" :total="items.length" />
+</template>
+```
+::
+
+### Max
+
+Use the `max` prop to set a maximum of displayed pages. Defaults to `7`, being the minimum.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+props:
+  max: 5
+  pageCount: 5
+  total: 100
+excludedProps:
+  - pageCount
+  - total
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the buttons.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+props:
+  size: 'sm'
+ui:
+  size:
+    2xs: true
+    xs: true
+    sm: true
+    md: true
+    lg: true
+    xl: true
+---
+::
+
+### Active / Inactive
+
+Use the `active-button` and `inactive-button` props to customize the active and inactive buttons of the Pagination.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+props:
+  activeButton:
+    variant: 'outline'
+  inactiveButton:
+    color: 'gray'
+excludedProps:
+  - activeButton
+  - inactiveButton
+---
+::
+
+### Prev / Next
+
+Use the `prev-button` and `next-button` props to customize the prev and next buttons of the Pagination.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+props:
+  prevButton:
+    icon: 'i-heroicons-arrow-small-left-20-solid'
+    label: Prev
+    color: 'gray'
+  nextButton:
+    icon: 'i-heroicons-arrow-small-right-20-solid'
+    trailing: true
+    label: Next
+    color: 'gray'
+excludedProps:
+  - prevButton
+  - nextButton
+---
+::
+
+## Theme
+
+Our theming system provides a lot of flexibility to customize the component. Here is an example of what you can do.
+
+::component-example
+#default
+:pagination-theme-rounded
+#code
+```vue
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<template>
+  <UPagination
+    v-model="page"
+    :total="items.length"
+    :ui="{
+      wrapper: 'flex items-center gap-1',
+      rounded: 'rounded-full min-w-[32px] justify-center'
+    }"
+    :prev-button="null"
+    :next-button="{
+      icon: 'i-heroicons-arrow-small-right-20-solid',
+      color: 'primary',
+      variant: 'outline'
+    }"
+  />
+</template>
+```
+::
+
+## Slots
+
+### `prev` / `next`
+
+Use the `#prev` and `#next` slots to set the content of the previous and next buttons.
+
+::component-example
+#default
+:pagination-example-prev-next-slots
+
+#code
+```vue
+<script setup>
+const page = ref(1);
+const items = ref(Array(55));
+</script>
+
+<template>
+  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-l-md last-of-type:rounded-r-md' }">
+    <template #prev="{ onClick }">
+      <UTooltip text="Previous page">
+        <UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="mr-2" @click="onClick" />
+      </UTooltip>
+    </template>
+
+    <template #next="{ onClick }">
+      <UTooltip text="Next page">
+        <UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="ml-2" @click="onClick" />
+      </UTooltip>
+    </template>
+  </UPagination>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset