@nuxt/ui

Nuxt UI

Nuxt UI is a module that provides a set of Vue components and composables built with Tailwind CSS and Headless UI to help you build beautiful and accessible user interfaces.

Its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.

Features

• Built with Headless UI and Tailwind CSS
• HMR support through Nuxt App Config
• Dark mode support
• Support for LTR and RTL languages
• Keyboard shortcuts
• Bundled icons
• Fully typed
• Figma Kit

Read more on ui.nuxt.com

Installation

npx nuxi@latest module add ui

If you want latest updates, please use @nuxt/ui-edge in your package.json:

{
  "devDependencies": {
    "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
  }
}

Documentation

Visit https://ui.nuxt.com to explore the documentation.

Credits

• nuxt/nuxt
• nuxt-modules/color-mode
• nuxt-modules/tailwindcss
• tailwindlabs/tailwindcss
• tailwindlabs/headlessui
• vueuse/vueuse
• egoist/tailwindcss-icons

Contributing

Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:

• Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
• Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the contribution guide to share your suggestions.

Local Development

Follow the docs to Set up your local development environment and contribute.

License

Licensed under the MIT license.

Changelog

2.17.0 (2024-06-13)

Features

• Alert: add actions slot (#1785) (c8dd71c)
• Form: update and migrate valibot to v0.31.0 (#1848) (1d5bd89)
• Notification: allow ring customization with {color} (#1830) (3ebff4d)
• Slideover: handle top and bottom side (#1834) (50ad14f)
• Tabs: add content prop to avoid the render of the HTML markup (#1831) (6e2678d)

Bug Fixes

• Alert/Notification: use div for description (e8898d1), closes #1551
• Alert: base style not applied on icon (#1859) (f65aefb)
• Breadcrumb: allow aria-current to be overrideable (ebfb835), closes #1856
• Carousel: prevent mouse click when dragging (#1781) (4f0d00f)
• CommandPalette: hide empty-state when null (249bbd4), closes #1787
• Form: maintain other errors when using setErrors with a path (#1818) (06990be)
• Input: hide wrapper when type is hidden (#1797) (e7c2f78)
• Link: typo in exactHash type (581b470), closes #1767
• SelectMenu: wrong placeholder color when modelValue is an empty string (9b9ccdb), closes #1862
• Select: remove defaults for value and text (6c124bb), closes #1702