I tested Nuxt UI

Introduction

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.

✨ Awesome 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

😌 Easy and quick installation

Setup

1. Install @nuxt/ui dependency to your project:

pnpm add @nuxt/ui

yarn add @nuxt/ui

npm install @nuxt/ui

bun add @nuxt/ui

2. Add it to your modules section in your nuxt.config:

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

That's it! You can now use all the components and composables in your Nuxt app 🤩

Automatically installed modules

Nuxt UI will automatically install the @nuxtjs/tailwindcss, @nuxtjs/color-mode and nuxt-icon modules for you.

::callout{icon="i-heroicons-exclamation-triangle"} You should remove them from your modules and dependencies if you've previously installed them. ::

...And all in Typescript !

This module is written in TypeScript and provides typings for all the components and composables.

You can use those types in your own components by importing them from #ui/types, for example when defining wrapper components:

<template>
  <UBreadcrumb :links="links">
    <template #icon="{ link }">
      <UIcon :name="link.icon" />
    </template>
  </UBreadcrumb>
</template>

<script setup lang="ts">
  import type { BreadcrumbLink } from '#ui/types'

  export interface Props {
    links: BreadcrumbLink[]
  }

  defineProps<Props>()
</script>

The power of IntelliSense

If you're using VSCode, you can install the Tailwind CSS IntelliSense extension to get autocompletion for the classes.

You can read more on how to set it up on the @nuxtjs/tailwindcss module documentation.

Many options

Configure options in your nuxt.config.ts as such:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    global: true,
    icons: ['mdi', 'simple-icons']
  }
})

🎨 Theming

Colors

Configuration

Components are based on a primary and a gray color. You can change them in your app.config.ts.

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'cool'
  }
})

As this module uses Tailwind CSS under the hood, you can use any of the Tailwind CSS colors or your own custom colors. By default, the primary color is green and the gray color is cool.

When using custom colors or adding additional colors through the extend key in your tailwind.config.ts, you'll need to make sure to define all the shades from 50 to 950 as most of them are used in the components config defined in ui.config.ts. You can generate your colors using tools such as https://uicolors.app/ for example.

Components

app.config.ts

Components are styled with Tailwind CSS but classes are all defined in the default ui.config.ts file. You can override those in your own app.config.ts.

export default defineAppConfig({
  ui: {
    container: {
      constrained: 'max-w-5xl'
    }
  }
})

Thanks to tailwind-merge, the app.config.ts is smartly merged with the default config. This means you don't have to rewrite everything.

ui prop

Each component has a ui prop that allows you to customize everything specifically.

<template>
  <UContainer :ui="{ constrained: 'max-w-2xl' }">
    <slot />
  </UContainer>
</template>

::callout{icon="i-heroicons-light-bulb"} You can find the default classes for each component under the Config section. ::

Dark mode

All the components are styled with dark mode in mind.

Icons

You can use any icon (100,000+) from Iconify.

Some components have an icon prop that allows you to add an icon to the component.

<template>
  <UButton icon="i-heroicons-magnifying-glass" />
</template>

Here are some components you can use... but there are many others !

::card-group ::card

title: Accordion to: https://ui.nuxt.com/components/accordion target: _blank

Display togglable accordion panels. :: ::card

title: Carousel to: https://ui.nuxt.com/components/carousel target: _blank

Display images or content in a scrollable area. :: ::card

title: Command Palette to: https://ui.nuxt.com/components/command-palette target: _blank

Add a customizable command palette to your app. :: ::card

title: Popover to: https://ui.nuxt.com/components/popover target: _blank

Display a non-modal dialog that floats around a trigger element. :: ::card

title: Range to: https://ui.nuxt.com/components/range target: _blank

Display a range field :: ::card

title: Table to: https://ui.nuxt.com/components/table target: _blank

Display data in a table. :: ::

Conclusion

Nuxt UI is the perfect, modular and customizable UI library for creating websites in Nuxt. it allows you to create a beautiful website with incredible components (more than 45!) In addition, the Pro version allows you to expand the range of components, it's a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes. It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.