PageFeature

GitHub
A component to showcase key features of your application.

Usage

This component is used internally by the PageSection component to display features.

Title

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

Theme
<template>
  <UPageFeature title="Theme" />
</template>

Description

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

Theme
Customize Nuxt UI with your own colors, fonts, and more.
<template>
  <UPageFeature
    title="Theme"
    description="Customize Nuxt UI with your own colors, fonts, and more."
  />
</template>

Icon

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

Theme
Customize Nuxt UI with your own colors, fonts, and more.
<template>
  <UPageFeature
    title="Theme"
    description="Customize Nuxt UI with your own colors, fonts, and more."
    icon="i-lucide-palette"
  />
</template>

Link

You can pass any property from the <NuxtLink> component such as to, target, rel, etc.

Theme
Customize Nuxt UI with your own colors, fonts, and more.
<template>
  <UPageFeature
    title="Theme"
    description="Customize Nuxt UI with your own colors, fonts, and more."
    icon="i-lucide-palette"
    to="/getting-started/theme"
  />
</template>

Orientation

Use the orientation prop to change the orientation of the feature. Defaults to horizontal.

Theme
Customize Nuxt UI with your own colors, fonts, and more.
<template>
  <UPageFeature
    orientation="vertical"
    title="Theme"
    description="Customize Nuxt UI with your own colors, fonts, and more."
    icon="i-lucide-palette"
  />
</template>

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

icon

string

title

string

description

string

orientation

'horizontal'

"horizontal" | "vertical"

The orientation of the page feature.

to

string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

target

null | "_blank" | "_parent" | "_self" | "_top" | string & {}

ui

Partial<{ root: string; wrapper: string; leading: string; leadingIcon: string; title: string; description: string; }>

Slots

Slot Type
leading

{}

title

{}

description

{}

default

{}

Theme

app.config.ts
export default defineAppConfig({
  uiPro: {
    pageFeature: {
      slots: {
        root: 'relative',
        wrapper: '',
        leading: 'inline-flex items-center justify-center',
        leadingIcon: 'size-5 shrink-0 text-[var(--ui-primary)]',
        title: 'text-base text-pretty font-semibold text-[var(--ui-text-highlighted)]',
        description: 'text-[15px] text-pretty text-[var(--ui-text-muted)]'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex items-start gap-2.5',
            leading: 'p-0.5'
          },
          vertical: {
            leading: 'mb-2.5'
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        }
      }
    }
  }
})
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: {
        pageFeature: {
          slots: {
            root: 'relative',
            wrapper: '',
            leading: 'inline-flex items-center justify-center',
            leadingIcon: 'size-5 shrink-0 text-[var(--ui-primary)]',
            title: 'text-base text-pretty font-semibold text-[var(--ui-text-highlighted)]',
            description: 'text-[15px] text-pretty text-[var(--ui-text-muted)]'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'flex items-start gap-2.5',
                leading: 'p-0.5'
              },
              vertical: {
                leading: 'mb-2.5'
              }
            },
            title: {
              true: {
                description: 'mt-1'
              }
            }
          }
        }
      }
    })
  ]
})