Nuxt UI Pro v1.0 is out with dashboard components!

Nuxt UI v2.14 is out!

A UI Library for Modern Web Apps

Nuxt UI simplifies the creation of stunning and responsive web applications with its comprehensive collection of fully styled and customizable UI components designed for Nuxt.

Everything you expect from a UI component library

Color Palette

Choose a primary and a gray color from your Tailwind CSS color palette. Components will be styled accordingly.

Color Palette

Fully Customizable

Change the style of any component in your App Config or customize them specifically through the ui prop.

Fully Customizable

Icons

Choose any of the 100k+ icons from the most popular icon libraries with the Icon component or the icon prop.

Icons

Light & Dark

Every component is designed with dark mode in mind. Works out of the box with @nuxtjs/color-mode.

Light & Dark

Keyboard Shortcuts

Nuxt UI comes with a set of Vue composables to easily handle keyboard shortcuts in your app.

Keyboard Shortcuts

Trusted and supported by our amazing community

Upgrade to Nuxt UI Pro

Nuxt UI Pro is 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.

The freedom to build anything

Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility.

Fully customizable
Like Nuxt UI, change the style of any component from your App Config or customize them specifically through the ui prop.
Slots for everything
Each component leverages the power of Vue's slots to give you the flexibility to build anything.
Responsive by design
Nuxt UI Pro components aims to structure your content, they are responsive by design and will adapt to any screen size.
app.vue
<script setup lang="ts">
const links = [
  { to: '/', label: 'Home' },
  { to: '/about', label: 'About' },
  { to: '/contact', label: 'Contact' }
]
</script>

<template>
  <UHeader :links="links" />

  <UMain>
    <ULandingHero title="Hello World" />

    <ULandingSection title="Features">
      <UPageGrid>
        <ULandingCard title="First Card" />
        <ULandingCard title="Second Card" />
        <ULandingCard title="Third Card" />
      </UPageGrid>
    </ULandingSection>
  </UMain>

  <UFooter />
</template>

The flexibility to control your data

Although you can use any data source you want, Nuxt UI Pro is fully integrated with Nuxt Content and provides additional features when the module is detected.

Write Markdown with ease
Nuxt UI Pro overrides Nuxt Content prose components to make them awesome but also adds new ones like Callout, CodeGroup, Field, etc.
Beautiful Typography styles
Tailwind CSS typography plugin is pre-configured and styled to match Nuxt UI components and colors.
Full-Text Search out of the box
Nuxt UI Pro ships with a ready to use command palette component. No need to setup Algolia DocSearch anymore.
pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
</script>

<template>
  <UPage>
    <UPageHeader :title="page.title" :description="page.description" :links="page.links" />

    <UPageBody prose>
      <ContentRenderer v-if="page.body" :value="page" />
    </UPageBody>

    <template #right>
      <UContentToc :links="page.body.toc.links" />
    </template>
  </UPage>
</template>

Build your docs in seconds

Whether you're creating documentation for your open source project or explaining your product, Nuxt UI Pro has you covered.

Published under MIT License
Getting Started

Installation

Learn how to install and configure the module in your Nuxt app.

Start with a landing page

Stop wasting time building another landing page, Nuxt UI Pro flexible components will allow you to focus on your content.

Build your docs in seconds

Whether you're creating documentation for your open source project or explaining your product, Nuxt UI Pro has you covered.