[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-wix-design-system-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":52,"alternatives-wix-design-system-en-US":126,"related-resources-wix-design-system-en-US":187},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":9,"tagline":10,"description":11,"seo":12,"features":15,"pros":20,"cons":25,"best_for":28,"cover":29,"icon":30,"pricing":31,"platform":32,"github_url":9,"twitter_url":9,"discord_url":9,"dribbble_url":9,"pricing_tiers":34,"views_count":35,"featured_rank":9,"categories":36,"tags":41,"files":48},430,"Wix Design System","wix-design-system","https:\u002F\u002Fwww.wixdesignsystem.com\u002F",null,"comprehensive Figma library of UI components and guidelines for consistent Wix app designs.","Wix Design System (wixdesignsystem.com) is an official open-source design system from Wix, providing a unified set of UI components, patterns, and guidelines to ensure consistent, accessible, and scalable designs across Wix's ecosystem of apps and tools. It empowers designers and developers to build high-quality user experiences with reusable elements, focusing on modularity and collaboration. The system includes Figma files for prototyping and a comprehensive documentation site for implementation details.\nComponent Library: Over 100 reusable UI components like buttons, forms, navigation, and modals, with variants for states and accessibility.\nGuidelines: Detailed specs for colors (semantic palette), typography (font scales, hierarchy), icons (custom set with SVGs), spacing, and motion.\nFigma Integration: Downloadable Figma kit for rapid prototyping and design handoff.\nDocumentation: Interactive guides for usage, best practices, and code snippets in React.",{"title":13,"meta_description":14},"Wix Design System - comprehensive Figma library of UI components and guidelines for consistent Wix app designs. | DesignToolMark","Wix Design System (wixdesignsystem.com) is an official opensource design system from Wix, providing a unified set of UI components, patterns, and guidelines ...",[16,17,18,19],"Component Library: Over 100 reusable UI components like buttons, forms, navigation, and modals, with variants for states and accessibility.","Guidelines: Detailed specs for colors (semantic palette), typography (font scales, hierarchy), icons (custom set with SVGs), spacing, and motion.","Figma Integration: Downloadable Figma kit for rapid prototyping and design handoff.","Documentation: Interactive guides for usage, best practices, and code snippets in React.",[21,22,23,24],"Open source","Real-time collaboration","Extensive icon library","Scalable vector formats",[26,27],"Adoption requires team alignment","Customization can be complex","Guidelines: Detailed specs for colors (semantic palette), typography (font scales, hierarchy), icons (custom set with SVGs), spacing, and motion. Figma Integration: Downloadable Figma kit for rapid prototyping and design handoff. Documentation: Interactive guides for usage, best practices, and code snippets in React.","1d3e413c-f60a-4a67-9e60-f2c2fbb3e383.webp","bda42072-af0b-47f6-8613-6a3fd4041827.svg","free",[33],"Browser",{"free":3},0,[37],{"name":38,"slug":39,"sub_categories":40},"Design Systems","design-systems",[],[42,44,45],{"name":43,"slug":31},"Free",{"name":38,"slug":39},{"name":46,"slug":47},"No Code","no-code",[49],{"url":50,"type":51},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F1407387126965111708\u002Fwix-design-system","figma",[53,73,88,101],{"id":54,"url":55,"icon":9,"name":56,"slug":57,"tags":58,"cover":69,"tagline":70,"is_featured":71,"date_created":72,"date_updated":9},862,"https:\u002F\u002Fdeveloper.apple.com\u002Fdesign\u002Fresources\u002F","Apple Design Resources","apple-design-resources",[59,60,62,64,66,68],{"seo":9,"name":43,"slug":31},{"seo":9,"name":9,"slug":61},"fonts",{"seo":9,"name":9,"slug":63},"icons",{"seo":9,"name":9,"slug":65},"mockups",{"seo":9,"name":9,"slug":67},"ui-kits",{"seo":9,"name":9,"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":74,"url":75,"icon":9,"name":76,"slug":77,"tags":78,"cover":85,"tagline":86,"is_featured":71,"date_created":87,"date_updated":9},861,"https:\u002F\u002Fferalui.dev\u002Fgradients","FeralUI Gradient Builder","feralui-gradients",[79,80,83],{"seo":9,"name":43,"slug":31},{"seo":9,"name":81,"slug":82},"Open Source","open-source",{"seo":9,"name":9,"slug":84},"colors","7ebaf15a-33a1-4f03-bd92-88ad52b886e5.webp","Playful, physics-driven gradient builder for Tailwind CSS","2026-07-16T01:39:25.742464+00:00",{"id":89,"url":90,"icon":9,"name":91,"slug":92,"tags":93,"cover":98,"tagline":99,"is_featured":71,"date_created":100,"date_updated":9},860,"https:\u002F\u002Fviewport-ui.design\u002F","Viewport UI","viewport-ui",[94,95,96],{"seo":9,"name":43,"slug":31},{"seo":9,"name":9,"slug":67},{"seo":9,"name":9,"slug":97},"inspiration","7a4e7938-e9b1-4f8b-9886-37b683ddd8f6.webp","UI curated experiences for your inspiration","2026-07-07T06:28:48.469215+00:00",{"id":102,"url":103,"icon":9,"name":104,"slug":105,"tags":106,"cover":123,"tagline":124,"is_featured":71,"date_created":125,"date_updated":9},859,"https:\u002F\u002F21st.dev\u002F","21st.dev","21st-dev",[107,110,112,113,116,117,118,120,121],{"seo":9,"name":108,"slug":109},"AI Powered","ai-powered",{"seo":9,"name":9,"slug":111},"ai",{"seo":9,"name":43,"slug":31},{"seo":9,"name":114,"slug":115},"Freemium","freemium",{"seo":9,"name":9,"slug":67},{"seo":9,"name":9,"slug":39},{"seo":9,"name":9,"slug":119},"prototyping",{"seo":9,"name":9,"slug":47},{"seo":9,"name":9,"slug":122},"productivity","79e67612-7a6f-45be-a799-e872786fc4ed.webp","Hand-crafted React components and templates — not AI slop","2026-07-07T06:23:36.061553+00:00",[127,133,139,145,151,157,163,169,175,181],{"url":128,"name":129,"slug":130,"cover":131,"tagline":132},"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":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.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":152,"name":153,"slug":154,"cover":155,"tagline":156},"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":158,"name":159,"slug":160,"cover":161,"tagline":162},"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":164,"name":165,"slug":166,"cover":167,"tagline":168},"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":170,"name":171,"slug":172,"cover":173,"tagline":174},"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F805195278314519508","Base Gallery","base-gallery","b74e1e61-d456-49db-80d4-662a31d51a4f.webp","Figma community file showcasing a collection of UI components for design inspiration and prototyping.",{"url":176,"name":177,"slug":178,"cover":179,"tagline":180},"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":182,"name":183,"slug":184,"cover":185,"tagline":186},"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.",[188,196,207],{"url":55,"icon":9,"name":56,"slug":57,"tags":189,"cover":69,"tagline":70,"is_featured":71,"date_created":72,"date_updated":9},[190,191,192,193,194,195],{"seo":9,"name":43,"slug":31},{"seo":9,"name":9,"slug":61},{"seo":9,"name":9,"slug":63},{"seo":9,"name":9,"slug":65},{"seo":9,"name":9,"slug":67},{"seo":9,"name":9,"slug":39},{"url":103,"icon":9,"name":104,"slug":105,"tags":197,"cover":123,"tagline":124,"is_featured":71,"date_created":125,"date_updated":9},[198,199,200,201,202,203,204,205,206],{"seo":9,"name":108,"slug":109},{"seo":9,"name":9,"slug":111},{"seo":9,"name":43,"slug":31},{"seo":9,"name":114,"slug":115},{"seo":9,"name":9,"slug":67},{"seo":9,"name":9,"slug":39},{"seo":9,"name":9,"slug":119},{"seo":9,"name":9,"slug":47},{"seo":9,"name":9,"slug":122},{"url":208,"icon":9,"name":209,"slug":210,"tags":211,"cover":217,"tagline":218,"is_featured":71,"date_created":219,"date_updated":9},"https:\u002F\u002Fflareum.io\u002F","Flareum","flareum",[212,213,215],{"seo":9,"name":9,"slug":39},{"seo":9,"name":9,"slug":214},"figma-file",{"seo":9,"name":9,"slug":216},"collaboration","7ce196b0-b5f3-49d4-ba83-cdff08424942.webp","Design system builder that syncs Figma and code","2026-06-23T12:06:17.661232+00:00"]