docs(content): move shortcuts into composables/

docs/content/3.components/0.app.md

@@ -0,0 +1,22 @@
+---
+title: App
+description: Starting point for your Nuxt UI app.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Accordion.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots

docs/content/3.components/accordion.md

@@ -0,0 +1,32 @@
+---
+description: Display togglable accordion panels.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/accordion.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Accordion.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/alert.md

@@ -0,0 +1,28 @@
+---
+description: Display an alert element to draw attention.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Alert.vue
+---
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/avatar-group.md

@@ -0,0 +1,26 @@
+---
+title: AvatarGroup
+description: ''
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/AvatarGroup.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme

docs/content/3.components/avatar.md

@@ -0,0 +1,24 @@
+---
+description: Display an image that represents a resource or a group of resources.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/avatar.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Avatar.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+## Theme
+
+:component-theme

docs/content/3.components/badge.md

@@ -0,0 +1,83 @@
+---
+description: Display a short text to represent a status or a category.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Badge.vue
+---
+
+## Usage
+
+Use the default slot to set the label of the Badge.
+
+::component-code
+---
+slots:
+  default: Badge
+---
+::
+
+You can achieve the same result by using the `label` prop.
+
+::component-code
+---
+props:
+  label: Badge
+---
+::
+
+### Style
+
+Use the `color` and `variant` props to change the style of the Badge.
+
+::component-code
+---
+props:
+  color: gray
+  variant: solid
+slots:
+  default: Badge
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Badge.
+
+::component-code
+---
+props:
+  size: md
+slots:
+  default: Badge
+---
+::
+
+## Examples
+
+### `class` prop
+
+Use the `class` prop to override the base styles of the Badge.
+
+::component-code
+---
+props:
+  class: 'font-bold rounded-full'
+slots:
+  default: Badge
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme

docs/content/3.components/breadcrumb.md

@@ -0,0 +1,26 @@
+---
+title: Breadcrumb
+description: A list of links that indicate the current page's location within a navigational hierarchy.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Breadcrumb.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme

docs/content/3.components/button-group.md

@@ -0,0 +1,26 @@
+---
+title: ButtonGroup
+description: ''
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Button.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme

docs/content/3.components/button.md

