Layouts.dev

Name: Layouts.dev
Rating: 5.0 (2 reviews)

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

Anima - OnBrand Vibe Coding — Design-aware AI for modern product teams.

Design-aware AI for modern product teams.

Promoted

I don't believe in No Code tools because it lacks flexibility and control. I am quite impressed by Layouts.dev. This is a really interesting approach. There might be a learning curve, but the onboarding is really smooth so far. I think it's a good bet for a productivity increase in web development. Good job guys!!

Report

1yr ago

Hippo AI

Maker

Thanks @guillaumegay for your support. Hope it'll provide you with the right balance between no-code and code!

Report

1yr ago

GoodsFox

@severin__ Congrats on launching Layouts.dev! The concept sounds incredibly innovative. The focus on simplicity and speed is impressive, especially for non-technical users who want to contribute to the frontend. Features like instant previews and pre-made components seem like huge time savers. I can't wait to try Layouts.dev and see how it can streamline our UI development process.

Report

1yr ago

Hippo AI

Maker

Thanks @janicelewis00. Super eager to get your feedback!

Report

1yr ago

this looks really awesome! A little worried about lock-in though. Is it possible to export what I've built?

Report

1yr ago

Hippo AI

Maker

@pmn Very good question. We hate it too. Everything you create can be exported directly to a NextJS project. You keep the code.

Report

1yr ago

Now if you build a Tooljet style UI to generate the DSL you will REALLY be onto something.

Report

1yr ago

Layouts.dev

Maker

@mikestaub Interesting idea! We're definitely open to ways in which we can make Layouts more user-friendly for non-dev.

Report

1yr ago

This is very good. As a person who usually designs with code — i love this thing

Report

1yr ago

Layouts.dev

Maker

@vladzima Thank you! As someone who is already a fan of designing with code - would love your thoughts.

Report

1yr ago

@alexmckee Autocomplete please! Got used to the comfort of that

Report

1yr ago

Layouts.dev

Maker

@vladzima Solid feedback, we've heard that from a few folks. Will work on it! Stay tuned.

Report

1yr ago

We've been using this and it's really helpful, very happy to find you guys here on Product Hunt. I just look at the domain and can imagine it was VERY expensive to grab that or u were very lucky haha. Anyways, congrats on the launch!

Report

1yr ago

PicLooks Avatars

wowww this looks unbelievably good, congrats! 😍 Really confidence building that your own project UI and experience is so incredibly tight. I wasn't totally clear on how the next.js tier works. Am I able to link to Layouts.dev with the CLI and then edit my existing components/layouts that I hadn't created in your editor? Provided they're built in next/tailwind/shadcn. And then how does the backend tier work? I see you're using Clerk for auth on your own site. Are you providing a DB too?

Report

1yr ago

Hippo AI

Maker

@jonnymiles NextJS link is a one-way sync for now: - thanks to our CLI, every layouts projects can be exported as a fully working NextJS project (no more boilerplate needed) - sync happens in realtime as you edit the UI of your pages in layouts - you can write business logic or anything you want elsewhere in the repo, or even edit the page. Limitation is that any page you touch won't sync anymore (we don't want to overwrite your work). Support for components is not completely ready for prod so not in this release. Working on it + working on improving this workflow. DB support in alpha on our Fullstack plan. Still building it live. Works the same way: if you add a DB, you get the code in your NextJS project. If you edit these files, we won't overwrite them. Happy to iterate on that with you!

Report

1yr ago

1 2 3 4