navigation: false
title: 'Nuxt UI: A UI Library for Modern Web Apps'
description: 'It provides everything related to UI when building your Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts. Built with Headless UI and Tailwind CSS, published under MIT License.'
hero:
  title: 'A <span class="text-primary">UI Library</span> for<br class="hidden lg:block"> Modern Web Apps'
  description: 'Nuxt UI simplifies the creation of stunning and responsive web applications with its<br class="hidden lg:block"> comprehensive collection of fully styled and customizable UI components designed for Nuxt.'
sections:
  - slot: demo
    class: 'hidden lg:block dark:bg-gradient-to-b from-gray-900 to-gray-950/50 !pt-12'
  - title: Everything you expect from a<br class="hidden lg:block"> <span class="text-primary">UI component library</span>
    slot: features
    class: 'dark:bg-gradient-to-b from-gray-900 to-gray-950/50 dark:lg:bg-none dark:lg:bg-gray-950/50'
    cards:
      - title: Color Palette
        description: 'Choose a primary and a gray color from your Tailwind CSS color palette. Components will be styled accordingly.'
        icon: i-heroicons-swatch
        to: /getting-started/theming#colors
        class: 'col-span-7 row-span-3'
        image:
          path: /illustrations/color-palette
          width: 363
          height: 152
        orientation: 'horizontal'
      - title: Fully Customizable
        description: 'Change the style of any component in your App Config or customize them specifically through the ui prop.'
        icon: i-heroicons-wrench-screwdriver
        to: /getting-started/theming#components
        image:
          path: /illustrations/fully-customizable
          width: 444
          height: 160
        class: 'col-span-5 row-span-5 lg:mb-10'
        orientation: 'vertical'
      - title: Icons
        description: 'Choose any of the 100k+ icons from the most popular icon libraries with the Icon component or the icon prop.'
        icon: i-heroicons-face-smile
        to: /getting-started/theming#icons
        image:
          path: /illustrations/icon-library
          width: 362
          height: 184
        class: 'col-span-7 row-span-3'
        orientation: 'horizontal'
      - title: Light & Dark
        description: 'Every component is designed with dark mode in mind. Works out of the box with @nuxtjs/color-mode.'
        to: /getting-started/theming#dark-mode
        icon: i-heroicons-moon
        image:
          path: /illustrations/dark-mode
          width: 444
          height: 160
        class: 'col-span-5 row-span-5 lg:-mt-10 lg:mb-20'
        orientation: 'vertical'
      - title: Keyboard Shortcuts
        description: 'Nuxt UI comes with a set of Vue composables to easily handle keyboard shortcuts in your app.'
        icon: i-heroicons-computer-desktop
        to: /getting-started/shortcuts
        class: 'col-span-7 row-span-3'
        image:
          path: /illustrations/keyboard-shortcuts
          width: 444
          height: 160
        orientation: 'horizontal'
    links:
      - label: Explore 40+ components
        to: /components
        color: black
        size: lg
        icon: i-heroicons-cube
cta:
  title: Built and driven by an <span class="text-primary">amazing community</span>
  align: center
  users:
    - name: Benjamin Canac
      username: benjamincanac
      to: https://twitter.com/benjamincanac
    - name: Romain Hamel
      username: romhml
      to: https://github.com/romhml
    - name: Neil Richter
      username: noook
      to: https://nook.sh/
pro:
  title: Upgrade to <span class="text-primary">Nuxt UI Pro</span>
  description: 'Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.'
  links:
    - label: Buy now
      to: /pro/pricing
      color: black
      trailingIcon: i-heroicons-arrow-right-20-solid
      size: lg
    - label: Explore templates
      to: /pro/templates
      color: gray
      icon: i-heroicons-computer-desktop
      size: lg
  sections:
    - title: The freedom to build anything
      description: 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.
      id: features
      align: left
      features:
        - name: Fully customizable
          description: Like Nuxt UI, change the style of any component from your App Config or customize them specifically through the ui prop.
          icon: i-heroicons-wrench-screwdriver
        - name: Slots for everything
          description: Each component leverages the power of Vue's slots to give you the flexibility to build anything.
          icon: i-heroicons-square-3-stack-3d
        - name: Responsive by design
          description: Nuxt UI Pro components aims to structure your content, they are responsive by design and will adapt to any screen size.
          icon: i-heroicons-device-phone-mobile
      links:
        - label: Explore components
          to: /pro/components
          color: gray
          icon: i-heroicons-arrow-right-20-solid
          trailing: true
          size: md
          class: ml-8
      code: |
        ```vue [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>
        ```
    - title: The flexibility to control your data
      description: 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.
      align: right
      features:
        - name: 'Write Markdown with ease'
          description: Nuxt UI Pro overrides Nuxt Content prose components to make them awesome but also adds new ones like Callout, CodeGroup, Field, etc.
          icon: i-simple-icons-markdown
        - name: 'Beautiful Typography styles'
          description: Tailwind CSS typography plugin is pre-configured and styled to match Nuxt UI components and colors.
          icon: i-heroicons-paint-brush
        - name: Full-Text Search out of the box
          description: 'Nuxt UI Pro ships with a ready to use command palette component. No need to setup Algolia DocSearch anymore.'
          icon: i-heroicons-magnifying-glass
      links:
        - label: Nuxt Content integration
          to: /pro/getting-started/content
          color: gray
          icon: i-heroicons-arrow-right-20-solid
          trailing: true
          size: md
          class: ml-8
      code: |
        ```vue [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>
        ```
  landing:
    title: Start with a landing page
    description: Stop wasting time building another landing page, Nuxt UI Pro flexible components will allow you to focus on your content.
  docs:
    title: Build your docs in seconds
    description: Whether you're creating documentation for your open source project or explaining your product, Nuxt UI Pro has you covered.