Overview

Nuxt UI Pro is a collection of 50+ components that can be used in various ways. This section will help you understand how the components are organized and where to use them. Feel free to dive into each component's documentation for examples and API documentation.

Layout

Let's start with the layout components, they are used to create the structure of your app with a Header, Main and Footer. Most of the time, you will use those in your app.vue:

<template>
  <UHeader />

  <UMain>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UMain>

  <UFooter />
</template>

Marketing

This category contains components that are used to build landing pages, marketing pages, pricing pages, etc. You can mix and match them to create your own pages.

Landing

When building a landing page or any marketing page, you will most likely need a LandingHero and some LandingSection to define the structure.

The ULandingSection component is enough in most cases with a title, a description, some links and features and an image in the default slot for example with its align prop set to left, center or right.

But sometimes, you might want to add some LandingLogos, a LandingGrid with some LandingCard, some LandingTestimonial, a LandingCTA or even a LandingFAQ:

<template>
  <ULandingHero>
    <ULandingLogos />
  </ULandingHero>

  <ULandingSection>
    <ULandingGrid>
      <ULandingCard />
      <ULandingCard />
      <ULandingCard />
    </LandingGrid>
  </LandingSection>

  <ULandingSection>
    <UPageColumns>
      <ULandingTestimonial />
      <ULandingTestimonial />
      <ULandingTestimonial />
    </UPageColumns>
  </LandingSection>

  <ULandingSection>
    <ULandingCTA />
  </LandingSection>

  <ULandingSection>
    <ULandingFAQ />
  </LandingSection>
</template>

Pricing

When building pricing pages, you will most likely need some PricingCard inside a PricingGrid to display your plans and maybe a PricingToggle to switch between monthly and yearly plans:

<template>
  <ULandingHero>
    <template #links>
      <UPricingToggle />
    </template>
  </ULandingHero>

  <ULandingSection>
    <UPricingGrid>
      <UPricingCard />
      <UPricingCard />
      <UPricingCard />
    </UPricingGrid>
  </ULandingSection>

  <ULandingSection>
    <ULandingLogos />
  </ULandingSection>

  <ULandingSection>
    <ULandingFAQ />
  </ULandingSection>
</template>

Application

The line between marketing and application pages is blurry and it is up to you to decide what you want to do. But in general, application pages are more focused on the content and less on the design. For example, to build a documentation, a changelog, a blog or even a dashboard, we'll use those components.

Page

This category contains components to build the structure of your pages. For example, the Page component will create a grid of 10 columns with a 2 columns left and/or right slots. You will also find a PageHero, a PageHeader and a PageBody with prose support.

<template>
  <UPageHero />

  <UPage>
    <UPageHeader />

    <UPageBody prose>
      <ContentRenderer />
    </UPageBody>
  </UPage>
</template>

You might also want to add a PageGrid or a PageColumns with some PageCard or add some PageLinks to display a list of links next to your content.

And if you need to display an error page, you can use the PageError component:

<template>
  <UHeader />

  <UMain>
    <UPage>
      <UPageError :error="error" />
    </UPage>
  </UMain>

  <UFooter />
</template>

Aside

When you need to display a sticky sidebar, you can use the Aside component inside the left or right slot of the Page component:

<template>
  <UPage>
    <template #left>
      <UAside />
    </template>

    <slot />
  </UPage>
</template>

Navigation

When you need to display a list of links in a sidebar, you can use the NavigationTree component inside the default slot of the Aside component:

<template>
  <UPage>
    <template #left>
      <UAside>
        <UNavigationTree :links="links" />
      </UAside>
    </template>

    <NuxtPage />
  </UPage>
</template>

Auth

The only component in this category is the AuthForm, you can use it to build your login, register, forgot password and reset password pages.

Content

As mentioned in the Content guide, if you choose to go with @nuxt/content to build your app, @nuxt/ui-pro will provide you with a set of fully-compatible components like the DocsSearch, DocsToc and DocsSurround components.

You'll also find some Prose components to use in your .md files using the MDC syntax like the Callout, Card, CodeGroup, Tabs, etc. You can find the full list in the Prose category.

Color Mode

The color mode category contains components to switch between light and dark mode in different ways such as ColorModeButton, ColorModeToggle and ColorModeSelect.

Those components will be automatically hidden if you've forced the color mode in your page with:

<script setup>
definePageMeta({
  colorMode: 'dark'
})
</script>

There are also components to easily display an avatar or image with a different src for light and dark mode such as ColorModeAvatar and ColorModeImage.