Getting Started With NextJs and Shadcn on Cloudflare, with Hono and D1

This is a starting kit created with wrangler init:

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./nameless-ocean-1ab9
│
├ What would you like to start with?
│ category Framework Starter
│
├ Which development framework do you want to use?
│ framework Next.js
│
├ Continue with Next.js via `npx create-next-app@15.4.6 nameless-ocean-1ab9`
│

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /home/adiian/projects/aapps/starterkit/nameless-ocean-1ab9.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @tailwindcss/postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 332 packages, and audited 333 packages in 59s

136 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix --force

Run `npm audit` for details.
Success! Created nameless-ocean-1ab9 at /home/adiian/projects/aapps/starterkit/nameless-ocean-1ab9

A new version of `create-next-app` is available!
You can update by running: npm i -g create-next-app

├ Copying template files
│ files copied to project directory
│
╰ Application created 

╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers
│ installed via `npm install wrangler --save-dev`
│
├ Adding the Cloudflare adapter
│ installed @opennextjs/cloudflare)}
│
├ Updating `next.config.ts`
│ updated `next.config.ts`
│
├ Adding Wrangler files to the .gitignore file
│ updated .gitignore file
│
├ Updating `package.json` scripts
│ updated `package.json`
│
├ Generating types for your application
│ generated to `./cloudflare-env.d.ts` via `npm run cf-typegen`
│
├ Installing @types/node
│ installed via npm
│
├ You're in an existing git repository. Do you want to use git for version control?
│ yes git
│
╰ Application configured 

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `npm run deploy`
│
╰ Done 

────────────────────────────────────────────────────────────
🎉  SUCCESS  Application created successfully!

💻 Continue Developing
Change directories: cd nameless-ocean-1ab9
Start dev server: npm run dev
Deploy: npm run deploy

📖 Explore Documentation
https://developers.cloudflare.com/workers

🐛 Report an Issue
https://github.com/cloudflare/workers-sdk/issues/new/choose

💬 Join our Community
https://discord.cloudflare.com

Then install shadcn:

npx shadcn@latest init

When you run npx shadcn@latest init, here's what happens:

• npx downloads the package temporarily - It fetches shadcn from npm to a cache
• Runs it immediately - Executes the CLI command
• Doesn't permanently install it - The package isn't added to your node_modules or package.json, but shadcn will install a bunch of other packages:

    "dependencies": {
        "@hookform/resolvers": "^5.2.2",
        ...
        "@radix-ui/react-label": "^2.1.7",
        "@radix-ui/react-slot": "^1.2.3",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "lucide-react": "^0.546.0",
        ...
        "react-hook-form": "^7.65.0",
        "tailwind-merge": "^3.3.1",
        "zod": "^4.1.12"
    },
    "devDependencies": {
        ...
        "tw-animate-css": "^1.4.0",
        ...
    }

Then you:

npx shadcn@latest add button card input form label

When you ran the init and add commands shadcn will install of those packages:

Installed by shadcn init:

• class-variance-authority - Manages component variants (size, color, etc.)
• clsx - Combines CSS class names conditionally
• tailwind-merge - Intelligently merges Tailwind classes (prevents conflicts)
• tw-animate-css - Animation utilities for Tailwind v4 (replaces old tailwindcss-animate)

Installed by shadcn add <component>:

When you added button, label, input:

• @radix-ui/react-slot - Used by Button component for composition
• @radix-ui/react-label - Accessible label primitive
• lucide-react - Icon library (many components use icons)

When you added form:

• react-hook-form - Powerful form state management
• @hookform/resolvers - Connects validation libraries to react-hook-form
• zod - TypeScript-first schema validation

What shadcn Does Smart

shadcn only installs what you actually need:

• Add a button? → Gets Radix Slot
• Add a form? → Gets react-hook-form + zod
• Add a select? → Gets more Radix primitives

This keeps your bundle size lean - you're not installing form libraries if you only need buttons. You don't need to manually install anything else unless you want additional components.