Components Overview

The layer provides several pre-built components for documentation sites, organized into three categories: Layout, Content/MDC, and UI components.

Layout Components

AppHeader

The site header with navigation and dark mode toggle.

Copy<AppHeader />

Features:

• Site title/logo
• Navigation links
• Dark/light mode toggle
• Mobile responsive

AppFooter

The site footer.

Copy<AppFooter />

DocsSidebar

Navigation sidebar for documentation pages.

Copy<DocsSidebar />

Features:

• Hierarchical navigation
• Active state highlighting
• Collapsible sections

DocsTableOfContents

Table of contents for the current page.

Copy<DocsTableOfContents :toc="toc" />

Features:

• Auto-generated from headings
• Scroll-aware active state
• Depth-based indentation

DocsPageHeader

Page header with title and description.

Copy<DocsPageHeader
  title="Page Title"
  description="Page description"
/>

DocsPageNav

Previous/Next navigation.

Copy<DocsPageNav
  :prev="{ path: '/prev', title: 'Previous' }"
  :next="{ path: '/next', title: 'Next' }"
/>

Content Components (MDC)

These components are globally registered and can be used directly in Markdown files using MDC syntax.

UI Components

The layer includes shadcn-vue components:

Button

Copy<Button variant="default">
Click me
</Button>

<Button variant="outline">
Outline
</Button>

<Button variant="ghost">
Ghost
</Button>

Separator

Copy<Separator />

<Separator orientation="vertical" />

Customization

All components can be overridden by creating a component with the same name in your project's components directory.