Lovable Prompt Examples: 15+ Real Prompts to Copy & Paste

Documentation tells you what Lovable can do. Examples show you how to actually use it.

The gap between a lovable prompt that builds a working app first try and one that generates broken, half-finished code comes down to three things: stack specification, feature clarity, and quality constraints. Most beginners skip all three. This post gives you annotated lovable prompt examples across SaaS apps, internal tools, landing pages, and AI-powered interfaces — so you can see exactly what a working prompt looks like and adapt it for your own build.

Each example follows the same structure: what the app does, the full copy-paste prompt, and a short note on what each section is doing.

Want to generate a custom version? Use the Lovable prompt generator to build one from your own app description.

What Makes a Good Lovable Prompt

Before the examples, a quick framework. Every prompt that produces reliable results from Lovable includes three layers:

1. Stack specification — React + TypeScript, Tailwind CSS, shadcn/ui, and any backend or auth requirements. Lovable has sensible defaults but specifying the stack prevents surprises.

2. Feature list — a specific, numbered list of what the app should do. Vague descriptions like "a dashboard" produce vague results. Specific features like "a sidebar with navigation, a stats row with 4 metric cards, and a data table with sorting" produce specific code.

3. Quality constraints — no placeholder content, production-ready code, proper TypeScript types, accessibility requirements, responsive layout. Without these, Lovable ships demos, not products.

The examples below demonstrate these three layers in different contexts.

Lovable Prompt Examples for SaaS Apps

Project Management Dashboard

A task and project tracking tool with team visibility.

Build a project management dashboard using React, TypeScript, and Tailwind CSS with shadcn/ui components.

Stack: React + TypeScript, Tailwind CSS, shadcn/ui, Lucide icons. No external state management — use React useState and useContext only.

Features:
1. Sidebar navigation with links to: Dashboard, Projects, Tasks, Team, Settings
2. Dashboard home with: 4 stat cards (Total Projects, Active Tasks, Completed This Week, Team Members), a recent activity feed, and an upcoming deadlines list
3. Projects page: card grid showing project name, description, progress bar (percentage), team avatars, and status badge (Active / On Hold / Completed)
4. Tasks page: kanban board with three columns (To Do, In Progress, Done), drag-and-drop task cards showing title, assignee avatar, priority badge, and due date
5. Add task modal: fields for title, description, assignee, priority (Low/Medium/High), due date, and project assignment

Design: clean and professional, neutral color palette, consistent 8px spacing grid, all cards with subtle border and shadow, sidebar collapsed on mobile.

Quality requirements:
- All data is realistic mock data — no "Lorem ipsum", no placeholder text
- Full TypeScript types for all components and data structures
- Mobile-responsive layout
- No console errors
- All interactive elements have hover and focus states

What this prompt is doing: The feature list gives Lovable a concrete spec for every page rather than leaving it to interpret "project management." The quality requirements section prevents the two most common Lovable failures: placeholder data and missing TypeScript types.

Subscription SaaS Billing Page

A pricing and plan management interface for a SaaS product.

Build a SaaS billing and subscription management page using React, TypeScript, Tailwind CSS, and shadcn/ui.

Stack: React + TypeScript, Tailwind CSS, shadcn/ui components throughout. No backend — all state is local.

Features:
1. Pricing section: three-tier pricing cards (Starter / Pro / Enterprise) with monthly/annual toggle that updates prices and shows annual savings percentage. Pro plan visually highlighted as recommended.
2. Current plan banner: shows active plan name, billing cycle, next renewal date, and a "Manage Plan" button
3. Payment method section: displays a masked credit card (last 4 digits, card brand icon), expiry date, and buttons to update or remove
4. Billing history table: columns for Date, Description, Amount, Status (Paid/Pending/Failed with color-coded badges), and a Download Invoice link per row (5 mock rows)
5. Cancel subscription flow: clicking "Cancel Plan" opens a confirmation dialog with a reason selector (dropdown) and a final confirm button

Design: white background, subtle card borders, blue accent color for CTAs and highlights, pricing cards with clear visual hierarchy.

Quality requirements:
- Toggle between monthly/annual pricing must work correctly — prices update dynamically
- All mock billing history rows use realistic dates, amounts (e.g. $49.00, $149.00), and descriptions
- Fully typed TypeScript — no any types
- Accessible: all form elements labeled, dialog has proper focus trap

What this prompt is doing: The monthly/annual toggle is a common source of broken Lovable outputs — specifying "prices update dynamically" and "toggle must work correctly" forces Lovable to wire the state properly. Accessibility requirements are included because Lovable skips them by default.

Analytics Reporting Tool

A data visualization dashboard for business metrics.

Build an analytics dashboard using React, TypeScript, Tailwind CSS, shadcn/ui, and Recharts for all charts.

