Loading video...

Video Failed to Load

Go Home

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.

motiondotdev's profile picture

Motion

15,538 subscribers

167,364 views • 2 days ago •via X (Twitter)

ArtsScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

It’s here. Beautifully designed components built with Radix UI and Tailwind CSS. A collection of accessible and customizable components that you can copy and paste into your apps. Free. Open Source. And Next.js 13 Ready.
0:29

It’s here. Beautifully designed components built with Radix UI and Tailwind CSS. A collection of accessible and customizable components that you can copy and paste into your apps. Free. Open Source. And Next.js 13 Ready.

shadcn

667,050 views • 3 years ago

Introducing Code Blocks A set of UI components & utilities to show your code beautifully. ✓ Copy-Paste. 100% free. ✓ Shiki or Sugar-High for syntax highlighter. ✓ Add components with shadcn /ui CLI. ✓ Docs built with Next.js + Base UI ✨
0:58

Introducing Code Blocks A set of UI components & utilities to show your code beautifully. ✓ Copy-Paste. 100% free. ✓ Shiki or Sugar-High for syntax highlighter. ✓ Add components with shadcn /ui CLI. ✓ Docs built with Next.js + Base UI ✨

Pablo

19,269 views • 5 months ago

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic
0:47

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic

CodeHagen

241,425 views • 1 year ago

Introducing OpenStatus - an open source monitoring service to check your api/website, collaborated with 🦋 @thibaultouay.dev. ◆ Built with Next.js, Turso, for speed. ◆ Built with Tailwind CSS, shadcn ui for seemless components. →
1:38

Introducing OpenStatus - an open source monitoring service to check your api/website, collaborated with 🦋 @thibaultouay.dev. ◆ Built with Next.js, Turso, for speed. ◆ Built with Tailwind CSS, shadcn ui for seemless components. →

Maximilian Kaske 🏓

95,813 views • 3 years ago

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖
2:08

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖

Shefali

22,953 views • 1 year ago

UI Skills are now easier for agents. Introducing UI Skills CLI. ask Codex, Cursor, Claude Code, or any agent to use the CLI, like: "use `npx ui-skills start` to fix the motion in this dialog" it finds the best design-engineering skill for the job and uses it as context
0:20

UI Skills are now easier for agents. Introducing UI Skills CLI. ask Codex, Cursor, Claude Code, or any agent to use the CLI, like: "use `npx ui-skills start` to fix the motion in this dialog" it finds the best design-engineering skill for the job and uses it as context

Ibelick

61,422 views • 1 month ago

Meet InterfaceKit, a design tool for working with agents. Refine components live in your app → click to copy prompt. Your agent gets the element data, Tailwind classes, and Motion animations it needs to make your changes in one shot. No more guess and check.
0:28

Meet InterfaceKit, a design tool for working with agents. Refine components live in your app → click to copy prompt. Your agent gets the element data, Tailwind classes, and Motion animations it needs to make your changes in one shot. No more guess and check.

joshpuckett

104,635 views • 5 months ago

1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this? Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️
0:25

1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this? Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️

shadcn

531,753 views • 3 years ago

Introducing HeroUI v3 🔥 A complete rewrite for React. A brand-new library for React Native. 🌐 Web → 75+ components, 21 new 📱 Native → 37+ components, built from scratch 🎨 Styling → Tailwind CSS v4, CSS variables, OKLCH, BEM ⚡ Performance → CSS animations, no JS runtime ♿ Accessibility → React Aria Components 🧩 Architecture → Compound components, headless-ready 🤖 AI → MCP Server, Agent Skills, LLMs.txt 📎 Figma Kit v3 with 1:1 component parity One design system. Beautiful everywhere.
1:15

Introducing HeroUI v3 🔥 A complete rewrite for React. A brand-new library for React Native. 🌐 Web → 75+ components, 21 new 📱 Native → 37+ components, built from scratch 🎨 Styling → Tailwind CSS v4, CSS variables, OKLCH, BEM ⚡ Performance → CSS animations, no JS runtime ♿ Accessibility → React Aria Components 🧩 Architecture → Compound components, headless-ready 🤖 AI → MCP Server, Agent Skills, LLMs.txt 📎 Figma Kit v3 with 1:1 component parity One design system. Beautiful everywhere.

