AI Website Cloner Template Tech Stack: Next.js 16, Tailwind v4, and TypeScript

The JCodesMore/ai-website-cloner-template is built on Next.js 16 with React 19, TypeScript 5 strict mode, Tailwind CSS v4 with oklch design tokens, and shadcn/ui components using Radix primitives.

The ai-website-cloner-template provides a modern, type-safe foundation designed specifically for AI agents to reconstruct target websites. Created by JCodesMore, this open-source repository combines server-rendered React architecture with utility-first styling and composable UI components. The stack prioritizes strict type safety and predictable styling behavior to minimize errors during automated website cloning workflows.

Next.js 16 and React 19 Foundation

The framework backbone relies on Next.js 16, utilizing the App Router architecture for server-side rendering and API routes. According to the repository's package.json (lines 42-44), the project pins Next.js to version 16 alongside React 19, ensuring access to the latest concurrent rendering features. The src/app/layout.tsx file serves as the root layout, importing global styles and establishing the document structure that wraps all route segments.

TypeScript 5 Strict Mode Configuration

Type safety is enforced through TypeScript 5 running in strict mode. The configuration in package.json (lines 56-58) enables strict compiler settings that explicitly forbid implicit any types throughout the codebase. This strictness ensures that AI-generated code modifications maintain complete type integrity, catching potential runtime errors during the compilation phase rather than in production.

Tailwind CSS v4 and PostCSS Configuration

Styling relies on Tailwind CSS v4, loaded via the PostCSS pipeline defined in postcss.config.mjs (lines 1-4). The template leverages oklch color space design tokens for perceptually uniform color manipulation. Global styles are defined in src/app/globals.css, which imports Tailwind's base, components, and utility layers. The package.json (lines 55-57) confirms the v4 version pinning alongside tw-animate-css for animation utilities.

shadcn/ui Component Architecture

UI components follow the shadcn/ui pattern, combining Radix UI primitives with Tailwind CSS utilities. The Button component in src/components/ui/button.tsx (lines 3-10 and 45-58) demonstrates this architecture using class-variance-authority (cva) for variant management and the shared cn utility from src/lib/utils.ts for conditional class merging. This approach allows AI agents to modify component variants through type-safe prop changes rather than raw CSS manipulation.

import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <div className="p-4">
      {/* Default button */}
      <Button onClick={() => alert("Clicked!")}>
        Click me
      </Button>

      {/* Outline variant, large size */}
      <Button variant="outline" size="lg" className="ml-2">
        Outline large
      </Button>
    </div>
  );
}

The component pulls its styling from the Tailwind-based buttonVariants defined in src/components/ui/button.tsx (lines 8-42).

Utility Libraries for Class Composition

Supporting the styling system are specialized class management libraries. The package.json (lines 38-48) includes clsx for conditional class strings, tailwind-merge for deduplicating Tailwind classes, and class-variance-authority for defining component variants. These utilities work together in the cn() helper function exported from src/lib/utils.ts, providing a single interface for complex class name composition.

Lucide React Icons and Asset Pipeline

The default icon system uses Lucide React, as declared in package.json (lines 41-42). While the template begins with Lucide icons, the cloning process typically replaces these with extracted assets from the target website. The dependency makes a comprehensive SVG icon set available across all components through standard ES6 imports.

App Router Structure for Page Generation

Pages follow the Next.js App Router convention under src/app/, with src/app/layout.tsx providing the root layout and individual page.tsx files handling route-specific content. This structure allows AI agents to generate new pages by creating directories with corresponding page.tsx files that automatically inherit global styles from src/app/globals.css as noted in the README (lines 112-115).

// src/app/about/page.tsx
export default function AboutPage() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center">
      <h1 className="text-4xl font-bold">About This Cloner</h1>
      <p className="mt-4 text-lg">
        Powered by Next.js 16, Tailwind CSS v4, and shadcn/ui.
      </p>
    </main>
  );
}

Summary

• Next.js 16 with App Router and React 19 provides the server-rendered foundation and routing architecture.
• TypeScript 5 strict mode enforces type safety across all source files, preventing implicit any types.
• Tailwind CSS v4 delivers utility-first styling via PostCSS, utilizing oklch color tokens for design consistency.
• shadcn/ui components built on Radix primitives offer pre-styled, accessible UI elements with cva and cn utilities.
• Lucide React supplies the default icon set, replaceable during the cloning process.

Frequently Asked Questions

What version of Next.js does the ai-website-cloner-template use?

The template uses Next.js 16, specifically pinned in package.json (lines 42-44). This version provides the App Router architecture and React 19 compatibility required for modern server-side rendering patterns.

How does the template handle TypeScript configuration?

The project runs TypeScript 5 in strict mode, as configured in package.json (lines 56-58). This strict configuration eliminates implicit any types, ensuring that AI-generated code maintains full type safety and compiles without warnings.

Why does the template use Tailwind CSS v4 instead of v3?

The template adopts Tailwind CSS v4 for its enhanced performance and native oklch color space support. The configuration loads through postcss.config.mjs (lines 1-4), and the v4 package (noted in package.json lines 55-57) provides improved design tokens for AI-driven color manipulation during website cloning.

What is the purpose of the cn utility function in the codebase?

The cn function exported from src/lib/utils.ts combines clsx and tailwind-merge to handle conditional class names and resolve Tailwind conflicts. This utility is essential for the shadcn/ui component pattern used in files like src/components/ui/button.tsx, allowing variant-based styling through type-safe props.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}