Skip to main content
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

LayerChoice
FrameworkVite 5 + React 18 + TypeScript (SPA)
StylingTailwind CSS v3 + tailwindcss-animate + next-themes
UI kitAll 49 shadcn/ui primitives, pre-installed at src/components/ui/
Routingreact-router-dom v6
Server data@tanstack/react-query v5
FormsReact Hook Form + Zod (@hookform/resolvers)
Iconslucide-react
Datesdate-fns
ChartsRecharts
Notificationssonner toasts (the agent uses these for user-facing success/error)
Extrascmdk, 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.