HeroUI

537,053 views • 4 months ago

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic
0:20

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic

CodeHagen

16,258 views • 1 year ago

Introducing Agents UI, an open-source shadcn component library for building polished React frontends for your voice agents. Audio visualizers. Media controls. Session management tools. Chat transcripts. All wired to LiveKit Agents. Install via the shadcn CLI and own the code.
0:43

Introducing Agents UI, an open-source shadcn component library for building polished React frontends for your voice agents. Audio visualizers. Media controls. Session management tools. Chat transcripts. All wired to LiveKit Agents. Install via the shadcn CLI and own the code.

LiveKit

182,887 views • 4 months ago

Introducing the Motion MCP... Connect Motion directly into Claude, Codex, Cursor, OpenClaw, Perplexity, Hermes, and more with one-click. Your agent is now your motion designer. Launch video made by prompting Motion in Claude 👇🏽 Available now at motion [dot] so.
0:25

Introducing the Motion MCP... Connect Motion directly into Claude, Codex, Cursor, OpenClaw, Perplexity, Hermes, and more with one-click. Your agent is now your motion designer. Launch video made by prompting Motion in Claude 👇🏽 Available now at motion [dot] so.

Motion

17,332 views • 1 month ago

You can now clone any UI on the web and make it your own with one click. Just: - grab it with our Chrome extension - paste into Fusion - Type "adapt to our brand" Converts the UI to your design system and stack Links in reply:
0:21

You can now clone any UI on the web and make it your own with one click. Just: - grab it with our Chrome extension - paste into Fusion - Type "adapt to our brand" Converts the UI to your design system and stack Links in reply:

Steve (Builder.io)

40,275 views • 10 months ago

Now that Laravel ships with shadcn/ui, we can use the cli to add components, pages, themes from remote registries. Need a Products page for your dashboard? One command adds the page, component and all dependencies to your codebase.
0:56

Now that Laravel ships with shadcn/ui, we can use the cli to add components, pages, themes from remote registries. Need a Products page for your dashboard? One command adds the page, component and all dependencies to your codebase.

shadcn

52,962 views • 1 year ago

🎨 Introducing Genspark Design The next-gen AI for design and creation, powered by Claude Opus 4.7. From rough idea to professional design, no design background needed. - One tool for everything you design. UI prototypes, videos, HTML animations, posters — all in one place and production-ready. - Stay on-brand with your own design system. Upload your Figma files or save your designs, reuse them across every project, and share them with your team. - Ship it, don't just mock it. Turn any app or website design into working code with one click, built on Genspark Code. Start building at our launch price 👉
1:23

🎨 Introducing Genspark Design The next-gen AI for design and creation, powered by Claude Opus 4.7. From rough idea to professional design, no design background needed. - One tool for everything you design. UI prototypes, videos, HTML animations, posters — all in one place and production-ready. - Stay on-brand with your own design system. Upload your Figma files or save your designs, reuse them across every project, and share them with your team. - Ship it, don't just mock it. Turn any app or website design into working code with one click, built on Genspark Code. Start building at our launch price 👉

Genspark

179,614 views • 1 month ago

Introducing the new Svgl 🥳🎉 ❖ New design. Upgrade to Svelte 5 + Tailwind CSS v4. ❖ New API docs + extensions page. ❖ shadcn/ui support + open with v0. ❖ Copy the optimized SVG directly using SVGO. ❖ Add your SVGs to favorites and access your list whenever you want.
0:51

Introducing the new Svgl 🥳🎉 ❖ New design. Upgrade to Svelte 5 + Tailwind CSS v4. ❖ New API docs + extensions page. ❖ shadcn/ui support + open with v0. ❖ Copy the optimized SVG directly using SVGO. ❖ Add your SVGs to favorites and access your list whenever you want.

