[{"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":47,"alternatives-animate-ui-en-US":123,"related-resources-animate-ui-en-US":243},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":10,"tagline":11,"description":12,"seo":13,"features":16,"pros":22,"cons":27,"best_for":30,"cover":31,"icon":32,"pricing":33,"platform":10,"github_url":10,"twitter_url":10,"discord_url":10,"dribbble_url":10,"pricing_tiers":34,"views_count":35,"featured_rank":10,"categories":36,"tags":45,"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,"meta_description":15},"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","Animate UI (animateui.com) is an opensource library of animated React components built with Tailwind CSS and Framer Motion, inspired by shadcn\u002Fui and Magic U...",[17,18,19,20,21],"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.",[23,24,25,26],"Free to use","Open source","Ready-to-use templates","Extensive icon library",[28,29],"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,[37,41],{"name":38,"slug":39,"sub_categories":40},"Design Systems","design-systems",[],{"name":42,"slug":43,"sub_categories":44},"Animation","animation",[],[46],{"name":38,"slug":39},[48,69,84,97],{"id":49,"url":50,"icon":10,"name":51,"slug":52,"tags":53,"cover":65,"tagline":66,"is_featured":67,"date_created":68,"date_updated":10},862,"https:\u002F\u002Fdeveloper.apple.com\u002Fdesign\u002Fresources\u002F","Apple Design Resources","apple-design-resources",[54,56,58,60,62,64],{"seo":10,"name":55,"slug":33},"Free",{"seo":10,"name":10,"slug":57},"fonts",{"seo":10,"name":10,"slug":59},"icons",{"seo":10,"name":10,"slug":61},"mockups",{"seo":10,"name":10,"slug":63},"ui-kits",{"seo":10,"name":10,"slug":39},"39af338d-2e06-4c05-bfcb-b33066ed9bb7.webp","Official Apple design templates, UI kits, fonts, and tools",false,"2026-07-16T01:44:01.585569+00:00",{"id":70,"url":71,"icon":10,"name":72,"slug":73,"tags":74,"cover":81,"tagline":82,"is_featured":67,"date_created":83,"date_updated":10},861,"https:\u002F\u002Fferalui.dev\u002Fgradients","FeralUI Gradient Builder","feralui-gradients",[75,76,79],{"seo":10,"name":55,"slug":33},{"seo":10,"name":77,"slug":78},"Open Source","open-source",{"seo":10,"name":10,"slug":80},"colors","7ebaf15a-33a1-4f03-bd92-88ad52b886e5.webp","Playful, physics-driven gradient builder for Tailwind CSS","2026-07-16T01:39:25.742464+00:00",{"id":85,"url":86,"icon":10,"name":87,"slug":88,"tags":89,"cover":94,"tagline":95,"is_featured":67,"date_created":96,"date_updated":10},860,"https:\u002F\u002Fviewport-ui.design\u002F","Viewport UI","viewport-ui",[90,91,92],{"seo":10,"name":55,"slug":33},{"seo":10,"name":10,"slug":63},{"seo":10,"name":10,"slug":93},"inspiration","7a4e7938-e9b1-4f8b-9886-37b683ddd8f6.webp","UI curated experiences for your inspiration","2026-07-07T06:28:48.469215+00:00",{"id":98,"url":99,"icon":10,"name":100,"slug":101,"tags":102,"cover":120,"tagline":121,"is_featured":67,"date_created":122,"date_updated":10},859,"https:\u002F\u002F21st.dev\u002F","21st.dev","21st-dev",[103,106,108,109,112,113,114,116,118],{"seo":10,"name":104,"slug":105},"AI Powered","ai-powered",{"seo":10,"name":10,"slug":107},"ai",{"seo":10,"name":55,"slug":33},{"seo":10,"name":110,"slug":111},"Freemium","freemium",{"seo":10,"name":10,"slug":63},{"seo":10,"name":10,"slug":39},{"seo":10,"name":10,"slug":115},"prototyping",{"seo":10,"name":10,"slug":117},"no-code",{"seo":10,"name":10,"slug":119},"productivity","79e67612-7a6f-45be-a799-e872786fc4ed.webp","Hand-crafted React components and templates — not AI slop","2026-07-07T06:23:36.061553+00:00",[124,130,136,142,148,154,160,166,172,178,184,190,196,202,208,213,219,225,231,237],{"url":125,"name":126,"slug":127,"cover":128,"tagline":129},"https:\u002F\u002Fwww.openshot.org","OpenShot","openshot","7ed18533-d505-40c8-8ced-bed19705a9d4.webp","Free and open-source video editor — powerful, easy to use, and cross-platform",{"url":131,"name":132,"slug":133,"cover":134,"tagline":135},"https:\u002F\u002Flottiefiles.com\u002Flottie-creator","Lottie Creator","lottie-creator","0444fb06-cafd-4497-b3e8-a55b510860ad.webp","The Official Animation Tool from LottieFiles",{"url":137,"name":138,"slug":139,"cover":140,"tagline":141},"https:\u002F\u002Fmotionfly.co","Motionfly","motionfly","5b285b49-cdc7-4517-a7af-69086ca543a1.webp","AI product launch video generator with 3D device mockups",{"url":143,"name":144,"slug":145,"cover":146,"tagline":147},"https:\u002F\u002Fjitter.video\u002F","Jitter","jitter","a381c13b-fa33-4886-93f9-bca2aa7157be.webp","The Simple Motion Design Tool",{"url":149,"name":150,"slug":151,"cover":152,"tagline":153},"https:\u002F\u002Flottiefiles.com\u002F","Lottiefiles","lottiefiles","f5a57f18-961b-4001-8c9b-99c39091d63c.webp","The Official Hub and Global Marketplace for Lottie Animations",{"url":155,"name":156,"slug":157,"cover":158,"tagline":159},"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":161,"name":162,"slug":163,"cover":164,"tagline":165},"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":167,"name":168,"slug":169,"cover":170,"tagline":171},"https:\u002F\u002Fwww.svgator.com","SVGator","svgator","4a1092c3-9615-418c-a17c-8a495b15d25a.webp","Animate SVG files without coding — create stunning vector animations for web and UI",{"url":173,"name":174,"slug":175,"cover":176,"tagline":177},"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":179,"name":180,"slug":181,"cover":182,"tagline":183},"https:\u002F\u002Frive.app\u002Fmarketplace\u002F","Rive Marketplace","rive-marketplace","be9edf0d-0948-42ec-8bf8-c9bf0b7374d5.webp","The Hub for Interactive Animation Assets",{"url":185,"name":186,"slug":187,"cover":188,"tagline":189},"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":191,"name":192,"slug":193,"cover":194,"tagline":195},"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":197,"name":198,"slug":199,"cover":200,"tagline":201},"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":203,"name":204,"slug":205,"cover":206,"tagline":207},"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":209,"name":210,"slug":210,"cover":211,"tagline":212},"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":214,"name":215,"slug":216,"cover":217,"tagline":218},"https:\u002F\u002Fgsap.com\u002F","GSAP","gsap","screenshots\u002Fgsap.webp","Professional-grade JavaScript animation library for high-performance web animations.",{"url":220,"name":221,"slug":222,"cover":223,"tagline":224},"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":226,"name":227,"slug":228,"cover":229,"tagline":230},"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":232,"name":233,"slug":234,"cover":235,"tagline":236},"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":238,"name":239,"slug":240,"cover":241,"tagline":242},"https:\u002F\u002Frive.app\u002F","Rive","rive","screenshots\u002Frive.webp","The Real-Time Interactive Animation Platform",[244,252,263],{"url":50,"icon":10,"name":51,"slug":52,"tags":245,"cover":65,"tagline":66,"is_featured":67,"date_created":68,"date_updated":10},[246,247,248,249,250,251],{"seo":10,"name":55,"slug":33},{"seo":10,"name":10,"slug":57},{"seo":10,"name":10,"slug":59},{"seo":10,"name":10,"slug":61},{"seo":10,"name":10,"slug":63},{"seo":10,"name":10,"slug":39},{"url":99,"icon":10,"name":100,"slug":101,"tags":253,"cover":120,"tagline":121,"is_featured":67,"date_created":122,"date_updated":10},[254,255,256,257,258,259,260,261,262],{"seo":10,"name":104,"slug":105},{"seo":10,"name":10,"slug":107},{"seo":10,"name":55,"slug":33},{"seo":10,"name":110,"slug":111},{"seo":10,"name":10,"slug":63},{"seo":10,"name":10,"slug":39},{"seo":10,"name":10,"slug":115},{"seo":10,"name":10,"slug":117},{"seo":10,"name":10,"slug":119},{"url":264,"icon":10,"name":265,"slug":266,"tags":267,"cover":273,"tagline":274,"is_featured":67,"date_created":275,"date_updated":10},"https:\u002F\u002Fflareum.io\u002F","Flareum","flareum",[268,269,271],{"seo":10,"name":10,"slug":39},{"seo":10,"name":10,"slug":270},"figma-file",{"seo":10,"name":10,"slug":272},"collaboration","7ce196b0-b5f3-49d4-ba83-cdff08424942.webp","Design system builder that syncs Figma and code","2026-06-23T12:06:17.661232+00:00"]