Read our updated documentation on https://ui.nuxt.com.

✨ Highlights

🛠️ Components

• New Breadcrumb component

• New Chip component

This component behave exactly like the chip prop on the Avatar and is meant to replace it in the next major version. The advantage of having a specific component for this is to be able to use on any component:

⌨️ App Config types

We've introduced prop types with validators in https://github.com/nuxt/ui/releases/tag/v2.9.0 to enable autocomplete. Initially, this feature was compatible only with the default configuration of @nuxt/ui. Now, autocomplete functionality extends to custom values specified in your app.config.ts. As an illustration, consider the following definition in app.config.ts:

export default defineAppConfig({
  ui: {
    button: {
      color: {
        custom: {
          subtle: '...'
        }
      }
    }
  }
})

Autocomplete will now function for the color and variant props of the Button and include your custom values:

🪄 Dynamic Icons

The Icon component now has a dynamic prop that will use nuxt-icon instead of the default behaviour with egoist/tailwindcss-icons.

This can be quite useful when using dynamic class names or for icons coming from a database for example.

This behaviour can be changed globally in your app.config.ts through ui.icons.dynamic:

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'slate',
    icons: {
      dynamic: true
    }
  }
})

🎨 Custom Icons

The ui.icons option in your nuxt.config.ts can now be an object to completely override the @egoist/tailwindcss-icons plugin, this can be quite useful if you want to use a custom icon collection for example:

import { getIconCollections } from '@egoist/tailwindcss-icons'

export default defineNuxtConfig({
  ui: {
    icons: {
      // might solve stretch bug on generate, see https://github.com/egoist/tailwindcss-icons/issues/23
      extraProperties: {
        '-webkit-mask-size': 'contain',
        '-webkit-mask-position': 'center'
      },
      collections: {
        foo: {
          icons: {
            'arrow-left': {
              // svg body
              body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />',
              // svg width and height, optional
              width: 24,
              height: 24
            }
          }
        },
        ...getIconCollections(['heroicons', 'simple-icons'])
      }
    }
  }
})

🛟 Tailwind CSS bundle

There is an open issue #877 to reduce the final bundle size as Tailwind CSS generate classes for all the components at the moment. As a first step to solve this, we've splitted the config of each component into separate files in #930 so you can have at least the option to exclude files manually in your tailwind.config.ts:

import { resolve } from 'pathe'
import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  content: {
    files: [
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/data/table.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/modal.mjs')
    ]
  }
}

🚀 Features

