{"id":33160,"date":"2022-01-19T09:00:00","date_gmt":"2022-01-19T17:00:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=33160"},"modified":"2023-08-13T02:35:50","modified_gmt":"2023-08-13T09:35:50","slug":"mui-library-in-uxpin","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/","title":{"rendered":"Try MUI library in UXPin \u2013 Design Faster"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It-1024x512.png\" alt=\"What Is MUI and What Do You Need to Know About It\" class=\"wp-image-33161\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>MUI is one of the top React component libraries that help front-end developers and designers create consistent user interfaces for their products. It contains a collection of ready-made building blocks that significantly speeds up prototyping. If you want to take the MUI for a test ride, you can try <a href=\"https:\/\/mui.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">MUI Core 5<\/a> with UXPin Merge. Here\u2019s how to do it.\u00a0<\/p>\n\n\n\n<p>Build prorotypes with MUI kit right away. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for UXPin&#8217;s trial<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-uxpin-merge-s-revolution\">UXPin Merge\u2019s Revolution<\/h2>\n\n\n\n<p>UXPin with Merge technology allows teams to prototype faster, because it uses real code components with built-in interactions, states, and variables. Engineers can integrate a <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">React-based library<\/a> or <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook<\/a> with UXPin Merge. Then, designers create digital products with the exact building blocks that engineers developed, and if needed, they can introduce global changes to components&#8217; look and feel.<\/p>\n\n\n\n<p>Such designs are powerful. Not only do they look like a finished product \u2013 they behave like one. Which means that designers get higher quality feedback from usability tests, product teams get stakeholder\u2019s buy-in, and the collaboration between design and development gets stronger. No more gaps between product team members in the process.<\/p>\n\n\n\n<p>You can use your own React components in UXPin. But what if you don\u2019t have enough resources to build your own component library right now? There\u2019s a solution \u2013 try one of the fully-fleshed libraries that sync with UXPin.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-try-open-source-libraries-with-uxpin-merge\">Try Open-Source Libraries with UXPin Merge<\/h2>\n\n\n\n<p>Using pre-built libraries, such as MUI, added to UXPin editor thanks to Merge technology can advance prototyping even more. Developers can use a widely-accepted library that has been documented and tested. Designers, on the other hand, can rest assured that it follows best UI practices.<\/p>\n\n\n\n<p>As for product teams, they can release products faster and scale effectively the design process with an improved developer\u2019s hand-off stage.<\/p>\n\n\n\n<p>Ready libraries include pre-built components, such as buttons, navigation bars, containers, text fields, but also colors, typography, spacing, and grid system which can be adjusted.<\/p>\n\n\n\n<p>The most popular libraries are open source, such as Bootstrap or MUI.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-that-s-why-we-added-mui-to-uxpin-merge\">That\u2019s Why We Added MUI to UXPin Merge<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"500\" style=\"aspect-ratio: 500 \/ 500;\" width=\"500\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/ezgif.com-gif-maker.mov\"><\/video><\/figure>\n\n\n\n<p>MUI is one of the most popular React component libraries for building responsive products. It is based on Material Design \u2013 a well-respected Google\u2019s specification for designing for the web. It contains tips about how different elements should be displayed on the screen.<\/p>\n\n\n\n<p>The MUI creators took those guidelines and they created an open-source code UI library on top of them. Everyone who wants to follow Material UI best practices for creating user interfaces can use the MUI library and save their time.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-benefits-of-using-mui-for-prototyping\">Benefits of Using MUI for Prototyping<\/h3>\n\n\n\n<p>As one of the largest libraries of UI components, icons, and styles, MUI offers tons of advantages for designers, developers, and product managers. It makes their jobs easier than before.<\/p>\n\n\n\n<p>Here are 5 benefits of using MUI for design.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Based on real best design practices<\/strong> \u2013 It\u2019s a UI library that was developed with the most widely accepted design guidelines at its core.<\/li>\n\n\n\n<li><strong>Accessible UI library<\/strong> \u2013 Since it follows Material Design guidelines, MUI has accessibility built into it, so your products can be used universally.<\/li>\n\n\n\n<li><strong>Customizable<\/strong> \u2013 You can adapt code components and slightly adjust them to your design.<\/li>\n\n\n\n<li><strong>Helps at optimizing design systems<\/strong> \u2013 Its efficiency makes it a great tool for implementing an accessible, mature design system at a fraction of time.<\/li>\n\n\n\n<li><strong>Well-documented<\/strong> \u2013 With a great, ready-to-help community comes heaps of documents you can access. They\u2019re all written in a clear, easy-to-follow manner.<\/li>\n<\/ul>\n\n\n\n<p>Creating prototypes based on MUI has many potential benefits for teams of any size. Since UXPin is a code-based prototyping tool, you can really leverage the power of MUI and get even more benefits of prototyping with code components \u2013 the kind that only code-powered prototyping tool can offer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-code-powered-prototyping-gets-you-even-more\">Code-powered Prototyping Gets You Even More<\/h3>\n\n\n\n<p>Aside from the benefits above, teams can achieve a greater efficiency of work using React-based code component libraries in a prototyping tool.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>True functional fidelity<\/strong> \u2013 Because you design with real code components, you can test the actual experience that customers have when using your product.<\/li>\n\n\n\n<li><strong>Faster and risk-free delivery<\/strong> \u2013 Developers can ship products and features faster when the components are fully coded without compromising quality of work.<\/li>\n\n\n\n<li><strong>Design interactions you want <\/strong>\u2013 Oftentimes your interactions are not fully presenting what you had in mind when using vector-based tools; code-powered tools help you avoid that.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How it works<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"282\" style=\"aspect-ratio: 500 \/ 282;\" width=\"500\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/MUI-5-kit-in-UXPin-intro.mp4\"><\/video><\/figure>\n\n\n\n<p>The MUI library gives you fully interactive&nbsp; building blocks to design with right on trial. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a 14-day free trial<\/a> and see how easy it is to design with code components in UXPin\u2019s editor. It gives you plenty of time to explore the library\u2019s components in UXPin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-to-access-mui-on-trial\">How to access MUI on trial<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a trial account \u2013 MUI kit is available for 14 days.<\/li>\n\n\n\n<li>Open a new prototype from the UXPin Dashboard.<\/li>\n\n\n\n<li>Go to Design System Libraries in the Toolbar on the left.<\/li>\n\n\n\n<li>The MUI library is named &#8220;MUI 5&#8221; among other libraries.<\/li>\n\n\n\n<li>Drag and drop interactive components from the library and preview how they behave.<\/li>\n\n\n\n<li>View and copy the code in the <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/spec-mode\/\" target=\"_blank\" rel=\"noreferrer noopener\">Spec Mode<\/a>.<\/li>\n\n\n\n<li>MUI will be available until your trial ends.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-to-access-mui-in-uxpin-merge\">How to access MUI in UXPin Merge<\/h3>\n\n\n\n<p>To design with code components from MUI, you need access to UXPin Merge. If you\u2019re a UXPin Merge user, sign in to your account and you\u2019ll see MUI 5 as one of the libraries.<\/p>\n\n\n\n<p>If you haven\u2019t tried UXPin Merge yet, just <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">request access to UXPin Merge<\/a> and use the MUI Core v5 to build fully interactive user interfaces you can test with users or hand off to engineers. The development team can then use the code, and designers have building blocks ready to create a fully interactive UI for their products.<\/p>\n\n\n\n<p>UXPin Merge integrates with Storybook and Git repository to bring a coded design system into UXPin. More on that in the blog post, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/meet-uxpin-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Meet UXPin Merge<\/em><\/a>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-test-uxpin-merge-with-mui\">Test UXPin Merge with MUI<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"500\" style=\"aspect-ratio: 500 \/ 500;\" width=\"500\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/MUI-5-kit-UXPin.mp4\"><\/video><\/figure>\n\n\n\n<p>The MUI library is one of the most popular React libraries for building interactive experiences for the web and digital devices. Design high-fidelity prototypes in a matter of minutes with MUI as your code component library. Developers, on the other hand, can use the code of the components you use to create the final product.<br><a href=\"https:\/\/www.uxpin.com\/merge\/mui-library\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin Merge with MUI<\/a> and save time on designing fully functional prototypes.<\/p>\n\n\n\n<div class=\"wp-block-buttons\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>MUI is one of the top React component libraries that help front-end developers and designers create consistent user interfaces for their products. It contains a collection of ready-made building blocks that significantly speeds up prototyping. If you want to take the MUI for a test ride, you can try MUI Core 5 with UXPin Merge.<\/p>\n","protected":false},"author":3,"featured_media":33161,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199,174,441,440,172,8,15],"tags":[],"class_list":["post-33160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems","category-enterprise-ux","category-front-end","category-merge","category-product-design","category-prototyping","category-responsive-web-design"],"yoast_title":"","yoast_metadesc":"MUI is one of React libraries for building interactive experiences. Use it with UXPin Merge to create fully-functioning prototypes. See how.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Try MUI library in UXPin \u2013 Design Faster | UXPin<\/title>\n<meta name=\"description\" content=\"MUI is one of React libraries for building interactive experiences. Use it with UXPin Merge to create fully-functioning prototypes. See how.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Try MUI library in UXPin \u2013 Design Faster\" \/>\n<meta property=\"og:description\" content=\"MUI is one of React libraries for building interactive experiences. Use it with UXPin Merge to create fully-functioning prototypes. See how.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-19T17:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-13T09:35:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mui-library-in-uxpin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mui-library-in-uxpin\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Try MUI library in UXPin \u2013 Design Faster\",\"datePublished\":\"2022-01-19T17:00:00+00:00\",\"dateModified\":\"2023-08-13T09:35:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mui-library-in-uxpin\\\/\"},\"wordCount\":1063,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mui-library-in-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It.png\",\"articleSection\":[\"Blog\",\"Design Systems\",\"Enterprise UX\",\"Front-End\",\"Merge by UXPin\",\"Product Design\",\"Prototyping\",\"Responsive Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mui-library-in-uxpin\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mui-library-in-uxpin\\\/\",\"name\":\"Try MUI library in UXPin \u2013 Design Faster | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mui-library-in-uxpin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mui-library-in-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It.png\",\"datePublished\":\"2022-01-19T17:00:00+00:00\",\"dateModified\":\"2023-08-13T09:35:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"MUI is one of React libraries for building interactive experiences. Use it with UXPin Merge to create fully-functioning prototypes. See how.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mui-library-in-uxpin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mui-library-in-uxpin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mui-library-in-uxpin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It.png\",\"width\":1200,\"height\":600,\"caption\":\"What Is MUI and What Do You Need to Know About It\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/mui-library-in-uxpin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Try MUI library in UXPin \u2013 Design Faster\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Try MUI library in UXPin \u2013 Design Faster | UXPin","description":"MUI is one of React libraries for building interactive experiences. Use it with UXPin Merge to create fully-functioning prototypes. See how.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/","og_locale":"en_US","og_type":"article","og_title":"Try MUI library in UXPin \u2013 Design Faster","og_description":"MUI is one of React libraries for building interactive experiences. Use it with UXPin Merge to create fully-functioning prototypes. See how.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/","og_site_name":"Studio by UXPin","article_published_time":"2022-01-19T17:00:00+00:00","article_modified_time":"2023-08-13T09:35:50+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Try MUI library in UXPin \u2013 Design Faster","datePublished":"2022-01-19T17:00:00+00:00","dateModified":"2023-08-13T09:35:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/"},"wordCount":1063,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It.png","articleSection":["Blog","Design Systems","Enterprise UX","Front-End","Merge by UXPin","Product Design","Prototyping","Responsive Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/","name":"Try MUI library in UXPin \u2013 Design Faster | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It.png","datePublished":"2022-01-19T17:00:00+00:00","dateModified":"2023-08-13T09:35:50+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"MUI is one of React libraries for building interactive experiences. Use it with UXPin Merge to create fully-functioning prototypes. See how.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/What-Is-MUI-and-What-Do-You-Need-to-Know-About-It.png","width":1200,"height":600,"caption":"What Is MUI and What Do You Need to Know About It"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/mui-library-in-uxpin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Try MUI library in UXPin \u2013 Design Faster"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/33160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=33160"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/33160\/revisions"}],"predecessor-version":[{"id":49280,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/33160\/revisions\/49280"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/33161"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=33160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=33160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=33160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}