Layouts.dev

The fastest way to build Tailwind and shadcn/ui pages

5.0•2 reviews•

831 followers

The fastest way to build Tailwind and shadcn/ui pages

5.0•2 reviews•

831 followers

Visit website

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.

Free

Launch tags:Design Tools•Developer Tools•Development

Launch Team / Built With

Unblocked AI Code Review — High-signal comments based on your team's context

High-signal comments based on your team's context

Promoted

keychains.dev

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

Report

1yr ago

keychains.dev

Maker

@fernando_doglio Thanks!

Report

1yr 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!

Report

1yr ago

Sketchfab

Hunter

Congrats @severin__ for the launch!

Report

1yr ago

@severin__ 🚀🚀🚀🚀

Report

1yr 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 :).

Report

1yr ago

DiffSense

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

Report

1yr ago

keychains.dev

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!

Report

1yr ago

DiffSense

@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.

Report

1yr ago

keychains.dev

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 ?

Report

1yr ago

Layouts.dev

Maker

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

Report

1yr 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

Report

1yr ago

keychains.dev

Maker

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

Report

1yr ago

Layouts.dev

Maker

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

Report

1yr 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!

Report

1yr ago

keychains.dev

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!

Report

1yr ago

🚀 Wow, Layouts.dev is awesome! 🚀 As someone with my team who’s spent countless hours jumping between Figma, setting up dev environments, and getting tangled in config and dependency hell, Layouts.dev feels like a breath of fresh air! 😅 Huge kudos to @severin__ and Alex for building this! Can't wait to see what people create with it! 🙌

Report

1yr ago

keychains.dev

Maker

Thanks @jorisd !

Report

1yr ago

Layouts.dev

Maker

@jorisd Thanks! Appreciate the feedback.

Report

1yr ago

Migroot

Congrats with launch! Wish you luck, cause your product looks very convenient, and not complicate... How do you think it possible to use without dev background?

Report

1yr ago

keychains.dev

Maker

@maryna_dobrovolska1 Alex, my co-founder, built his first interface in 1h without any programming knowlegde (he's a pro designer though). Happy to get your feedback on how long it takes to build your first interface too!

Report

1yr ago

Layouts.dev

Maker

@maryna_dobrovolska1 Thanks! I'm living proof (designer-here). I had some basic knowledge of HTML/CSS frameworks beforehand - but no dev background. I was able to pick up the syntax within a few hours and contribute to all the frontend code for layouts.dev UI using our product. I'd say the learning curve is mostly familiarizing yourself with TailwindCSS. Outside of frontend dev, if you're a PM or Designer, you'll definitely be well suited to pick this up quickly.

Report

1yr ago

Migroot

@alexmckee this is incredible. I'm also have some background in html-coding... Can't wait for weekends to try your product 😃 During workdays not enough time, haha

Report

1yr ago

Humans in the Loop

"we hate devtools. so we built one." — love it. enjoy your launch day, keep up your work 👏👏

Report

1yr ago

Layouts.dev

Maker

@fmerian Appreciate it!

Report

1yr ago

keychains.dev

Maker

@fmerian Thank you flo!

Report

1yr ago

TabExtend

Congratz on the launch! Super cool approach, looks fun and useful, sort of bridging that good old gap between designer and engineer, prototype and product.

Report

1yr ago

keychains.dev

Maker

Thanks @gustav_ekerot !

Report

1yr ago

1 2 3 4