Dependencies Used in the AI Website Cloner Template: Complete Technical Guide

The AI Website Cloner Template relies on Next.js 16.2.1, React 19.2.4, and a curated ecosystem of Tailwind CSS utilities including shadcn/ui, class-variance-authority, and lucide-react to deliver a type-safe, component-driven development experience.

The JCodesMore/ai-website-cloner-template provides a modern foundation for building AI-powered website cloning applications. Understanding the dependencies used in the ai-website-cloner-template is essential for extending functionality and maintaining compatibility with its React 19 and Next.js App Router architecture. This guide breaks down every runtime dependency declared in package.json and demonstrates how they integrate throughout the codebase.

Core Framework Stack

The template is built on the bleeding edge of the React ecosystem, utilizing the latest stable releases for maximum performance and feature availability.

Next.js 16.2.1

Next.js 16.2.1 serves as the primary meta-framework, providing the App Router, server-side rendering capabilities, and API route handling. This version specifically includes React 19 support and the latest optimizations for the Vercel deployment workflow. The framework configuration is managed in next.config.ts, where experimental features and build settings are defined.

React 19.2.4 and React DOM 19.2.4

The template uses React 19.2.4 alongside react-dom 19.2.4 to leverage the new rendering pipeline and enhanced hooks system. These versions guarantee compatibility with Next.js 16's server component architecture and streaming SSR capabilities.

UI Component Architecture

shadcn/ui 4.1.0

The shadcn package (^4.1.0) acts as a wrapper around shadcn/ui utilities, combining Radix UI primitives with Tailwind CSS styling. This provides an opinionated component foundation that matches the design tokens used throughout the template. Components built with this system are located in src/components/ui/, such as src/components/ui/button.tsx.

@base-ui/react 1.3.0

@base-ui/react (^1.3.0) supplies utility UI primitives, specifically the cn() helper for class-name composition. While many projects define cn locally, this template imports the utility from @base-ui/react and re-exports it via src/lib/utils.ts, making Tailwind class handling ergonomic and type-safe across the application.

tw-animate-css 1.4.0

For animations, the template includes tw-animate-css (^1.4.0), a Tailwind plugin that adds CSS-based animation utilities. This allows developers to implement transitions without creating separate CSS files, keeping all styling within the Tailwind paradigm.

Class Name Management Utilities

A sophisticated styling pipeline relies on several specialized packages to manage Tailwind classes efficiently.

class-variance-authority 0.7.1

class-variance-authority (^0.7.1) enables the creation of variant-based class-name generators. Working in tandem with cn, this library manages complex Tailwind variants for components like buttons (sizes, intents, states) through a type-safe API.

clsx 2.1.1 and tailwind-merge 3.5.0

clsx (^2.1.1) provides a tiny utility for conditional class-name concatenation, while tailwind-merge (^3.5.0) deduplicates conflicting Tailwind utilities. These work together to ensure no contradictory classes leak into the final markup, resolving specificity issues automatically.

Iconography System

lucide-react 1.6.0

For icons, the template uses lucide-react (^1.6.0), which exports lightweight, customizable SVG icons as React components. These integrate seamlessly with Tailwind utility classes for sizing and coloring.

Practical Implementation Examples

The dependencies work together in specific patterns throughout the codebase to enforce consistency and type safety.

Composing Classes with the cn Utility

In src/lib/utils.ts, the cn helper is re-exported for application-wide use. This utility merges class strings safely while respecting Tailwind's precedence rules.

import { cn } from '@/lib/utils';        // ← src/lib/utils.ts re‑exports cn
import { Button } from '@/components/ui/button';

export default function Example() {
  return (
    <Button className={cn('bg-primary text-white', 'hover:bg-primary/90')}>
      Click me
    </Button>
  );
}

Creating Variant-Based Components with CVA

The class-variance-authority package is used extensively in UI components to define variant props. Here is a badge component demonstrating the pattern:

import { cva } from 'class-variance-authority';
import { cn } from '@/lib/utils';

const badgeVariants = cva('inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', {
  variants: {
    intent: {
      primary: 'bg-primary text-primary-foreground',
      secondary: 'bg-secondary text-secondary-foreground',
    },
  },
  defaultVariants: { intent: 'primary' },
});

export function Badge({ intent }: { intent?: 'primary' | 'secondary' }) {
  return <span className={cn(badgeVariants({ intent }))}>Badge</span>;
}

Integrating Lucide Icons

Icons are imported individually from lucide-react and styled using Tailwind utilities:

import { Copy } from 'lucide-react';
import { Button } from '@/components/ui/button';

export function CopyButton() {
  return (
    <Button>
      <Copy className="w-4 h-4 mr-2" />
      Copy URL
    </Button>
  );
}

Key Configuration Files

Understanding the file structure helps clarify how these dependencies are wired together:

• package.json – Declares all runtime and development dependencies, including the specific versions listed above.
• src/lib/utils.ts – Re-exports the cn helper from @base-ui/react and serves as the central utility hub for class-name composition.
• src/components/ui/button.tsx – Example UI component built with shadcn primitives, showcasing the integration of cva, cn, and Tailwind utilities.
• src/app/layout.tsx – Top-level layout that applies global Tailwind styles and initializes the UI theme context.
• next.config.ts – Configures Next.js experimental features and deployment settings specific to the template's architecture.
• tailwind.config.ts – Generated by Tailwind CSS v4, this file defines design tokens and integrates plugins like tw-animate-css.

Summary

• The JCodesMore/ai-website-cloner-template runs on Next.js 16.2.1 and React 19.2.4, providing a modern App Router foundation.
• Styling dependencies include shadcn, @base-ui/react, class-variance-authority, clsx, tailwind-merge, and tw-animate-css for a type-safe, utility-first design system.
• The cn utility from @base-ui/react (re-exported in src/lib/utils.ts) centralizes class-name composition across the application.
• Icons are handled by lucide-react, offering lightweight SVG components that accept Tailwind classes.
• All runtime dependencies are declared in package.json and configured through next.config.ts and the Tailwind configuration files.

Frequently Asked Questions

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

The template uses Next.js 16.2.1, which includes support for React 19 and the latest App Router features. This version is specified in the dependencies section of package.json and enables server-side rendering with the new React rendering pipeline.

How does the template handle Tailwind CSS class conflicts?

The template resolves class conflicts using tailwind-merge (^3.5.0) in combination with clsx (^2.1.1). These utilities are typically composed within the cn helper exported from src/lib/utils.ts, ensuring that conflicting utility classes are automatically deduplicated while respecting Tailwind's specificity rules.

What is the purpose of class-variance-authority in this project?

class-variance-authority (^0.7.1) creates type-safe, variant-based class generators for UI components. According to the source code in src/components/ui/button.tsx and similar files, it allows developers to define component variants (such as size and intent) declaratively, which are then merged with Tailwind classes via the cn utility.

Where is the cn utility defined in the codebase?

While the cn helper is imported throughout the application from @/lib/utils, the actual implementation originates from @base-ui/react (^1.3.0) as indicated in package.json. The file src/lib/utils.ts re-exports this utility to provide a centralized import path for class-name composition across the project.

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