--- title: Introducing Motion UI | daily.dev description: Motion UI is a new library of production-ready animated React components released as part of the Motion+ membership. Components are built on shadcn's semantic... canonical: https://daily.dev/posts/introducing-motion-ui-azsyavrza twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Introducing Motion UI | daily.dev og:description: Motion UI is a new library of production-ready animated React components released as part of the Motion+ membership. Components are built on shadcn's semantic... og:url: https://daily.dev/posts/introducing-motion-ui-azsyavrza og:image: https://api.daily.dev/og/posts/AzsyaVrza.png og:image:alt: Introducing Motion UI og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Introducing Motion UI **[Motion](https://daily.dev/sources/motion)** · 4 min read · 102 upvotes · 4 comments ## Summary Motion UI is a new library of production-ready animated React components released as part of the Motion+ membership. Components are built on shadcn's semantic design tokens for automatic theming, graded with a MotionScore S-F performance rating based on render pipeline impact, and configurable through a central motion.theme.ts file that lets teams tune transition feel (snap, ui, gentle, lively, ambient) across an entire site. It supports installation via the shadcn CLI, an AI prompt builder (Adapt with AI), or the Motion AI Kit MCP, and includes reduced-motion support. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What is MotionScore in Motion UI and how does it grade animations? MotionScore is an S-F grading methodology measuring an animation's impact on the browser's render pipeline. Compositor-only animations, which are cheapest, receive an S grade, while paint-triggering animations receive a C grade, with other tiers in between. Every Motion UI section and component is checked against this scale using a tool called MotionScore for Agents, and the library avoids shipping D or F graded or unguarded infinitely-running animations. _Developers weighing animation libraries by render cost can track library performance news on daily.dev._ ### How do I theme animation feel across a whole site with Motion UI? Motion UI ships a single motion.theme.ts file defining five named transitions: snap for instant feedback, ui for menus and reveals, gentle for large surfaces, lively for celebratory moments, and ambient for continuous background motion. Each defaults to a physics-backed spring but can be swapped for custom springs or time-based easing. Editing this one file retunes every installed section's feel simultaneously, and setting reducedMotion to calm removes transforms while keeping opacity fades. _Anyone deciding how to standardize animation feel across a design system can follow library updates like this on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@agustinbarrientos** · 4 upvotes > How does MotionScore score a page when several B-grade components animate at once? I'd want a composition test on a midrange phone. The individual grades could pass while the combined frame budget fails. **@jliter85** · 4 upvotes > The idea of treating motion as part of the design system really stood out to me. Being able to adjust how an entire site _feels_ through shared motion settings, while still keeping performance visible with MotionScore, could make polished animation much more practical to use in real projects. Definitely something I want to experiment with. ## Similar posts on daily.dev - [Introducing Motion UI Gallery](https://daily.dev/posts/introducing-motion-ui-gallery-y9l0jnr2e) · Motion · 99 upvotes · 1 comments - [How to Build an Animated Badge Component with shadcn/ui](https://daily.dev/posts/how-to-build-an-animated-badge-component-with-shadcn-ui-eymgvkmv9) · freeCodeCamp · 10 upvotes · 2 comments - [Introducing Motion Studio](https://daily.dev/posts/introducing-motion-studio-rrkymbbll) · Motion · 37 upvotes · 1 comments - [Introducing Figma Motion: Your canvas now has a timeline](https://daily.dev/posts/introducing-figma-motion-your-canvas-now-has-a-timeline-iqkjsl2la) · Figma · 12 upvotes · 0 comments - [React ViewTransition vs. Motion: Comparing animation approaches](https://daily.dev/posts/react-viewtransition-vs-motion-comparing-animation-approaches-8boanxhvn) · LogRocket · 20 upvotes · 1 comments --- Tags: [#react](https://daily.dev/tags/react), [#shadcn](https://daily.dev/tags/shadcn), [#web-animation](https://daily.dev/tags/web-animation) [View this post on daily.dev](https://daily.dev/posts/introducing-motion-ui-azsyavrza) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Introducing Motion UI","url":"https://daily.dev/posts/introducing-motion-ui-azsyavrza","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/introducing-motion-ui-azsyavrza"},"datePublished":"2026-08-23T12:21:15.217Z","dateModified":"2026-09-13T19:58:15.412Z","description":"Motion UI is a new library of production-ready animated React components released as part of the Motion+ membership. Components are built on shadcn's semantic...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/35b4da364e42a790b7dfdd2a3cfede97?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/35b4da364e42a790b7dfdd2a3cfede97?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Motion","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Motion","logo":"https://media.daily.dev/image/upload/s--3YxvsrZb--/f_auto,q_auto/v1787487450/logos/motion?_a=BAMAMicg0","url":"https://daily.dev/sources/motion"},"commentCount":4,"discussionUrl":"https://daily.dev/posts/introducing-motion-ui-azsyavrza","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":102},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":4}],"keywords":"react,shadcn,web-animation","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Motion","item":"https://daily.dev/sources/motion"},{"@type":"ListItem","position":3,"name":"Introducing Motion UI"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/introducing-motion-ui-azsyavrza","comment":[{"@type":"Comment","text":"How does MotionScore score a page when several B-grade components animate at once? I’d want a composition test on a midrange phone. The individual grades could pass while the combined frame budget fails.","datePublished":"2026-08-26T03:27:15.872Z","url":"https://daily.dev/posts/AzsyaVrza#c-d1DHYKl0N","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"The idea of treating motion as part of the design system really stood out to me. Being able to adjust how an entire site feels through shared motion settings, while still keeping performance visible with MotionScore, could make polished animation much more practical to use in real projects. Definitely something I want to experiment with.","datePublished":"2026-08-25T17:11:11.013Z","url":"https://daily.dev/posts/AzsyaVrza#c-prbN9317l","author":{"@type":"Person","name":"John Liter","url":"https://daily.dev/jliter85","image":"https://media.daily.dev/image/upload/s--DQ2HUrO4--/f_auto/v1785100315/avatars/avatar_yHf9cPdgTQEtokv6d8qhM?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/introducing-motion-ui-azsyavrza#faq","mainEntity":[{"@type":"Question","name":"What is MotionScore in Motion UI and how does it grade animations?","acceptedAnswer":{"@type":"Answer","text":"MotionScore is an S-F grading methodology measuring an animation's impact on the browser's render pipeline. Compositor-only animations, which are cheapest, receive an S grade, while paint-triggering animations receive a C grade, with other tiers in between. Every Motion UI section and component is checked against this scale using a tool called MotionScore for Agents, and the library avoids shipping D or F graded or unguarded infinitely-running animations. Developers weighing animation libraries by render cost can track library performance news on daily.dev."}},{"@type":"Question","name":"How do I theme animation feel across a whole site with Motion UI?","acceptedAnswer":{"@type":"Answer","text":"Motion UI ships a single motion.theme.ts file defining five named transitions: snap for instant feedback, ui for menus and reveals, gentle for large surfaces, lively for celebratory moments, and ambient for continuous background motion. Each defaults to a physics-backed spring but can be swapped for custom springs or time-based easing. Editing this one file retunes every installed section's feel simultaneously, and setting reducedMotion to calm removes transforms while keeping opacity fades. Anyone deciding how to standardize animation feel across a design system can follow library updates like this on daily.dev."}}]} ```