[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-animate-ui-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":46,"alternatives-animate-ui-en-US":114,"related-resources-animate-ui-en-US":216},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":10,"tagline":11,"description":12,"seo":13,"features":15,"pros":21,"cons":26,"best_for":29,"cover":30,"icon":31,"pricing":32,"platform":10,"github_url":10,"twitter_url":10,"discord_url":10,"dribbble_url":10,"pricing_tiers":33,"views_count":34,"featured_rank":10,"categories":35,"tags":44,"files":10},390,"Animate UI","animate-ui","https:\u002F\u002Fanimate-ui.com\u002F","2025-11-12T06:43:41.516+00:00",null,"Animate UI is a free open-source React component library with Tailwind and Framer Motion animations, inspired by shadcn\u002Fui, to effortlessly elevate web interfaces.","Animate UI (animate-ui.com) is an open-source library of animated React components built with Tailwind CSS and Framer Motion, inspired by shadcn\u002Fui and Magic UI, providing developers with pre-built, customizable UI elements featuring smooth animations to enhance user interfaces in web applications.\nAnimated Components: Ready-to-use React components with built-in animations, such as buttons, cards, and modals, for seamless integration.\nTailwind & Motion Integration: Leverages Tailwind for styling and Framer Motion for high-performance animations, ensuring lightweight and responsive designs.\nCustomization: Fully customizable via shadcn\u002Fui-style installation, allowing easy theme and variant adjustments.\nRoadmap Highlights: Upcoming features include animated Lucide icons, blocks & templates for faster composition, and participation in Vercel OSS Program.\nCommunity & Open Source: Source code available on GitHub (imskyleen\u002Fanimate-ui), encouraging contributions and free use.",{"title":14,"description":11},"Animate UI - Animate UI is a free open-source React component library with Tailwind and Framer Motion animations, inspired by shadcn\u002Fui, to effortlessly elevate web interfaces. | DesignToolMark",[16,17,18,19,20],"Animated Components: Ready-to-use React components with built-in animations, such as buttons, cards, and modals, for seamless integration.","Tailwind & Motion Integration: Leverages Tailwind for styling and Framer Motion for high-performance animations, ensuring lightweight and responsive designs.","Customization: Fully customizable via shadcn\u002Fui-style installation, allowing easy theme and variant adjustments.","Roadmap Highlights: Upcoming features include animated Lucide icons, blocks & templates for faster composition, and participation in Vercel OSS Program.","Community & Open Source: Source code available on GitHub (imskyleen\u002Fanimate-ui), encouraging contributions and free use.",[22,23,24,25],"Free to use","Open source","Ready-to-use templates","Extensive icon library",[27,28],"Learning curve for advanced features","Rendering can be time-consuming","Customization: Fully customizable via shadcn\u002Fui-style installation, allowing easy theme and variant adjustments. Roadmap Highlights: Upcoming features include animated Lucide icons, blocks & templates for faster composition, and participation in Vercel OSS Program. Community & Open Source: Source code available on GitHub (imskyleen\u002Fanimate-ui), encouraging contributions and free use.","51875bb1-cd07-4d4b-b76c-940dab1c9780.webp","9bae62a3-9f61-4d67-9536-c1cd39f5ecd9.svg","free",{"free":3},0,[36,40],{"name":37,"slug":38,"sub_categories":39},"Design Systems","design-systems",[],{"name":41,"slug":42,"sub_categories":43},"Animation","animation",[],[45],{"name":37,"slug":38},[47,66,82,100],{"id":48,"url":49,"icon":10,"name":50,"slug":51,"tags":52,"cover":62,"tagline":63,"is_featured":64,"date_created":65,"date_updated":10},670,"https:\u002F\u002Fattentioninsight.com","Attention Insight","attention-insight",[53,55,57,59],{"seo":10,"name":10,"slug":54},"wireframe",{"seo":10,"name":10,"slug":56},"user-research",{"seo":10,"name":10,"slug":58},"web-design",{"seo":10,"name":60,"slug":61},"Freemium","freemium","ef36c4d0-cade-4956-a397-b7c4436ad473.webp","AI-powered attention prediction and visual analytics",false,"2026-06-17T09:18:38.384779+00:00",{"id":67,"url":68,"icon":10,"name":69,"slug":70,"tags":71,"cover":79,"tagline":80,"is_featured":64,"date_created":81,"date_updated":10},669,"https:\u002F\u002Fwww.frontitude.com","Frontitude","frontitude",[72,73,74,76,78],{"seo":10,"name":10,"slug":54},{"seo":10,"name":10,"slug":56},{"seo":10,"name":10,"slug":75},"collaboration",{"seo":10,"name":10,"slug":77},"design-handoff",{"seo":10,"name":60,"slug":61},"5237122f-f736-4899-bd25-2002bf09dec2.webp","UX content management platform for multilingual products","2026-06-17T09:18:30.634258+00:00",{"id":83,"url":84,"icon":10,"name":85,"slug":86,"tags":87,"cover":97,"tagline":98,"is_featured":64,"date_created":99,"date_updated":10},668,"https:\u002F\u002Fwww.aura.build","Aura Build","aura-build",[88,89,91,92,94,96],{"seo":10,"name":10,"slug":54},{"seo":10,"name":10,"slug":90},"prototyping",{"seo":10,"name":10,"slug":58},{"seo":10,"name":10,"slug":93},"responsive",{"seo":10,"name":10,"slug":95},"icons",{"seo":10,"name":60,"slug":61},"be6ec3d1-5806-4cf8-bc58-5d536af6c04d.webp","AI-powered website builder and design assistant","2026-06-17T09:18:13.351637+00:00",{"id":101,"url":102,"icon":10,"name":103,"slug":104,"tags":105,"cover":111,"tagline":112,"is_featured":64,"date_created":113,"date_updated":10},667,"https:\u002F\u002Fwww.magicpatterns.com","Magic Patterns","magic-patterns",[106,107,108,109,110],{"seo":10,"name":10,"slug":54},{"seo":10,"name":10,"slug":90},{"seo":10,"name":10,"slug":75},{"seo":10,"name":10,"slug":77},{"seo":10,"name":60,"slug":61},"6d6649e5-e83d-44c6-bdf0-91d6cb530736.webp","AI prototype generator for product teams","2026-06-17T09:18:05.299046+00:00",[115,121,127,133,139,145,151,157,163,168,174,180,186,192,198,204,210],{"url":116,"name":117,"slug":118,"cover":119,"tagline":120},"https:\u002F\u002Flottiefiles.com\u002Flottie-creator","Lottie Creator","lottie-creator","0444fb06-cafd-4497-b3e8-a55b510860ad.webp","The Official Animation Tool from LottieFiles",{"url":122,"name":123,"slug":124,"cover":125,"tagline":126},"https:\u002F\u002Flottiefiles.com\u002F","Lottiefiles","lottiefiles","f5a57f18-961b-4001-8c9b-99c39091d63c.webp","The Official Hub and Global Marketplace for Lottie Animations",{"url":128,"name":129,"slug":130,"cover":131,"tagline":132},"https:\u002F\u002Fjitter.video\u002F","Jitter","jitter","a381c13b-fa33-4886-93f9-bca2aa7157be.webp","The Simple Motion Design Tool",{"url":134,"name":135,"slug":136,"cover":137,"tagline":138},"https:\u002F\u002Fvuetifyjs.com\u002F","Vuetify","vuetify","screenshots\u002Fvuetify.webp","Vuetify is a complete Vue.js UI framework that strictly adheres to Material Design guidelines, offering a rich set of components and powerful customization capabilities.",{"url":140,"name":141,"slug":142,"cover":143,"tagline":144},"https:\u002F\u002Fui.shadcn.com\u002F","shadcn\u002Fui","shadcn-ui","dd0a4029-629e-4e5d-9765-d33af6f31794.webp","shadcn\u002Fui is a unique collection of composable React UI components, offering copy-and-paste code that is highly customizable and seamlessly integrates with Tailwind CSS.",{"url":146,"name":147,"slug":148,"cover":149,"tagline":150},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F1047600760128127424\u002Faws-amplify-ui-kit","AWS Amplify","aws-amplify","4ba08f58-1771-43c7-9b18-b3445362f384.webp","Figma components for building Amplify-powered apps with consistent AWS design language.",{"url":152,"name":153,"slug":154,"cover":155,"tagline":156},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F862805330899066752","Airtable UI Kit","airtable-ui-kit","59462e6f-03cf-4786-878f-43147ddf2897.webp","Figma components for designing Airtable-integrated apps with consistent UI patterns.",{"url":158,"name":159,"slug":160,"cover":161,"tagline":162},"https:\u002F\u002Fwww.figma.com\u002F@backstage","Backstage Design System","backstage-design-system","2dc0463e-c5e0-4c7a-a1c8-618668bce9ae.webp","Figma kit for Backstage developer portals with UI components and guidelines.",{"url":164,"name":165,"slug":165,"cover":166,"tagline":167},"https:\u002F\u002Flucide-animated.com\u002F","lucide-animated","54d5dbd5-f8d8-4e14-85fb-83521dfe25de.webp","open-source animated SVG icons extending Lucide with smooth Lottie animations.",{"url":169,"name":170,"slug":171,"cover":172,"tagline":173},"https:\u002F\u002Fwww.heroui.com\u002F","Hero UI","hero-ui","795eb9ae-d74c-49bd-8f13-9fb6225f087c.webp","Beautiful, fast and modern React UI library for building accessible and customizable web applications.",{"url":175,"name":176,"slug":177,"cover":178,"tagline":179},"https:\u002F\u002Frive.app\u002Fmarketplace\u002F","Rive Marketplace","rive-marketplace","be9edf0d-0948-42ec-8bf8-c9bf0b7374d5.webp","The Hub for Interactive Animation Assets",{"url":181,"name":182,"slug":183,"cover":184,"tagline":185},"https:\u002F\u002Fwww.naiveui.com\u002F","Naive UI","naive-ui","c0549a7c-6a36-442d-bc7c-986f1829b43e.webp","Naive UI is a Vue 3 component library recommended by Evan You, offering beautiful, high-performance, and highly customizable components, entirely written in TypeScript.",{"url":187,"name":188,"slug":189,"cover":190,"tagline":191},"https:\u002F\u002Fgsap.com\u002F","GSAP","gsap","screenshots\u002Fgsap.webp","Professional-grade JavaScript animation library for high-performance web animations.",{"url":193,"name":194,"slug":195,"cover":196,"tagline":197},"https:\u002F\u002Fdoc.animaliads.io\u002F","Animalia DS","animalia-ds","27459ea0-63e7-4ca0-8224-14f3659e3932.webp","comprehensive design system for consistent UI components and guidelines in Animali apps.",{"url":199,"name":200,"slug":201,"cover":202,"tagline":203},"https:\u002F\u002Fwww.wixdesignsystem.com\u002F","Wix Design System","wix-design-system","1d3e413c-f60a-4a67-9e60-f2c2fbb3e383.webp","comprehensive Figma library of UI components and guidelines for consistent Wix app designs.",{"url":205,"name":206,"slug":207,"cover":208,"tagline":209},"https:\u002F\u002Felement-plus.org\u002F","Element Plus","element-plus","0474b1f2-6bdb-4aa5-99ac-f72a69517f6f.webp","Element Plus is a desktop UI component library designed for Vue 3, offering rich, elegant enterprise-grade components to efficiently build management systems.",{"url":211,"name":212,"slug":213,"cover":214,"tagline":215},"https:\u002F\u002Frive.app\u002F","Rive","rive","screenshots\u002Frive.webp","The Real-Time Interactive Animation Platform",[217,231,243],{"url":218,"icon":10,"name":219,"slug":220,"tags":221,"cover":228,"tagline":229,"is_featured":10,"date_created":230,"date_updated":10},"https:\u002F\u002Fzeroheight.com","Zeroheight","zeroheight",[222,223,224,225,226],{"seo":10,"name":10,"slug":38},{"seo":10,"name":10,"slug":75},{"seo":10,"name":10,"slug":90},{"seo":10,"name":10,"slug":77},{"seo":10,"name":10,"slug":227},"figma-file","8f4828c0-3236-44df-9cce-4b74ad2700f7.webp","Living design system documentation — connect Figma to code with interactive docs","2026-06-16T07:16:42.647437+00:00",{"url":232,"icon":10,"name":233,"slug":234,"tags":235,"cover":240,"tagline":241,"is_featured":10,"date_created":242,"date_updated":10},"https:\u002F\u002Fspecifyapp.com","Specify","specify",[236,237,239],{"seo":10,"name":10,"slug":75},{"seo":10,"name":10,"slug":238},"version-control",{"seo":10,"name":10,"slug":77},"ac2bb029-95df-4617-97ca-6051f5dccfc1.webp","Design token platform that pushes your design decisions to code — automatically","2026-06-16T07:14:19.135613+00:00",{"url":134,"icon":244,"name":135,"slug":136,"tags":245,"cover":137,"tagline":138,"is_featured":10,"date_created":247,"date_updated":248},"bd46950f-9a47-4d81-95da-ed6467288051.svg",[246],{"seo":10,"name":10,"slug":38},"2025-10-15T08:20:56.561+00:00","2026-06-12T06:51:44.386368+00:00"]