Stack: React + TypeScript, Tailwind CSS, shadcn/ui, Recharts. All data is local mock data — no API calls.

Features:
1. Top navigation bar: logo on left, date range picker (Last 7 days / 30 days / 90 days / Custom) on right
2. KPI row: 4 metric cards — Total Revenue, New Users, Conversion Rate, Avg Session Duration — each showing current value, percentage change vs previous period (green for up, red for down), and a small sparkline chart
3. Revenue over time: full-width line chart showing daily revenue for the selected date range. Hoverable tooltip with exact value and date.
4. Traffic sources: donut chart showing percentage breakdown by channel (Organic, Paid, Direct, Referral, Social) with a legend
5. Top pages table: columns for Page URL, Pageviews, Avg Time on Page, Bounce Rate — sorted by pageviews descending, first 10 rows
6. Date range selector changes all charts and KPI values simultaneously using mock data sets

Design: dark sidebar, white content area, blue/teal chart palette, tight data-dense layout.

Quality requirements:
- All charts use Recharts — no other chart libraries
- Date range switching must visibly update all data
- Mock data must be realistic: revenue in the $1,000–$50,000 range per day, plausible page URLs, realistic bounce rates (30–75%)
- No placeholder text anywhere

Lovable Prompt Examples for Internal Tools

Admin Panel

A back-office management interface for user and content management.

Build an admin panel using React, TypeScript, Tailwind CSS, and shadcn/ui.

Stack: React + TypeScript, Tailwind CSS, shadcn/ui. All data is mock — no backend.

Features:
1. Sidebar: collapsible, with sections for Dashboard, Users, Content, Settings, and a logout button at the bottom
2. Users page: searchable, filterable data table with columns for Avatar, Name, Email, Role (Admin/Editor/Viewer), Status (Active/Suspended), Join Date, and Actions (Edit, Suspend, Delete). Pagination: 10 rows per page.
3. Edit user drawer: slides in from the right, contains a form to update Name, Email, Role (select), and Status (toggle). Save and Cancel buttons.
4. Content page: same table pattern but for blog posts — Title, Author, Status (Draft/Published/Archived), Publish Date, Actions (Edit, Archive, Delete)
5. Bulk actions: checkbox column on both tables enabling bulk select, with a "Bulk Action" dropdown (Export, Delete, Change Status) that activates when rows are selected
6. Dashboard home: summary stats — Total Users, Active Users, Total Content Items, Published This Month — plus a recent activity log (last 10 actions with timestamp, actor, and action description)

Design: neutral gray sidebar, white content, red accent for destructive actions, consistent table styling across all pages.

Quality requirements:
- Search and filter on the Users table must work on the mock data
- Pagination must work correctly — clicking page 2 shows rows 11–20
- All destructive actions (Delete, Suspend) require a confirmation dialog
- No TypeScript errors

What this prompt is doing: Specifying "search and filter must work on mock data" and "pagination must work correctly" are the exact instructions that prevent Lovable from generating non-functional UI. Without these, it renders the components but leaves the logic unimplemented.

CRM-Style Contact Manager

A lightweight contact and deal tracking tool.

Build a CRM contact manager using React, TypeScript, Tailwind CSS, and shadcn/ui.

Stack: React + TypeScript, Tailwind CSS, shadcn/ui, Lucide icons.

Features:
1. Contact list: left panel with a searchable list of contacts showing name, company, and last activity date. Clicking a contact loads their detail view.
2. Contact detail view: right panel showing full contact info (name, email, phone, company, role, LinkedIn), a notes section with a text area to add timestamped notes, a deal pipeline showing associated deals and their stage, and a recent activity timeline
3. Add contact modal: form with fields for Name, Email, Phone, Company, Role, Source (dropdown: Inbound, Referral, Cold Outreach, Event)
4. Deals pipeline: kanban-style view with columns for Lead, Qualified, Proposal, Negotiation, Won, Lost — deal cards showing name, contact, value, and expected close date
5. Filters: filter contacts by Company, Source, and Last Activity (this week / this month / all time)

Design: two-panel layout, clean and minimal, green accent for won deals, red for lost.

Quality requirements:
- Clicking a contact in the list must load their detail view — the two panels must be connected
- Adding a note must append it to the contact's note list with a timestamp
- All mock contacts have realistic names, companies, email addresses, and phone numbers
- Fully typed — no implicit any

Lovable Prompt Examples for Landing Pages

SaaS Product Landing Page with Waitlist

Build a SaaS landing page using React, TypeScript, Tailwind CSS, and shadcn/ui. This is a marketing page, not an app — optimise for conversion and visual polish.

Stack: React + TypeScript, Tailwind CSS, shadcn/ui.

