arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 08:20:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(theme)!: migrate from heroicons to lucide (#2540)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Alex
2024-11-06 16:59:19 +05:00
committed by GitHub
parent e3092b6b40
commit a6c1a6c587
177 changed files with 2245 additions and 2245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/content/1.getting-started/3.theme.md
View File

@@ -110,7 +110,7 @@ export default defineAppConfig({
```
::note
Try the :prose-icon{name="i-heroicons-swatch" class="text-[var(--ui-primary)]"} theme picker in the header above to change `primary` and `neutral` colors.
Try the :prose-icon{name="i-lucide-swatch-book" class="text-[var(--ui-primary)]"} theme picker in the header above to change `primary` and `neutral` colors.
::
These colors are used to style the components but also to generate the `color` variants:
@@ -345,7 +345,7 @@ Nuxt UI uses a global `--ui-radius` CSS variable for consistent border rounding.
```
::note
Try the :prose-icon{name="i-heroicons-swatch" class="text-[var(--ui-primary)]"} theme picker in the header above to change the base radius value.
Try the :prose-icon{name="i-lucide-swatch-book" class="text-[var(--ui-primary)]"} theme picker in the header above to change the base radius value.
::
::tip
@@ -522,7 +522,7 @@ ignore:
- size
- icon
props:
trailingIcon: i-heroicons-chevron-right
trailingIcon: i-lucide-chevron-right
size: md
color: neutral
variant: outline

4
docs/content/1.getting-started/4.icons.md
View File

@@ -23,7 +23,7 @@ You can use the [Icon](/components/icon) component with a `name` prop to display
::component-code{slug="icon"}
---
props:
name: 'i-heroicons-light-bulb'
name: 'i-lucide-lightbulb'
class: 'size-5'
---
::
@@ -38,7 +38,7 @@ ignore:
- color
- variant
props:
icon: i-heroicons-sun
icon: i-lucide-sun
variant: subtle
slots:
default: Button

4
docs/content/2.composables/define-shortcuts.md
View File

@@ -121,14 +121,14 @@ The `extractShortcuts` utility can be used to automatically define shortcuts fro
<script setup lang="ts">
const items = [{
label: 'Save',
icon: 'i-heroicons-document-arrow-down',
icon: 'i-lucide-file-down',
kbds: ['meta', 'S'],
onSelect() {
save()
}
}, {
label: 'Copy',
icon: 'i-heroicons-document-duplicate',
icon: 'i-lucide-copy',
kbds: ['meta', 'C'],
onSelect() {
copy()

36
docs/content/3.components/accordion.md
View File

@@ -35,13 +35,13 @@ props:
class: 'px-4'
items:
- label: 'Icons'
icon: 'i-heroicons-face-smile'
icon: 'i-lucide-smile'
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
icon: 'i-lucide-swatch-book'
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Components'
icon: 'i-heroicons-cube-transparent'
icon: 'i-lucide-box'
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
---
::
@@ -64,13 +64,13 @@ props:
type: 'multiple'
items:
- label: 'Icons'
icon: 'i-heroicons-face-smile'
icon: 'i-lucide-smile'
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
icon: 'i-lucide-swatch-book'
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Components'
icon: 'i-heroicons-cube-transparent'
icon: 'i-lucide-box'
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
---
::
@@ -93,13 +93,13 @@ props:
collapsible: false
items:
- label: 'Icons'
icon: 'i-heroicons-face-smile'
icon: 'i-lucide-smile'
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
icon: 'i-lucide-swatch-book'
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Components'
icon: 'i-heroicons-cube-transparent'
icon: 'i-lucide-box'
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
---
::
@@ -123,21 +123,21 @@ props:
disabled: true
items:
- label: 'Icons'
icon: 'i-heroicons-face-smile'
icon: 'i-lucide-smile'
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
icon: 'i-lucide-swatch-book'
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
disabled: true
- label: 'Components'
icon: 'i-heroicons-cube-transparent'
icon: 'i-lucide-box'
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
---
::
### Trailing Icon
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`.
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-lucide-chevron-down`.
::tip
You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
@@ -153,17 +153,17 @@ hide:
- class
props:
class: 'px-4'
trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
trailingIcon: 'i-lucide-arrow-down'
items:
- label: 'Icons'
icon: 'i-heroicons-face-smile'
icon: 'i-lucide-smile'
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
trailingIcon: 'i-heroicons-plus-20-solid'
trailingIcon: 'i-lucide-plus'
- label: 'Colors'
icon: 'i-heroicons-swatch'
icon: 'i-lucide-swatch-book'
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Components'
icon: 'i-heroicons-cube-transparent'
icon: 'i-lucide-box'
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
---
::

12
docs/content/3.components/alert.md
View File

@@ -45,7 +45,7 @@ ignore:
props:
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
icon: 'i-heroicons-command-line'
icon: 'i-lucide-terminal'
---
::
@@ -81,7 +81,7 @@ props:
color: neutral
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
icon: 'i-heroicons-command-line'
icon: 'i-lucide-terminal'
---
::
@@ -101,7 +101,7 @@ props:
variant: subtle
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
icon: 'i-heroicons-command-line'
icon: 'i-lucide-terminal'
---
::
@@ -157,7 +157,7 @@ props:
### Close Icon
Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-lucide-x`.
::component-code
---
@@ -174,7 +174,7 @@ props:
color: neutral
variant: outline
close: true
closeIcon: 'i-heroicons-arrow-right'
closeIcon: 'i-lucide-arrow-right'
---
::
@@ -245,7 +245,7 @@ ignore:
props:
title: 'Heads up!'
description: 'You can change the primary color in your app config.'
icon: i-heroicons-rocket-launch
icon: i-lucide-rocket
ui:
icon: 'size-11'
---

2
docs/content/3.components/avatar.md
View File

@@ -43,7 +43,7 @@ Use the `icon` prop to display a fallback [Icon](/components/icon).
::component-code
---
props:
icon: 'i-heroicons-photo'
icon: 'i-lucide-image'
size: md
---
::

4
docs/content/3.components/badge.md
View File

@@ -75,7 +75,7 @@ Use the `icon` prop to show an [Icon](/components/icon) inside the Badge.
::component-code
---
props:
icon: i-heroicons-rocket-launch
icon: i-lucide-rocket
size: md
color: primary
variant: solid
@@ -89,7 +89,7 @@ Use the `leading` and `trailing` props to set the icon position or the `leading-
::component-code
---
props:
trailingIcon: i-heroicons-arrow-right
trailingIcon: i-lucide-arrow-right
size: md
slots:
default: Badge

16
docs/content/3.components/breadcrumb.md
View File

@@ -29,12 +29,12 @@ external:
props:
items:
- label: 'Home'
icon: 'i-heroicons-home'
icon: 'i-lucide-house'
- label: 'Components'
icon: 'i-heroicons-cube-transparent'
icon: 'i-lucide-box'
to: '/components'
- label: 'Breadcrumb'
icon: 'i-heroicons-link'
icon: 'i-lucide-link'
to: '/components/breadcrumb'
---
::
@@ -45,7 +45,7 @@ A `span` is rendered instead of a link when the `to` property is not defined.
### Separator Icon
Use the `separator-icon` prop to customize the [Icon](/components/icon) between each item. Defaults to `i-heroicons-chevron-right-20-solid`.
Use the `separator-icon` prop to customize the [Icon](/components/icon) between each item. Defaults to `i-lucide-chevron-right`.
::component-code
---
@@ -54,15 +54,15 @@ ignore:
external:
- items
props:
separatorIcon: 'i-heroicons-arrow-right-20-solid'
separatorIcon: 'i-lucide-arrow-right'
items:
- label: 'Home'
icon: 'i-heroicons-home'
icon: 'i-lucide-house'
- label: 'Components'
icon: 'i-heroicons-cube-transparent'
icon: 'i-lucide-box'
to: '/components'
- label: 'Breadcrumb'
icon: 'i-heroicons-link'
icon: 'i-lucide-link'
to: '/components/breadcrumb'
---
::

12
docs/content/3.components/button-group.md
View File

@@ -18,10 +18,10 @@ slots:
default: |
<UButton color="neutral" variant="subtle" label="Button" />
<UButton color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
<UButton color="neutral" variant="outline" icon="i-lucide-chevron-down" />
---
:u-button{color="neutral" variant="subtle" label="Button"}
:u-button{color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
:u-button{color="neutral" variant="outline" icon="i-lucide-chevron-down"}
::
### Size
@@ -37,10 +37,10 @@ slots:
default: |
<UButton color="neutral" variant="subtle" label="Button" />
<UButton color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
<UButton color="neutral" variant="outline" icon="i-lucide-chevron-down" />
---
:u-button{color="neutral" variant="subtle" label="Button"}
:u-button{color="neutral" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
:u-button{color="neutral" variant="outline" icon="i-lucide-chevron-down"}
::
### Orientation
@@ -76,10 +76,10 @@ slots:
<UInput color="neutral" variant="outline" placeholder="Enter token" />
<UButton color="neutral" variant="subtle" icon="i-heroicons-clipboard-document" />
<UButton color="neutral" variant="subtle" icon="i-lucide-clipboard" />
---
:u-input{color="neutral" variant="outline" placeholder="Enter token"}
:u-button{color="neutral" variant="subtle" icon="i-heroicons-clipboard-document"}
:u-button{color="neutral" variant="subtle" icon="i-lucide-clipboard"}
::
### With tooltip

12
docs/content/3.components/button.md
View File

@@ -92,7 +92,7 @@ Use the `icon` prop to show an [Icon](/components/icon) inside the Button.
::component-code
---
props:
icon: i-heroicons-rocket-launch
icon: i-lucide-rocket
size: md
color: primary
variant: solid
@@ -106,7 +106,7 @@ Use the `leading` and `trailing` props to set the icon position or the `leading-
::component-code
---
props:
trailingIcon: i-heroicons-arrow-right
trailingIcon: i-lucide-arrow-right
size: md
slots:
default: Button
@@ -118,7 +118,7 @@ The `label` as prop or slot is optional so you can use the Button as an icon-onl
::component-code
---
props:
icon: i-heroicons-magnifying-glass
icon: i-lucide-search
size: md
color: primary
variant: solid
@@ -184,13 +184,13 @@ This also works with the [Form](/components/form) component.
### Loading Icon
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-ccw`.
::component-code
---
props:
loading: true
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
loadingIcon: 'i-lucide-repeat-2'
slots:
default: Button
---
@@ -244,7 +244,7 @@ ignore:
- variant
- icon
props:
icon: i-heroicons-rocket-launch
icon: i-lucide-rocket
color: neutral
variant: outline
ui:

6
docs/content/3.components/carousel.md
View File

@@ -78,7 +78,7 @@ class: 'p-8'
### Prev Icon / Next Icon
Use the `prev-icon` and `next-icon` props to customize the buttons [Icon](/components/icon). Defaults to `i-heroicons-arrow-left-20-solid` / `i-heroicons-arrow-right-20-solid`.
Use the `prev-icon` and `next-icon` props to customize the buttons [Icon](/components/icon). Defaults to `i-lucide-arrow-left` / `i-lucide-arrow-right`.
::component-example
---
@@ -87,10 +87,10 @@ class: 'p-8'
options:
- name: 'prevIcon'
label: 'prevIcon'
default: 'i-heroicons-chevron-left'
default: 'i-lucide-chevron-left'
- name: 'nextIcon'
label: 'nextIcon'
default: 'i-heroicons-chevron-right'
default: 'i-lucide-chevron-right'
---
::

8
docs/content/3.components/checkbox.md
View File

@@ -48,13 +48,13 @@ props:
### Indeterminate Icon
Use the `indeterminate-icon` prop to customize the indeterminate icon. Defaults to `i-heroicons-minus-20-solid`.
Use the `indeterminate-icon` prop to customize the indeterminate icon. Defaults to `i-lucide-minus`.
::component-code
---
props:
indeterminate: true
indeterminateIcon: 'i-heroicons-plus-20-solid'
indeterminateIcon: 'i-lucide-plus'
---
::
@@ -101,7 +101,7 @@ props:
### Icon
Use the `icon` prop to set the icon of the Checkbox when it is checked. Defaults to `i-heroicons-check-20-solid`.
Use the `icon` prop to set the icon of the Checkbox when it is checked. Defaults to `i-lucide-check`.
::component-code
---
@@ -109,7 +109,7 @@ ignore:
- label
- defaultValue
props:
icon: 'i-heroicons-heart'
icon: 'i-lucide-heart'
defaultValue: true
label: Check me
---

20
docs/content/3.components/chip.md
View File

@@ -16,9 +16,9 @@ prettier: true
slots:
default: |
<UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
<UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
---
:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
:u-button{icon="i-lucide-mail" color="neutral" variant="subtle"}
::
### Color
@@ -33,9 +33,9 @@ props:
slots:
default: |
<UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
<UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
---
:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
:u-button{icon="i-lucide-mail" color="neutral" variant="subtle"}
::
### Size
@@ -50,9 +50,9 @@ props:
slots:
default: |
<UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
<UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
---
:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
:u-button{icon="i-lucide-mail" color="neutral" variant="subtle"}
::
### Text
@@ -68,9 +68,9 @@ props:
slots:
default: |
<UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
<UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
---
:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
:u-button{icon="i-lucide-mail" color="neutral" variant="subtle"}
::
### Position
@@ -85,9 +85,9 @@ props:
slots:
default: |
<UButton icon="i-heroicons-envelope" color="neutral" variant="subtle" />
<UButton icon="i-lucide-mail" color="neutral" variant="subtle" />
---
:u-button{icon="i-heroicons-envelope" color="neutral" variant="subtle"}
:u-button{icon="i-lucide-mail" color="neutral" variant="subtle"}
::
### Inset

8
docs/content/3.components/collapsible.md
View File

@@ -25,14 +25,14 @@ props:
slots:
default: |
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-down" block />
content: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-down" block}
#content
:placeholder{class="h-48"}
@@ -53,14 +53,14 @@ props:
slots:
default: |
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-down" block />
content: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-down" block}
#content
:placeholder{class="h-48"}

60
docs/content/3.components/command-palette.md
View File

@@ -177,18 +177,18 @@ props:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
icon: 'i-lucide-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
icon: 'i-lucide-music'
- label: 'Maps'
icon: 'i-heroicons-map'
icon: 'i-lucide-map'
class: 'flex-1'
---
::
### Icon
Use the `icon` prop to customize the input [Icon](/components/icon). Defaults to `i-heroicons-magnifying-glass-20-solid`.
Use the `icon` prop to customize the input [Icon](/components/icon). Defaults to `i-lucide-search`.
::component-code
---
@@ -200,16 +200,16 @@ external:
- groups
class: '!p-0'
props:
icon: 'i-heroicons-cube'
icon: 'i-lucide-box'
groups:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
icon: 'i-lucide-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
icon: 'i-lucide-music'
- label: 'Maps'
icon: 'i-heroicons-map'
icon: 'i-lucide-map'
class: 'flex-1'
---
::
@@ -237,18 +237,18 @@ props:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
icon: 'i-lucide-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
icon: 'i-lucide-music'
- label: 'Maps'
icon: 'i-heroicons-map'
icon: 'i-lucide-map'
class: 'flex-1'
---
::
### Loading Icon
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-ccw`.
::component-code
---
@@ -261,16 +261,16 @@ external:
class: '!p-0'
props:
loading: true
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
loadingIcon: 'i-lucide-repeat-2'
groups:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
icon: 'i-lucide-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
icon: 'i-lucide-music'
- label: 'Maps'
icon: 'i-heroicons-map'
icon: 'i-lucide-map'
class: 'flex-1'
---
::
@@ -298,11 +298,11 @@ props:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
icon: 'i-lucide-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
icon: 'i-lucide-music'
- label: 'Maps'
icon: 'i-heroicons-map'
icon: 'i-lucide-map'
class: 'flex-1'
---
::
@@ -331,11 +331,11 @@ props:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
icon: 'i-lucide-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
icon: 'i-lucide-music'
- label: 'Maps'
icon: 'i-heroicons-map'
icon: 'i-lucide-map'
class: 'flex-1'
---
::
@@ -363,18 +363,18 @@ props:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
icon: 'i-lucide-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
icon: 'i-lucide-music'
- label: 'Maps'
icon: 'i-heroicons-map'
icon: 'i-lucide-map'
class: 'flex-1'
---
::
### Close Icon
Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-lucide-x`.
::component-code
---
@@ -388,16 +388,16 @@ external:
class: '!p-0'
props:
close: true
closeIcon: 'i-heroicons-arrow-right'
closeIcon: 'i-lucide-arrow-right'
groups:
- id: 'apps'
items:
- label: 'Calendar'
icon: 'i-heroicons-calendar'
icon: 'i-lucide-calendar'
- label: 'Music'
icon: 'i-heroicons-musical-note'
icon: 'i-lucide-music'
- label: 'Maps'
icon: 'i-heroicons-map'
icon: 'i-lucide-map'
class: 'flex-1'
---
::

18
docs/content/3.components/context-menu.md
View File

@@ -48,11 +48,11 @@ props:
- - label: Appearance
children:
- label: System
icon: i-heroicons-computer-desktop
icon: i-lucide-monitor
- label: Light
icon: i-heroicons-sun
icon: i-lucide-sun
- label: Dark
icon: i-heroicons-moon
icon: i-lucide-moon
- - label: Show Sidebar
kbds:
- meta
@@ -126,11 +126,11 @@ props:
size: xl
items:
- label: System
icon: i-heroicons-computer-desktop
icon: i-lucide-monitor
- label: Light
icon: i-heroicons-sun
icon: i-lucide-sun
- label: Dark
icon: i-heroicons-moon
icon: i-lucide-moon
class: 'w-48'
slots:
default: |
@@ -159,11 +159,11 @@ props:
disabled: true
items:
- label: System
icon: i-heroicons-computer-desktop
icon: i-lucide-monitor
- label: Light
icon: i-heroicons-sun
icon: i-lucide-sun
- label: Dark
icon: i-heroicons-moon
icon: i-lucide-moon
class: 'w-48'
slots:
default: |

32
docs/content/3.components/drawer.md
View File

@@ -21,14 +21,14 @@ prettier: true
slots:
default: |
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
content: |
<Placeholder class="h-48 m-4" />
---
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
#content
:placeholder{class="h-48 m-4"}
@@ -48,14 +48,14 @@ props:
slots:
default: |
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
body: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
#body
:placeholder{class="h-48"}
@@ -76,14 +76,14 @@ props:
slots:
default: |
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
body: |
<Placeholder class="h-48" />
---
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
#body
:placeholder{class="h-48"}
@@ -105,14 +105,14 @@ props:
slots:
default: |
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
content: |
<Placeholder class="h-96 m-4" />
---
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
#content
:placeholder{class="h-96 m-4"}
@@ -130,14 +130,14 @@ props:
slots:
default: |
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
content: |
<Placeholder class="w-96 m-4" />
---
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
#content
:placeholder{class="w-96 m-4"}
@@ -155,14 +155,14 @@ props:
slots:
default: |
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
content: |
<Placeholder class="h-48 m-4" />
---
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
#content
:placeholder{class="h-48 m-4"}
@@ -180,14 +180,14 @@ props:
slots:
default: |
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
content: |
<Placeholder class="h-48 m-4" />
---
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
#content
:placeholder{class="h-48 m-4"}
@@ -205,14 +205,14 @@ props:
slots:
default: |
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
content: |
<Placeholder class="h-48 m-4" />
---
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
#content
:placeholder{class="h-screen m-4"}

78
docs/content/3.components/dropdown-menu.md
View File

@@ -50,28 +50,28 @@ props:
src: 'https://github.com/benjamincanac.png'
type: label
- - label: Profile
icon: i-heroicons-user
icon: i-lucide-user
- label: Billing
icon: i-heroicons-credit-card
icon: i-lucide-credit-card
- label: Settings
icon: i-heroicons-cog
icon: i-lucide-cog
kbds:
- ','
- label: Keyboard shortcuts
icon: i-heroicons-computer-desktop
icon: i-lucide-monitor
- - label: Team
icon: i-heroicons-users
icon: i-lucide-users
- label: Invite users
icon: i-heroicons-user-plus
icon: i-lucide-user-plus
children:
- - label: Email
icon: i-heroicons-envelope
icon: i-lucide-mail
- label: Message
icon: i-heroicons-chat-bubble-left
icon: i-lucide-message-square
- - label: More
icon: i-heroicons-plus-circle
icon: i-lucide-circle-plus
- label: New team
icon: i-heroicons-plus
icon: i-lucide-plus
kbds:
- meta
- n
@@ -80,13 +80,13 @@ props:
to: 'https://github.com/nuxt/ui'
target: _blank
- label: Support
icon: i-heroicons-lifebuoy
icon: i-lucide-life-buoy
to: '/components/dropdown-menu'
- label: API
icon: i-heroicons-cloud
icon: i-lucide-cloud
disabled: true
- - label: Logout
icon: i-heroicons-arrow-right-on-rectangle
icon: i-lucide-log-out
kbds:
- shift
- meta
@@ -95,10 +95,10 @@ props:
slots:
default: |
<UButton icon="i-heroicons-bars-3" color="neutral" variant="outline" />
<UButton icon="i-lucide-menu" color="neutral" variant="outline" />
---
:u-button{icon="i-heroicons-bars-3" color="neutral" variant="outline"}
:u-button{icon="i-lucide-menu" color="neutral" variant="outline"}
::
::note
@@ -134,11 +134,11 @@ items:
props:
items:
- label: Profile
icon: i-heroicons-user
icon: i-lucide-user
- label: Billing
icon: i-heroicons-credit-card
icon: i-lucide-credit-card
- label: Settings
icon: i-heroicons-cog
icon: i-lucide-cog
content:
align: start
side: bottom
@@ -147,10 +147,10 @@ props:
slots:
default: |
<UButton label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline" />
<UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
---
:u-button{label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline"}
:u-button{label="Open" icon="i-lucide-menu" color="neutral" variant="outline"}
::
### Arrow
@@ -170,19 +170,19 @@ props:
arrow: true
items:
- label: Profile
icon: i-heroicons-user
icon: i-lucide-user
- label: Billing
icon: i-heroicons-credit-card
icon: i-lucide-credit-card
- label: Settings
icon: i-heroicons-cog
icon: i-lucide-cog
class: 'w-48'
slots:
default: |
<UButton label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline" />
<UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
---
:u-button{label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline"}
:u-button{label="Open" icon="i-lucide-menu" color="neutral" variant="outline"}
::
### Size
@@ -202,21 +202,21 @@ props:
size: xl
items:
- label: Profile
icon: i-heroicons-user
icon: i-lucide-user
- label: Billing
icon: i-heroicons-credit-card
icon: i-lucide-credit-card
- label: Settings
icon: i-heroicons-cog
icon: i-lucide-cog
content:
align: start
class: 'w-48'
slots:
default: |
<UButton size="xl" label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline" />
<UButton size="xl" label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
---
:u-button{size="xl" label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline"}
:u-button{size="xl" label="Open" icon="i-lucide-menu" color="neutral" variant="outline"}
::
::warning
@@ -243,19 +243,19 @@ props:
disabled: true
items:
- label: Profile
icon: i-heroicons-user
icon: i-lucide-user
- label: Billing
icon: i-heroicons-credit-card
icon: i-lucide-credit-card
- label: Settings
icon: i-heroicons-cog
icon: i-lucide-cog
class: 'w-48'
slots:
default: |
<UButton label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline" />
<UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
---
:u-button{label="Open" icon="i-heroicons-bars-3" color="neutral" variant="outline"}
:u-button{label="Open" icon="i-lucide-menu" color="neutral" variant="outline"}
::
## Examples
@@ -330,17 +330,17 @@ Inside the `defineShortcuts` composable, there is an `extractShortcuts` utility
<script setup lang="ts">
const items = [{
label: 'Invite users',
icon: 'i-heroicons-user-plus',
icon: 'i-lucide-user-plus',
children: [{
label: 'Invite by email',
icon: 'i-heroicons-paper-airplane',
icon: 'i-lucide-send-horizontal',
kbds: ['meta', 'e'],
onSelect() {
console.log('Invite by email clicked')
}
}, {
label: 'Invite by link',
icon: 'i-heroicons-link',
icon: 'i-lucide-link',
kbds: ['meta', 'i'],
onSelect() {
console.log('Invite by link clicked')
@@ -348,7 +348,7 @@ const items = [{
}]
}, {
label: 'New team',
icon: 'i-heroicons-plus',
icon: 'i-lucide-plus',
kbds: ['meta', 'n'],
onSelect() {
console.log('New team clicked')

2
docs/content/3.components/icon.md
View File

@@ -13,7 +13,7 @@ You can use any name from the https://icones.js.org collection:
::component-code
---
props:
name: 'i-heroicons-light-bulb'
name: 'i-lucide-lightbulb'
class: 'size-5'
---
::

18
docs/content/3.components/input-menu.md
View File

@@ -163,7 +163,7 @@ Ensure to pass an array to the `default-value` prop or the `v-model` directive.
### Delete Icon
With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the badges. Defaults to `i-heroicons-x-mark-20-solid`.
With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the badges. Defaults to `i-lucide-x`.
::component-code
---
@@ -180,7 +180,7 @@ props:
- Backlog
- Todo
multiple: true
deleteIcon: 'i-heroicons-trash'
deleteIcon: 'i-lucide-trash'
items:
- Backlog
- Todo
@@ -370,7 +370,7 @@ external:
- modelValue
props:
modelValue: 'Backlog'
icon: 'i-heroicons-magnifying-glass'
icon: 'i-lucide-search'
size: md
items:
- Backlog
@@ -382,7 +382,7 @@ props:
### Trailing Icon
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-heroicons-chevron-down-20-solid`.
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-lucide-chevron-down`.
::component-code
---
@@ -395,7 +395,7 @@ external:
- modelValue
props:
modelValue: 'Backlog'
trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
trailingIcon: 'i-lucide-arrow-down'
size: md
items:
- Backlog
@@ -411,7 +411,7 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.che
### Selected Icon
Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-heroicons-check-20-solid`.
Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-lucide-check`.
::component-code
---
@@ -424,7 +424,7 @@ external:
- modelValue
props:
modelValue: 'Backlog'
selectedIcon: 'i-heroicons-fire'
selectedIcon: 'i-lucide-flame'
size: md
items:
- Backlog
@@ -491,7 +491,7 @@ props:
### Loading Icon
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-ccw`.
::component-code
---
@@ -505,7 +505,7 @@ external:
props:
modelValue: 'Backlog'
loading: true
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
loadingIcon: 'i-lucide-repeat-2'
items:
- Backlog
- Todo

8
docs/content/3.components/input.md
View File

@@ -115,7 +115,7 @@ prettier: true
ignore:
- placeholder
props:
icon: 'i-heroicons-magnifying-glass'
icon: 'i-lucide-search'
size: md
variant: outline
placeholder: 'Search...'
@@ -130,7 +130,7 @@ prettier: true
ignore:
- placeholder
props:
trailingIcon: i-heroicons-at-symbol
trailingIcon: i-lucide-at-sign
placeholder: 'Enter your email'
size: md
---
@@ -171,7 +171,7 @@ props:
### Loading Icon
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-ccw`.
::component-code
---
@@ -179,7 +179,7 @@ ignore:
- placeholder
props:
loading: true
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
loadingIcon: 'i-lucide-repeat-2'
placeholder: 'Search...'
---
::

4
docs/content/3.components/modal.md
View File

@@ -130,7 +130,7 @@ The close button is not displayed if the `#content` slot is used as it's a part
### Close Icon
Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-lucide-x`.
::component-code
---
@@ -139,7 +139,7 @@ ignore:
- title
props:
title: 'Modal with close button'
closeIcon: 'i-heroicons-arrow-right'
closeIcon: 'i-lucide-arrow-right'
slots:
default: |

170
docs/content/3.components/navigation-menu.md
View File

@@ -40,71 +40,71 @@ external:
props:
items:
- label: Guide
icon: i-heroicons-book-open
icon: i-lucide-book-open
to: /getting-started
children:
- label: Introduction
description: Fully styled and customizable components for Nuxt.
icon: i-heroicons-home
icon: i-lucide-house
- label: Installation
description: Learn how to install and configure Nuxt UI in your application.
icon: i-heroicons-cloud-arrow-down
icon: i-lucide-cloud-download
- label: 'Icons'
icon: 'i-heroicons-face-smile'
icon: 'i-lucide-smile'
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
icon: 'i-lucide-swatch-book'
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Theme'
icon: 'i-heroicons-cog'
icon: 'i-lucide-cog'
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
- label: Composables
icon: i-heroicons-circle-stack
icon: i-lucide-database
to: /composables
children:
- label: defineShortcuts
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Define shortcuts for your application.
to: /composables/define-shortcuts
- label: useModal
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a modal within your application.
to: /composables/use-modal
- label: useSlideover
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a slideover within your application.
to: /composables/use-slideover
- label: useToast
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a toast within your application.
to: /composables/use-toast
- label: Components
icon: i-heroicons-cube-transparent
icon: i-lucide-box
to: /components
active: true
children:
- label: Link
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Use NuxtLink with superpowers.
to: /components/link
- label: Modal
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a modal within your application.
to: /components/modal
- label: NavigationMenu
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a list of links.
to: /components/navigation-menu
- label: Pagination
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a list of pages.
to: /components/pagination
- label: Popover
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a non-modal dialog that floats around a trigger element.
to: /components/popover
- label: Progress
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Show a horizontal bar to indicate task progression.
to: /components/progress
- label: GitHub
@@ -113,7 +113,7 @@ props:
to: https://github.com/nuxt/ui
target: _blank
- label: Help
icon: i-heroicons-question-mark-circle
icon: i-lucide-circle-help
disabled: true
class: 'justify-center'
---
@@ -151,68 +151,68 @@ props:
orientation: 'vertical'
items:
- - label: Guide
icon: i-heroicons-book-open
icon: i-lucide-book-open
children:
- label: Introduction
description: Fully styled and customizable components for Nuxt.
icon: i-heroicons-home
icon: i-lucide-house
- label: Installation
description: Learn how to install and configure Nuxt UI in your application.
icon: i-heroicons-cloud-arrow-down
icon: i-lucide-cloud-download
- label: 'Icons'
icon: 'i-heroicons-face-smile'
icon: 'i-lucide-smile'
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
icon: 'i-lucide-swatch-book'
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Theme'
icon: 'i-heroicons-cog'
icon: 'i-lucide-cog'
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
- label: Composables
icon: i-heroicons-circle-stack
icon: i-lucide-database
children:
- label: defineShortcuts
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Define shortcuts for your application.
to: /composables/define-shortcuts
- label: useModal
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a modal within your application.
to: /composables/use-modal
- label: useSlideover
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a slideover within your application.
to: /composables/use-slideover
- label: useToast
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a toast within your application.
to: /composables/use-toast
- label: Components
icon: i-heroicons-cube-transparent
icon: i-lucide-box
active: true
children:
- label: Link
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Use NuxtLink with superpowers.
to: /components/link
- label: Modal
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a modal within your application.
to: /components/modal
- label: NavigationMenu
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a list of links.
to: /components/navigation-menu
- label: Pagination
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a list of pages.
to: /components/pagination
- label: Popover
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a non-modal dialog that floats around a trigger element.
to: /components/popover
- label: Progress
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Show a horizontal bar to indicate task progression.
to: /components/progress
- - label: GitHub
@@ -221,7 +221,7 @@ props:
to: https://github.com/nuxt/ui
target: _blank
- label: Help
icon: i-heroicons-question-mark-circle
icon: i-lucide-circle-help
disabled: true
class: 'data-[orientation=vertical]:w-48'
---
@@ -252,13 +252,13 @@ props:
orientation: 'horizontal'
items:
- - label: Guide
icon: i-heroicons-book-open
icon: i-lucide-book-open
to: /getting-started
- label: Composables
icon: i-heroicons-circle-stack
icon: i-lucide-database
to: /composables
- label: Components
icon: i-heroicons-cube-transparent
icon: i-lucide-box
to: /components
active: true
- - label: GitHub
@@ -288,13 +288,13 @@ props:
color: neutral
items:
- - label: Guide
icon: i-heroicons-book-open
icon: i-lucide-book-open
to: /getting-started
- label: Composables
icon: i-heroicons-circle-stack
icon: i-lucide-database
to: /composables
- label: Components
icon: i-heroicons-cube-transparent
icon: i-lucide-box
to: /components
active: true
- - label: GitHub
@@ -321,13 +321,13 @@ props:
highlight: false
items:
- - label: Guide
icon: i-heroicons-book-open
icon: i-lucide-book-open
to: /getting-started
- label: Composables
icon: i-heroicons-circle-stack
icon: i-lucide-database
to: /composables
- label: Components
icon: i-heroicons-cube-transparent
icon: i-lucide-box
to: /components
active: true
- - label: GitHub
@@ -344,7 +344,7 @@ The `highlight` prop changes the `pill` variant active item style. Try it out to
### Trailing Icon
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`. This icon is only displayed when an item has children.
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-lucide-chevron-down`. This icon is only displayed when an item has children.
::tip
You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
@@ -359,74 +359,74 @@ ignore:
external:
- items
props:
trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
trailingIcon: 'i-lucide-arrow-down'
items:
- label: Guide
icon: i-heroicons-book-open
icon: i-lucide-book-open
to: /getting-started
children:
- label: Introduction
description: Fully styled and customizable components for Nuxt.
icon: i-heroicons-home
icon: i-lucide-house
- label: Installation
description: Learn how to install and configure Nuxt UI in your application.
icon: i-heroicons-cloud-arrow-down
icon: i-lucide-cloud-download
- label: 'Icons'
icon: 'i-heroicons-face-smile'
icon: 'i-lucide-smile'
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
icon: 'i-lucide-swatch-book'
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Theme'
icon: 'i-heroicons-cog'
icon: 'i-lucide-cog'
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
- label: Composables
icon: i-heroicons-circle-stack
icon: i-lucide-database
to: /composables
children:
- label: defineShortcuts
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Define shortcuts for your application.
to: /composables/define-shortcuts
- label: useModal
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a modal within your application.
to: /composables/use-modal
- label: useSlideover
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a slideover within your application.
to: /composables/use-slideover
- label: useToast
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a toast within your application.
to: /composables/use-toast
- label: Components
icon: i-heroicons-cube-transparent
icon: i-lucide-box
to: /components
active: true
children:
- label: Link
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Use NuxtLink with superpowers.
to: /components/link
- label: Modal
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a modal within your application.
to: /components/modal
- label: NavigationMenu
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a list of links.
to: /components/navigation-menu
- label: Pagination
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a list of pages.
to: /components/pagination
- label: Popover
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a non-modal dialog that floats around a trigger element.
to: /components/popover
- label: Progress
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Show a horizontal bar to indicate task progression.
to: /components/progress
class: 'justify-center'
@@ -454,71 +454,71 @@ props:
arrow: true
items:
- label: Guide
icon: i-heroicons-book-open
icon: i-lucide-book-open
to: /getting-started
children:
- label: Introduction
description: Fully styled and customizable components for Nuxt.
icon: i-heroicons-home
icon: i-lucide-house
- label: Installation
description: Learn how to install and configure Nuxt UI in your application.
icon: i-heroicons-cloud-arrow-down
icon: i-lucide-cloud-download
- label: 'Icons'
icon: 'i-heroicons-face-smile'
icon: 'i-lucide-smile'
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-heroicons-swatch'
icon: 'i-lucide-swatch-book'
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Theme'
icon: 'i-heroicons-cog'
icon: 'i-lucide-cog'
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
- label: Composables
icon: i-heroicons-circle-stack
icon: i-lucide-database
to: /composables
children:
- label: defineShortcuts
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Define shortcuts for your application.
to: /composables/define-shortcuts
- label: useModal
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a modal within your application.
to: /composables/use-modal
- label: useSlideover
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a slideover within your application.
to: /composables/use-slideover
- label: useToast
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a toast within your application.
to: /composables/use-toast
- label: Components
icon: i-heroicons-cube-transparent
icon: i-lucide-box
to: /components
active: true
children:
- label: Link
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Use NuxtLink with superpowers.
to: /components/link
- label: Modal
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a modal within your application.
to: /components/modal
- label: NavigationMenu
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a list of links.
to: /components/navigation-menu
- label: Pagination
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a list of pages.
to: /components/pagination
- label: Popover
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Display a non-modal dialog that floats around a trigger element.
to: /components/popover
- label: Progress
icon: i-heroicons-document-text
icon: i-lucide-file-text
description: Show a horizontal bar to indicate task progression.
to: /components/progress
class: 'justify-center'

24
docs/content/3.components/select-menu.md
View File

@@ -216,18 +216,18 @@ external:
props:
modelValue:
label: 'Backlog'
icon: 'i-heroicons-question-mark-circle'
icon: 'i-lucide-circle-help'
searchInput:
placeholder: 'Filter...'
items:
- label: Backlog
icon: 'i-heroicons-question-mark-circle'
icon: 'i-lucide-circle-help'
- label: Todo
icon: 'i-heroicons-plus-circle'
icon: 'i-lucide-circle-plus'
- label: In Progress
icon: 'i-heroicons-arrow-up-circle'
icon: 'i-lucide-circle-arrow-up'
- label: Done
icon: 'i-heroicons-check-circle'
icon: 'i-lucide-circle-check'
class: 'w-48'
---
::
@@ -403,7 +403,7 @@ external:
- modelValue
props:
modelValue: 'Backlog'
icon: 'i-heroicons-magnifying-glass'
icon: 'i-lucide-search'
size: md
items:
- Backlog
@@ -416,7 +416,7 @@ props:
### Trailing Icon
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-heroicons-chevron-down-20-solid`.
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-lucide-chevron-down`.
::component-code
---
@@ -430,7 +430,7 @@ external:
- modelValue
props:
modelValue: 'Backlog'
trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
trailingIcon: 'i-lucide-arrow-down'
size: md
items:
- Backlog
@@ -447,7 +447,7 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.che
### Selected Icon
Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-heroicons-check-20-solid`.
Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-lucide-check`.
::component-code
---
@@ -461,7 +461,7 @@ external:
- modelValue
props:
modelValue: 'Backlog'
selectedIcon: 'i-heroicons-fire'
selectedIcon: 'i-lucide-flame'
size: md
items:
- Backlog
@@ -533,7 +533,7 @@ props:
### Loading Icon
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-ccw`.
::component-code
---
@@ -548,7 +548,7 @@ external:
props:
modelValue: 'Backlog'
loading: true
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
loadingIcon: 'i-lucide-repeat-2'
items:
- Backlog
- Todo

14
docs/content/3.components/select.md
View File

@@ -340,7 +340,7 @@ external:
- modelValue
props:
modelValue: 'Backlog'
icon: 'i-heroicons-magnifying-glass'
icon: 'i-lucide-search'
size: md
items:
- Backlog
@@ -353,7 +353,7 @@ props:
### Trailing Icon
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-heroicons-chevron-down-20-solid`.
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-lucide-chevron-down`.
::component-code
---
@@ -367,7 +367,7 @@ external:
- modelValue
props:
modelValue: 'Backlog'
trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
trailingIcon: 'i-lucide-arrow-down'
size: md
items:
- Backlog
@@ -384,7 +384,7 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.che
### Selected Icon
Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-heroicons-check-20-solid`.
Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-lucide-check`.
::component-code
---
@@ -398,7 +398,7 @@ external:
- modelValue
props:
modelValue: 'Backlog'
selectedIcon: 'i-heroicons-fire'
selectedIcon: 'i-lucide-flame'
size: md
items:
- Backlog
@@ -470,7 +470,7 @@ props:
### Loading Icon
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-ccw`.
::component-code
---
@@ -485,7 +485,7 @@ external:
props:
modelValue: 'Backlog'
loading: true
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
loadingIcon: 'i-lucide-repeat-2'
items:
- Backlog
- Todo

4
docs/content/3.components/slideover.md
View File

@@ -130,7 +130,7 @@ The close button is not displayed if the `#content` slot is used as it's a part
### Close Icon
Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
Use the `close-icon` prop to customize the close button [Icon](/components/icon). Defaults to `i-lucide-x`.
::component-code
---
@@ -139,7 +139,7 @@ ignore:
- title
props:
title: 'Slideover with close button'
closeIcon: 'i-heroicons-arrow-right'
closeIcon: 'i-lucide-arrow-right'
slots:
default: |

8
docs/content/3.components/switch.md
View File

@@ -83,8 +83,8 @@ ignore:
- label
- defaultValue
props:
uncheckedIcon: 'i-heroicons-x-mark'
checkedIcon: 'i-heroicons-check'
uncheckedIcon: 'i-lucide-x'
checkedIcon: 'i-lucide-check'
defaultValue: true
label: Check me
---
@@ -108,7 +108,7 @@ props:
### Loading Icon
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-ccw`.
::component-code
---
@@ -117,7 +117,7 @@ ignore:
- defaultValue
props:
loading: true
loadingIcon: 'i-heroicons-arrow-path-rounded-square'
loadingIcon: 'i-lucide-repeat-2'
defaultValue: true
label: Check me
---

12
docs/content/3.components/tabs.md
View File

@@ -33,10 +33,10 @@ external:
props:
items:
- label: Account
icon: 'i-heroicons-user'
icon: 'i-lucide-user'
content: 'This is the account content.'
- label: Password
icon: 'i-heroicons-lock-closed'
icon: 'i-lucide-lock'
content: 'This is the password content.'
class: 'w-full'
---
@@ -60,10 +60,10 @@ props:
content: false
items:
- label: Account
icon: 'i-heroicons-user'
icon: 'i-lucide-user'
content: 'This is the account content.'
- label: Password
icon: 'i-heroicons-lock-closed'
icon: 'i-lucide-lock'
content: 'This is the password content.'
class: 'w-full'
---
@@ -85,10 +85,10 @@ props:
forceMount: false
items:
- label: Account
icon: 'i-heroicons-user'
icon: 'i-lucide-user'
content: 'This is the account content.'
- label: Password
icon: 'i-heroicons-lock-closed'
icon: 'i-lucide-lock'
content: 'This is the password content.'
class: 'w-full'
---

6
docs/content/3.components/toast.md
View File

@@ -61,7 +61,7 @@ Pass an `icon` field to the `toast.add` method to display an [Icon](/components/
options:
- name: 'icon'
label: 'icon'
default: 'i-heroicons-wifi'
default: 'i-lucide-wifi'
name: 'toast-icon-example'
---
::
@@ -116,14 +116,14 @@ name: 'toast-close-example'
### Close Icon
Pass a `closeIcon` field to customize the close button [Icon](/components/icon). Default to `i-heroicons-x-mark-20-solid`.
Pass a `closeIcon` field to customize the close button [Icon](/components/icon). Default to `i-lucide-x`.
::component-example
---
options:
- name: 'closeIcon'
label: 'closeIcon'
default: 'i-heroicons-arrow-right'
default: 'i-lucide-arrow-right'
name: 'toast-close-icon-example'
---
::