Sign in

Layouts.dev

The fastest way to build Tailwind and shadcn/ui pages

5.0•7 reviews•

835 followers

Interface design tools•Website builders•UI frameworks

Layouts.dev is supersonic web development experience tailor-made for TailwindCSS. As simple as a notebook, more powerful than anything out there. Cycle-through Tailwind classes in a keypress. Access pre-made components (shadcn/ui). Preview your work live on any device.

Blog

•

Newsletter

•

Questions

•

Forums

•

Product Categories

•

Apps

•

About

•

FAQ

•

Terms

•

Privacy and Cookies

•

X.com

•

Facebook

•

Instagram

•

LinkedIn

•

YouTube

•

Advertise

© 2025 Product Hunt

Layouts.dev gallery image

Layouts.dev gallery image

Layouts.dev gallery image

Layouts.dev gallery image

Layouts.dev gallery image

Layouts.dev gallery image

Layouts.dev gallery image

Layouts.dev gallery image

Layouts.dev gallery image

Free

Launch tags:

Design Tools•Developer Tools•Development

Launch Team / Built With

Severin Marcombes

Hippo AI

Maker

📌

🚀 Hey ProductHunt! I'm Severin, co-founder of Layouts.dev. Layouts.dev is a notebook-style editor designed for quickly building UIs using Tailwind. About a year ago, my co-founder Alex (a designer) and I started working on Layouts. We realized that moving from Figma to code was slowing down our iteration cycles, and we needed a more efficient way for Alex to directly contribute to the frontend. As a developer, I was also fed up with all the overhead—setup, config, dependency errors, and deployment hurdles—just to ship interfaces. So, we created a tool that allows both technical and non-technical users to design with code easily, avoiding all the tooling chaos. With Layouts, coding an interface is as simple as jotting down an idea: open your browser, describe it using simplified syntax, and voilà! 🎉 Layouts.dev comes with: ✨ A simple syntax similar to HTML/React, but shorter and with superpowers 🎨 Direct Tailwind integration for fast design 📱 Instant UI previews across multiple devices and screens 🧩 100s of pre-made headless components (mostly from shadcn/ui, with more to come) 🔎 Millions of pre-integrated assets and icons 🔗 Direct export of your interfaces as production-grade NextJS projects via our CLI, with live sync We're thrilled to launch today after such a long journey, and we’re excited to hear your feedback. It's definitely accelerated our workflow and we'd love to see how it could accelerate yours. Can’t wait to see what you build! 💡 Severin

8mo ago

Severin Marcombes

Hippo AI

Maker

@fernando_doglio Thanks!

8mo ago

Sava OS

Hello @severin__, this is very impressive! I get your point as well, and I totally agree with the unnecessary complexities of front-end dev these days (maybe not more than a NASA launch but we get the point :p).. The site is really neat & flows well. My feedback - as a long-term developer myself - is for the landing copy, you say: "We hate devtools. So we built one. Like a notebook, but for building interfaces with Tailwind." This sentence gives me no idea whatsoever about the product. What devtools are you talking about? What do you mean "like a notebook"? I wish you're more to the point here. At no point do you say what the product actually is. As a new visitor, I had to figure it out from the images and from certain cues in the context. So yeah, really well done with the product, I like the idea, the UX, the potential is great. But I think it would do better with simpler explanations :) (Or maybe a short video together with current landing) Congrats on the launch 🙌 Wish you all the best with this!

8mo ago

Sketchfab

Hunter

Congrats @severin__ for the launch!

8mo ago

@severin__ 🚀🚀🚀🚀

8mo ago

Layouts.dev

Maker

@owenfar Thanks for the feedback! We'll be working on improving copy on the marketing site so it's a bit more clear what we do :).

8mo ago

So its like a higher level language on top of react and tailwind? Sort of like how SwiftUI is to UIKit?

8mo ago

Severin Marcombes

Hippo AI

Maker

