# Dropnal

Frontend template. Vite + React + TypeScript + Tailwind CSS v4 + shadcn/ui + MagicUI.

---

## Stack

| | |
|---|---|
| Vite 7 | Build tool |
| React 19 | UI framework |
| TypeScript 5 | Types |
| Tailwind CSS v4 | Styling — CSS-first, no config file |
| shadcn/ui | Component library (base-nova style, owned code) |
| MagicUI | Animated components (owned code) |
| Geist Variable | Default font |

---

## Start a new project from this template

```powershell
Copy-Item "B:\Studio\Tools\Dropnal" "B:\Studio\Tools\MyNewSite" -Recurse -Exclude node_modules,.git
cd "B:\Studio\Tools\MyNewSite"
npm install
npm run dev
```

Then open `src/App.tsx` and start building.
Also update `"name"` in `package.json` to match your project.

---

## What to do after copying

1. **Replace `src/App.tsx`** — that's your root. Delete the placeholder, build your layout.
2. **Add shadcn components as needed:**
   ```bash
   npx shadcn@latest add button
   npx shadcn@latest add dialog
   npx shadcn@latest add dropdown-menu
   npx shadcn@latest add sheet
   npx shadcn@latest add form
   npx shadcn@latest add table
   ```
3. **Add MagicUI animated components as needed:**
   ```bash
   npx shadcn@latest add "https://magicui.design/r/shimmer-button"
   npx shadcn@latest add "https://magicui.design/r/animated-gradient-text"
   npx shadcn@latest add "https://magicui.design/r/marquee"
   npx shadcn@latest add "https://magicui.design/r/bento-grid"
   npx shadcn@latest add "https://magicui.design/r/number-ticker"
   npx shadcn@latest add "https://magicui.design/r/blur-fade"
   ```
   Browse all MagicUI components: https://magicui.design/docs

4. **Customize the theme** — edit CSS variables in `src/index.css` under `:root` and `.dark`.
   Colors are in OKLCH format. Change `--primary`, `--background`, `--radius`, etc.

5. **Change the font** — swap `@fontsource-variable/geist` for any other variable font,
   update the `@import` in `index.css`, and update `--font-sans`.

---

## Commands

```bash
npm run dev       # dev server → localhost:5173
npm run build     # production build
npm run preview   # preview production build
npm run lint      # ESLint
```

---

## For AI assistants

Read `CLAUDE.md` first. It has the full stack breakdown, known quirks,
how to add components correctly, and what to watch for in future upgrades.