正在加载视频...

视频加载失败

Introducing Motion UI. White label, production-ready, performance-graded UI components for React. Ready to drop straight into your design via shadcn CLI and Tailwind CSS, or adapt via your agent with our one-click prompt generator or the Motion MCP.

176,347 次观看 • 3 个月前 •via X (Twitter)

36 条评论

Motion 的头像
Motion3 个月前

@tailwindcss Read the official announcement to learn more about how every component adapts to your design, and how we grade each for performance.

Vicente Surraco 的头像
Vicente Surraco3 个月前

@shadcn @tailwindcss Awesome, would love Svelte support

Motion 的头像
Motion3 个月前

@shadcn @tailwindcss I don’t think we have the time for this sadly! I know a lot of people want it

Skiipy 的头像
Skiipy3 个月前

@shadcn @tailwindcss Awesome! Now give some attention to CSS Studio please 🙏 such an awesome product but feel like it is not worked on much 😭

Motion 的头像
Motion3 个月前

@shadcn @tailwindcss Still considering where to take CSS Studio. Is there anything in particular you want in it? We’ve been playing with Impeccable support but they ship that themselves now too.

Skiipy 的头像
Skiipy3 个月前

I personally use it daily for website work, mainly the agent connection, I triage the page visually and send 1 task per issue and go through the whole website really quick and effeciently. I see this tool as a strength, it offer agent ease of use and a manual interface to close the gap where agents are still bad (small manual tweaks). Lots of my recommendations are on the human manual part: I'd like to see it be more reliable for drag and drop movement of elements, sometimes it's easy and others it won't move at all andit's never clear why. UI bug fixes, currently when selecting an element with a lot of params it is breaking way out of the chat tile. You don't need all that info in there (I know I don't), you have the full element panel for that already. A small image editor feature for zoom, X/Y axis movement, ideally a drag and drop feature for images to simply replace an image keeping it in the same frame and format. The create variants function is awesome, would be nice to have an instruction box for it. I personally created rules to force the agents to use my design library otherwise results weren't always the best. A simple chat message attached for it to ie "Create Variants: use aceternity bento card X as template and create variants of it" would go a long way, it is already a toggle of the chat tile anyway. And similar to previous issue on variants, having a folder or something for design systems that is tied to css studio, this way the agent would go there instead of editing from scratch, as someone who bought way too many ui/components library that would be a killer feature. Could also include components preview/replacements in the ui for the newly release Motion UI and motion animations for people with a motion+ subs like me, to simply click and swap. I don't think you need to integrate with something else, yet at least. Simply polishing what's already there would be great. A better control plane, UI/UX fixes and more integration for libraries would be awesome. Hope this helps 👌

Motion 的头像
Motion3 个月前

@shadcn @tailwindcss It does! Do you find yourself mostly using the chat box or do you ever use the design sliders? FYI for the variants - you can write a message and then click generate variants and it’ll make a new variant session with your message kicking it off

Skiipy 的头像
Skiipy3 个月前

I do use the design slider, but not as much. I normally build multiple website at once, it is much easier to /studio run through every issues and send as single separated task to the connected agents and move to the next, repeat, come back to review etc. It's the workflow I was using already but with Claude code open where I would type a huge paragraphs with all edits needed at once lol Studio makes it so much better to use, I genuinely love it. Splitting by tasks also make it easy to go back in that specific tasks without losing anything if something needs additional work. I wouldn't remove any of the manual ones obviously, but I believe the real strenght of studio is the seamless agents integration + human tweaks where frankly Agents can be frustrating (ain't got time to move that elements 15 times before it get it where I want lol). And noted on the variants! Thank you, should've tested it first, but hey glad to know it is already possible 😅👌

Chetan Khulage 的头像
Chetan Khulage3 个月前

@shadcn @tailwindcss the search in docs is not working

Motion 的头像
Motion3 个月前

@shadcn @tailwindcss Will take a look!

Gregor 的头像
Gregor3 个月前

@shadcn @tailwindcss The 'performance-graded' label caught my eye. Genuinely curious whether that's benchmarked in a real app context, or closer to a static bundle-size score.

Motion 的头像
Motion3 个月前

@shadcn @tailwindcss These grades are static code analysis according to the values being animated

Windows Explorer 的头像
Windows Explorer3 个月前

@shadcn @tailwindcss let me guess, paywalled?

Motion 的头像
Motion3 个月前

@shadcn @tailwindcss Yes we like to eat

Windows Explorer 的头像
Windows Explorer3 个月前

@shadcn @tailwindcss In this economy?! Nah we’re eating ze bugz and we’ll be happy

Ee Venn Soh 的头像
Ee Venn Soh3 个月前

@shadcn @tailwindcss Nice work! Btw the install page is extremely hidden no where to be found on (is that intentional?)

Jose 的头像
Jose3 个月前

@shadcn @tailwindcss 😱🫡

Motion 的头像
Motion3 个月前

@shadcn @tailwindcss 😃

Chadd Weston 的头像
Chadd Weston3 个月前

@shadcn @tailwindcss Good move

Motion 的头像
Motion3 个月前

@shadcn @tailwindcss Thanks! We’re trying to make most of the best Examples white label and easy to just drop into existing designs

Max 的头像
Max3 个月前

@shadcn @tailwindcss So sick

Motion 的头像
Motion3 个月前

@shadcn @tailwindcss Thanks Max!

Carsten Lindstedt ஃ 的头像
Carsten Lindstedt ஃ3 个月前

@shadcn @tailwindcss The implementation model is sound but commercially gated: private registry token, private package scope, and Motion+ membership. Installed code is MIT and remains yours, but registry updates can overwrite owned component files, so wrappers are required for clean upgrades.

Motion 的头像
Motion3 个月前

@shadcn @tailwindcss You can tell your agent it did a great job of making words 🙏

Korneza Solutions 的头像
Korneza Solutions3 个月前

@shadcn @tailwindcss Nice integration with Motion MCP for agents. Giving agents design + code power is exciting. Outpost makes sure it stays secure with policy enforcement and full visibility over MCP calls.

GameStop Guru 的头像
GameStop Guru3 个月前

@shadcn @tailwindcss Bullish

DnAiDomain 的头像
DnAiDomain2 个月前

@shadcn @tailwindcss is available for sale

Max Hart 的头像
Max Hart3 个月前

@shadcn @tailwindcss O M G

Motion 的头像
Motion3 个月前

@shadcn @tailwindcss Shadcn or adapting with AI?

Andrew Scofield 的头像
Andrew Scofield3 个月前

@shadcn @tailwindcss What does this mean for us non-react users?

Rahul Gupta 的头像
Rahul Gupta3 个月前

@shadcn @tailwindcss awesome

Motion 的头像
Motion3 个月前

@shadcn @tailwindcss Thanks Rahul!

Chico Sousa 的头像
Chico Sousa3 个月前

@shadcn @tailwindcss Im gonna ask: can we have a migrate command from the old tailwind animation to this? @shadcn

Filip 的头像
Filip3 个月前

@shadcn @tailwindcss @orcdev 👀

ProEvilz 的头像
ProEvilz3 个月前

@shadcn @tailwindcss

Motion 的头像
Motion3 个月前

@shadcn @tailwindcss Rumbled!

相关视频