[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-shadcn-ui-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":48,"alternatives-shadcn-ui-en-US":117,"related-resources-shadcn-ui-en-US":184},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":10,"tagline":11,"description":12,"seo":13,"features":15,"pros":20,"cons":24,"best_for":27,"cover":28,"icon":29,"pricing":30,"platform":10,"github_url":10,"twitter_url":10,"discord_url":10,"dribbble_url":10,"pricing_tiers":31,"views_count":32,"featured_rank":10,"categories":33,"tags":42,"files":44},268,"shadcn\u002Fui","shadcn-ui","https:\u002F\u002Fui.shadcn.com\u002F","2025-11-12T02:56:24.021+00:00",null,"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.","Since the component code resides directly in your project, you are free to modify and extend any part according to your project's needs. Whether changing styles, adjusting logic, or adding new features, it offers immense flexibility. The use of Tailwind CSS also makes style customization incredibly simple and powerful.",{"title":14,"description":11},"shadcn\u002Fui - 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. | DesignToolMark",[16,17,18,19],"Comprehensive component library","Design tokens","Documentation included","Theme customization",[21,22,23],"Free to use","Comprehensive design system","Streamlines workflow",[25,26],"Adoption requires team alignment","Customization can be complex","Teams building scalable, consistent digital products.","dd0a4029-629e-4e5d-9765-d33af6f31794.webp","791c18d4-f28d-440c-9856-daf7c92aa44e.svg","free",{"free":3},0,[34,38],{"name":35,"slug":36,"sub_categories":37},"Design Systems","design-systems",[],{"name":39,"slug":40,"sub_categories":41},"Templates & UI Kits","templates-ui-kits",[],[43],{"name":35,"slug":36},[45],{"url":46,"type":47},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F1333848637032170061","figma",[49,71,86,98],{"id":50,"url":51,"icon":10,"name":52,"slug":53,"tags":54,"cover":10,"tagline":68,"is_featured":69,"date_created":70,"date_updated":10},668,"https:\u002F\u002Fwww.aura.build","Aura Build","aura-build",[55,57,59,61,63,65],{"seo":10,"name":10,"slug":56},"wireframe",{"seo":10,"name":10,"slug":58},"prototyping",{"seo":10,"name":10,"slug":60},"web-design",{"seo":10,"name":10,"slug":62},"responsive",{"seo":10,"name":10,"slug":64},"icons",{"seo":10,"name":66,"slug":67},"Freemium","freemium","AI-powered website builder and design assistant",false,"2026-06-17T09:18:13.351637+00:00",{"id":72,"url":73,"icon":10,"name":74,"slug":75,"tags":76,"cover":10,"tagline":84,"is_featured":69,"date_created":85,"date_updated":10},667,"https:\u002F\u002Fwww.magicpatterns.com","Magic Patterns","magic-patterns",[77,78,79,81,83],{"seo":10,"name":10,"slug":56},{"seo":10,"name":10,"slug":58},{"seo":10,"name":10,"slug":80},"collaboration",{"seo":10,"name":10,"slug":82},"design-handoff",{"seo":10,"name":66,"slug":67},"AI prototype generator for product teams","2026-06-17T09:18:05.299046+00:00",{"id":87,"url":88,"icon":10,"name":89,"slug":90,"tags":91,"cover":10,"tagline":96,"is_featured":69,"date_created":97,"date_updated":10},666,"https:\u002F\u002Fplatform.gyanmatrix.com\u002Fchronicle","Chronicle","chronicle",[92,93,94,95],{"seo":10,"name":10,"slug":56},{"seo":10,"name":10,"slug":58},{"seo":10,"name":10,"slug":80},{"seo":10,"name":66,"slug":67},"AI-powered documentation generated from real code","2026-06-17T09:17:49.737154+00:00",{"id":99,"url":100,"icon":10,"name":101,"slug":102,"tags":103,"cover":114,"tagline":115,"is_featured":69,"date_created":116,"date_updated":10},665,"https:\u002F\u002Fxfigura.ai","xFigura","xfigura",[104,107,108,110,111,113],{"seo":10,"name":105,"slug":106},"AI Powered","ai-powered",{"seo":10,"name":66,"slug":67},{"seo":10,"name":10,"slug":109},"ai",{"seo":10,"name":10,"slug":80},{"seo":10,"name":10,"slug":112},"3d-modeling",{"seo":10,"name":10,"slug":58},"5a586ca5-7283-4857-82b7-46f48fdf1106.webp","AI-powered collaborative ideation platform for architects and designers","2026-06-17T08:54:08.210866+00:00",[118,124,130,136,142,148,154,160,166,172,178],{"url":119,"name":120,"slug":121,"cover":122,"tagline":123},"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":125,"name":126,"slug":127,"cover":128,"tagline":129},"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":131,"name":132,"slug":133,"cover":134,"tagline":135},"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":137,"name":138,"slug":139,"cover":140,"tagline":141},"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":143,"name":144,"slug":145,"cover":146,"tagline":147},"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":149,"name":150,"slug":151,"cover":152,"tagline":153},"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":155,"name":156,"slug":157,"cover":158,"tagline":159},"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":161,"name":162,"slug":163,"cover":164,"tagline":165},"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":167,"name":168,"slug":169,"cover":170,"tagline":171},"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":173,"name":174,"slug":175,"cover":176,"tagline":177},"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":179,"name":180,"slug":181,"cover":182,"tagline":183},"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.",[185,199,211],{"url":186,"icon":10,"name":187,"slug":188,"tags":189,"cover":196,"tagline":197,"is_featured":10,"date_created":198,"date_updated":10},"https:\u002F\u002Fzeroheight.com","Zeroheight","zeroheight",[190,191,192,193,194],{"seo":10,"name":10,"slug":36},{"seo":10,"name":10,"slug":80},{"seo":10,"name":10,"slug":58},{"seo":10,"name":10,"slug":82},{"seo":10,"name":10,"slug":195},"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":200,"icon":10,"name":201,"slug":202,"tags":203,"cover":208,"tagline":209,"is_featured":10,"date_created":210,"date_updated":10},"https:\u002F\u002Fspecifyapp.com","Specify","specify",[204,205,207],{"seo":10,"name":10,"slug":80},{"seo":10,"name":10,"slug":206},"version-control",{"seo":10,"name":10,"slug":82},"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":119,"icon":212,"name":120,"slug":121,"tags":213,"cover":122,"tagline":123,"is_featured":10,"date_created":215,"date_updated":216},"bd46950f-9a47-4d81-95da-ed6467288051.svg",[214],{"seo":10,"name":10,"slug":36},"2025-10-15T08:20:56.561+00:00","2026-06-12T06:51:44.386368+00:00"]