{"id":36149,"date":"2023-08-24T04:29:26","date_gmt":"2023-08-24T11:29:26","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=36149"},"modified":"2023-08-24T04:29:45","modified_gmt":"2023-08-24T11:29:45","slug":"merge-mui-npm-integration-tutorial","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/","title":{"rendered":"Bring MUI Components to UXPin \u2013 npm Integration Walkthrough"},"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\/08\/MUI-NPM-Integration-1024x512.png\" alt=\"MUI NPM Integration\" class=\"wp-image-36150\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MUI-NPM-Integration-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MUI-NPM-Integration-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MUI-NPM-Integration-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MUI-NPM-Integration.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>With UXPin&#8217;s npm Integration, designers can import npm component libraries to build fully functioning prototypes. These high-fidelity prototypes enable designers to test features, interactions, and functionality impossible to achieve with traditional vector-based design tools.<\/p>\n\n\n\n<p>Build fully interactive prototypes with real building blocks of your app. Try UXPin Merge and sync MUI with Merge and bridge the gap between designers and devs. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover UXPin Merge<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n            <p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-uxpin-s-npm-integration\">What is UXPin&#8217;s npm Integration?<\/h2>\n\n\n\n<p>Firstly, it&#8217;s important to understand UXPin Merge because our npm Integration is the latest iteration of this game-changing technology.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Merge<\/a> allows you to sync a design system&#8217;s component library to UXPin&#8217;s design editor so designers can prototype using fully interactive components that come from their design system.<\/p>\n\n\n\n<p>This component-driven prototyping creates a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/single-source-truth-benefits\/\" target=\"_blank\" rel=\"noreferrer noopener\">single source of truth<\/a> where designers and engineers work with the same design system. Any changes to the repository automatically sync to UXPin, so teams always <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/version-control-for-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">use the latest version<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-enter-npm-integration\">Enter npm Integration<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/merge-component-manager-npm-packages-import-library.png\" alt=\"merge component manager npm packages import library\" class=\"wp-image-35052\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/merge-component-manager-npm-packages-import-library.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/merge-component-manager-npm-packages-import-library-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Previously, designers needed an engineer&#8217;s help to connect and sync Merge. You needed someone proficient at a <a href=\"https:\/\/www.uxpin.com\/merge\/git-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Git repository<\/a> or <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook<\/a>. But, with UXPin&#8217;s npm Integration, designers (or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/designops\/\" target=\"_blank\" rel=\"noreferrer noopener\">DesignOps<\/a>) can complete the integration using an intuitive user interface without writing any code.<\/p>\n\n\n\n<p>If the component library exists as an <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-npm\/\" target=\"_blank\" rel=\"noreferrer noopener\">npm package<\/a>, you can connect it to UXPin through Merge and import the UI elements needed to start prototyping. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-react-component-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">Open-source design libraries<\/a> like MUI work best with the npm Integration because they have a consistent naming convention, file structure, and documentation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-benefits-of-working-with-mui\">The Benefits of Working With MUI<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-mui\/\" target=\"_blank\" rel=\"noreferrer noopener\">MUI<\/a> is a React component library based on Google&#8217;s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/an-introduction-to-interactions-with-material-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Material Design UI<\/a>. The comprehensive design system is excellent for prototyping because it has everything you need to build UIs fast.<\/p>\n\n\n\n<p>The MUI team has done fantastic work to ensure components solve foundational usability and accessibility issues, giving you a ready-to-go product development solution.<\/p>\n\n\n\n<p><a href=\"https:\/\/mui.com\/material-ui\/customization\/theming\/\" target=\"_blank\" rel=\"noreferrer noopener\">MUI is themeable<\/a>, so you can use it as a foundation to build your design system or take advantage of the comprehensive library to test UI elements when trying to find new patterns for your product&#8217;s component library.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-mui-npm-integration-with-uxpin-merge\">MUI npm Integration With UXPin Merge<\/h2>\n\n\n\n<p>MUI has <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-use-ui-kits-to-create-quicker-mockups\/\" target=\"_blank\" rel=\"noreferrer noopener\">design kits<\/a> for a few image-based design tools, but with UXPin, you can import its fully functioning component library\u2013the same foundational components engineers use for development.<\/p>\n\n\n\n<p>MUI components in UXPin look exactly like any other static component but have the same fidelity and functionality as code\u2013UXPin renders HTML, CSS, and Javascript in the backend rather than vector graphics.<\/p>\n\n\n\n<p>When you import UI elements into UXPin, you also get MUI&#8217;s component states out of the box. If you&#8217;ve ever set these up in an image-based design tool, you&#8217;ll know how time-consuming and complicated it can be to add basic states and assign them to the properties panel. With UXPin&#8217;s npm Integration, you can import these states with a few clicks!<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"UXPin Merge npm Integration is Here!\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/2Tg5My4yff4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-assigning-properties-in-merge-component-manager\">Assigning Properties in Merge Component Manager<\/h3>\n\n\n\n<p>The Merge Component Manager allows you to set up properties for each MUI component.<\/p>\n\n\n\n<p>You can use MUI&#8217;s docs to choose which React props you want to import for each component. Once imported, these React props appear in UXPin&#8217;s righthand <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#properties-panel\" target=\"_blank\" rel=\"noreferrer noopener\">Properties Panel<\/a>, allowing you to customize individual UI elements.<\/p>\n\n\n\n<p>For example, an <a href=\"https:\/\/mui.com\/material-ui\/api\/button\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MUI button has several color properties<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Primary<\/li>\n\n\n\n<li>Secondary<\/li>\n\n\n\n<li>Success<\/li>\n\n\n\n<li>Error<\/li>\n\n\n\n<li>Info<\/li>\n\n\n\n<li>Warning<\/li>\n<\/ul>\n\n\n\n<p>When you import these props via the Merge Component Manager, a dropdown appears in the Properties Panel, allowing you to select the desired color. The same applies to variant (contained, outlined, text), size (small, medium, large), and other multi-option props.<\/p>\n\n\n\n<p>There are several property types, including boolean, function, string, array, and enum, to name a few. You can import any <a href=\"https:\/\/mui.com\/material-ui\/api\/button\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MUI React props found in the documentation<\/a> according to your prototyping needs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-connecting-uxpin-to-the-mui-npm-package\">Connecting UXPin to the MUI npm Package<\/h2>\n\n\n\n<p><strong>Step 1<\/strong><\/p>\n\n\n\n<p>Navigate to your UXPin dashboard and click &#8220;New Project.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/kN4VdP1nbeGcmqmNE38v2_ArXePVS4GbYqdgtigaHSssy9DcruLBq2VAjBlzLzEb3GF-4LdRgq5ahgzuPqRKOb3sRdu1EF63xtqtDIYiIh9n7LkMUgxPmgmo9mroB04u-xKf19h9RYk6PwNGR2cs6YI\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 2<\/strong><\/p>\n\n\n\n<p>Name your project and click &#8220;Create New Project.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/Lab2bh5xIQzmsv1pjrJm0is_huh3UCrzLWEz5v3fpaTYgx8IrqBe_yuMA47KID6eHSmyiKWmDuJg3wK7zKkJCfZWua06oVdiVAV1f0jZC457REtmpwOHQSxOqKx0Ye0HG0pbSZ69Fly10gkqsmV2szY\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 3<\/strong><\/p>\n\n\n\n<p>Click &#8220;New prototype&#8221; to open the project in UXPin&#8217;s design canvas.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/lArMdqqOh01YoBkXXrza1k9ohxvnUMxMw7oikNtLb79k9RDoZkc7sGVpk72d4it3N_x6jU16UJ7Mjz9uwrterYAfCjyGkTKkuZHKFsLA16nTkgaNlX7tQy0vq44OizD4r4f6W3-XegWoOUkU5Q4jT-Y\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 4<\/strong><\/p>\n\n\n\n<p>Click the dropdown at the bottom of the Design System Libraries tab in the lefthand sidebar, and click &#8220;New library.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/VNvz5mZWYVCpEsSoMel7nyfnD3tnBcfnT3qrBt7yhaV-kJhdN0esD3v8VmDJkbRToQ7_7Yfu8rpV-zR_yhHF306Jwx8yvzFH0IEsN93pWjU9W6T0dRg7f2VlE6n6hJ_kl9dFBFWP3CDMOl3EVeI_9O4\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p><em>Your sidebar and available libraries may differ from the example.<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 5<\/strong><\/p>\n\n\n\n<p>Select &#8220;Import React Components&#8221; and click &#8220;Next.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/import-npm-package-1024x520.png\" alt=\"import npm package\" class=\"wp-image-36213\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/import-npm-package-1024x520.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/import-npm-package-591x300.png 591w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/import-npm-package-768x390.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/import-npm-package-1536x780.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/import-npm-package-2048x1039.png 2048w\" sizes=\"(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><strong>Step 6<\/strong><\/p>\n\n\n\n<p>Name your library. This name is purely for your reference and won&#8217;t impact the import.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/LlL9EjsOr0xKnq_Z32vcUdetpM0Pv_YR38HpHfXlw2jhai1FA_EYY3mexEUartRdtuswwc6zrdaAUUcX6pTrS3eQqiBiqSJoi1TmXTd55RyWVyv3RyySq8Phd21JuMpYZdIGy9VndPGTE-V3n1m-Iw8\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>You also need to grab the npm package repository name, which you find under Install on <a href=\"https:\/\/www.npmjs.com\/package\/@mui\/material\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MUI Material&#8217;s npm page<\/a>. Copy and paste the Install contents from npm into the &#8220;Library package name&#8221; field.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/n9o7beUDl6KJv7lKLsQFc5a6Ugxr1IAE2GsuqnHPqdg-EPkRiJ53DMBDUCF-78yO4iCTldxS3YmSi1jNU8m9ZcDgqrjrgzlw4cPRKTNZ3dXgEcJrT6116m0eJSUazrMG8w3ha1V17AMIwGfaSINRmZ8\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Delete everything preceding the @ symbol (so you only have <strong>@mui\/material<\/strong>), leave everything else as default, and click &#8220;Next.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/-779ATBUoSL4KyK46Z02BwrP5NcKoT_HipljzOymD2Y-2a1uL5U_DO-VveR3hayMJtvljbk0YNH4HWxZmWlpYvXX3uSmOiFgTNJ4w0VV3Wt3MIOoWkszBHnX6HYcnMdL2tAhMqxkmeuxkoqH4aoJBZA\" alt=\"\" width=\"650\"\/><\/figure>\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-importing-mui-components\">Importing MUI Components<\/h2>\n\n\n\n<p>UXPin will automatically redirect you to the canvas once you complete the npm integration. Now it&#8217;s time to select the MUI components you want to import.<\/p>\n\n\n\n<p><strong>Step 1<\/strong><\/p>\n\n\n\n<p>From the lefthand sidebar, click &#8220;Open Merge Component Manager.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/pWLW12X-bXfwYg9absZ6k-uQl3-ZV6D8Htksf_pweTLmTJ8Zx-cfG8dhUZhvyWWUZ1aDbh2XXkPCK8Ihgwvez9uQSo9kxRxiS9DPh_ccCEVmq1vZKqfH9keP0zacJLPE5owxbOZZSR5SLqxigZg-fcI\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p><em>Merge Component Manager will open in a new tab.<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 2<\/strong><\/p>\n\n\n\n<p>Click &#8220;Add new component.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/lXBW672p-Dy2D4uy9iEeH5kcJUTSaRBFyOiwrwtKtUKllkCPJNTbWWFBdfuw6oQUKN81Tnq12Yo_iZ6zNcgcUQIcr_jDFKNRxJSH5LwGQA193nI9nC5-M71vnx6E803CXVInNBg9n-joZdBydd341DQ\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 3<\/strong><\/p>\n\n\n\n<p>Enter the name of the component you want to import.<\/p>\n\n\n\n<p>You&#8217;ll find the correct naming convention in the MUI docs under <a href=\"https:\/\/mui.com\/material-ui\/api\/accordion\/\">Component API<\/a>. MUI&#8217;s components use CamelCase with no spaces. Always capitalize the first letter. For example, <em>bottom navigation<\/em> would be <em>BottomNavigation<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/CP990bGLoYRNc9YC2dpMMGckVtSx1dJp6Mg4dRFeNfs2UFeiG_Rdym51O3WFiH4rpy0DU_dwG8_Xat5A3VY6zuD9f4pwcYQ1Quy_2Oa6AZHTMOqnj-WNAH0Iubp2PHTyfpOEjrRsDXnSyjswjefAU-s\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Let&#8217;s import an MUI <strong>Button<\/strong> as our first component and add it to a new category called <strong>Inputs<\/strong>. We recommend using the same categories as MUI&#8217;s docs, so designers and engineers have the same reference point.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/iPCcZ5dIekCByNyjCtuahbosoY2GmCJcLo8k2-kSjAUHA9P1RqhoGwlBFJHuFJ0WpwkAZ2o1YAncIwihYFiZpD4HZ1FxQQSDsxQT-gvHyddhSEDTlHtRXiGelVQ0HNDCHurQOwZJe-2G9qNiwHwlj1s\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p>You can add multiple components to a single import, saving you time repeating steps two and three.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Click &#8220;Import Components.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/M8rWJMJM4bZRTRaiUo25JNUsWnbqzmNciSosklEdoaSmFRnLanN4UzfoPD-GPTbnygc9eu9KIR9Ke29VnypVH95mDHz9gz78YOtqlRkElMuh7qL4anYKaDJOdmGPigqXNY_5j31OqIxhsJ_LZcAdFTg\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 4<\/strong><\/p>\n\n\n\n<p>Click &#8220;Publish Changes&#8221; in the top right to initialize the import process. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/step-4-publish-changes-1024x525.jpg\" alt=\"step 4 publish changes\" class=\"wp-image-36152\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/step-4-publish-changes-1024x525.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/step-4-publish-changes-585x300.jpg 585w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/step-4-publish-changes-768x394.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/step-4-publish-changes-1536x788.jpg 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/step-4-publish-changes.jpg 1920w\" sizes=\"(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>The first time you do this for a new component, it might take a minute or two.<\/p>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/tE7f-f5zqQRbKv0RNUthQX1nO5GK-hgLnpFocYk3O9ODFGaccpIyfD_bFT5izQIwhlyF_Hk_MSLUyNRB1nwWPChKM2svj18WMu1kBShU6hy01VhmcYI9PikbeonmP753Hj_Rqj3Y2WRRH1YURAZf4QY\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 5<\/strong><\/p>\n\n\n\n<p>Once the import is complete, click &#8220;Refresh Library&#8221; to update the changes in your project library.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/8JHnkeyaaxYWHi6tedpKmlyCcDpvR9fu_tFj7pSp_KPtGOQeJS0zdpKq7AStvCyu01ftxnkOBVNiIriKmQjOiDoXos1ozVkDFopYa76_LQISH2P4YPpTGpflUZQ6pusQPF_FC2lmuvK5-A6tgLL8ltY\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p>If you follow these instructions step-by-step, you&#8217;ll notice you have a category (Inputs) and your first component (Button) in the left sidebar.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 6<\/strong><\/p>\n\n\n\n<p>Click on the Button to begin adding properties. You can find these React props in MUI&#8217;s documentation under <a href=\"https:\/\/mui.com\/material-ui\/api\/button\/\">Component API &gt; Button<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/-bmtRw7V3IfyWPJbet1amyaL2orEcJUnZpENq8-6gsejfaNRJroXgaU1BGW-swfnMYjUpW7IDN3tqKn_POhWpfpGTj7c06Zcj1ISId2eMo5DaI_FRnjhK9qmjM_Q41yhQT3RA2_cdll-FNm_xNwgLEs\" alt=\"\" width=\"650\"\/><\/figure>\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-adding-component-properties-with-merge-component-manager\">Adding Component Properties with Merge Component Manager<\/h2>\n\n\n\n<p>Let&#8217;s add a few MUI button properties using the React props from the documentation.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/G2wyc4R4SUcTqKZBT0urAoRo65H8yWC98rw9GhYZDeNZK8LYvN9VhazbSjR0KrjgaWe7-YwXN36As7O7nto70g7cDrMWNH2G05jUW8POgmVF7NtLOLvKpDAoZAIRZM2yxNq35U-2_FrXKkobuSOxAcg\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-button-label\">Button Label<\/h3>\n\n\n\n<p><strong>Step 1<\/strong><\/p>\n\n\n\n<p>A button label (or content) in MUI uses the &#8220;children&#8221; React prop.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Property name:<\/strong> enter <em>&#8220;children&#8221;<\/em> (always use lowercase for props)<\/li>\n\n\n\n<li><strong>Display name:<\/strong> This is for your reference, but something descriptive that both designers and engineers use\u2013we&#8217;ve gone with <em>&#8220;Label&#8221;<\/em><\/li>\n\n\n\n<li><strong>Description:<\/strong> Add a short description or instructions for designers\u2013we&#8217;ve used <em>&#8220;Button&#8217;s label or CTA&#8221;<\/em><\/li>\n\n\n\n<li><strong>Property type:<\/strong> <em>&#8220;node&#8221;<\/em> as per MUI&#8217;s docs<\/li>\n\n\n\n<li><strong>Property control:<\/strong> <em>&#8220;textfield&#8221;<\/em> (note: this field will only appear once you select a property type and will differ depending on your selection)<\/li>\n\n\n\n<li><strong>Default value:<\/strong> Your preference\u2013we&#8217;ve gone with &#8220;Button&#8221; (note: MUI capitalizes button labels)<\/li>\n<\/ul>\n\n\n\n<p>As you complete the component&#8217;s properties, you&#8217;ll notice a component preview will appear and change according to your preferences.<\/p>\n\n\n\n<p><strong>Step 2<\/strong><\/p>\n\n\n\n<p>Once you have completed all the fields, click &#8220;Add property.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/WKa989FBfuKRI6XzK7cUIsvu36Fb8j4prXXo00zjiWEvZb_sZ4qJmkYdTuaIbn2RkGNJw58c0bkh4daKqerC1X878n7IaDBsp5tg3265ei5-LEAZRm-UueXWpW-7_cDGwdlfZiqZiRwgPMLpyIadxaw\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Then &#8220;Save changes.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/TyaUp-3F-Pw3KkS0s--ZVdlVAqnNazrj7NNGKK0I1dTo5XQBptVyJgDeLMK8TWamjj1_0nA60TPv6Bj0FDaUwnyvZVeIwIkyoEv--mOHhGCGyKUJ4ZlN3rz39qyW1eSh2AoLYaESBxbwQvOjv72n138\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Lastly, &#8220;Publish library changes.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/JE1gtQeSBj0o8tTNsr2KSL_RbIKsAXNu_Upy9N53iA8tmehRvMsVi22ytir7qgBEGbQXQ6cgUZLdNwD4-aM_qHxzPFJnZDbBh2MUQJ-8ecV9lU84iM6aH8lDOcD31eai6TW0jPoi80EOU2nPLpWbmuc\" alt=\"\" width=\"650\"\/><\/figure>\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-component-driven-prototyping-in-uxpin\">Component-Driven Prototyping in UXPin<\/h2>\n\n\n\n<p>Once you import the MUI components you need, prototyping in UXPin is as simple as drag-and-drop to build layouts. We created this simple email sign-up form using three MUI components in less than a minute.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/-zUAqiInXxDI3O5Wap8sr3TaLcQlJGRDTf_afhXxnl_CI7AJpZ1DhsqFtR6KSDhM1VY1NRrtZcYNegthUcpnxpsfUbWWm6A8nmqKaHC3KuCKrVgxUqxF1z4F0o0OQg9jqZPU2VoAJ0tkLwIQxbyFCLI\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p>When you select an MUI component, the properties you created in Merge Component Manager appear in the righthand Properties Panel.<\/p>\n\n\n\n<p>Ready to discover the possibilities of component-driven prototyping in UXPin? Try the MUI npm Integration (or other open-source component libraries available on npm).<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\/npm-integration\" target=\"_blank\" rel=\"noopener\">Try npm integration<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>With UXPin&#8217;s npm Integration, designers can import npm component libraries to build fully functioning prototypes. These high-fidelity prototypes enable designers to test features, interactions, and functionality impossible to achieve with traditional vector-based design tools. Build fully interactive prototypes with real building blocks of your app. Try UXPin Merge and sync MUI with Merge and bridge<\/p>\n","protected":false},"author":3,"featured_media":36150,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,442,199,440,11,19],"tags":[],"class_list":["post-36149","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-component-driven-prototyping","category-design-systems","category-merge","category-tutorials","category-uxpin"],"yoast_title":"Integrate UXPin Merge with MUI \u2013 Step-by-Step Guide","yoast_metadesc":"Here's how you can integrate with one of the top design libraries. See how to use npm integration and import the MUI components to UXPin.","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>Integrate UXPin Merge with MUI \u2013 Step-by-Step Guide<\/title>\n<meta name=\"description\" content=\"Here&#039;s how you can integrate with one of the top design libraries. See how to use npm integration and import the MUI components to UXPin.\" \/>\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\/merge-mui-npm-integration-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bring MUI Components to UXPin \u2013 npm Integration Walkthrough\" \/>\n<meta property=\"og:description\" content=\"Here&#039;s how you can integrate with one of the top design libraries. See how to use npm integration and import the MUI components to UXPin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-24T11:29:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-24T11:29:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MUI-NPM-Integration.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=\"11 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\\\/merge-mui-npm-integration-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-mui-npm-integration-tutorial\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Bring MUI Components to UXPin \u2013 npm Integration Walkthrough\",\"datePublished\":\"2023-08-24T11:29:26+00:00\",\"dateModified\":\"2023-08-24T11:29:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-mui-npm-integration-tutorial\\\/\"},\"wordCount\":1293,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-mui-npm-integration-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/MUI-NPM-Integration.png\",\"articleSection\":[\"Blog\",\"Component-Driven Prototyping\",\"Design Systems\",\"Merge by UXPin\",\"Tutorials\",\"UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-mui-npm-integration-tutorial\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-mui-npm-integration-tutorial\\\/\",\"name\":\"Integrate UXPin Merge with MUI \u2013 Step-by-Step Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-mui-npm-integration-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-mui-npm-integration-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/MUI-NPM-Integration.png\",\"datePublished\":\"2023-08-24T11:29:26+00:00\",\"dateModified\":\"2023-08-24T11:29:45+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Here's how you can integrate with one of the top design libraries. See how to use npm integration and import the MUI components to UXPin.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-mui-npm-integration-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-mui-npm-integration-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-mui-npm-integration-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/MUI-NPM-Integration.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/MUI-NPM-Integration.png\",\"width\":1200,\"height\":600,\"caption\":\"MUI NPM Integration\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-mui-npm-integration-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bring MUI Components to UXPin \u2013 npm Integration Walkthrough\"}]},{\"@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":"Integrate UXPin Merge with MUI \u2013 Step-by-Step Guide","description":"Here's how you can integrate with one of the top design libraries. See how to use npm integration and import the MUI components to UXPin.","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\/merge-mui-npm-integration-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Bring MUI Components to UXPin \u2013 npm Integration Walkthrough","og_description":"Here's how you can integrate with one of the top design libraries. See how to use npm integration and import the MUI components to UXPin.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/","og_site_name":"Studio by UXPin","article_published_time":"2023-08-24T11:29:26+00:00","article_modified_time":"2023-08-24T11:29:45+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MUI-NPM-Integration.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Bring MUI Components to UXPin \u2013 npm Integration Walkthrough","datePublished":"2023-08-24T11:29:26+00:00","dateModified":"2023-08-24T11:29:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/"},"wordCount":1293,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MUI-NPM-Integration.png","articleSection":["Blog","Component-Driven Prototyping","Design Systems","Merge by UXPin","Tutorials","UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/","name":"Integrate UXPin Merge with MUI \u2013 Step-by-Step Guide","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MUI-NPM-Integration.png","datePublished":"2023-08-24T11:29:26+00:00","dateModified":"2023-08-24T11:29:45+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Here's how you can integrate with one of the top design libraries. See how to use npm integration and import the MUI components to UXPin.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MUI-NPM-Integration.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/08\/MUI-NPM-Integration.png","width":1200,"height":600,"caption":"MUI NPM Integration"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-mui-npm-integration-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Bring MUI Components to UXPin \u2013 npm Integration Walkthrough"}]},{"@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\/36149","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=36149"}],"version-history":[{"count":7,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36149\/revisions"}],"predecessor-version":[{"id":49666,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36149\/revisions\/49666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/36150"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=36149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=36149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=36149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}