@sentry_co Exactly. It enables us to get the freedom to simplify the syntax quite a bit, especially on composable components. Initially built the syntax for AI, so at the difference of most programming languages, it's built as a funnel: super permissive input (markdown-like to ultra specific), super strict output. Would love to get your feedback!

8mo ago

@severin__ Abstracting upwards is definitely better for scaling with less resources, while delivering more value for the customer. I think open sourcing it and it becoming a standard would make this a no brainer for everyone. One business model that could work with that for you would be to have the best builder tool. And also make component modules for sale. Like movingparts.io does for swiftUI. But this is a gd start! Looking forward to see how things progress.

8mo ago

Severin Marcombes

Hippo AI

Maker

@sentry_co Would love to discuss that in more details with you. That's exactly the kind of thing that keeps us thinking at night. Could you DM me @ severin@creative-robots.ai ?

8mo ago

Layouts.dev

Maker

Amazing feedback @sentry_co , we're absolutely considering this route.

8mo ago

Timestripe

Looks very good. Great to see some quality work being released! I love the onboarding and how the UI feels dynamic yet fast, without getting in the way. Good job! I'll try it more extensively today and share my thoughts afterward

8mo ago

Severin Marcombes

Hippo AI

Maker

Thanks @topkek. Yeah, super interested by your feedback. Feel free to email us directly. It'll be gold to us!

8mo ago

Layouts.dev

Maker

Thanks! @topkek. Would be amazing to get your thoughts.

8mo ago

Timestripe

💡 Bright idea

@severin__ I've tried layouts.dev more and it looks very promising, you certainly have a proper vision for building a devtool Here are the things that I think you should consider improving: 1. More export options. As a React guy, I’d love to see an option to copy HTML with classNames instead of class. A direct export to a .tsx React component would be even better. 2. Extended onboarding. When I finished onboarding, I didn’t have a clear use case in mind, so I thought, "Okay, I’ll come back when I have a project." It would be great if there were a tutorial or walkthrough showing how to take an idea or feature request all the way to an exported component that can be used in a real project. It would definitely help make Layouts.dev more "sticky." 3. Improve discoverability of AI features. I really like the AI features like palette generation and "Prompt to TailwindCSS," but they’re a bit hidden. Including them in the onboarding flow might increase their visibility. Also, I wanted to share a personal DX pain point, which is pretty specific, but might be relevant. At human.app, I build a lot of OpenGraph images using @vercel/og, which is based on Satori. It allows me to write JSX with Tailwind, but since it uses SVG and a custom layout engine, many CSS features aren’t supported. There’s no layout inspector for the output image and no hot reload. It would be amazing if Layouts.dev could support a use case like this — offering a quick way to create layouts for such images, accounting for Satori's limitations, and using the tw prop for Tailwind classes instead of className. Let me know if you find my feedback helpful!

8mo ago

Severin Marcombes

Hippo AI

Maker

@vercel @topkek Thanks for the detailed feedback. 1. This is normally already available if you export in React. Would love to see a screenshot or jump on a call if that's not accessible as it's probably a bug on our end. You can get a full NextJS repository using our CLI interface (paid). 2. & 3. Super valid feedback. Thanks a lot. Will iterate. @vercel/og --> that would be awesome yes. Would love to support other targets like ReactEmail too. Will check the difficulty of doing things like that. Happy to jump on a call end of week to discuss more!

8mo ago

Layouts.dev gallery image

Layouts.dev gallery image

Layouts.dev gallery image

Do you use Layouts.dev?

Review Layouts.dev?

5/5 based on 7 reviews

View all reviews

Reviews of Layouts.dev

Christian Canlubo 🚀

•8 reviews

🤯 Wow! Tried it and coding style is super clean! good for front end!

8mo ago

Tugan.ai

•2 reviews

new stuff. great stuff ... to build clean UI

8mo ago

•1 review

This greatly simplifies the creation of web pages, I will definitely use it!

8mo ago

View all 7 reviews