Components

Overview

This template comes with a variety of pre-built components that you can use to build your application quickly. All components are built with Nuxt UI and follow best practices for accessibility and performance.

UI Components

The template leverages the full power of Nuxt UI, giving you access to over 100+ beautifully designed components.

Layout Components

• UPage: Main page wrapper with responsive layout
• UPageHeader: Consistent page headers with title and description
• UPageBody: Content area with proper spacing and typography
• UPageAside: Sidebar navigation for documentation
• UContainer: Responsive container with max-width constraints

Navigation Components

• UContentNavigation: Automatic navigation from content structure
• UContentSurround: Previous/Next page navigation
• UContentToc: Table of contents for current page

Content Components

• UPageCard: Card component with various styles
• UPageGrid: Grid layout for cards
• UPageColumns: Multi-column layouts
• UPageSection: Section wrapper with consistent spacing

Custom Components

AppHeader

The main navigation header used across all pages.

<AppHeader />

AppFooter

Footer component with links and social media icons.

<AppFooter />

HeroBackground

Animated gradient background for hero sections.

<HeroBackground />

PromotionalVideo

Video player component for showcasing features.

<PromotionalVideo />

ImagePlaceholder

Placeholder component for images with pattern background.

<ImagePlaceholder />

StarsBg

Animated stars background for call-to-action sections.

<StarsBg />

Using Components

All components are auto-imported, so you can use them directly in your pages and components without explicit imports.

<template>
  <UPage>
    <UPageHeader
      title="My Page"
      description="Page description"
    />
    
    <UPageBody>
      <UPageCard>
        <!-- Your content -->
      </UPageCard>
    </UPageBody>
  </UPage>
</template>

Next Steps

• Explore the Nuxt UI documentation for all available components
• Check out the component examples for usage patterns
• Learn about customizing components