Nuxt UI

Fully styled and customizable components for Nuxt.

VueComponent ToolkitTailwindCSS
nuxt/uiui.nuxt.com@nuxt/ui

README

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

Read more on ui.nuxt.com

Installation


  1. ```bash
  2. # Using npm
  3. npm install @nuxt/ui

  5. # Using yarn
  6. yarn add @nuxt/ui

  8. # Using pnpm
  9. pnpm add @nuxt/ui
  10. ```

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

  1. ```js
  2. export default defineNuxtConfig({
  3.   modules: [
  4.     '@nuxt/ui'
  5.   ]
  6. })
  7. ```

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

  1. ```json
  2. {
  3.   "devDependencies": {
  4.     "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
  5.   }
  6. }
  7. ```

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

License


Licensed under the MIT license.

[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@nuxt/ui

[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@nuxt/ui

[license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://github.com/nuxt/ui/blob/main/LICENSE

[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com