[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-hero-ui-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":49,"alternatives-hero-ui-en-US":125,"related-resources-hero-ui-en-US":192},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":10,"tagline":11,"description":12,"seo":13,"features":16,"pros":21,"cons":25,"best_for":28,"cover":29,"icon":30,"pricing":31,"platform":10,"github_url":10,"twitter_url":10,"discord_url":10,"dribbble_url":10,"pricing_tiers":32,"views_count":33,"featured_rank":10,"categories":34,"tags":43,"files":45},264,"Hero UI","hero-ui","https:\u002F\u002Fwww.heroui.com\u002F","2025-11-12T02:54:32.445+00:00",null,"Beautiful, fast and modern React UI library for building accessible and customizable web applications.","HeroUI offers a variety of UI blocks, components, and templates built with Tailwind CSS, aiming to accelerate web development, especially for projects utilizing Tailwind CSS.",{"title":14,"meta_description":15},"Hero UI - Beautiful, fast and modern React UI library for building accessible and customizable web applications. | DesignToolMark","HeroUI offers a variety of UI blocks, components, and templates built with Tailwind CSS, aiming to accelerate web development, especially for projects utiliz...",[17,18,19,20],"Comprehensive component library","Design tokens","Documentation included","Theme customization",[22,23,24],"Ready-to-use templates","Comprehensive design system","Streamlines workflow",[26,27],"Adoption requires team alignment","Customization can be complex","Teams building scalable, consistent digital products.","795eb9ae-d74c-49bd-8f13-9fb6225f087c.webp","d2cc0901-b10b-412b-9551-d98b76390284.svg","free",{"free":3},0,[35,39],{"name":36,"slug":37,"sub_categories":38},"Design Systems","design-systems",[],{"name":40,"slug":41,"sub_categories":42},"Templates & UI Kits","templates-ui-kits",[],[44],{"name":36,"slug":37},[46],{"url":47,"type":48},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F1267584376234254760","figma",[50,71,86,99],{"id":51,"url":52,"icon":10,"name":53,"slug":54,"tags":55,"cover":67,"tagline":68,"is_featured":69,"date_created":70,"date_updated":10},862,"https:\u002F\u002Fdeveloper.apple.com\u002Fdesign\u002Fresources\u002F","Apple Design Resources","apple-design-resources",[56,58,60,62,64,66],{"seo":10,"name":57,"slug":31},"Free",{"seo":10,"name":10,"slug":59},"fonts",{"seo":10,"name":10,"slug":61},"icons",{"seo":10,"name":10,"slug":63},"mockups",{"seo":10,"name":10,"slug":65},"ui-kits",{"seo":10,"name":10,"slug":37},"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":72,"url":73,"icon":10,"name":74,"slug":75,"tags":76,"cover":83,"tagline":84,"is_featured":69,"date_created":85,"date_updated":10},861,"https:\u002F\u002Fferalui.dev\u002Fgradients","FeralUI Gradient Builder","feralui-gradients",[77,78,81],{"seo":10,"name":57,"slug":31},{"seo":10,"name":79,"slug":80},"Open Source","open-source",{"seo":10,"name":10,"slug":82},"colors","7ebaf15a-33a1-4f03-bd92-88ad52b886e5.webp","Playful, physics-driven gradient builder for Tailwind CSS","2026-07-16T01:39:25.742464+00:00",{"id":87,"url":88,"icon":10,"name":89,"slug":90,"tags":91,"cover":96,"tagline":97,"is_featured":69,"date_created":98,"date_updated":10},860,"https:\u002F\u002Fviewport-ui.design\u002F","Viewport UI","viewport-ui",[92,93,94],{"seo":10,"name":57,"slug":31},{"seo":10,"name":10,"slug":65},{"seo":10,"name":10,"slug":95},"inspiration","7a4e7938-e9b1-4f8b-9886-37b683ddd8f6.webp","UI curated experiences for your inspiration","2026-07-07T06:28:48.469215+00:00",{"id":100,"url":101,"icon":10,"name":102,"slug":103,"tags":104,"cover":122,"tagline":123,"is_featured":69,"date_created":124,"date_updated":10},859,"https:\u002F\u002F21st.dev\u002F","21st.dev","21st-dev",[105,108,110,111,114,115,116,118,120],{"seo":10,"name":106,"slug":107},"AI Powered","ai-powered",{"seo":10,"name":10,"slug":109},"ai",{"seo":10,"name":57,"slug":31},{"seo":10,"name":112,"slug":113},"Freemium","freemium",{"seo":10,"name":10,"slug":65},{"seo":10,"name":10,"slug":37},{"seo":10,"name":10,"slug":117},"prototyping",{"seo":10,"name":10,"slug":119},"no-code",{"seo":10,"name":10,"slug":121},"productivity","79e67612-7a6f-45be-a799-e872786fc4ed.webp","Hand-crafted React components and templates — not AI slop","2026-07-07T06:23:36.061553+00:00",[126,132,138,144,150,156,162,168,174,180,186],{"url":127,"name":128,"slug":129,"cover":130,"tagline":131},"https:\u002F\u002Fui.nuxt.com\u002F","Nuxt UI","nuxt-ui","f2abda49-a137-4a30-9fc6-73b24f26a1a1.webp","Nuxt UI is an open-source UI component library designed for Nuxt 3 applications, offering beautiful, customizable, and accessible Vue components.",{"url":133,"name":134,"slug":135,"cover":136,"tagline":137},"https:\u002F\u002Fmui.com\u002F","MUI","mui","bed9b944-a96c-4bb2-892d-f818f221f053.webp","MUI is a UI component library specifically designed for React applications. It provides a vast array of ready-to-use React components for building user interfaces, following React's declarative programming paradigm.",{"url":139,"name":140,"slug":141,"cover":142,"tagline":143},"https:\u002F\u002Fanimate-ui.com\u002F","Animate UI","animate-ui","51875bb1-cd07-4d4b-b76c-940dab1c9780.webp","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.",{"url":145,"name":146,"slug":147,"cover":148,"tagline":149},"https:\u002F\u002Ftailwindcss.com\u002Fplus","Tailwind UI Blocks","tailwind-ui-blocks","4e383b64-9b01-4b4d-af66-0bbd07b19419.webp","Tailwind UI Blocks offer pre-built UI components and layouts based on Tailwind CSS, accelerating your web development for beautiful and responsive designs.",{"url":151,"name":152,"slug":153,"cover":154,"tagline":155},"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":157,"name":158,"slug":159,"cover":160,"tagline":161},"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":163,"name":164,"slug":165,"cover":166,"tagline":167},"https:\u002F\u002Fant.design\u002F","Ant Design","ant-design","46e77f76-13b9-4032-93fd-30c2bddda508.webp","Ant Design is an enterprise-level UI design language and React component library, providing high-quality UI solutions to help build elegant and efficient enterprise products.",{"url":169,"name":170,"slug":171,"cover":172,"tagline":173},"https:\u002F\u002Fchakra-ui.com\u002F","Chakra UI","chakra-ui","c663e14b-ed3e-4890-a479-b6839b558313.webp","Chakra UI is a simple, modular, and accessible React UI component library, focused on enhancing developer experience and providing highly customizable building blocks.",{"url":175,"name":176,"slug":177,"cover":178,"tagline":179},"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":181,"name":182,"slug":183,"cover":184,"tagline":185},"https:\u002F\u002Fflowbite.com\u002F","Flowbite Design System","flowbite-design-system","1fc705b7-2a78-4a13-ae72-b6fbf30933be.webp","open-source Tailwind CSS component library with Figma kit for rapid UI building.",{"url":187,"name":188,"slug":189,"cover":190,"tagline":191},"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.",[193,201,212],{"url":52,"icon":10,"name":53,"slug":54,"tags":194,"cover":67,"tagline":68,"is_featured":69,"date_created":70,"date_updated":10},[195,196,197,198,199,200],{"seo":10,"name":57,"slug":31},{"seo":10,"name":10,"slug":59},{"seo":10,"name":10,"slug":61},{"seo":10,"name":10,"slug":63},{"seo":10,"name":10,"slug":65},{"seo":10,"name":10,"slug":37},{"url":101,"icon":10,"name":102,"slug":103,"tags":202,"cover":122,"tagline":123,"is_featured":69,"date_created":124,"date_updated":10},[203,204,205,206,207,208,209,210,211],{"seo":10,"name":106,"slug":107},{"seo":10,"name":10,"slug":109},{"seo":10,"name":57,"slug":31},{"seo":10,"name":112,"slug":113},{"seo":10,"name":10,"slug":65},{"seo":10,"name":10,"slug":37},{"seo":10,"name":10,"slug":117},{"seo":10,"name":10,"slug":119},{"seo":10,"name":10,"slug":121},{"url":213,"icon":10,"name":214,"slug":215,"tags":216,"cover":222,"tagline":223,"is_featured":69,"date_created":224,"date_updated":10},"https:\u002F\u002Fflareum.io\u002F","Flareum","flareum",[217,218,220],{"seo":10,"name":10,"slug":37},{"seo":10,"name":10,"slug":219},"figma-file",{"seo":10,"name":10,"slug":221},"collaboration","7ce196b0-b5f3-49d4-ba83-cdff08424942.webp","Design system builder that syncs Figma and code","2026-06-23T12:06:17.661232+00:00"]