Compose a setup prompt for a new Next.js project. Base instructions are always included.
Base — always included
Tailwind v4
shadcn/ui (all components)
Framer Motion
Geist font
Core utilities
Extra Packages
VSCode
output
Setup this Next.js project with the following base stack. Execute each step in order:
## 1. Tailwind CSS v4
```bash
npm install tailwindcss @tailwindcss/postcss
```
Add to `postcss.config.mjs`:
```js
export default { plugins: { '@tailwindcss/postcss': {} } };
```
In `src/app/globals.css`, use `@import "tailwindcss"` and define theme tokens under `@theme { ... }`. No `tailwind.config.ts` needed.
## 2. shadcn/ui — all components
```bash
npx shadcn@latest init --defaults
npx shadcn@latest add --all
```
Config lives in `components.json`. Generated primitives land in `src/components/ui/` — do NOT hand-edit these files, re-run shadcn to update.
## 3. Framer Motion
```bash
npm install framer-motion
```
Use `<motion.div>` for declarative animations. Use the `layout` prop for automatic layout transition animations. Use `AnimatePresence` for exit animations.
## 4. Geist Font (by Vercel)
```bash
npm install geist
```
In `src/app/layout.tsx`:
```ts
import { GeistSans } from 'geist/font/sans';
import { GeistMono } from 'geist/font/mono';
// Apply: <html className={`${GeistSans.variable} ${GeistMono.variable}`}>
// In globals.css: --font-sans: var(--geist-sans); --font-mono: var(--geist-mono);
```
## 5. Core utility packages
```bash
npm install clsx tailwind-merge class-variance-authority lucide-react
```
Set up `src/lib/utils.ts`:
```ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }
```
- `clsx` + `tailwind-merge` → conflict-free class merging via `cn()`
- `class-variance-authority` → component variants with `cva()`
- `lucide-react` → tree-shakeable icon library
## VSCode — Format on Save
Create or update `.vscode/settings.json`:
```json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}
```