nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.

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

# npm
npm install @nuxt/ui
# yarn
yarn add @nuxt/ui
# pnpm
pnpm add @nuxt/ui
# bun
bun 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.