PageSection^PRO

A responsive section for your pages.

Usage

The PageSection component wraps your content in a Container while maintaining full-width flexibility making it easy to add background colors, images or patterns. It provides a flexible way to display content with an illustration in the default slot.

Features

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

Icons
Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
Fonts
Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
Color Mode
Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.

Use it after a PageHero component:

<template>
  <UPageHero />

  <UPageSection />
</template>

Title

Use the title prop to set the title of the section.

title

Beautiful Vue UI components

<template>
  <UPageSection title="Beautiful Vue UI components" />
</template>

Description

Use the description prop to set the description of the section.

description

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

<template>
  <UPageSection
    title="Beautiful Vue UI components"
    description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
  />
</template>

Headline

Use the headline prop to set the headline of the section.

headline

Features

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

<template>
  <UPageSection
    title="Beautiful Vue UI components"
    description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    headline="Features"
  />
</template>

Icon

Use the icon prop to set the icon of the section.

icon

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

<template>
  <UPageSection
    title="Beautiful Vue UI components"
    description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    icon="i-lucide-rocket"
  />
</template>

Features

Use the features prop to display a list of PageFeature under the description as an array of objects with the following properties:

title?: string
description?: string
icon?: string
orientation?: 'horizontal' | 'vertical'

You can pass any property from the Link component such as to, target, etc.

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

Icons
Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
Fonts
Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
Color Mode
Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.

<script setup lang="ts">
const features = ref([
  {
    title: 'Icons',
    description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/getting-started/icons'
  },
  {
    title: 'Fonts',
    description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/getting-started/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/getting-started/color-mode'
  }
])
</script>

<template>
  <UPageSection
    title="Beautiful Vue UI components"
    description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    :features="features"
  />
</template>

Links

Use the links prop to display a list of Button under the description.

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

Get started Explore components

