AI Dimensie
Wave 11·Docs · part of AI Dimensie·Why Docs? →·⌘K jump

6 production-ready page templates built with aidimension UI.

Templates Overview

aidimension ships 6 production-ready page templates — every one is a complete, accessible, mobile-responsive Next.js page you can drop into your project and customize.

The 6 templates#

1. Landing Page#

A high-conversion SaaS landing page with:

  • Hero section with gradient background
  • Feature grid (6 cards)
  • "How it works" 3-step explainer
  • Social proof / testimonials
  • Pricing tier cards
  • FAQ accordion
  • CTA section + footer

Best for: SaaS products, AI tools, developer platforms.

→ View the Landing Page template

2. Dashboard#

A full admin shell with:

  • Collapsible sidebar navigation
  • Top bar with search + user menu
  • Stat cards (4 KPI tiles)
  • Time-series chart placeholder
  • Recent activity table
  • Quick-action buttons

Best for: Admin panels, internal tools, analytics dashboards.

→ View the Dashboard template

3. Pricing#

A pricing page with:

  • 3-tier pricing table (Free, Pro, Enterprise)
  • Monthly/annual toggle
  • Feature comparison matrix
  • FAQ section
  • "Trusted by" logo strip

Best for: Any product with paid plans.

→ View the Pricing template

4. Blog Index#

A content-heavy blog layout with:

  • Featured post hero card
  • Category filter pills
  • Card grid with thumbnails
  • Pagination
  • Newsletter signup
  • Tag cloud

Best for: Content marketing, devblogs, changelogs.

5. Auth Pages#

Sign-in, sign-up, and forgot-password pages with:

  • Split layout (form left, brand panel right)
  • OAuth buttons (Google, GitHub, Apple)
  • Password strength meter
  • Form validation
  • "Or continue with email" divider

Best for: Onboarding flows, gated content.

6. Changelog#

A versioned changelog with:

  • Timeline layout
  • Version headers with date pills
  • Categorized changes (Added, Fixed, Changed, Removed)
  • RSS feed link
  • Subscribe-to-updates form

Best for: Public changelogs, release notes.

Installing a template#

Use the CLI to copy a single template into your project:

# Copy a single template
npx @aidimension/cli@latest add template landing-page

# Or copy all 6
npx @aidimension/cli@latest add template --all

The CLI:

  1. Creates src/app/(templates)/<template-name>/page.tsx
  2. Copies any required components to src/components/
  3. Adds any new dependencies to package.json
  4. Prints setup instructions (e.g. "add NEXT_PUBLIC_STRIPE_KEY to .env")

Customizing a template#

Every template is a single file you own end-to-end. No magic, no config:

// src/app/(templates)/landing-page/page.tsx
export default function LandingPage() {
  return (
    <main>
      {/* This is the entire template — change anything you want */}
    </main>
  );
}

Tips for customizing:

  • Brand colors — Override the --primary CSS variable in globals.css
  • Copy — All text is in plain JSX, no t() calls or i18n
  • Images — Replace Unsplash URLs in <Image src="..."> props
  • Sections — Delete any block you don't need

Screenshot#

Live screenshots coming soon. For now, browse the templates at templates.aidimension.io.

Performance#

Every template ships with:

  • ✅ Server Components by default — no client JS unless required
  • ✅ Image optimization — all <Image> use next/image
  • ✅ Lighthouse 100/100/100/100 target
  • ✅ Zero layout shift, zero CLS
  • ✅ First contentful paint < 1.2s on 4G

Contributing a template#

Have a template we should ship? Open an issue at github.com/pathtoresiliencebv/aidimension-templates with:

  1. A Figma link or screenshot
  2. A short description of who it's for
  3. A draft page.tsx (we'll polish it)

The best community templates get merged and shipped to all aidimension users.

Next
Introduction