create-hauis-app

✨ Features

• 🎯 Multiple Frameworks - React, Vue, Svelte, Astro, Vanilla JS
• 🏗️ Meta Frameworks - Next.js 15, Remix, SvelteKit 2, Nuxt 3
• 📘 TypeScript First - First-class TypeScript support with strict defaults
• 🎨 Tailwind CSS v4 - Latest version with CSS variables and @theme directive
• 📦 All Package Managers - npm, pnpm, yarn, bun
• 🔧 Code Quality Tools - Biome (fast) or ESLint + Prettier
• 🪝 Git Hooks - Lefthook with conventional commits
• 🎛️ Flexible CLI - Interactive prompts or command-line flags
• 📋 Preset System - Quick start with predefined configurations
• 🔄 Dry Run Mode - Preview changes without creating files

🚀 Quick Start

# Recommended: Interactive mode
npx create-hauis-app@latest

# With project name
npx create-hauis-app@latest my-app

# Using preset
npx create-hauis-app@latest my-app --preset next-app

Or install globally:

npm install -g create-hauis-app
create-hauis-app

📖 Documentation

Interactive Mode

Simply run the command and follow the prompts:

npx create-frontend-app@latest

You'll be asked about:

1. Project name - Name of your new project
2. Framework - React, Vue, Svelte, Astro, or Vanilla JS
3. Meta framework - Next.js, Remix, SvelteKit, Nuxt (if applicable)
4. TypeScript - Enable TypeScript (recommended)
5. Tailwind CSS - Add Tailwind CSS v4
6. Package manager - npm, pnpm, yarn, or bun
7. Code quality - Biome or ESLint + Prettier
8. Git hooks - Add Lefthook for automated checks

Command Line Mode

Skip prompts by providing options:

npx create-frontend-app@latest my-app \
  --framework react \
  --meta next \
  --typescript \
  --tailwind \
  --pm pnpm \
  --quality biome \
  --git-hooks

CLI Options

| Option | Alias | Description | |--------|-------|-------------| | --framework <type> | -f | Frontend framework (react, vue, svelte, astro, vanilla) | | --meta <type> | -m | Meta framework (next, remix, sveltekit, nuxt) | | --typescript | --ts | Use TypeScript | | --no-typescript | --no-ts | Use JavaScript | | --tailwind | | Add Tailwind CSS v4 | | --no-tailwind | | Skip Tailwind CSS | | --pm <manager> | | Package manager (npm, pnpm, yarn, bun) | | --quality <tool> | | Code quality (biome, eslint-prettier) | | --git-hooks | | Add Lefthook for Git hooks | | --preset <name> | -p | Use a preset configuration | | --dry-run | | Preview without creating files | | --debug | -d | Enable debug mode |

📋 Presets

Quick configurations for common setups:

Available Presets

| Preset | Description | |--------|-------------| | next-app | Next.js with TypeScript, Tailwind CSS v4, and Biome | | vue-minimal | Vue with JavaScript and ESLint | | svelte-kit | SvelteKit with TypeScript and Biome | | astro-blog | Astro with TypeScript and Tailwind | | react-vite | React with Vite, TypeScript, and Biome | | enterprise-next | Next.js with all features for enterprise projects |

Using Presets

# Next.js app with TypeScript and Tailwind
npx create-hauis-app@latest my-app --preset next-app

# List all available presets
npx create-hauis-app@latest list-presets

🏗️ Frameworks

React Ecosystem

npx create-hauis-app@latest my-app --framework react

• ⚡ Vite for fast HMR
• 📘 TypeScript ready
• 🎨 Optional Tailwind CSS v4
• 🔧 Biome or ESLint + Prettier

npx create-hauis-app@latest my-app --framework react --meta next

• 📁 App Router
• 🚀 Server Components
• 🎨 Tailwind CSS v4 support
• 📘 TypeScript by default
• 🔧 Optimized for production

npx create-hauis-app@latest my-app --framework react --meta remix

• 🚀 Nested routing
• 📊 Built-in data loading
• 🎯 Progressive enhancement
• 🔧 Full-stack TypeScript

Vue Ecosystem

npx create-hauis-app@latest my-app --framework vue

• ⚡ Composition API
• 📘 TypeScript support
• 🏪 Pinia state management
• 🛣️ Vue Router

npx create-hauis-app@latest my-app --framework vue --meta nuxt