<script setup lang="ts">
const links = ref([
  {
    label: 'Get started',
    to: '/getting-started',
    icon: 'i-lucide-square-play',
    color: 'neutral'
  },
  {
    label: 'Explore components',
    to: '/components/app',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageSection
    title="Beautiful Vue UI components"
    description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    :links="links"
  />
</template>

Orientation

Use the orientation prop to change the orientation with the default slot. Defaults to vertical.

orientation

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

Icons
Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
Fonts
Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
Color Mode
Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.

Explore components

<script setup lang="ts">
const features = ref([
  {
    title: 'Icons',
    description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/getting-started/icons'
  },
  {
    title: 'Fonts',
    description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/getting-started/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/getting-started/color-mode'
  }
])
const links = ref([
  {
    label: 'Explore components',
    to: '/components/app',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageSection
    title="Beautiful Vue UI components"
    description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    icon="i-lucide-rocket"
    orientation="horizontal"
    :features="features"
    :links="links"
  >
    <img
      src="https://picsum.photos/704/1294"
      width="352"
      height="647"
      alt="Illustration"
      class="w-full rounded-[calc(var(--ui-radius)*2)]"
    />
  </UPageSection>
</template>

Reverse

Use the reverse prop to reverse the orientation of the default slot.

orientation

reverse

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.

Icons
Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
Fonts
Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
Color Mode
Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.

Explore components

<script setup lang="ts">
const features = ref([
  {
    title: 'Icons',
    description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/getting-started/icons'
  },
  {
    title: 'Fonts',
    description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/getting-started/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/getting-started/color-mode'
  }
])
const links = ref([
  {
    label: 'Explore components',
    to: '/components/app',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageSection
    title="Beautiful Vue UI components"
    description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    icon="i-lucide-rocket"
    orientation="horizontal"
    reverse
    :features="features"
    :links="links"
  >
    <img
      src="https://picsum.photos/704/1294"
      width="352"
      height="647"
      alt="Illustration"
      class="w-full rounded-[calc(var(--ui-radius)*2)]"
    />
  </UPageSection>
</template>

API

Props

Prop	Default	Type
`as`	`'section'`	`any` The element or component this component should render as.
`headline`		`string` The headline displayed above the title.
`icon`		`string` The icon displayed above the title.
`title`		`string`
`description`		`string`
`links`		`ButtonProps[]` Display a list of Button under the description. `{ size: 'lg' }`
`features`		`PageFeatureProps[]` Display a list of PageFeature under the description.
`orientation`	`'vertical'`	`"horizontal" \| "vertical"` The orientation of the section.
`reverse`	`false`	`boolean` Reverse the order of the default slot.
`ui`		`Partial<{ root: string; container: string; wrapper: string; headline: string; leading: string; leadingIcon: string; title: string; description: string; links: string; features: string; }>`

Slots

Slot	Type
`default`	`{}`
`top`	`{}`
`bottom`	`{}`
`headline`	`{}`
`leading`	`{}`
`title`	`{}`
`description`	`{}`
`links`	`{}`
`features`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  uiPro: {
    pageSection: {
      slots: {
        root: 'relative isolate',
        container: 'flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16',
        wrapper: '',
        headline: 'mb-3',
        leading: 'flex items-center mb-6',
        leadingIcon: 'size-10 shrink-0 text-(--ui-primary)',
        title: 'text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-(--ui-text-highlighted)',
        description: 'text-base sm:text-lg text-(--ui-text-muted)',
        links: 'mt-8 flex flex-wrap gap-x-6 gap-y-3',
        features: 'mt-8 grid'
      },
      variants: {
        orientation: {
          horizontal: {
            container: 'lg:grid-cols-2 lg:items-center',
            description: 'text-pretty',
            features: 'gap-4'
          },
          vertical: {
            container: '',
            headline: 'justify-center',
            leading: 'justify-center',
            title: 'text-center',
            description: 'text-center text-balance',
            links: 'justify-center',
            features: 'sm:grid-cols-2 lg:grid-cols-3 gap-8'
          }
        },
        reverse: {
          true: {
            wrapper: 'lg:order-last'
          }
        },
        headline: {
          true: {
            headline: 'font-semibold text-(--ui-primary) flex items-center gap-1.5'
          }
        },
        title: {
          true: {
            description: 'mt-6'
          }
        },
        description: {
          true: ''
        },
        features: {
          true: ''
        }
      },
      compoundVariants: [
        {
          orientation: 'vertical',
          title: true,
          class: {
            features: 'mt-16'
          }
        },
        {
          orientation: 'vertical',
          description: true,
          class: {
            features: 'mt-16'
          }
        },
        {
          orientation: 'vertical',
          features: true,
          class: {
            links: 'mt-16'
          }
        }
      ]
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        pageSection: {
          slots: {
            root: 'relative isolate',
            container: 'flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16',
            wrapper: '',
            headline: 'mb-3',
            leading: 'flex items-center mb-6',
            leadingIcon: 'size-10 shrink-0 text-(--ui-primary)',
            title: 'text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-(--ui-text-highlighted)',
            description: 'text-base sm:text-lg text-(--ui-text-muted)',
            links: 'mt-8 flex flex-wrap gap-x-6 gap-y-3',
            features: 'mt-8 grid'
          },
          variants: {
            orientation: {
              horizontal: {
                container: 'lg:grid-cols-2 lg:items-center',
                description: 'text-pretty',
                features: 'gap-4'
              },
              vertical: {
                container: '',
                headline: 'justify-center',
                leading: 'justify-center',
                title: 'text-center',
                description: 'text-center text-balance',
                links: 'justify-center',
                features: 'sm:grid-cols-2 lg:grid-cols-3 gap-8'
              }
            },
            reverse: {
              true: {
                wrapper: 'lg:order-last'
              }
            },
            headline: {
              true: {
                headline: 'font-semibold text-(--ui-primary) flex items-center gap-1.5'
              }
            },
            title: {
              true: {
                description: 'mt-6'
              }
            },
            description: {
              true: ''
            },
            features: {
              true: ''
            }
          },
          compoundVariants: [
            {
              orientation: 'vertical',
              title: true,
              class: {
                features: 'mt-16'
              }
            },
            {
              orientation: 'vertical',
              description: true,
              class: {
                features: 'mt-16'
              }
            },
            {
              orientation: 'vertical',
              features: true,
              class: {
                links: 'mt-16'
              }
            }
          ]
        }
      }
    })
  ]
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        pageSection: {
          slots: {
            root: 'relative isolate',
            container: 'flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16',
            wrapper: '',
            headline: 'mb-3',
            leading: 'flex items-center mb-6',
            leadingIcon: 'size-10 shrink-0 text-(--ui-primary)',
            title: 'text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-(--ui-text-highlighted)',
            description: 'text-base sm:text-lg text-(--ui-text-muted)',
            links: 'mt-8 flex flex-wrap gap-x-6 gap-y-3',
            features: 'mt-8 grid'
          },
          variants: {
            orientation: {
              horizontal: {
                container: 'lg:grid-cols-2 lg:items-center',
                description: 'text-pretty',
                features: 'gap-4'
              },
              vertical: {
                container: '',
                headline: 'justify-center',
                leading: 'justify-center',
                title: 'text-center',
                description: 'text-center text-balance',
                links: 'justify-center',
                features: 'sm:grid-cols-2 lg:grid-cols-3 gap-8'
              }
            },
            reverse: {
              true: {
                wrapper: 'lg:order-last'
              }
            },
            headline: {
              true: {
                headline: 'font-semibold text-(--ui-primary) flex items-center gap-1.5'
              }
            },
            title: {
              true: {
                description: 'mt-6'
              }
            },
            description: {
              true: ''
            },
            features: {
              true: ''
            }
          },
          compoundVariants: [
            {
              orientation: 'vertical',
              title: true,
              class: {
                features: 'mt-16'
              }
            },
            {
              orientation: 'vertical',
              description: true,
              class: {
                features: 'mt-16'
              }
            },
            {
              orientation: 'vertical',
              features: true,
              class: {
                links: 'mt-16'
              }
            }
          ]
        }
      }
    })
  ]
})

PageMarquee

A component to create infinite scrolling content.

Pagination

A list of buttons or links to navigate through pages.

PageSectionPRO

Beautiful Vue UI components

Beautiful Vue UI components

Beautiful Vue UI components

Beautiful Vue UI components

Beautiful Vue UI components

Beautiful Vue UI components

Beautiful Vue UI components

Beautiful Vue UI components

Beautiful Vue UI components

PageSection^PRO