Sections (in order):
1. Navigation: logo on left, nav links (Features, Pricing, FAQ) in center, "Join Waitlist" CTA button on right. Sticky on scroll.
2. Hero: large headline (max 8 words), supporting subheadline (1–2 sentences), email input + "Join Waitlist" submit button, social proof line ("1,200+ builders already on the list"), hero image or abstract graphic on the right
3. Features: three-column grid, each with an icon, short title, and 2-sentence description. Use Lucide icons.
4. How it works: numbered 3-step process with icon, step title, and description
5. Testimonials: three cards with avatar, name, role/company, and quote (2–3 sentences each)
6. Pricing: two-tier cards (Free / Pro) with feature lists and a CTA button each
7. FAQ: accordion, 5 questions and answers
8. Footer: logo, nav links, social icons, copyright line

Design: dark hero section, white body, bold headline typography, blue primary CTA color.

Quality requirements:
- Email input in the hero must validate format before submission and show a success message on submit
- Accordion FAQ must open/close correctly
- Fully responsive — mobile layout stacks all columns
- No placeholder text — all copy should read like real product marketing for a productivity SaaS tool

Personal Developer Portfolio

Build a developer portfolio site using React, TypeScript, Tailwind CSS, and shadcn/ui. Clean and minimal — the work should speak for itself.

Stack: React + TypeScript, Tailwind CSS, shadcn/ui, Lucide icons.

Sections:
1. Nav: name/logo on left, links to About, Work, Writing, Contact on right. No sticky — simple top bar.
2. Hero: name, one-line role (e.g. "Full-stack engineer & indie builder"), a 2-sentence bio, GitHub and LinkedIn icon links
3. Work: project cards (4 projects) each showing project name, short description (2 sentences), tech stack tags, and links to Live Demo and GitHub repo
4. Writing: 3 blog post cards with title, date, and 1-sentence summary
5. Contact: a simple contact form with Name, Email, and Message fields and a Send button. On submit, show a success message.
6. Footer: minimal — name, year, and social icon links

Design: white background, black typography, yellow accent for links and highlights (matching the style at buildwithlovable.xyz style: minimal and high-contrast), generous whitespace.

Quality requirements:
- No Lorem ipsum — all project names, descriptions, and blog titles should sound like real indie developer work
- Tech stack tags should reflect realistic combinations (React, TypeScript, Supabase, etc.)
- Contact form validates all fields before submit
- Fully responsive

Lovable Prompt Examples for AI-Powered Apps

AI Writing Assistant Interface

Build an AI writing assistant interface using React, TypeScript, Tailwind CSS, and shadcn/ui. This is the frontend UI only — no actual API calls, but all interactions should work as if the AI is responding.

Stack: React + TypeScript, Tailwind CSS, shadcn/ui.

Features:
1. Split layout: left sidebar (280px) for document list and settings; main content area for the active document and AI panel
2. Document editor: a large textarea for the main document content, with a character count and word count in the footer
3. AI assistant panel: slides in from the right (collapsible). Contains a prompt input, a mode selector (Improve / Summarise / Expand / Change Tone), and a Generate button. On click, shows a loading spinner for 1.5 seconds then displays mock improved text in a preview box with Accept and Discard buttons. Accepting replaces the selected document text with the mock output.
4. Document list sidebar: list of saved documents with title, last edited date, and a delete button. Clicking loads the document into the editor.
5. New document button: creates an untitled document and adds it to the list
6. Tone selector (in AI panel): Formal / Casual / Persuasive / Technical

Design: clean text editor aesthetic, off-white document area, dark sidebar, subtle AI panel with blue accents.

Quality requirements:
- The mock AI response must vary by mode — "Improve" returns a slightly polished version, "Summarise" returns a shorter paragraph, "Expand" returns a longer version. Hard-code 2–3 mock responses per mode to rotate through.
- Accept/Discard must work — Accept replaces document text, Discard closes the preview
- Document switching must persist content per document in local React state

Lovable Prompt Examples by Complexity

Simple: Single-Feature MVP

When you're validating a single idea, strip the prompt down to one feature and one quality bar.

Build a Pomodoro timer app using React, TypeScript, and Tailwind CSS.

Features:
- 25-minute countdown timer with Start, Pause, and Reset buttons
- Short break (5 min) and long break (15 min) modes, selectable before starting
- Visual progress ring around the timer showing time remaining as a percentage
- Tab title updates to show remaining time (e.g. "23:47 — Focus")
- Browser notification when the timer ends (request permission on first use)
- Session counter: tracks how many Pomodoros completed in the current day, resets at midnight

Design: minimal, single-screen, dark background, red/orange accent. Large timer display.

Quality: no external libraries beyond React and Tailwind. All timer logic in a custom useTimer hook. No placeholder content.

Medium: Multi-Feature with Authentication UI

Build a habit tracking app with authentication UI using React, TypeScript, Tailwind CSS, shadcn/ui, and React Router.