Pablo

41,634 views • 10 months ago

Today ReUI Pro goes live! 🔥 Design-forward shadcn/ui platform with MCP fluency for agents. AI made UI generation instant. It didn't make it production-ready. You still spend hours picking blocks, adjusting details, and fine-tuning the last mile. We spent six months building the agent-ready layer for shadcn/ui that closes the gap. Inside: ☑️ Free Hosted MCP with Agent Skills. ☑️ 1,019 open-source shadcn/ui components, free forever. ☑️ 17 open-source ReUI primitives(Data Grid, Filters,File Upload, Stepper and more). ☑️ 485 Pro blocks across over 50 categories. ☑️ 562 hand-crafted interactive icons in 4 styles. ☑️ Default Base UI and legacy Radix by WorkOS versions. Real credit to shadcn for the ecosystem! The registry model changed how we all build and ship UI, and ReUI stands on that foundation. Below is a thread on the 10 things we're most proud of👇
3:17

Today ReUI Pro goes live! 🔥 Design-forward shadcn/ui platform with MCP fluency for agents. AI made UI generation instant. It didn't make it production-ready. You still spend hours picking blocks, adjusting details, and fine-tuning the last mile. We spent six months building the agent-ready layer for shadcn/ui that closes the gap. Inside: ☑️ Free Hosted MCP with Agent Skills. ☑️ 1,019 open-source shadcn/ui components, free forever. ☑️ 17 open-source ReUI primitives(Data Grid, Filters,File Upload, Stepper and more). ☑️ 485 Pro blocks across over 50 categories. ☑️ 562 hand-crafted interactive icons in 4 styles. ☑️ Default Base UI and legacy Radix by WorkOS versions. Real credit to shadcn for the ecosystem! The registry model changed how we all build and ship UI, and ReUI stands on that foundation. Below is a thread on the 10 things we're most proud of👇

ReUI

39,399 views • 16 days ago

Introducing HeroUI Chat: AI-powered UI generation that lets you create beautiful interfaces in seconds. 🎨 Describe your UI → Get beautiful results ⚡ Built on HeroUI, ready for production 🛠 No design experience needed 🌍 Deploy to the world in one click Start building today 👇🏼
0:54

Introducing HeroUI Chat: AI-powered UI generation that lets you create beautiful interfaces in seconds. 🎨 Describe your UI → Get beautiful results ⚡ Built on HeroUI, ready for production 🛠 No design experience needed 🌍 Deploy to the world in one click Start building today 👇🏼

HeroUI

45,628 views • 1 year ago

Introducing Design Mode on v0: • Quickly tweak your generation — copy, typography, layout, colors, styling, and more • Preview changes and save when ready • No need to spend credits or wait for an LLM • Tailwind and shadcn native
0:23

Introducing Design Mode on v0: • Quickly tweak your generation — copy, typography, layout, colors, styling, and more • Preview changes and save when ready • No need to spend credits or wait for an LLM • Tailwind and shadcn native

v0

561,713 views • 1 year ago

After months of hard work, it's here! 🚀 The NEW shadcn/ui kit for Figma, based on Tailwind v4 and shadcn 2.5.0! What's new? ⭐ Updated Figma kit ⭐ Refactored Pro Blocks for Tailwind v4 ⭐ 28 new Pro Blocks ⭐ Added new AI models to our plugin for improved component generation ⭐ New feature: Export Figma themes via our plugin and install them with shadcn/ui registry
2:27

After months of hard work, it's here! 🚀 The NEW shadcn/ui kit for Figma, based on Tailwind v4 and shadcn 2.5.0! What's new? ⭐ Updated Figma kit ⭐ Refactored Pro Blocks for Tailwind v4 ⭐ 28 new Pro Blocks ⭐ Added new AI models to our plugin for improved component generation ⭐ New feature: Export Figma themes via our plugin and install them with shadcn/ui registry

Matt

26,730 views • 1 year ago