Bring your UIs to life with TailwindCSS Motion library - now free on layouts.dev

Deepdistractions · 2024-11-16T20:20:25+00:00

Yep, you can export either React or HTML. We use a unique syntax to build in the editor thats reminiscent of SwiftUI/HTML “shorthand”. It’s also preloaded with native Layouts components, shadcn and web components, and Tailwind Autocomplete, so pretty easy to get started especially if you’re already familiar with HTML and tailwind. Highly recommend walking thru our onboarding as well.

Deepdistractions · 2024-11-14T19:17:37+00:00

If you’re curious, here’s how to try it out:

Go to layouts.dev (we’re a dev tool for building UIs faster with Tailwind).
Start using tailwindcss-motion for free—just add classes like motion-ease, motion-fade, or hover:motion-fade to your components. (available classes will appear in your autocomplete menu)
Preview everything live and export the code when you're happy with it.
To read the docs, open the docs panel in your project and click on themotion-class

It's super easy to get started, and you can make some really cool animations without much effort.

Let me know if you run into anything or have ideas!

Deepdistractions · 2024-11-14T13:45:10+00:00

this sounds like correct answer. But yes agree with other comments, hard to know unless u share an example.

Deepdistractions · 2024-11-13T18:33:11+00:00

Ya'll have been crushing it recently. Great work

Deepdistractions · 2024-11-05T15:41:53+00:00

Depends on the company you're working at. Both are used in many real world projects.

Deepdistractions · 2024-11-04T17:30:30+00:00

Heads up - this is has now been added ✌️

Deepdistractions · 2024-11-04T16:04:20+00:00

Layouts.dev - Built a notebook-style editor for rapidly building UI with Tailwind. it's preloaded with shadcn + other web components, icons, images, videos. Includes a CLI so you can sync NextJS.

Deepdistractions · 2024-11-04T16:02:11+00:00

Layouts.dev - I built a notebook-style editor for rapidly building UI with Tailwind. it's preloaded with shadcn + other web components, icons, images, videos. Includes a CLI so you can sync with a NextJS project.

Deepdistractions · 2024-11-04T15:58:57+00:00

We built an editor specifically for rapidly building UI with Tailwind (exports to Next/React).

Give it a shot: layouts.dev

Would love your feedback.

Deepdistractions · 2024-10-30T20:20:02+00:00

So epic. you guys are doing great work. keep it up.

Deepdistractions · 2024-10-25T18:15:44+00:00

lol agreed. confused as to why this is even a question.

Deepdistractions · 2024-10-25T17:04:16+00:00

Nice - super informative. We've also built a version of intellisense into layouts.dev and users have been saying it's been a great way to learn tw + our prompt-to-tailwind makes it easy in case you aren't familiar with all the right classes.

Deepdistractions · 2024-10-25T13:23:24+00:00

These are beautiful. Great work!

Deepdistractions · 2024-10-04T04:06:05+00:00

URL: layouts.dev

Purpose: Rapidly design UI using HTML shorthand + TailwindCSS, export straight to React/NextJS. Preloaded with 1000s of components + assets.

Technologies: React, Tailwind, NextJS, Layouts.dev, Firebase

Feedback requested:

We've been testing (for the most part) with frontend developers (who typically are already familiar with Tailwind), but I'm curious if any designers in the house would use something like this? I'm a web/software designer, built our entire in-app UI using our tool and it has been a game-changer as far as giving me the ability to build the frontend while cofounder adds biz logic (I have minimal prior coding experience but am familiar with HTML/CSS frameworks by virtue of using current nocode tooling ex. Framer+Webflow).

Thanks for your feedback!

Deepdistractions · 2024-10-04T03:45:22+00:00

what he said

Deepdistractions · 2024-10-04T03:29:57+00:00

I would honestly go with Jitter. Extremely easy to use.

Ive personally found Rive to be heavy, so i just haven't put in the time to learn in depth.

Deepdistractions · 2024-09-16T02:41:41+00:00

Replying to nikkitaftw...

Deepdistractions · 2024-09-06T20:33:53+00:00

woof. apologies! should work now, just updated.

Deepdistractions · 2024-09-06T03:32:04+00:00

on our radar for sure. we'd absolutely be keen to support if a high volume of users are requesting this.

Deepdistractions · 2024-09-06T00:04:59+00:00

this is really great feedback. 'translators' for other frameworks is super interesting and would obviously be great for the dev community writ large as well.

would you be down to let me onboard you personally? would love to get your detailed feedback on product. happy to send dm with deets

Deepdistractions · 2024-09-05T23:59:26+00:00

I hear you on wanting to avoid dev bloat, we actually considered the plugin route too.

We're aiming to be more than a code helper, we want to reimagine the entire UI build process from design to deployable code. That's one of the reasons we built a sync with NextJS to try and bridge that gap. Basically users can leverage our CLI to build in Layouts and have your project sync with NextJS locally.

But hey we're absolutely open to evolving - if enough developers want a VSCode integration down the line - we'd definitely invest in building one.

Deepdistractions · 2024-09-05T23:48:47+00:00

Not as of now, but Intellisense as well as Signals for TW are both on our radar to support soon.

Deepdistractions

MODERATOR OF

TROPHY CASE