--- 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 · 92 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 Motion UI and how do I install it in a React project? Motion UI is a library of production-ready animated sections and components for React, included in the Motion+ lifetime membership. It installs via the shadcn CLI (e.g. npx shadcn@latest add @motion/hero-parallax-layers), through an AI prompt builder called Adapt with AI, or via the Motion AI Kit MCP for agent-driven installation, and is built on shadcn's semantic design tokens so it inherits an existing project's colors, corners, and fonts automatically. _See daily.dev for more on evaluating new React animation libraries like Motion UI before adopting them._ ### What is MotionScore and how does it grade animation performance? MotionScore is an S-F grading methodology that rates an animation's impact on the browser's render pipeline. Compositor-only animations score an S, while paint-triggering animations score a C, with grades running down to F; Motion UI never ships components graded D or F, and every component is checked with a companion tool called MotionScore for Agents. _Developers weighing animation performance trade-offs can track tools like MotionScore on daily.dev._ ### How do I control global animation feel across a React site with Motion UI's motion.theme.ts? Motion UI centralizes transition settings in a single motion.theme.ts file with 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, and editing the file retunes every installed section at once; setting reducedMotion to calm removes transforms while keeping opacity fades. _Teams building consistent motion design systems can follow tools like this via daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@agustinbarrientos** · 3 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** · 3 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. --- 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-08-23T12:36:49.656Z","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":90},{"@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/v1783272917/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@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":3}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/introducing-motion-ui-azsyavrza#faq","mainEntity":[{"@type":"Question","name":"What is Motion UI and how do I install it in a React project?","acceptedAnswer":{"@type":"Answer","text":"Motion UI is a library of production-ready animated sections and components for React, included in the Motion+ lifetime membership. It installs via the shadcn CLI (e.g. npx shadcn@latest add @motion/hero-parallax-layers), through an AI prompt builder called Adapt with AI, or via the Motion AI Kit MCP for agent-driven installation, and is built on shadcn's semantic design tokens so it inherits an existing project's colors, corners, and fonts automatically. See daily.dev for more on evaluating new React animation libraries like Motion UI before adopting them."}},{"@type":"Question","name":"What is MotionScore and how does it grade animation performance?","acceptedAnswer":{"@type":"Answer","text":"MotionScore is an S-F grading methodology that rates an animation's impact on the browser's render pipeline. Compositor-only animations score an S, while paint-triggering animations score a C, with grades running down to F; Motion UI never ships components graded D or F, and every component is checked with a companion tool called MotionScore for Agents. Developers weighing animation performance trade-offs can track tools like MotionScore on daily.dev."}},{"@type":"Question","name":"How do I control global animation feel across a React site with Motion UI's motion.theme.ts?","acceptedAnswer":{"@type":"Answer","text":"Motion UI centralizes transition settings in a single motion.theme.ts file with 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, and editing the file retunes every installed section at once; setting reducedMotion to calm removes transforms while keeping opacity fades. Teams building consistent motion design systems can follow tools like this via daily.dev."}}]} ```