create-heroui-app

v1.0.0

Published

7 months ago

A scaffolding tool for creating Next.js applications with HeroUI

0High
0Medium
0Low

saleandwin

nextjs heroui react typescript tailwindcss scaffold template

Create HeroUI App

A scaffolding tool for creating Next.js applications with HeroUI, TypeScript, and Tailwind CSS.

Features

⚡️ Next.js 15 with App Router
🎨 HeroUI - Beautiful React components
🔷 TypeScript - Type safety out of the box
🎯 Tailwind CSS - Utility-first CSS framework
📦 pnpm - Fast, disk space efficient package manager
☁️ Cloudflare - Ready for deployment with OpenNext
🚀 Turbopack - Fast development server

Quick Start

# Using npx
npx create-heroui-app my-app

# Using pnpm
pnpm create heroui-app my-app

# Using yarn
yarn create heroui-app my-app

Usage

create-heroui-app [project-name] [options]

Options

-t, --template <template> - Template to use (default: "default")
--skip-install - Skip installing dependencies
-h, --help - Display help information
-V, --version - Display version number

Examples

# Create a new app with default template
create-heroui-app my-heroui-app

# Create a new app and skip dependency installation
create-heroui-app my-heroui-app --skip-install

# Create a new app with a specific template (when more templates are available)
create-heroui-app my-heroui-app --template advanced

What's Included

The generated project includes:

Dependencies

Next.js 15 - React framework with App Router
React 19 - Latest React version
HeroUI - Modern React UI library
Heroicons - Beautiful hand-crafted SVG icons
TypeScript - Static type checking
Tailwind CSS - Utility-first CSS framework

Development Tools

ESLint - Code linting
PostCSS - CSS processing
Autoprefixer - CSS vendor prefixing

Deployment Ready

OpenNext Cloudflare - Deploy to Cloudflare Pages/Workers
Wrangler - Cloudflare development tools

Project Structure

my-heroui-app/
├── public/
│   ├── fonts/
│   └── *.svg
├── src/
│   └── app/
│       ├── globals.css
│       ├── layout.tsx
│       ├── page.tsx
│       └── providers.tsx
├── next.config.ts
├── tailwind.config.js
├── tsconfig.json
├── package.json
└── wrangler.jsonc

Getting Started After Creation

Navigate to your project:
```
cd my-heroui-app
```
Install dependencies (if skipped):
```
pnpm install
```
Start the development server:
```
pnpm dev
```
Open http://localhost:3000 in your browser.

Available Scripts

pnpm dev - Start development server with Turbopack
pnpm build - Build for production
pnpm start - Start production server
pnpm lint - Run ESLint
pnpm deploy - Deploy to Cloudflare
pnpm preview - Preview Cloudflare deployment locally

Customization

HeroUI Theme

The project comes with HeroUI pre-configured. You can customize the theme in tailwind.config.js:

const { heroui } = require("@heroui/theme");

module.exports = {
  // ... other config
  plugins: [
    heroui({
      themes: {
        light: {
          colors: {
            primary: "#your-color"
          }
        }
      }
    })
  ]
}

Adding Components

HeroUI components are ready to use:

import { Button, Card, CardBody } from "@heroui/react";

export default function MyComponent() {
  return (
    <Card>
      <CardBody>
        <Button color="primary">Click me</Button>
      </CardBody>
    </Card>
  );
}

Deployment

Cloudflare Pages/Workers

The project is pre-configured for Cloudflare deployment:

pnpm deploy

Other Platforms

You can also deploy to other platforms like Vercel, Netlify, or any Node.js hosting service.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see the LICENSE file for details.