Create UI App CLI

A powerful CLI tool that generates React applications with pre-configured UI libraries and stunning templates. Skip the boilerplate and start building beautiful UIs instantly. It is published on NPM and can be installed globally on any machine terminal.

🌟 Features

• Language Support

  • JavaScript (React and Next.js)
  • TypeScript (React and Next.js with TypeScript)

• Six Popular UI Libraries

  • Chakra UI (chakraflow)
  • Tailwind CSS + ShadCN (shadeflow)
  • Tailwind CSS + DaisyUI (daisyworld)
  • Ant Design (antverse)
  • Bootstrap (bootflow)
  • PrimeReact (primeland)

• Zero Configuration

  • Pre-configured themes
  • Ready-to-use templates
  • Automatic dependency installation
  • Built with Vite or Next.js for lightning-fast development

📦 NPM Package

View on NPM

⚡ Quick Use (No git cloning required)

Just go to your editor(vs code) terminal and use these commands

# Install globally
npm install -g create-ui-app-cli

# Create a new project
create-ui-app my-app

📦 Installation

# Clone the repository
git clone https://github.com/shashwath1278/UIAlchemy.git

# Install dependencies
cd UIAlchemy
npm install

# Link the CLI for global usage
npm link

🚀 Quick Start

# Create a new project (interactive mode)
create-ui-app my-app

# Or specify all options directly
create-ui-app my-app chakraflow javascript next

# Navigate to project
cd my-app

# Start development server
npm run dev

📁 Project Structure

create-ui-app-cli/
├── src/               # CLI source code
│   └── index.js      # Main CLI logic
├── presets/          # UI library templates
│   ├── chakraflow.jsx
│   ├── shadeflow.jsx
│   ├── daisyworld.jsx
│   ├── antverse.jsx
│   ├── bootflow.jsx
│   └── primeland.jsx
├── scripts/          # Build scripts
│   ├── fix-shebang.js
│   └── copy-presets.js
└── dist/             # Built files
    ├── cli.js
    └── presets/      # Compiled templates

Generated Project Structure:
my-app/
├── src/
│   ├── App.{jsx,tsx}      # Main component with UI library setup
│   ├── main.{jsx,tsx}     # Entry point
│   ├── theme.{js,ts}      # Theme configuration (if applicable)
│   └── index.css          # Global styles
├── public/
├── package.json
├── vite.config.{js,ts}
└── tsconfig.json          # TypeScript configuration (if TypeScript selected)

🎨 Available Presets

UI Stack	Components & Features	Best For	Configuration
chakraflow	• Accessible components • Customizable theme • Color mode support • Responsive styles • Layout primitives	• Accessibility-focused apps • Component-driven projects • Modern, clean interfaces • Rapid development cycles	create-ui-app my-app chakraflow
shadeflow	• Unstyled, accessible components • Radix UI primitives • Tailwind integration • Copy-paste usage • Fully customizable	• Design system integration • Unique brand identity • Component-first development • Design customization needed	create-ui-app my-app shadeflow
daisyworld	• Tailwind CSS with components • Theme customization • Responsive design • Beautiful UI elements • Lightweight setup	• Rapid prototyping • Beautiful UI without effort • Projects needing simplicity • Quick development cycles	create-ui-app my-app daisyworld
antverse	• Enterprise-grade components • Data visualization • Form validation • Layout systems • Internationalization	• Admin panels • Data-rich dashboards • Enterprise apps • Complex form systems	create-ui-app my-app antverse
bootflow	• Responsive grid system • Ready-made components • SCSS variables • Utility classes • Cross-browser compatibility	• Traditional web projects • Teams familiar with Bootstrap • Rapid prototyping • Content-heavy sites	create-ui-app my-app bootflow
primeland	• Rich component library • DataTable with features • Theme designer • Accessibility support • Built-in icons	• Complex data displays • Enterprise applications • Form-heavy interfaces • Drag-and-drop features	create-ui-app my-app primeland

Using ShadCN UI in your project

When you create a project with the shadeflow preset, the CLI automatically sets up the infrastructure needed for ShadCN UI:

1. Use the pre-installed Button component

A Button component is automatically created in your project at src/components/ui/button.tsx. You can import and use it like this:

import { Button } from "./components/ui/button";

function MyComponent() {
  return (
    <div>
      <Button>Default Button</Button>
      <Button variant="destructive">Destructive Button</Button>
      <Button variant="outline">Outline Button</Button>
      <Button variant="secondary">Secondary Button</Button>
      <Button variant="ghost">Ghost Button</Button>
      <Button variant="link">Link Button</Button>
    </div>
  );
}

2. Add more ShadCN components

The project has been set up with a convenience script to add more ShadCN components:

# Add a single component
npm run shadcn@latest card

# Add multiple components
npm run shadcn@latest dialog dropdown-menu toast

# Add a component with its dependencies automatically
npm run shadcn@latest calendar

This will add the components to your src/components/ui directory, ready to use.

3. Customize components

One of the advantages of ShadCN UI is that all component source code is in your project. To customize a component:

1. Navigate to the component file (e.g., src/components/ui/button.tsx)
2. Modify the component code to suit your needs
3. The changes will apply everywhere the component is used

4. Theme customization

ShadCN UI uses CSS variables for theming. You can customize the theme by modifying:

• For React: src/index.css
• For Next.js: src/app/globals.css

Look for the :root and .dark selectors to modify colors, border radius, etc.

5. Learn more about ShadCN UI

For more information, visit ui.shadcn.com

🔧 Development

# Clone the repository
git clone https://github.com/shashwath1278/UIAlchemy.git

# Install dependencies
npm install

# Build the CLI
npm run build

# Link for local testing
npm link

# Run tests
npm test

📚 Documentation Links

• Chakra UI
• Tailwind CSS
• ShadCN
• DaisyUI
• Ant Design
• Bootstrap
• PrimeReact

📄 License

MIT © shashwath1278

🤝 Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a pull request