Stack: React + TypeScript, Tailwind CSS, shadcn/ui, React Router v6. All data in localStorage — no backend.

Auth flow (UI only — no real auth):
- Login page: email + password form, "Remember me" checkbox, "Forgot password" link (shows an email sent confirmation page), link to Sign Up
- Sign up page: name, email, password, confirm password — with inline validation
- After login, redirect to dashboard. On refresh, persist login state from localStorage.

App features:
1. Dashboard: today's habits as a checklist — check off each habit, see a completion percentage ring for today
2. Habit management: add/edit/delete habits with a name, emoji icon, and frequency (Daily / Weekdays / Custom days of week)
3. Streak tracking: current streak and longest streak per habit
4. Weekly view: 7-column grid showing which days each habit was completed this week, with colour-coded dots
5. Stats page: completion rate over last 30 days (line chart using Recharts), best streak, most consistent habit

Quality: localStorage persistence for all habit data and check-ins. TypeScript types for all data models. No console errors. Responsive.

Advanced: Full-Stack with Supabase

Build a full-stack expense tracker using React, TypeScript, Tailwind CSS, shadcn/ui, and Supabase for the database and authentication.

Stack: React + TypeScript, Tailwind CSS, shadcn/ui, Supabase JS client, React Query for data fetching, React Router v6.

Supabase setup:
- Auth: email/password sign-up and login. Protected routes redirect to login if not authenticated.
- Database tables: expenses (id, user_id, amount, category, description, date, created_at), categories (id, name, color, icon)
- Row Level Security: users can only read/write their own expenses

Features:
1. Auth: login and sign-up pages, logout button in nav, session persistence
2. Dashboard: total spend this month, spend by category (donut chart via Recharts), recent expenses list (last 10)
3. Expenses list: full paginated table of all expenses with filters for date range and category, sortable columns, inline delete
4. Add expense form: amount, category (select from categories table), description, date. Saves to Supabase on submit.
5. Categories management: add/edit/delete categories with a name, color picker, and emoji icon
6. Monthly summary: bar chart comparing spend per category across the last 6 months

Quality requirements:
- All Supabase queries use React Query for caching and loading states
- Every data-fetching state shows a loading skeleton, not a spinner
- Form validation with error messages before any Supabase call
- All TypeScript types generated from the Supabase schema
- RLS enforced — no user can access another user's data

How to Adapt These Lovable Prompt Examples

Every example here follows the same three-layer structure. To adapt any of them:

Replace the features, keep the structure. Swap the feature list for your own requirements but keep the Stack, Features, Design, and Quality sections. The structure is what makes Lovable reliable — the content is yours to change.

Add constraints for things you care about. If you need a specific color palette, specify hex values. If you're using a particular icon library, name it. If a specific interaction must work a certain way, describe it in one precise sentence.

Start with the MVP version, then expand. Use the simple single-feature format to get a working base, then submit follow-up prompts to add features. Lovable handles incremental builds better than one enormous initial prompt.

If Lovable produces broken interactions, be more specific. The most common failure mode is interactive features (filters, toggles, pagination) that render but don't work. The fix is almost always to add one sentence to your prompt: "[Feature] must work correctly — [describe what working looks like]."

Use the Lovable prompt generator to generate a structured prompt from your own description — it applies this same three-layer pattern automatically.

Frequently Asked Questions

What are some good Lovable prompt examples for beginners?

Start with the simple single-feature examples — the Pomodoro timer or a landing page. These scope the task down to one screen, which gives Lovable less room to make decisions you'll need to debug. Once you've seen a clean output, you can scale up to multi-feature prompts.

Why do some Lovable prompts produce broken interactions?

Lovable renders UI components correctly but sometimes skips the logic that wires them together — especially for filters, toggles, and pagination. The fix is specifying the expected behavior explicitly: "the filter must update the displayed list", "the toggle must change the prices dynamically." If you don't specify it, Lovable assumes it's not required.

Can I use these Lovable prompt examples for commercial projects?

Yes. These are starting points — adapt them, extend them, and build on them. The outputs Lovable generates from your prompts are yours.

Do I need to use shadcn/ui?

No, but it's the recommended design system for Lovable builds. It produces consistent, accessible components and pairs naturally with Tailwind CSS. If you have a different preference, replace "shadcn/ui" in the stack section with your preferred library and specify any component names you want used.

How long should a Lovable prompt be?

Long enough to be specific, short enough to be readable. The examples here average around 200–300 words — long enough to specify stack, features, and quality requirements, short enough that Lovable can parse and apply all of it. Prompts over 500 words can produce incomplete implementations as Lovable deprioritizes later instructions.

Lovable Prompt Examples: 15+ Real Prompts That Build Full Apps (Copy-Paste)