Browse and preview all 570+ Cursor templates for free. Copy any template, and every Cursor setup file on this page, with a BrowserMoon licence.
Get a licenceDesign help before you prompt Cursor
Ask Mon, the AI design assistant, which layout and template fit your app. Then paste it into Cursor.
What are Cursor templates?
Cursor templates are finished UI designs you add to your project and reference in Cursor, so Agent builds pages that match a real design instead of inventing styles. Save a template in your repo, mention it with @ in the chat, and pair it with a Cursor rules file for design so every request follows it.
How to use templates with Cursor
Copy a template into your project
Copy any template and save it as design/template.html in your repo.
Add the design rule
Save the Cursor rules template from this page as .cursor/rules/design.mdc. Cursor applies it to every UI file.
Reference it with @
In Agent, write what to build and add @design/template.html. Cursor reads the real file instead of guessing.
Review the diff
Check the changes before you accept them, and reject edits to files you did not ask about.
Cursor rules template for design
Cursor rules live in .cursor/rules and apply automatically. This one is scoped to UI files, so it only loads for design work and keeps your colours, spacing and components consistent.
Cursor design rules template
A Cursor rules file that applies to every chat and Agent run on UI files, so Cursor follows your template, colours and spacing instead of inventing styles.
.cursor/rules/design.mdc--- description: Design rules for all UI work. Apply when creating or editing pages, components or styles. globs: ["**/*.tsx", "**/*.jsx", "**/*.css", "**/*.html", "**/*.vue", "**/*.svelte"] alwaysApply: false --- # Design rules
Free logo, app icon and favicon for your Cursor app
Still showing the default icon? Pick a free SVG logo, then make a matching app icon, favicon, social share image and App Store screenshot with the free app launch kit. Drop the files in your Cursor project's public folder. If the rest of the app still looks default, read why AI apps look generic.
Why Cursor needs a design to follow
Cursor is excellent at code, but each request is a fresh guess at what your UI should look like. Ask for three pages and you get three slightly different button styles. A template plus a rules file fixes that: one source of truth for the look, and a rule that makes Cursor check it every time.
Turning a template into components in Cursor
Reference the template with @ and ask Agent to split it into components in your framework, reusing what you already have. It converts the HTML and CSS into React, Vue or Svelte components and moves the colours and type into your theme, so the rest of the app can use them.
Who uses Cursor templates
Cursor templates are used by developers who already have a codebase and want new screens to match it: SaaS teams adding dashboards and settings, agencies building client sites in Next.js, and solo founders who prefer to review every change in the editor. The common thread is control. Cursor shows each change as a diff, and a template plus a rules file means those diffs stay on design.
Best Cursor templates by use case
Admin dashboard template for Cursor
Reference it with @ and let Agent split it into components that match your codebase.
Hero section template for Cursor
A fast way to give a Next.js marketing page a premium first screen.
Pricing comparison template for Cursor
Cursor converts the table into a typed component fed from your plans config.
Settings pages template for Cursor
Forms with real states: loading, saved, error and disabled, ready to wire up.
Onboarding flow template for Cursor
Multi-step onboarding Cursor can connect to your existing auth and database.
Tips for better results in Cursor
Keep the template in the repo
Save it under design/ so every chat and Agent run can reference the same file.
Scope your rules
Use globs so the design rule loads for UI files, not for backend work.
Ask for components, not a page
Ask Agent to split the template into reusable components first; pages then assemble quickly.
Reject unrelated edits
If Agent restyles files you did not mention, reject those hunks and restate the scope.
Cursor vs Windsurf for building from templates
Both are AI editors that read a template you mention with @ and follow a rules file. Cursor Agent tends to suit careful, reviewed changes with a clear diff; Windsurf's Cascade often takes larger steps across many files. With a template and a design rule, both produce consistent pages; pick the editor your team already prefers.
What to ask Cursor after you paste a template
- @design/template.html split this into reusable components in components/ and show me the list first.
- Build the settings page using our existing Button, Input and Card components and the design rule.
- Make this page match @design/template.html at 375px and 1440px.
- Replace raw colours in this file with our theme tokens.
Common mistakes with Cursor templates
Pasting templates into chat
Save the template in the repo and mention it with @ instead.
Rules without globs
Scope the design rule to UI files so it loads when it matters.
Letting Agent restyle unrelated files
Reject those changes and restate which files are in scope.
Cursor templates by category
Cursor templates by framework
Frequently asked questions
What are Cursor templates?
Finished UI designs you add to your project and reference in Cursor, so it builds pages that match a real design. BrowserMoon also has a Cursor rules template that keeps every request on design.
How do I use a template in Cursor?
Save the template in your repo, then mention it with @ in Agent or chat and describe what to build. Cursor reads the file and builds to match it.
What is a Cursor rules file?
A file in .cursor/rules that Cursor applies to matching requests. The design rule on this page loads for UI files and tells Cursor which template, colours, type and spacing to use.
Do Cursor templates work with React and Next.js?
Yes. Each template is HTML and CSS, and Cursor converts it into components for your framework, including React, Next.js, Vue and Svelte.
Is .cursorrules still supported?
Cursor now uses project rules in .cursor/rules, with the older single .cursorrules file still read for compatibility. The template on this page uses the newer format.
Are the Cursor templates free?
Browsing and previewing are free. Copying the full code and the rules file needs a BrowserMoon licence.
How many templates should I add to a Cursor project?
Start with one that sets the look, usually the landing page or main dashboard. Add more only for screens with a different layout; the design rule keeps the rest consistent.
Can I use these templates with Cursor's Composer or Agent?
Yes. Reference the template with @ in Agent, and it can create and edit the files needed to build the page.
Do Cursor templates work with Tailwind?
Yes. Ask Cursor to move the template's colours, fonts and spacing into your Tailwind theme first, then build with those classes.
Templates for other AI coding tools