@nuxt/ui

Nuxt UI

Nuxt UI provides everything related to UI when building Nuxt applications: components, icons, colors, dark mode and also keyboard shortcuts.

Is has been developed by NuxtLabs for Volta, Nuxt Studio and the Nuxt community.

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

# Using npm
npm install @nuxt/ui

# Using yarn
yarn add @nuxt/ui

# Using pnpm
pnpm add @nuxt/ui

Then, register the module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxt/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.13.0 (2024-01-30)

⚠ BREAKING CHANGES

• VerticalNavigation: use Badge component for consistency

Features

• Carousel: new component (#927) (f37b043)
• Dropdown: default delay from config (c4a1c04)
• Form: handle multiple paths in validate (#1273) (20ac4b3)
• HorizontalNavigation: new component (#1279) (b8007ba)
• InputMenu: handle nullable prop when clearing input (5e49fb8)
• Modal/Slideover: emit close-prevented event (#1207) (6faf15b)
• module: add option to disable global css styles (#1266) (f96eb5e)
• Popover: default delay from config (7f5711b)
• Tooltip: default delay from config (3400b56)
• VerticalNavigation: use Badge component for consistency (3e81eee)

Bug Fixes

• Breadrumb: handle truncate (5d3a962)
• Link: propagate active prop to slot as isActive (b76e761)
• Select: consistent placeholder with input and textarea (2cb41db), closes #1276
• Slideover: handle translate in RTL mode (#1259) (ea58c88)