• Breadcrumb: new component (#506) (a35bfc7)
• Checkbox: config label, required and help size (a1b38c4)
• Chip: new component (#886) (d4f1b5e)
• FormGroup: add eager validation (#992) (d39e2de)
• Icon: switch to nuxt-icon with dynamic prop or app config (#862) (c601fc6)
• module: allow options override of @egoist/tailwindcss-icons plugin (#1013) (ec58948)
• Notification: customize default timeout (#1003) (83c3be7)
• Popover: ability to add overlay (#1014) (06d4510)
• SelectMenu: allows to clear search query on close (#968) (11ccbbb)
• Textarea: add default slot for complex usages (55697e6), closes #971
• Toggle: add size prop (#950) (3c71bf3)
• types: support custom values from app.config.ts (#863) (7339324)

🐛 Bug Fixes

• Alert: improve config options (91511b9), closes #760
• Alert: prevent gap when no close button or action (9a1a1b8), closes #831
• ButtonGroup: handle components with children (#999) (f4be95d)
• CommandPalette: activate first option after async search (#981) (a975939)
• defineShortcuts: support minus - key (#962) (de38afd)
• Dropdown: pass event to click function (60fa2be)
• Dropdown: use NuxtLink with custom prop to close on select (f323379), closes #899
• FormGroup: hydration mismatch on inputId (#942) (a3046aa)
• FormGroup: remove inputId if the input is a fieldset (#914) (e81d5cf)
• Input/Textarea: add v-model modifiers (#856) (68f6956)
• Link: handle active state when to prop is not provided (6cc77a3), closes #988
• Link: reactivity issue with active prop (15a40f5), closes nuxt/nuxt.com#1432
• module: boolean types and bump nuxt to 3.8.2 (#1006) (ca62ce1)
• module: use correct alias for #ui-colors (#913) (c84438f)
• Notification: improve config options (7cb987d)
• Notification: prevent gap when no close button or action (ded6a7f)
• Notifications: teleport to body (#909) (8451f4d)
• Progress: percentage calculation (#939) (c55871b)
• Radio: prevent help text from inlining with label (#894) (a2d70f0)
• **SelectMe...

Read our updated documentation on https://ui.nuxt.com.

✨ Highlights

• New Divider component

• New RadioGroup component

• New Progress component

• New Meter/MeterGroup components

🚀 Features

• CommandPalette: handle filter attribute in groups (#871) (8ba2a79)
• Divider: new component (#757) (eb9ce6a)
• Form: handle @error event (#718) (e16379f)
• Input/Textarea: allow specifying autofocus delay for page transitions (#816) (8bfd359)
• Meter: new component (#827) (abbcc37)
• Pagination: add first and last page buttons (#842) (c5ce997)
• Popover: manual mode & horizontal offset (#781) (92b8618)
• Dropdown/SelectMenu/ContextMenu/Popover/Tooltip: arrow option & popper docs (#875) (f785ecd)
• Progress: new component (#697) (2c5559b)
• RadioGroup: configurable label size (#881) (5a2644b)
• RadioGroup: new component (#730) (23d5dc7)
• Range: add 2xs, xs, xl and 2xl sizes to match progress component (3cb3914), closes #673
• Table: add v-model:sort prop (#803) (9f4d88e)

🐛 Bug Fixes

• Accordion: toggle correct element when keyboard press (#805) (96296c3)
• Dropdown: use NuxtLink instead of ULink (#882) (c37ad8b)
• FormGroup: ensure size exists in config (#695) (f5f3388)
• Modal: remove padding on mobile with fullscreen enabled (550ac10), closes #811
• Notification: add roles for accessibility (#724) (40f3b16)
• Table: enable sorting for nested column keys (#835) (b4f7b03)
• Table: prevent @select event call when selecting all rows (#838) (51f4d54)
• Tabs: truncate buttons content (ddbb431), closes #796
• types: handle sub-objects in app.config.ts (button colors) (7be2af7), closes #858

👋 New Contributors

• @claytonchew made their first contribution in #788
• @albertcito made their first contribution in #718
• @nilsso made their first contribution in #781
• @acidjazz made their first contribution in #816
• @DarkGhostHunter made their first contribution in #803
• @MuhammadM1998 made their first contribution in #724
• @mwohlan made their first contribution in #835
• @maxsteinwand made their first contribution in #842
• @brycecammo made their first contribution in #859
• @connerblanton made their first contribution in #868

A huge thank you to everyone who contributed to make this release, this is truly an awesome community ❤️

Full Changelog: v2.9.0...v2.10.0

Read our updated documentation on https://ui.nuxt.com

✨ Highlights

This release focuses on performance and DX:

• Props having a validator are now typed to provide autocomplete

  

• Lodash has been completely removed from @nuxt/ui

• Overall bundle size has been greatly reduced by only loading the config of the components used

• app.config.ts now also uses tailwind-merge like the ui prop to smartly merge classes

Like #509 in https://github.com/nuxt/ui/releases/tag/v2.8.0, breaking changes might occur but it's highly unlikely as you'd already rewrite the entire config line anyway. You can still go back to the old behaviour by setting the strategy to override either in the app.config.ts for the config or specifically in the ui prop.

Everything is explained in #692, I'd recommend reading it.

🚀 Features

• FormGroup: add slots (#714) (2fc9385)
• Link: add active prop to override default behaviour (#732) (8257a11)
• Link: add as prop (#535) (e404912)
• module: use tailwind-merge for app.config & move config to components & type props (#692) (34d2f57)
• module: remove lodash-es (#648) (d6476d1)
• Table: add ability to custom style for td and tr (#741) (874447c)

🐛 Bug Fixes

• Accordion: close other items in circular order (#735) (6887f73)
• FormGroup: use explicit label instead of implicit label (#638) (681f0e5)
• Pagination: handle max > 5 and max equal total pages (#728) (a071e4b)
• Range: fix track pseudo-elements for mozilla (#636) (8955595)
• SelectMenu: handle numbers (0544a01), closes #574
• Table: add missing classes in app.config.ts (a603ea5), closes #655
• Table: select all rows without select listener (#652) (83d609d)
• Tabs: add visible focus indicator on active tabs (#690) (be734fc)
• Tabs: allow custom keys in TabItem (#671) (15e418e)
• Tabs: prevent focus of TabPanel with tabindex="-1" (cbb2f28)

👋 New Contributors

• @farnabaz made their first contribution in #664
• @Sma11X made their first contribution in #652
• @iBobik made their first contribution in #671
• @Flowko made their first contribution in #648
• @HigherOrderLogic made their first contribution in #690
• @Levy-from-Odessa made their first contribution in #714

Full Changelog: v2.8.1...v2.9.0

🐛 Bug Fixes

• Form: fix getValibotError to avoid importing safeParseAsync (#640) (e8daf7f)
• Form: fix valibot imports (#617) (1a7eb27)
• Pagination: page numbers not clickable (#624) (c1e0654)

👋 New Contributors

• @LemonAppleMo made their first contribution in #624
• @jduartea made their first contribution in #640

Full Changelog: v2.8.0...v2.8.1

✨ Highlights

NuxtLabs UI is now Nuxt UI, this rebranding involves the transfer of the repository from nuxtlabs to nuxt GitHub organization. Both packages are now @nuxt/ui and @nuxt/ui-edge, previous @nuxthq ones will be deprecated.

The documentation has also been moved to https://ui.nuxt.com and got itself a brand new landing page.

🚨 Breaking Changes

• use tailwind-merge for class merging (#509)

Everything is explained in the PR description, I'd strongly recommend reading it.

🚀 Features

• Avatar: add icon prop as fallback (df3b202)
• Avatar: handle icon default from app.config.ts (55daed0)
• ButtonGroup: add orientation prop (#603) (b3bc6e2)
• Form: add valibot support (#615) (ab5153a)
• Form: improve form control and input validation trigger (#487) (6d7973f)
• Modal: add fullscreen prop (#523) (7e2bebd)
• module: add DEFAULT shade to primary color (#493) (c6056ed)
• module: use tailwind-merge for class merging (#509) (8880bdc)
• Table: support nested keys in columns (#503) (858886a)
• Tabs: control selected index (#490) (aaf09ad)

🐛 Bug Fixes

• Alert: fix wrong type of actions (#507) (b243e8c)
• AvatarGroup: add justify-end to wrapper to prevent right align (e578b0d)
• AvatarGroup: pass default size to max avatar (e49c673)
• Badge: allow label as number (7c157ce)
• Button: add missing prop types (#508) (a8a1c15)
• Form: use safeParseAsync for zod (#497) (8b19b18)
• Popover: handle hover mode with padding like dropdown (dc951ff)
• Radio: put back id for label selection (9b3a22e)
• SelectMenu: invalid gap values (998314e)
• Table: empty state is displayed if null (#517) (44ba758)
• Table: missing component imports (#608) (d936316)
• Tabs: recompute marker position when v-model changes (#524) (fdce429)
• Tooltip: hide on touch devices (#580) (f1ed007)

Full Changelog: v2.7.0...v2.8.0

✨ Highlights

• New Alert component

• New Tabs component

• New Form component

Validate form data using schema libraries such as Yup, Zod, Joi or your own validation logic. It works seamlessly with the FormGroup component to automatically display error messages around form elements.

• Badge component has new variants and colors

• Link component is now documented

Wrapper around <NuxtLink> using the Vue Router custom prop that provides a few extra features

🚨 Breaking Changes

• Link: renamed from LinkCustom and add exact-query / exact-hash props
• Badge: add colors and variants (solid has changed)
• SelectMenu: ui prop is now ui-menu and ui-select is now ui (#432)

🚀 Features

• Alert: new component (#449) (ab2abae)
• Badge: add colors and variants (solid has changed) (05503e5)
• Badge: rename outline to subtle + add soft variants (5bd5dc2)
• CommandPalette: bind active and selected to scoped slot (#441) (b0440f8)
• FormGroup: add size prop and theme options (#391) (d2a8a07)
• Form: new component (#439) (a3aba1a)
• Link: rename from LinkCustom and add exact-query / exact-hash props (cefe5a7)
• Notification: support html with title and description slots (#431) (df455db)
• Range: increase narrowed surface (#459) (3b183ac)
• SelectMenu: add value-attribute prop (#429) (959c968)
• Tabs: new component (#450) (8298b62)
• ui: apply primary bg on ::selection (09d0ea2)

🐛 Bug Fixes

• FormGroup: required star display (3dd0492)
• FormGroup: err when no prop defined (93aebe6)
• FormGroup: set size default to null (c59595f)
• Form: return state on validate (#472) (248b0a6)
• LinkCustom: exact prop wasn't working (82e152b), closes #417
• LinkCustom: improve prop binding and prevent error with externals (914d156)
• Link: handle disabled prop (396aae7), closes #473
• module: ensure red color is safelisted for form elements (208acca), closes #423 #373
• module: omit colors defined as strings (927b63f)
• module: safelist all colors for toast.add (2cd6208), closes #375 #440
• module: smart safelisting for components in snake case (e25be11), closes #461
• Popover: hover mode (#453) (10890e6)
• SelectMenu: invert ui and ui-select props (#432) (7cccbcf)
• Table: hide data when loading state is active (#460) (2b3dc8d)

👋 New Contributors

• @KeJunMao made their first contribution in #441
• @henrycunh made their first contribution in #391
• @MadDog4533 made their first contribution in #382
• @larrasu made their first contribution in #452
• @ItzExotical made their first contribution in #467
• @romhml made their first contribution in #439

Full Changelog: v2.6.0...v2.7.0

✨ Highlights

• New Accordion component: https://ui.nuxtlabs.com/elements/accordion

🚨 Breaking Changes

Avatar

• class will no longer apply on the wrapper but on the img so use :ui="{ wrapper: '...' }" instead because of the v-bind="$attrs" on the img tag

🚀 Features

• Accordion: new component (#301) (e50f377)
• Avatar: bind component attributes to img element (#421) (773a23f)
• SelectMenu: handle async search (#426) (5f8fe85)
• Modal: add prevent-close prop (2cc5c0d), closes #303
• Slideover: add prevent-close prop (d15e816)
• Table: add select event for the entire row (#353) (d292706)
• Table: allow columns class customization (5dffa86), closes #366

🐛 Bug Fixes

• ButtonGroup: err when no props on buttons (80a9738), closes #360
• Button: missing disabled state on some variants (41a5238)
• Modal: disabling transition prop had no effect (db34665)
• Range: disabled thumb opacity (c92dc98)
• Range: progress style (#385) (a79c165)
• SelectMenu: missing appear on transition (cbe2b1b), closes #400
• Table: fixed row deletion bug on deselect (#425) (46b444a)

👋 New Contributors

• @hylarucoder made their first contribution in #385
• @DavidDeSloovere made their first contribution in #407
• @rambii made their first contribution in #422
• @salazarr-js made their first contribution in #411
• @sduduzog made their first contribution in #421
• @johnpuaoi made their first contribution in #425
• @mcastagnetti made their first contribution in #426

Full Changelog: v2.5.0...v2.6.0

✨ Highlights

• New Range component: https://ui.nuxtlabs.com/forms/range
• defineShortcuts composable now supports chained shortcuts: https://ui.nuxtlabs.com/getting-started/shortcuts#defineshortcuts
• Support for LTR and RTL languages: https://ui.nuxtlabs.com/getting-started/examples#rtl-support

🚨 Breaking Changes

Radio / Checkbox / Toggle

Some classes have been extracted from the base config preset and split into multiple ones to ease the customization like color, background, border, ring, rounded, etc.

If you've overridden ui.radio.base, ui.checkbox.base or ui.toggle.base in your app.config.ts, you might want to take a look at #323.

🚀 Features

• Avatar: handle chipText (#306) (759af05)
• defineShortcuts: chained shortcuts (#282) (a67f691)
• Radio/Checkbox/Toggle: handle color prop for form elements (#323) (ffb312d)
• Range: new component (#290) (97a1c86)
• RTL support (#320) (4ea114a)
• Table: pass row index to table cell (#291) (71c2465)
• Table: reset sort on third click (1ff11ac), closes #300

🐛 Bug Fixes

• components: prefix @headlessui/vue components (41b85d5), closes #315
• FormGroup: prevent overriding color of children (6be9290), closes #352
• Table: missing default sort icon when overriding sort-button prop (0f3fe0d)
• Toggle: add opacity-50 when disabled (c2ebb04)
• Tooltip: add color in config (1b03b8a)

👋 New Contributors

• @jaybharadia made their first contribution in #306

Full Changelog: v2.4.1...v2.5.0

🐛 Bug Fixes

• forms: precise type assertion for onInput event handler (#293) (457b7a9)
• module: let tailwindcss viewer enabled by default (4023fbe), closes #292
• module: safelist aliases for input (f719111)
• module: safelist regex when a : was present before color (f7e2082)
• Radio/Checkbox: remove legacy custom (3bac087)

Full Changelog: v2.4.0...v2.4.1

✨ Highlights

• New Pagination component: https://ui.nuxtlabs.com/navigation/pagination
• CSS bundle greatly reduced with smart safelisting: https://ui.nuxtlabs.com/getting-started/theming#colors

🚨 Breaking Changes

Select

• text-attribute prop has been renamed to option-attribute and now defaults to label (like SelectMenu)

Input / Textarea / Radio / Checkbox / Select / SelectMenu

• ui.custom has been removed in favor of class binding through v-bind="$attrs"
• class will no longer apply on the wrapper but on the element so use :ui="{ wrapper: '...' }" instead

If you were using some form elements outside the library components, for example a basic <input type="checkbox" /> in your prose, you might loose some reset styles as @tailwindcss/forms now only applies when using form-${element} classes, see #278.

🚀 What's Changed

• fix(forms): padded prop with p-0 class
• fix(Button): same size when no label + uniformize form elements
• fix(ButtonGroup): invalid size validator
• fix(ButtonGroup): use -space-x-px on wrapper
• chore(Dropdown): handle height for overflow
• chore: add @tailwindcss/container-queries official plugin
• fix(Notification): class priority for icon color
• feat(Table): add slot for empty state by @Haythamasalama in #260
• feat(Pagination): new component by @smarroufin in #257
• feat(Table): add loading state by @Haythamasalama in #259
• fix(module): use @tailwindcss/forms class strategy by @benjamincanac in #278
• fix(Toggle): missing disabled prop
• fix(Radio/Checkbox): split preset as indeterminate is checkbox only
• chore(Select)!: rename text-attribute to option-attribute and def…
• feat(CommandPalette): handle empty-state by @Haythamasalama in #271
• fix(forms)!: bind $attrs to elements by @benjamincanac in #279
• feat(module): smart safelisting by @benjamincanac in #268
• fix(Table): colspan of empty and loading is wrong when selection enabled by @9uenther in #284

New Contributors

• @9uenther made their first contribution in #284

Full Changelog: v2.3.0...v2.4.0