Installation Guide

Prerequisites

Before getting started, ensure you have:

• → Node.js 22.2.0 or higher
• → Yarn 4.5.3

Setting Up Yarn

Quick Start

Create New Project

You can create a new KNEXT.js project using create-next-app with our template:

This command:

• → Creates a new Next.js project named my-knext-app
• → Uses Yarn as the package manager
• → Includes TypeScript configuration
• → Sets up Tailwind CSS
• → Configures ESLint
• → Uses the App Router
• → Applies our KNEXT.js starter template

After installation completes, navigate to your project:

Clone Starter Template

Alternatively, you can clone our starter template and install dependencies:

Visit http://localhost:3000 to see your application.

Design System Overview

KNEXT.js uses a cyberpunk-inspired modern design system built with:

• → Tailwind CSS for styling
• → Shadcn UI for component primitives
• → GSAP for animations
• → Atomic Design principles

Key Features

• → 🌙 Dark mode support
• → 💫 GSAP animations with cyber effects
• → 🧱 Component library based on Atomic Design
• → 📱 Mobile-first responsive design
• → ⚡ Performance-optimized gradients and effects

Theme Configuration

The design system uses a carefully crafted color palette:

Development Tools

The project includes several development tools:

• → ESLint for code linting (yarn lint:fix)
• → Prettier for code formatting (yarn format)
• → TypeScript type checking (yarn type-check)
• → Husky for pre-commit hooks
• → Commitlint with Commitizen

Documentation

Generate documentation using:

Next Steps

• → Explore example components in ./src/components/_examples
• → Review the design system documentation in DESIGN_SYSTEM.md
• → Check out the demo website

For more detailed information about specific features, refer to the full documentation.