PageSection

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-type',
    to: '/getting-started/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-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-type',
    to: '/getting-started/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-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-type',
    to: '/getting-started/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-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`
`icon`		`string`
`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-[var(--ui-primary)]',
        title: 'text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-[var(--ui-text-highlighted)]',
        description: 'text-base sm:text-lg text-[var(--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-[var(--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-[var(--ui-primary)]',
            title: 'text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-[var(--ui-text-highlighted)]',
            description: 'text-base sm:text-lg text-[var(--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-[var(--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'
              }
            }
          ]
        }
      }
    })
  ]
})

PageList

A vertical list layout for displaying content in a stacked format.

Pagination

A list of buttons or links to navigate through pages.