@@ -0,0 +1,220 @@
+---
+description: Create a button with icon or link capabilities.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Button.vue
+---
+
+## Usage
+
+Use the default slot to set the label of the Button.
+
+::component-code
+---
+slots:
+  default: Button
+---
+::
+
+You can achieve the same result by using the `label` prop.
+
+::component-code
+---
+props:
+  label: Button
+---
+::
+
+### Link
+
+You can pass any property from [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `target`, etc.
+
+::component-code
+---
+ignore:
+  - label
+  - target
+props:
+  to: https://github.com/nuxt/ui
+  target: _blank
+slots:
+  default: Button
+---
+::
+
+### Style
+
+Use the `color` and `variant` props to change the style of the Button.
+
+::component-code
+---
+props:
+  color: gray
+  variant: solid
+slots:
+  default: Button
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Button.
+
+::component-code
+---
+props:
+  size: md
+slots:
+  default: Button
+---
+::
+
+### Icon
+
+Use the `icon` prop to show any icon from [Iconify](https://icones.js.org).
+
+::component-code
+---
+props:
+  icon: i-heroicons-rocket-launch
+  size: md
+  color: primary
+  variant: solid
+slots:
+  default: Button
+---
+::
+
+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-code
+---
+props:
+  leading-icon: ''
+  trailing-icon: i-heroicons-arrow-right
+  size: md
+slots:
+  default: Button
+---
+::
+
+The `label` as prop or slot is optional so you can use the Button as an icon-only button.
+
+::component-code
+---
+props:
+  icon: i-heroicons-magnifying-glass
+  size: md
+  color: primary
+  variant: solid
+---
+::
+
+### Loading
+
+Use the `loading` prop to show a loading icon and disable the Button.
+
+Use the `loading-icon` prop or globally in `appConfig.ui.icons.loading` to set a different icon.
+
+::component-code
+---
+props:
+  loading: true
+  loading-icon: ''
+  trailing: false
+slots:
+  default: Button
+---
+
+Button
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Button.
+
+::component-code
+---
+props:
+  disabled: true
+slots:
+  default: Button
+---
+
+Button
+::
+
+## Examples
+
+### `class` prop
+
+Use the `class` prop to override the base styles of the Button.
+
+::component-code
+---
+props:
+  class: 'font-bold rounded-full'
+slots:
+  default: Button
+---
+::
+
+### `ui` prop
+
+Use the `ui` prop to override the slots styles of the Button.
+
+::component-code
+---
+ignore:
+  - ui
+props:
+  icon: i-heroicons-rocket-launch
+  color: gray
+  variant: outline
+  ui:
+    leadingIcon: 'text-primary-500 dark:text-primary-400'
+slots:
+  default: Button
+---
+::
+
+## API
+
+### Props
+
+::component-props
+---
+ignore:
+  - to
+  - target
+  - activeClass
+  - inactiveClass
+  - exactActiveClass
+  - ariaCurrentValue
+  - href
+  - rel
+  - noRel
+  - prefetch
+  - noPrefetch
+  - prefetchedClass
+  - replace
+  - exact
+  - exactQuery
+  - exactHash
+  - external
+  - active
+---
+::
+
+::callout{icon="i-simple-icons-github" to="https://github.com/benjamincanac/ui3/blob/dev/src/runtime/components/Link.vue#L13"}
+The `Button` component extends the `Link` component. Check out the source code on GitHub.
+::
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme

docs/content/3.components/card.md

@@ -0,0 +1,35 @@
+---
+description: Display content in a card with a header, body and footer.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Card.vue
+---
+
+## Usage
+
+::component-example
+---
+component: 'card-example'
+componentProps:
+  class: 'w-full'
+---
+::
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme

docs/content/3.components/carousel.md

@@ -0,0 +1,34 @@
+---
+description: Display images or content in a scrollable area.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Carousel.vue
+navigation:
+  badge:
+    label: Soon
+    color: gray
+  disabled: true
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/checkbox.md

@@ -0,0 +1,32 @@
+---
+description: Display a checkbox field.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/checkbox.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Checkbox.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/chip.md

@@ -0,0 +1,25 @@
+---
+description: Display a chip indicator on any component.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Chip.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme

docs/content/3.components/collapsible.md

@@ -0,0 +1,32 @@
+---
+description: A container lets you center and constrain the width of your content.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/collapsible.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Container.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/command-palette.md

@@ -0,0 +1,33 @@
+---
+title: CommandPalette
+description: Add a customizable command palette to your app.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/combobox.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/CommandPalette.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/container.md

@@ -0,0 +1,25 @@
+---
+description: A container lets you center and constrain the width of your content.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Container.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme

docs/content/3.components/context-menu.md

@@ -0,0 +1,33 @@
+---
+title: ContextMenu
+description: Display a menu that appears on right click.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/context-menu.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/ContextMenu.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/drawer.md

@@ -0,0 +1,32 @@
+---
+description: ''
+links:
+  - label: Vaul Vue
+    icon: i-custom-radix-vue
+    to: https://vaul.unovue.com/
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Drawer.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/dropdown-menu.md

@@ -0,0 +1,33 @@
+---
+title: DropdownMenu
+description: Display a list of actions in a dropdown menu.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/dropdown-menu.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Dropdown.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/form-field.md

@@ -0,0 +1,26 @@
+---
+title: FormField
+description: Display a label and additional informations around a form element.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/FormGroup.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme

docs/content/3.components/form.md

@@ -0,0 +1,39 @@
+---
+description: Collect and validate form data.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Form.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+### Exposed
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `submit()`{lang="ts-type"} | `Promise<void>`{lang="ts-type"} <br> <div class="text-gray-600 dark:text-gray-300 mt-1"><p>Triggers form submission.</p> |
+| `validate(path?: string \| string[], opts: { silent?: boolean })`{lang="ts-type"} | `Promise<T>`{lang="ts-type"} <br> <div class="text-gray-600 dark:text-gray-300 mt-1"><p>Triggers form validation. Will raise any errors unless `opts.silent` is set to true.</p> |
+| `clear(path?: string)`{lang="ts-type"} | `void` <br> <div class="text-gray-600 dark:text-gray-300 mt-1"><p>Clears form errors associated with a specific path. If no path is provided, clears all form errors.</p> |
+| `getErrors(path?: string)`{lang="ts-type"} | `FormError[]`{lang="ts-type"} <br> <div class="text-gray-600 dark:text-gray-300 mt-1"><p>Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.</p></div> |
+| `setErrors(errors: FormError[], path?: string)`{lang="ts-type"} | `void` <br> <div class="text-gray-600 dark:text-gray-300 mt-1"><p>Sets form errors for a given path. If no path is provided, overrides all errors.</p> |
+| `errors`{lang="ts-type"} | `Ref<FormError[]>`{lang="ts-type"} <br> <div class="text-gray-600 dark:text-gray-300 mt-1"><p>A reference to the array containing validation errors. Use this to access or manipulate the error information.</p> |
+| `disabled`{lang="ts-type"} | `Ref<boolean>`{lang="ts-type"} |

docs/content/3.components/icon.md

@@ -0,0 +1,27 @@
+---
+description: Add 200,000+ ready to use icons to your Nuxt application, based on Iconify.
+links:
+  - label: Iconify
+    icon: i-simple-icons-iconify
+    to: https://icones.js.org
+  - label: Nuxt Icon
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/icon
+---
+
+## Usage
+
+You can use any name from the https://icones.js.org collection such as the `i-` prefix:
+
+::component-card
+---
+baseProps:
+  class: 'w-5 h-5'
+props:
+  name: 'i-heroicons-light-bulb'
+---
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+It's highly recommended to install the icons collections you need, read more about this in [Theming](/getting-started/theming#icons).
+::

docs/content/3.components/input-menu.md

@@ -0,0 +1,33 @@
+---
+title: InputMenu
+description: Display an autocomplete input with real-time suggestions.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/combobox.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/InputMenu.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/input.md

@@ -0,0 +1,29 @@
+---
+description: Display an input field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Input.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/kbd.md

@@ -0,0 +1,28 @@
+---
+title: 'Keyboard Key'
+description: Display a keyboard key in a text block.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Kbd.vue
+navigation:
+  title: 'Kbd'
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme

docs/content/3.components/link.md

@@ -0,0 +1,57 @@
+---
+title: 'Link'
+description: Render a NuxtLink but with superpowers.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Link.vue
+---
+
+## Usage
+
+The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link) through the [`custom`](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-custom) prop that provides a few extra props:
+
+- `inactive-class` prop to set a class when the link is inactive, `active-class` is used when active.
+- `exact` prop to style with `active-class` when the link is active and the route is exactly the same as the current route.
+- `exact-query` and `exact-hash` props to style with `active-class` when the link is active and the query or hash is exactly the same as the current query or hash.
+
+The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide.
+
+::component-card
+---
+props:
+  to: /components/link
+  activeClass: 'text-primary'
+  inactiveClass: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
+code: ' Link '
+---
+
+Link
+::
+
+It also renders an `<a>` tag when a `to` prop is provided, otherwise it defaults to rendering a `<button>` tag. The default behavior can be customized using the `as` prop.
+
+It is used underneath by the [Button](/components/button), [Dropdown](/components/dropdown) and [VerticalNavigation](/components/vertical-navigation) components.
+
+## IntelliSense
+
+If you're using VSCode and wish to get autocompletion for the classes `active-class` and `inactive-class`, you can add the following settings to your `.vscode/settings.json`:
+
+```json [.vscode/settings.json]
+{
+    "tailwindCSS.classAttributes": [
+      "active-class",
+      "inactive-class"
+  ],
+}
+```
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots

docs/content/3.components/meter.md

@@ -0,0 +1,35 @@
+---
+title: 'Meter'
+description: Display a gauge meter that fills or depletes.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Meter.vue
+navigation:
+  badge:
+    label: Soon
+    color: gray
+  disabled: true
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/modal.md

@@ -0,0 +1,32 @@
+---
+description: Display a modal within your application.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/dialog.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Modal.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/navigation-menu.md

@@ -0,0 +1,33 @@
+---
+title: NavigationMenu
+description: Display a list of horizontal links.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/navigation-menu.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/HorizontalNavigation.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/pagination.md

@@ -0,0 +1,32 @@
+---
+description: Add a pagination to handle pages.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/pagination.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Pagination.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/popover.md

@@ -0,0 +1,32 @@
+---
+description: Display a non-modal dialog that floats around a trigger element.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/popover.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Popover.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/progress.md

@@ -0,0 +1,33 @@
+---
+title: 'Progress'
+description: Show a horizontal bar to indicate task progression.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/progress.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Progress.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/radio-group.md

@@ -0,0 +1,33 @@
+---
+title: RadioGroup
+description: Display a set of radio buttons.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/radio-group.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/RadioGroup.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/select-menu.md

@@ -0,0 +1,33 @@
+---
+title: SelectMenu
+description: Display a select menu with advanced features.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/combobox.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/SelectMenu.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/select.md

@@ -0,0 +1,32 @@
+---
+description: Display a select field.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/select.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Select.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/separator.md

@@ -0,0 +1,28 @@
+---
+description: Display a separator between content.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/separator.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Divider.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme

docs/content/3.components/skeleton.md

@@ -0,0 +1,25 @@
+---
+description: Display a placeholder while content is loading.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Skeleton.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+## Theme
+
+:component-theme

docs/content/3.components/slideover.md

@@ -0,0 +1,32 @@
+---
+description: Display a dialog that slides in from the edge of the screen.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/dialog.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Slideover.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/slider.md

@@ -0,0 +1,28 @@
+---
+description: Display a range field
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/slider.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Range.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/switch.md

@@ -0,0 +1,32 @@
+---
+description: Display a toggle field.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/switch.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Toggle.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/table.md

@@ -0,0 +1,34 @@
+---
+description: 'Display data in a table.'
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Table.vue
+navigation:
+  badge:
+    label: Soon
+    color: gray
+  disabled: true
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/tabs.md

@@ -0,0 +1,32 @@
+---
+description: A set of tab panels that are displayed one at a time.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/tabs.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Tabs.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/textarea.md

@@ -0,0 +1,29 @@
+---
+description: Display a textarea field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Textarea.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/toast.md

@@ -0,0 +1,32 @@
+---
+description: Display a toast notification in your app.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/toast.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Notification.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme

docs/content/3.components/tooltip.md

@@ -0,0 +1,32 @@
+---
+description: Display content that appears on hover next to an element.
+links:
+  - label: Radix Vue
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/tooltip.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/Tooltip.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
+
+:component-theme