A notebook for building interfaces with Tailwind & shadcn/UI
Layouts.dev is a notebook editor for building production-ready UI at super-speed with TailwindCSS & shadcn/ui. Design with a super simple syntax, use hundreds of prebuilt components and resources. Preview your build in real-time. Export production-grade React.
🚀 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
