Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 3 Monaten •via X (Twitter)

36 Kommentare

Profilbild von Motion
Motionvor 3 Monaten

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

Profilbild von Vicente Surraco
Vicente Surracovor 3 Monaten

@shadcn @tailwindcss Awesome, would love Svelte support

Profilbild von Motion
Motionvor 3 Monaten

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

Profilbild von Skiipy
Skiipyvor 3 Monaten

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

Profilbild von Motion
Motionvor 3 Monaten

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

Profilbild von Skiipy
Skiipyvor 3 Monaten

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 👌

Profilbild von Motion
Motionvor 3 Monaten

@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

Profilbild von Skiipy
Skiipyvor 3 Monaten

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 😅👌

Profilbild von Chetan Khulage
Chetan Khulagevor 3 Monaten

@shadcn @tailwindcss the search in docs is not working

Profilbild von Motion
Motionvor 3 Monaten

@shadcn @tailwindcss Will take a look!

Profilbild von Gregor
Gregorvor 3 Monaten

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

Profilbild von Motion
Motionvor 3 Monaten

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

Profilbild von Windows Explorer
Windows Explorervor 3 Monaten

@shadcn @tailwindcss let me guess, paywalled?

Profilbild von Motion
Motionvor 3 Monaten

@shadcn @tailwindcss Yes we like to eat

Profilbild von Windows Explorer
Windows Explorervor 3 Monaten

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

Profilbild von Ee Venn Soh
Ee Venn Sohvor 3 Monaten

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

Profilbild von Jose
Josevor 3 Monaten

@shadcn @tailwindcss 😱🫡

Profilbild von Motion
Motionvor 3 Monaten

@shadcn @tailwindcss 😃

Profilbild von Chadd Weston
Chadd Westonvor 3 Monaten

@shadcn @tailwindcss Good move

Profilbild von Motion
Motionvor 3 Monaten

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

Profilbild von Max
Maxvor 3 Monaten

@shadcn @tailwindcss So sick

Profilbild von Motion
Motionvor 3 Monaten

@shadcn @tailwindcss Thanks Max!

Profilbild von Carsten Lindstedt ஃ
Carsten Lindstedt ஃvor 3 Monaten

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

Profilbild von Motion
Motionvor 3 Monaten

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

Profilbild von Korneza Solutions
Korneza Solutionsvor 3 Monaten

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

Profilbild von GameStop Guru
GameStop Guruvor 3 Monaten

@shadcn @tailwindcss Bullish

Profilbild von DnAiDomain
DnAiDomainvor 2 Monaten

@shadcn @tailwindcss is available for sale

Profilbild von Max Hart
Max Hartvor 3 Monaten

@shadcn @tailwindcss O M G

Profilbild von Motion
Motionvor 3 Monaten

@shadcn @tailwindcss Shadcn or adapting with AI?

Profilbild von Andrew Scofield
Andrew Scofieldvor 3 Monaten

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

Profilbild von Rahul Gupta
Rahul Guptavor 3 Monaten

@shadcn @tailwindcss awesome

Profilbild von Motion
Motionvor 3 Monaten

@shadcn @tailwindcss Thanks Rahul!

Profilbild von Chico Sousa
Chico Sousavor 3 Monaten

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

Profilbild von Filip
Filipvor 3 Monaten

@shadcn @tailwindcss @orcdev 👀

Profilbild von ProEvilz
ProEvilzvor 3 Monaten

@shadcn @tailwindcss

Profilbild von Motion
Motionvor 3 Monaten

@shadcn @tailwindcss Rumbled!

Ähnliche Videos