create-uikit

🚀 Instantly scaffold beautiful React applications with VoilaJS UIKit - a comprehensive component library featuring 6 professional themes, 35+ components, and cross-platform support.

Get a production-ready TypeScript + React + Tailwind CSS project in seconds, complete with theme switching, responsive design, and enterprise-grade components.

Quick Start

Method 1: npx (Recommended)

npx create-uikit

Method 2: npm

npm create uikit

Note: Method 1 supports all --flags (like --jsx, --help). Method 2 has limited flag support due to npm restrictions.

Usage

Basic Usage

# Create with default name (voilajs-uikit-app)
npx create-uikit

# Create with custom name
npx create-uikit my-awesome-app

# Create with nested path (perfect for VoilaJS apps)
npx create-uikit apps/auth/frontend

Options

# Use JSX instead of TypeScript
npx create-uikit my-app --jsx

# Combine path and JSX option
npx create-uikit apps/admin/panel --jsx

# Get help
npx create-uikit --help

Path-Based Naming

The CLI automatically converts folder paths to valid npm package names:

| Input Path | Generated Package Name | | -------------------------- | -------------------------- | | my-app | my-app | | apps/auth/core | apps-auth-core | | auth/dashboard | auth-dashboard | | /admin/panel | admin-panel | | user-management/settings | user-management-settings |

File Types

TypeScript (Default)

• Modern development with type safety
• Full TypeScript configuration included
• Perfect for large applications

JSX Option

• Lightweight JavaScript with JSX
• No TypeScript overhead
• Great for prototyping and simple apps

What You Get

🏗️ Complete Project Structure

my-app/
├── src/
│   ├── App.tsx (or .jsx)
│   ├── main.tsx (or .jsx)
│   └── index.css
├── package.json
├── vite.config.ts (or .js)
├── index.html
└── .gitignore

📦 Pre-configured Stack

• Vite - Lightning fast development
• React 18 - Latest React features
• @voilajsx/uikit - Complete component library
• Tailwind CSS v4 - Modern styling
• Lucide React - Beautiful icons

🎨 Beautiful Landing Page

• Showcases all 6 UIKit themes
• Interactive theme selector
• Dark/light mode toggle
• Responsive design
• Ready to customize

Examples

VoilaJS Multi-App Setup

# Create main app
npx create-uikit apps/main

# Create authentication app
npx create-uikit apps/auth --jsx

# Create admin dashboard
npx create-uikit apps/admin/dashboard

# Create user management
npx create-uikit apps/user-management/core

Standalone Applications

# Personal portfolio
npx create-uikit portfolio

# Company website
npx create-uikit company-site --jsx

# Documentation site
npx create-uikit docs/website

Development Workflow

After creating your project:

cd my-app
npm run dev

Visit http://localhost:5173 to see your application running with:

• ✅ Hot reload enabled
• ✅ Theme selector working
• ✅ All UIKit components available
• ✅ TypeScript (or JSX) ready

Integration with VoilaJS

This CLI is perfect for creating frontend apps within the VoilaJS framework:

# In your VoilaJS project root
npx create-uikit apps/auth/frontend
npx create-uikit apps/dashboard/frontend --jsx

The generated apps work seamlessly with VoilaJS backend APIs and follow the framework's conventions.

Available Commands

| Command | Description | | ----------------- | ------------------------ | | npm run dev | Start development server | | npm run build | Build for production | | npm run preview | Preview production build |

Features

🎨 6 Professional Themes

• Default - Ocean blue professional
• Aurora - Purple-green gradients
• Metro - Clean gray-blue design
• Neon - Cyberpunk magenta-cyan
• Ruby - Sophisticated red-gold
• Studio - Designer grays with amber

🧱 35+ Components

All shadcn/ui components enhanced with theming:

• Form controls (Button, Input, Select, etc.)
• Layout components (Card, Container, etc.)
• Navigation (Dropdown, Menu, etc.)
• Data display (Table, Badge, etc.)

📱 Cross-Platform Ready

• Web applications
• Desktop (Tauri)
• Mobile (Expo)

Advanced Usage

Custom Theme Selection

# The generated app includes a theme selector
# Users can switch between all 6 themes instantly

TypeScript Configuration

# Strict TypeScript setup included
# Perfect for large applications

Tailwind CSS v4

# Latest Tailwind CSS version
# Simplified configuration
# Built-in design tokens

Troubleshooting

Installation Issues

# If npm install fails, try:
npm install --legacy-peer-deps

Alternative Installation Method

# You can also use npm create (less reliable with flags):
npm create uikit my-app

# For JSX with npm create, add jsx as a word:
npm create uikit my-app jsx

Path Issues on Windows

# Use forward slashes even on Windows:
npx create-uikit apps/auth/core

Existing Directory

# CLI will warn if directory exists
# Choose a different path or remove existing directory

Why npx?

We recommend npx create-uikit over npm create uikit because:

• ✅ Full flag support (--jsx, --help work properly)
• ✅ Always latest version (npx downloads latest automatically)
• ✅ No conflicts with npm's built-in argument handling
• ✅ Standard practice (most modern CLIs use npx)

Support

• 📖 UIKit Documentation
• 🐛 Report Issues
• 💬 Community Discord

License

MIT © VoilaJSX

Happy coding with VoilaJS UIKit! 🚀