Frameworks & Templates
Explore the wide range of frameworks supported by Bolt.new, learn to use templates, and understand framework-specific tips for the best results.
Supported Frameworks
Bolt.new supports all major JavaScript/TypeScript frameworks. Simply mention the framework in your prompt and Bolt will scaffold the project accordingly.
React
The most popular UI library. Excellent support in Bolt with hooks, context, routing (React Router), and component libraries like Material UI, Chakra UI, and shadcn/ui.
Next.js
React framework with server-side rendering, API routes, file-based routing, and built-in optimization. Great for SEO-focused and full-stack apps.
Vue 3
Progressive framework with Composition API, Vue Router, and Pinia for state management. Excellent for both simple and complex applications.
Svelte / SvelteKit
Compiler-based framework with minimal boilerplate. SvelteKit adds routing, SSR, and API endpoints. Known for small bundle sizes and performance.
Additional Frameworks
| Framework | Type | Best For |
|---|---|---|
| Nuxt | Vue meta-framework | Server-rendered Vue apps, SEO |
| Angular | Full framework | Enterprise apps, TypeScript-first |
| Astro | Static site builder | Content sites, blogs, docs |
| Express | Backend framework | REST APIs, middleware, servers |
| Remix | Full-stack React | Web standards, progressive enhancement |
Template Gallery
Bolt.new offers a template gallery with pre-built starting points:
- Blank templates: Framework scaffolds with minimal setup (React, Vue, Svelte, etc.)
- Starter apps: Pre-built applications like to-do lists, dashboards, and landing pages
- Full-stack templates: Apps with database and authentication already configured
Templates vs From Scratch
| Approach | Pros | Cons |
|---|---|---|
| From template | Faster start, proven structure, pre-configured tooling | May include features you don't need, opinionated setup |
| From scratch | Full control, only what you need, learn the setup | Slower start, may miss best practices |
Framework-Specific Tips
React / Next.js
- Specify whether you want client or server components in Next.js
- Mention the component library you prefer (Material UI, Tailwind, shadcn/ui)
- Request TypeScript explicitly if type safety matters to you
Vue / Nuxt
- Specify Composition API vs Options API preference
- Mention Pinia for state management when needed
- For Nuxt, specify if you need SSR or static generation
Svelte / SvelteKit
- Svelte's simplicity means prompts can be shorter
- For SvelteKit, mention if you need server-side load functions
- Svelte stores are simpler than Redux/Pinia — let the AI use them naturally
Adding Libraries and Packages
You can add npm packages at any time through conversation:
# Example prompts for adding packages:
"Add Tailwind CSS for styling"
"Install and configure Recharts for data visualization"
"Add react-hook-form for form handling with validation"
"Install date-fns for date formatting"
"Add Framer Motion for animations"Bolt will install the package, configure it, and use it in the appropriate files — all automatically.
💡 Try It: Explore Different Frameworks
Build the same simple app (a counter or a to-do list) in two different frameworks (e.g., React and Svelte). Compare the generated code structure, bundle size, and development experience.