Layouts.dev

Layouts.dev

The fastest way to build Tailwind and shadcn/ui pages

5.0
7 reviews

831 followers

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.
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 Team / Built With

What do you think? …

Severin Marcombes
🚀 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
Owen Far
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!
alban
Congrats @severin__ for the launch!
Simon Bertin
@severin__ 🚀🚀🚀🚀
Alex McKee
@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 :).
André J
So its like a higher level language on top of react and tailwind? Sort of like how SwiftUI is to UIKit?
Severin Marcombes
@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!
André J
@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.
Severin Marcombes
@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 ?
Alex McKee
Amazing feedback @sentry_co , we're absolutely considering this route.
Misha
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
Severin Marcombes
Thanks @topkek. Yeah, super interested by your feedback. Feel free to email us directly. It'll be gold to us!
Alex McKee
Thanks! @topkek. Would be amazing to get your thoughts.
Misha
💡 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!
Severin Marcombes
@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!