Aceternity UI
Focus: ui library and landing pages. Shares react components and tailwind css with Motion Primitives. Rated 4.7 (Motion Primitives: 4.6).
WebsiteFree planWeb
4.7Visit
Website
Motion Primitives
An open-source UI kit for building animated interfaces faster.
Rating
4.6 / 5
Pricing
Freemium
Difficulty
Intermediate
Works on
Web
Built with love by Shushant Lakhyani. Building bestproductivityresources.com
What is Motion Primitives?
Motion Primitives is an open-source UI kit for making beautiful animated interfaces with React, Next.js and Tailwind CSS. It provides ready-to-use motion components such as text effects, carousels, dialogs and cursors that you copy into your project and adjust.
Pros: what Motion Primitives does well
- Clean, subtle motion components
- Open source and easy to copy
- Built for React, Next.js and Tailwind
Cons: where it falls short
- Some blocks and templates are paid
- Smaller catalogue than bigger libraries
Who Motion Primitives is for
Developers who want tasteful animation without writing it from scratch.
Who can skip it
People not building React apps.
What people use Motion Primitives for
- Adding text effects such as a shimmer, scramble or typing loop to a hero heading
- Building animated carousels, docks, dialogs and accordions without writing the motion yourself
- Animating numbers, image comparisons or a scroll progress bar on a landing page
- Giving a React or Next.js portfolio subtle, polished movement
How to get started
- 1Set up Tailwind CSS in your React or Next.js project.
- 2Install Motion and lucide-react, and add a small cn helper in lib/utils.ts as the docs describe.
- 3Add a component with the CLI, for example npx motion-primitives@latest add text-effect, or copy its code from the docs.
- 4Import the component and change its props and Tailwind classes to suit your design.
Motion Primitives pricing
The Motion Primitives component library is free and open source under the MIT licence. There is a separate Pro site with extra blocks and templates; check it for current plans. See current prices on Motion Primitives's site
Checked 2026-10-28. Prices change, so double-check before you pay.
Motion Primitives FAQ: quick answers
- Is Motion Primitives free?
- Yes. The core components are free and open source under the MIT licence. Extra blocks and templates live on the separate Pro site.
- What does Motion Primitives need to work?
- A React project with Tailwind CSS and the Motion animation library. Some components also use lucide-react icons.
- How do I install a Motion Primitives component?
- Run the CLI with the component name, for example npx motion-primitives@latest add text-effect, or copy the code by hand from the component's page in the docs.
Motion Primitives alternatives
Not sold on Motion Primitives? These do a similar job, and each card says what it has in common.
Magic UI
Focus: shadcn and landing pages. Shares react components and tailwind css with Motion Primitives. Rated 4.7 (Motion Primitives: 4.6).
WebsiteFree planWeb
4.7Visit
ProUI
Focus: shadcn ui, ui templates and app templates. Shares react components and next.js with Motion Primitives. Same 4.6 rating.
WebsiteFree planWeb
4.6Visit
Annnimate
Focus: gsap, animation library and vue components. Shares react components with Motion Primitives. Rated 4.8 (Motion Primitives: 4.6).
WebsiteFree planWeb
4.8Visit
Libraries.dev
Focus: ui effects, react and npm. Shares animation with Motion Primitives. Rated 4.8 (Motion Primitives: 4.6).
WebsiteFree planWeb
4.8Visit
Uiverse
Focus: ui elements, css and buttons. Shares tailwind css with Motion Primitives. Free (Motion Primitives: Freemium). Same 4.6 rating.
WebsiteFreeWeb
4.6Visit
Free alternatives to Motion Primitives
Want to spend nothing? These free picks cover similar ground.
Springs Studio
Focus: easing, design tokens and motion. Shares animation with Motion Primitives. Free (Motion Primitives: Freemium). Rated 4.4 (Motion Primitives: 4.6).
WebsiteFreeWeb
4.4Visit
GSAP
Focus: javascript, scroll animations and svg. Shares animation with Motion Primitives. A framework, not a website. Free (Motion Primitives: Freemium). Rated 4.8 (Motion Primitives: 4.6).
FrameworkFreeWeb
4.8Visit
Motion (motion.dev)
Focus: react, javascript and vue. Shares animation with Motion Primitives. A framework, not a website. Free (Motion Primitives: Freemium). Rated 4.7 (Motion Primitives: 4.6).
FrameworkFreeWeb
4.7Visit
Open Source UI
Focus: next.js components, ui library and copy paste. Shares react components and tailwind css with Motion Primitives. Free (Motion Primitives: Freemium). Rated 4.7 (Motion Primitives: 4.6).
WebsiteFreeWeb
4.7Visit
Theatre.js
Focus: motion, web and 3d. Shares animation with Motion Primitives. A framework, not a website. Free (Motion Primitives: Freemium). Same 4.6 rating.
FrameworkFreeWeb
4.6Visit
Transitions.dev
Focus: ui, transitions and react. Shares animation with Motion Primitives. A framework, not a website. Free (Motion Primitives: Freemium). Rated 4.5 (Motion Primitives: 4.6).
FrameworkFreeWeb
4.5Visit
Are you the maker of Motion Primitives?Get a free Featured badge for your site, a share image and ready-to-paste posts. No sign-up.
Free Notion database
1,100+ ways people are making money online
Real online businesses, creators and projects, broken down by how they make money: apps, online stores, AI tools and more. Free on Gumroad.
Get the free databaseFree Notion database
399+ ways to make money online
Hundreds of online income methods in one place, so you can compare options and pick one to try. Free on Gumroad.
Get the free listFor research and ideas only. Results vary and nothing here is a promise of income. See our Disclaimer.
Weekly newsletter
Everything new, every Monday.
One short email every Monday with everything shipped that week: new free tools and websites, new guides, new free browser tools and what's new in my free Gumroad libraries, plus how the site is growing. Free, and you can unsubscribe anytime.
Join the newsletterYou sign up on Gumroad, which stores your email to send the newsletter. See our Privacy Policy.