> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibely.sh/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# What's in the box

> The stack and starter setup every Vibely web app ships with.

Every web app starts from a working Vite + React + Tailwind project. You don't see a blank slate — the moment you prompt, there's already a dev server (Vite on port 8080) running with a sensible stack underneath.

This page is the inventory of what the agent scaffolds, so you know what you can take for granted. Vibely also keeps a small curated gallery (`/code/templates`) of multi-page starts — landing page, SaaS dashboard, AI chat, e-commerce, portfolio, blog — that you can clone into a fresh project instead of starting from a single-screen scaffold.

## The stack

| Layer         | Choice                                                                  |
| ------------- | ----------------------------------------------------------------------- |
| Framework     | Vite 5 + React 18 + TypeScript (SPA)                                    |
| Styling       | Tailwind CSS v3 + `tailwindcss-animate` + `next-themes`                 |
| UI kit        | All 49 shadcn/ui primitives, pre-installed at `src/components/ui/`      |
| Routing       | `react-router-dom` v6                                                   |
| Server data   | `@tanstack/react-query` v5                                              |
| Forms         | React Hook Form + Zod (`@hookform/resolvers`)                           |
| Icons         | `lucide-react`                                                          |
| Dates         | `date-fns`                                                              |
| Charts        | Recharts                                                                |
| Notifications | `sonner` toasts (the agent uses these for user-facing success/error)    |
| Extras        | `cmdk`, `embla-carousel-react`, `vaul`, `input-otp`, `react-day-picker` |

This isn't a soft default — every project ships with these installed. You can swap any of them by asking ("rewrite routing to use TanStack Router"), but most people don't. The authoritative dep list is the project's `package.json` (the agent treats it as source-of-truth before installing anything).

## What lands automatically

* `index.html → src/main.tsx → src/App.tsx` entry chain with one starter route
* A root layout with providers wired up (Query client, Router, `next-themes`)
* All 49 shadcn/ui primitives ready to import from `@/components/ui/*` (Button, Input, Dialog, Card, …) — never run `npx shadcn add`
* Tailwind v3 + HSL semantic tokens in `src/index.css` (`text-foreground`, `bg-background`, `bg-primary`, …) — the agent never uses raw `text-white` / hex literals
* TypeScript, `cn()` helper at `src/lib/utils.ts`, `@/` aliased to `./src/`

## What gets added on demand

The agent installs anything it needs to build what you asked for. Common additions:

* **Backend** — `@supabase/supabase-js` whenever you mention auth, database, or storage
* **Payments** — `stripe` or `razorpay` for checkout flows
* **Email** — `resend` for transactional email
* **Specialised UI** — `@radix-ui/react-*` extras, drag-and-drop kits, table libraries, rich-text editors

You don't manage this list. Ask for a feature and the dependencies show up.

## Customising the stack

The template is a starting point, not a contract. Anything in it can be replaced:

* **Different router?** "Rewrite to use `@tanstack/router`."
* **SSR instead of SPA?** "Convert to Next.js App Router." (Note: this changes the deploy story too — the default Vibely host expects a static SPA build.)
* **Different UI kit?** "Remove shadcn and use Mantine instead."

After turn 1, the template is just your codebase — refactor it like you would any other project.

## Why pre-installed matters

Three things you get for free:

1. **Preview-before-prompt.** A live preview URL appears in seconds, not after a long install step.
2. **Instant hot reload.** Save a file, see the change. No `npm install` between you and your edit.
3. **Smaller, faster prompts.** The agent doesn't waste tokens regenerating boilerplate — it writes only the parts that vary, so each turn lands faster.