[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-categories-en-US":3,"categories-en-US":3,"resource-shadcn-ui-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":49,"alternatives-shadcn-ui-en-US":125,"related-resources-shadcn-ui-en-US":204},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},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,"meta_description":15},"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","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 sty...",[17,18,19,20],"Comprehensive component library","Design tokens","Documentation included","Theme customization",[22,23,24],"Free to use","Comprehensive design system","Streamlines workflow",[26,27],"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,[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\u002F1333848637032170061","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,192,198],{"url":127,"name":128,"slug":129,"cover":130,"tagline":131},"https:\u002F\u002Fblocks.lander.studio","Lander Studio Blocks","lander-studio-blocks","87513c7c-ecfb-488d-bc10-777f9f8c46ca.webp","Free Figma UI block library — copy and paste components directly into your designs",{"url":133,"name":134,"slug":135,"cover":136,"tagline":137},"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":139,"name":140,"slug":141,"cover":142,"tagline":143},"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":145,"name":146,"slug":147,"cover":148,"tagline":149},"https:\u002F\u002Freadymag.com","Readymag","readymag","ecb98afd-9dc4-482f-a0d3-2cdd3a979b7a.webp","Design stunning web publications, portfolios, and landing pages — no coding required",{"url":151,"name":152,"slug":153,"cover":154,"tagline":155},"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":157,"name":158,"slug":159,"cover":160,"tagline":161},"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":163,"name":164,"slug":165,"cover":166,"tagline":167},"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":169,"name":170,"slug":171,"cover":172,"tagline":173},"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":175,"name":176,"slug":177,"cover":178,"tagline":179},"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":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\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":193,"name":194,"slug":195,"cover":196,"tagline":197},"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":199,"name":200,"slug":201,"cover":202,"tagline":203},"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.",[205,213,224],{"url":52,"icon":10,"name":53,"slug":54,"tags":206,"cover":67,"tagline":68,"is_featured":69,"date_created":70,"date_updated":10},[207,208,209,210,211,212],{"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":214,"cover":122,"tagline":123,"is_featured":69,"date_created":124,"date_updated":10},[215,216,217,218,219,220,221,222,223],{"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":225,"icon":10,"name":226,"slug":227,"tags":228,"cover":234,"tagline":235,"is_featured":69,"date_created":236,"date_updated":10},"https:\u002F\u002Fflareum.io\u002F","Flareum","flareum",[229,230,232],{"seo":10,"name":10,"slug":37},{"seo":10,"name":10,"slug":231},"figma-file",{"seo":10,"name":10,"slug":233},"collaboration","7ce196b0-b5f3-49d4-ba83-cdff08424942.webp","Design system builder that syncs Figma and code","2026-06-23T12:06:17.661232+00:00"]