Free
Free
- Unlimited public projects
- Pre-loaded components
- Asset libraries
- AI accelerations
- Unlimited HTML export
Layouts.dev pricing
A notebook-style editor for building Tailwind and shadcn/ui interfaces with a simple syntax and instant preview.
- Free plan
- Yes
- Paid from
- -
- Plans
- 3
- Free trial
- -
What is Layouts.dev?
Layouts.dev is a browser-based notebook-style editor for building user interfaces with Tailwind CSS and shadcn/ui. It targets designers and developers who want to write interface code with a simple, readable syntax and see results instantly, without project setup or deployment steps. Main features include a shorthand syntax for HTML and React output, a library of headless components from Radix, shadcn/UI and Layouts UI, plus illustrations, icons and media, and a CLI that syncs work into a Next.js project. It is sold with a free start and paid plans.
Plans and prices
Frontend
-
$7/mo billed yearly
- Private projects
- Theming and styling
- Export to Figma
- Unlimited React export
- Live sync with NextJS repo
Fullstack
-
$29/mo billed yearly
- User authentication
- Database integration
- API calls and functions
- Stripe, Shopify, LemonSqueezy integrations
- Custom components
Prices in USD, as shown by layouts.dev. Source: pricing page. Last checked October 30, 2026.
Not sure which Layouts.dev plan fits? Talk it through with your AI agent
Copy the prompt below and paste it into the agent you already use. It has the plans and prices from this page and asks you the right questions first.
See the prompt
I want to decide whether Layouts.dev (layouts.dev) is the right tool and which plan to pick. Below is what the StableMRR pricing directory read from Layouts.dev's own pricing page (last checked 2026-10-30). It can be out of date, so treat it as a starting point. Category: Design / UI and UX design What it does: A notebook-style editor for building Tailwind and shadcn/ui interfaces with a simple syntax and instant preview. Plans: - Free: Free. Includes: Unlimited public projects, Pre-loaded components, Asset libraries, AI accelerations, Unlimited HTML export - Frontend: - ($7/mo billed yearly). Includes: Private projects, Theming and styling, Export to Figma, Unlimited React export, Live sync with NextJS repo - Fullstack: - ($29/mo billed yearly). Includes: User authentication, Database integration, API calls and functions, Stripe, Shopify, LemonSqueezy integrations, Custom components Alternatives in the directory: Aaply, Ant Design System for Figma, Ayro UI, Blockies Animate Pricing page: https://layouts.dev/pricing Directory listing: https://stablemrr.com/p/layouts-dev First ask me three short questions about my team size, budget and what I need it for. Then recommend one plan, tell me what could make it a bad fit, and compare it with the alternatives. Finish with what I should check on the vendor's site before I pay.
Pricing facts
- Pricing model
- Freemium
- Billing
- yearly
- Discounts
- 35% off Frontend billed yearly, 40% off Fullstack billed yearly
About Layouts.dev
- Integrations
- Radix, shadcn/UI, Layouts UI, NextJS
Features
- Visual TailwindCSS development
- AI assistance
- Real-time preview
- Code export
- Pre-made components
Price history
No price changes recorded since we started tracking on October 30, 2026.
Alternatives to Layouts.dev
| Product | Category | Free plan | Paid from | Plans | Checked |
|---|---|---|---|---|---|
| AaplyA mobile app design tool for wireframing screens and planning user journeys on an infinite canvas. | UI and UX design | Yes | $17/mo | 2 | Oct 29, 2026 |
| Ant Design System for FigmaFigma UI kits, plugins and templates that mirror Ant Design components for designing and building React apps. | UI and UX design | No | - | 3 | Oct 29, 2026 |
| Ayro UIBootstrap 5 UI component library with copy-paste snippets, blocks, and templates for building websites. | UI and UX design | Yes | - | 3 | Oct 29, 2026 |
| Blockies AnimateA collection of copy-paste animation components for Tailwind CSS and TypeScript projects, sold with a one-time payment. | UI and UX design | No | - | 1 | Oct 29, 2026 |
| CageOnline proofing and project collaboration tool for designers and agencies to review, annotate and approve creative work. | UI and UX design | Yes | $8/mo | 4 | Oct 30, 2026 |
Newsletter
Get a note when Layouts.dev or its alternatives change their prices
Price changes and new tools, once or twice a month. No pitches, unsubscribe in one click.
How this page was made. Plans and prices are read automatically from layouts.dev's public pricing page, checked against the page text, and re-checked about every week. Method. Something wrong? Tell us.