Create Template HTML/CSS 🎨⚛️

A powerful CLI library to create HTML+CSS and React component templates. Generate styled UI components in seconds!

![npm version](https://www.npmjs.com/package/create-template-html-css)
![npm downloads](https://www.npmjs.com/package/create-template-html-css)

``

bash

npm install -g create-template-html-css





📋 Table of Contents



- Features

- Installation

- Usage

  - Create New Project

  - Insert into Existing Page

- Available Templates

- Examples

- Project Structure

- Use Cases

- Technologies

- Documentation

- Contributing

- License



✨ Features



- 🚀 Fast Creation - Create UI components in seconds

- ⚛️ React Support - Generate React components with JSX (v2.1.0+)

- 🎨 Modern Design - All templates are designed with high standards

- 📱 Responsive - All components adapt to mobile devices

- 🌈 Stunning Gradients - Colorful and attractive designs

- ⚡ Animations - Smooth and professional effects

- 🔧 Customizable - Easy to edit and modify the code

- 📦 46 HTML Templates + 6 React Components - Button, Card, Form, Navigation, Modal, Footer, Hero, Slider, Table, Login, Register, Skeleton, Spinner, Animated Cards, Typing Effect, Fade Gallery, Grid Layouts, Masonry Grid, Dashboard, Flexbox Layouts, Todo List, Counter, Accordion, Tabs, 16 Interactive Games

- 🎯 Two Modes - Create new projects or insert into existing HTML pages

- 🔒 Secure - Input validation and path protection

- 📚 Well Documented - Comprehensive guides and examples

- 🎪 DOM Manipulation Examples - Interactive components demonstrating JavaScript DOM manipulation techniques

- ✨ Prettier Formatting - All generated code is automatically formatted with Prettier (v1.6.2+)

- 📂 Organized Structure - CSS and JS files automatically organized in folders (v1.6.2+)

- 💾 Simple Backups - Clean backup naming without timestamps (v1.6.2+)

- 🎯 Customizable Components - Choose navigation items and form fields during creation (v1.7.0+)

- 🏗️ Modern Architecture - ES Modules for better performance and tree-shaking (v2.1.0+)

- 🧩 Modular CLI - Refactored command structure for better maintainability (v2.1.0+)

- ⚡ Vite Integration - React projects use Vite for fast development (v2.1.0+)



🆕 What's New in v2.1.0



$3

- React Components - Generate React components with JSX

- 6 React Components - Button, Card, Counter, Form, Modal, Todo List

- Two Modes:

  - Full Project - Complete React + Vite project with all dependencies

  - Component Only - Just JSX + CSS files for existing projects

- Vite Integration - Fast development with Vite build tool

- Modern Hooks - All components use React Hooks (useState, useEffect, etc.)

- TypeScript Ready - Easy to convert to TypeScript

- Full Project Setup - Includes package.json, vite.config.js, and project structure



Create Full React Project:

bash

Interactive mode

create-template create --react



With flags

create-template create --react -c button -n my-button

create-template create --react -c counter -n my-counter

create-template create --react -c todo-list -n my-todos



With custom colors

create-template create --react -c card -n my-card --color-scheme ocean





Add Component to Existing Project (Component Only Mode):

bash

Interactive mode (choose "Component only")

create-template create --react



With flags - adds component to current directory

create-template create --react --component-only -c button --color-scheme sunset

create-template create --react --component-only -c card --color-scheme ocean



Navigate to your project's components folder first

cd my-app/src/components

create-template create --react --component-only -c modal --color-scheme vibrant





Component Only Mode:

- Creates just

ComponentName/ComponentName.jsx and ComponentName/ComponentName.css



- Perfect for adding to existing React projects

- No package.json, no Vite config, no extra files

- Validates that component doesn't already exist

- Works with all color schemes

- Usage instructions displayed after creation



Available React Components:

- 🔘 Button - Customizable button with variants (primary, secondary, success, danger) and sizes

- 🎴 Card - Display content in an elegant card with image support

- 🔢 Counter - Interactive counter with increment/decrement and limits

- 📝 Form - Flexible form with validation and multiple field types

- 🪟 Modal - Dialog modal component with overlay

- ✅ Todo List - Complete todo list with CRUD operations



🆕 What's New in v2.0.0



$3

Massive expansion with 12 new fully-functional games:



Puzzle & Strategy Games:

- 2048 - Addictive tile-merging puzzle with touch & keyboard controls, undo feature, and best score tracking

- Connect Four - Classic 4-in-a-row strategy game with AI opponent (3 difficulty levels), drop animations

- Simon Says - Memory pattern game with increasing difficulty, sound effects, and high score tracking



Arcade Classics:

- Breakout - Brick breaker with lives system, level progression, paddle/ball physics, mouse & keyboard controls

- Tetris - Full Tetris implementation with all 7 pieces, ghost preview, next piece display, level progression

- Flappy Bird - Tap-to-flap obstacle game with animated background, realistic physics, increasing difficulty

- Pong - Classic paddle game with AI opponent (4 difficulty levels), 2-player mode, realistic ball physics

- Whack-a-Mole - Fast-paced arcade game with difficulty levels, combo system, and high score tracking



Card & Casino Games:

- Blackjack - Full 21 card game with betting system, dealer AI, Hit/Stand/Double actions, 3:2 payout

- Slot Machine - 3-reel slots with 8 symbols, weighted payouts, jackpot x100, confetti celebration

- Dice Game - Race to 100 dice strategy game with AI opponent, roll/hold mechanics, animated dice



Skill Games:

- Rock-Paper-Scissors - Classic hand game vs AI with best-of series, winning streak tracking



All Games Feature:

- Complete game logic and state management

- Score/progress tracking with localStorage

- Responsive designs for mobile and desktop

- Smooth animations and visual feedback

- Professional UI with modern styling

- Touch and keyboard controls

- AI opponents with multiple difficulty levels



Usage:

bash

create-template create -c game-2048 -n 2048-game

create-template create -c breakout -n brick-breaker

create-template create -c tetris -n tetris-game

create-template create -c flappy-bird -n flappy

create-template create -c connect-four -n connect4

create-template create -c blackjack -n blackjack-game

create-template create -c slot-machine -n slots

create-template create -c dice-game -n dice

create-template create -c pong -n pong-game

create-template create -c whack-a-mole -n whack

create-template create -c simon-says -n simon

create-template create -c rock-paper-scissors -n rps





🆕 What's New in v1.9.0



$3

4 new fully-functional game templates with complete gameplay mechanics:



- Tic-Tac-Toe - Classic X and O game with score tracking, win detection, and auto-reset

- Memory Game - Card matching game with 3 difficulty levels (4×4, 4×5, 4×6), timer, and move counter

- Snake Game - Classic snake with keyboard/touch controls, increasing speed, and high score tracking

- Guess the Number - Number guessing game with hot/cold hints, multiple difficulty levels, and best score tracking



Features:

- Complete game logic and state management

- Score tracking with localStorage persistence

- Responsive designs for mobile and desktop

- Smooth animations and visual feedback

- Professional UI with gradients and modern styling

- Touch and keyboard controls



Usage:

bash

create-template create -c tic-tac-toe -n my-game

create-template create -c memory-game -n memory

create-template create -c snake-game -n snake

create-template create -c guess-number -n guess





🆕 What's New in v1.8.0



$3

Every component now supports automatic dark mode detection:

- Add

--dark-mode

 flag to enable dark mode styles

- Uses

prefers-color-scheme: dark

 media query

- Automatic color inversion in dark theme

- Perfect for modern user preferences



Example:

bash

create-template create -c button -n my-button --dark-mode





$3

Create components with custom colors instantly:

- Use

--primary-color

 flag for primary gradient color

- Use

--secondary-color

 flag for secondary color

- Automatic CSS variables generation

- RGB values automatically calculated



Custom Colors:

bash

create-template create -c button --primary-color "#FF5733"

create-template create -c card --primary-color "#667eea" --secondary-color "#764ba2"





$3

10 beautiful color schemes ready to use instantly:



| Scheme | Primary | Secondary | Use Case |

|--------|---------|-----------|----------|

| Vibrant | #FF6B6B | #4ECDC4 | Bold, energetic designs |

| Pastel | #FFB3BA | #FFDFBA | Soft, friendly interfaces |

| Ocean | #0066CC | #00CCFF | Professional, tech-focused |

| Sunset | #FF6B35 | #FFA500 | Warm, engaging UIs |

| Forest | #2D6A4F | #40916C | Natural, organic themes |

| Purple | #7209B7 | #B5179E | Elegant, premium feel |

| Minimal | #1A1A1A | #666666 | Clean, modern look |

| Coral | #FF6B9D | #FFA07A | Playful, warm designs |

| Teal | #008B8B | #20B2AA | Balanced, professional |

| Neon | #FF006E | #00D9FF | Bold, futuristic style |



Usage:

bash

Using the vibrant color scheme

create-template create -c button -n vibrant-button --color-scheme vibrant



Using the ocean color scheme

create-template create -c card -n ocean-card --color-scheme ocean



Interactive mode - select from presets

create-template create -c modal

Then choose "Use preset color schemes" option





View All Schemes: Run

create-template gallery

 to see live previews of all color schemes with swatches.



$3

New COMPONENTS-GALLERY.html showcase page:

- Browse all 30 components with descriptions

- Search and filter by category

- View all 10 color scheme presets with color swatches

- Copy CLI commands (both npx and local) with one click

- Dark mode support

- Print-friendly layout

- Mobile responsive design



Open gallery:

bash

After global install

create-template gallery



Or run directly with npx (first install package)

npx create-template-html-css

Then run:

create-template gallery





$3

- Updated README with all new features

- Improved CLI help text with examples

- Detailed component showcase with features



🆕 What's New in v1.7.0



$3

When creating a navigation component, you can now specify exactly which menu items you want:

- Enter comma-separated items: "Home, Blog, Shop, Contact"

- Automatically generates matching navigation links and page sections

- Default: "Home, About, Services, Portfolio, Contact"



$3

Create forms with exactly the fields you need:

- Standard Fields: Select from Name, Email, Phone, Subject, Message, Terms

- Custom Fields: Add any field with format

type:label



  - Examples:

text:Age, url:Website, date:Birth Date, number:Quantity



  - Supports all HTML5 input types: text, email, url, date, number, tel, password, color, etc.

  - Also supports: textarea, checkbox, select



$3

Choose exactly which variations you want for multi-style components:

- Button: Select from 6 button types (Primary, Secondary, Success, Danger, Outlined, Disabled)

- Card: Choose from 6 card variations (Modern, Premium, Blog, Minimal, User Profile, Interactive)

- Spinner: Pick from 5 spinner types (Circle, Dots, Pulse, Bars, Gradient)

- Option to select "All Variations" or choose specific ones



$3

Enhanced prompts guide you through component customization with clear instructions and validation.



🎨 What Was Added in v1.6.2



$3

All generated and inserted files are automatically formatted with Prettier for beautiful, professional-looking code.



$3

Components are automatically organized with CSS in

css/ folders and JavaScript in js/

 folders for better project organization.



$3

Backup files now use clean naming without timestamps:

file.html.backup





📦 Installation



$3

bash

npm install -g create-template-html-css





Then use the CLI anywhere:

bash

create-template create

create-template insert

create-template list

$3

bash

Clone the repository

git clone https://github.com/benshabbat/create-template-html-css.git

cd create-template-html-css



Install dependencies

npm install



Link globally (optional)

npm link





🚀 Usage



$3



Generate a standalone project with HTML, CSS, and JavaScript files:

bash

create-template create





Follow the interactive prompts:

1. Select Component Type - Choose from Button, Card, Form, Navigation, Modal, Footer, or Hero

2. Enter Component Name - Give your component a meaningful name

3. Customize Component (v1.7.0+):

   - Navigation: Choose menu items (e.g., "Home, Blog, Shop, Contact")

   - Form: Select standard fields and add custom fields (e.g., "text:Age, url:Website")

4. Include JavaScript - Decide if you want to include the script file



Example (Basic):

bash

$ create-template create

? Choose a component type: Button

? Enter a name for your component: my-awesome-button

? Include JavaScript file? (Y/n) Yes

✓ Template created successfully!

  Location: ./my-awesome-button/





Example (Navigation with Custom Items):

bash

$ create-template create

? Choose a component type: Navigation

? Enter a name for your component: my-nav

? Enter navigation items (comma-separated): Home, Blog, Shop, About Us, Contact

✓ Template created successfully!

  Location: ./my-nav/





Example (Form with Custom Fields):

bash

$ create-template create

? Choose a component type: Form

? Enter a name for your component: contact-form

? Select form fields to include: Name, Email, Message

? Add custom fields: text:Age, url:Website, date:Birth Date

✓ Template created successfully!

  Location: ./contact-form/





Result:



my-awesome-button/

├── index.html

├── css/

│   └── style.css

└── js/

    └── script.js





$3



Generate a complete React project with Vite:

bash

create-template create --react





Follow the interactive prompts:

1. Select Framework - Choose React

2. Select Component Type - Choose from Button, Card, Counter, Form, Modal, Todo List

3. Enter Component Name - Give your project a meaningful name

4. Choose Color Scheme (optional) - Select from preset schemes or enter custom colors



Example (Basic):

bash

$ create-template create --react

? What framework would you like to use? React (JSX + CSS)

? Choose a component type: Counter

? Enter a name for your component: my-counter

? Choose a color scheme: (Use arrow keys)

  ❯ Ocean - Professional blue gradient

    Sunset - Warm orange to yellow gradient

    Forest - Natural green gradient

✓ React component created successfully!

  Location: ./my-counter/





Example (With Flags):

bash

Create React button with custom colors

create-template create --react -c button -n my-button --primary-color "#FF5733"



Create React todo list with ocean color scheme

create-template create --react -c todo-list -n my-todos --color-scheme ocean



Create React modal

create-template create --react -c modal -n my-modal





Result:



my-counter/

├── src/

│   ├── components/

│   │   └── Counter/

│   │       ├── Counter.jsx

│   │       └── Counter.css

│   ├── App.jsx

│   └── index.js

├── index.html

├── package.json

├── vite.config.js

├── .gitignore

└── README.md





Running the React Project:

bash

cd my-counter

npm install

npm run dev





Open http://localhost:5173 in your browser.



Available React Components:

- 🔘 Button - Variants: primary, secondary, success, danger | Sizes: small, medium, large

- 🎴 Card - Image, title, description, footer support with hover effects

- 🔢 Counter - Increment/decrement with limits, step customization, reset button

- 📝 Form - Multiple field types, built-in validation, error messages

- 🪟 Modal - Customizable sizes (small, medium, large), overlay, close handlers

- ✅ Todo List - Add, toggle complete, delete tasks with statistics



$3



Add components directly to your existing HTML files without creating new projects:

bash

create-template insert





Follow the interactive prompts:

1. Enter HTML File Path - Specify the target HTML file

2. Select Component - Choose which component to insert

3. Choose CSS Integration - Inline, separate file, or skip

4. Choose JS Integration - Inline, separate file, or skip



Example:

bash

$ create-template insert

? Enter the path to your HTML file: index.html

? Which component would you like to insert? Button

? How should the CSS be added? Inline (inside