• 🚀 Nitro server engine
• 📁 File-based routing
• 🔌 Auto-imports
• 🎯 SEO optimized

Other Frameworks

npx create-hauis-app@latest my-app --framework svelte --meta sveltekit

• 🚀 Server-side rendering
• 📁 File-based routing
• 📘 TypeScript support
• ⚡ Vite powered

npx create-hauis-app@latest my-app --framework astro

• 🏝️ Island architecture
• 🚀 Zero JS by default
• 📝 MDX support ready
• 🎨 Tailwind CSS v4 compatible

🎨 Tailwind CSS v4

When Tailwind CSS is selected, you get a modern v4 setup:

@import 'tailwindcss';

@theme {
  /* Modern design tokens */
  --font-sans: system-ui, -apple-system, ...;
  --color-primary-500: #3b82f6;
  --spacing-lg: 1.5rem;
  --radius-md: 0.375rem;
}

/* Custom utilities */
@layer utilities {
  .gradient-text {
    @apply bg-gradient-to-r from-primary-600 to-accent;
    @apply bg-clip-text text-transparent;
  }
}

Features:

• ✨ CSS variables for complete customization
• 🌙 Automatic dark mode support
• 📐 Modern @theme directive
• 🚀 No tailwind.config.js needed
• 🎯 Optimized PostCSS setup

📦 Package Managers

Full support for all major package managers:

# npm (default)
npx create-hauis-app@latest my-app --pm npm

# pnpm (recommended)
npx create-hauis-app@latest my-app --pm pnpm

# Yarn
npx create-hauis-app@latest my-app --pm yarn

# Bun
npx create-hauis-app@latest my-app --pm bun

🔧 Code Quality Tools

Biome (Recommended)

Fast, all-in-one toolchain:

npx create-hauis-app@latest my-app --quality biome

• ⚡ 10-20x faster than ESLint + Prettier
• 🔧 Linter and formatter in one
• 📘 Great TypeScript support
• 🎯 Minimal configuration

ESLint + Prettier

Traditional setup:

npx create-hauis-app@latest my-app --quality eslint-prettier

• 🔍 Comprehensive linting rules
• 🎨 Prettier formatting
• 🔌 Framework-specific plugins
• 🛠️ Highly customizable

🪝 Git Hooks with Lefthook

Automated code quality checks:

npx create-hauis-app@latest my-app --git-hooks

Includes:

• 🔍 Pre-commit: Lint and format staged files
• 📝 Commit-msg: Enforce conventional commits
• 🔄 Post-merge: Auto-install dependencies

📁 Generated Project Structure

my-app/
├── src/                    # Source files
├── public/                 # Static assets
├── package.json           # Dependencies and scripts
├── tsconfig.json          # TypeScript config (if selected)
├── globals.css            # Tailwind CSS v4 (if selected)
├── postcss.config.js      # PostCSS config
├── biome.json             # Biome config (or ESLint/Prettier)
├── lefthook.yml           # Git hooks (if selected)
└── .gitignore            # Git ignore rules

🛠️ Available Scripts

Based on your selections:

# Development
npm run dev           # Start dev server

# Build
npm run build         # Build for production

# Code Quality (Biome)
npm run check         # Lint and check formatting
npm run check:format  # Fix all issues

# Code Quality (ESLint + Prettier)
npm run lint          # Run ESLint
npm run format        # Format with Prettier

# Type Checking
npm run typecheck     # Run TypeScript compiler

📚 Examples

Next.js Enterprise Setup

npx create-hauis-app@latest my-enterprise-app \
  --preset enterprise-next

Vue 3 with Nuxt

npx create-hauis-app@latest my-vue-app \
  --framework vue \
  --meta nuxt \
  --typescript \
  --tailwind

Minimal Astro Blog

npx create-hauis-app@latest my-blog \
  --framework astro \
  --typescript \
  --tailwind \
  --pm bun

React SPA with Vite

npx create-hauis-app@latest my-spa \
  --framework react \
  --typescript \
  --quality eslint-prettier

🤝 Contributing

We welcome contributions! See CONTRIBUTING.md for details.

# Install dependencies
pnpm install

# Run in development
pnpm dev

# Run tests
pnpm test

📄 License

MIT © [Jacob H]

🙏 Acknowledgments

Built with inspiration from:

• create-react-app
• create-next-app
• create-vite
• create-t3-app