{"id":36489,"date":"2023-08-24T04:43:47","date_gmt":"2023-08-24T11:43:47","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=36489"},"modified":"2023-11-30T15:33:10","modified_gmt":"2023-11-30T23:33:10","slug":"merge-bootstrap-npm-integration-tutorial","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/","title":{"rendered":"How to Bring Bootstrap Components to UXPin\u00a0\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\/09\/Bootstrap-NPM-Integration-1024x512.png\" alt=\"Bootstrap NPM Integration\" class=\"wp-image-36490\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Bootstrap-NPM-Integration-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Bootstrap-NPM-Integration-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Bootstrap-NPM-Integration-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Bootstrap-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>UXPin&#8217;s npm Integration empowers design teams to prototype at a higher fidelity and with code-like functionality. Component-driven prototyping in UXPin allows designers to create prototypes that previously required engineers to code.<\/p>\n\n\n\n<p>With npm Integration, teams can bring component libraries to UXPin&#8217;s design tool and leverage full interactivity of shared components without complicated technical setup. Let&#8217;s see the tutorial to learn how fast it is to integrate components and use Merge.<\/p>\n\n\n\n<p>Bring UI components to UXPin from Git repo, Storybook, or through our newest npm integration. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more about UXPin&#8217;s Merge technology<\/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<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-uxpin-merge\">What is UXPin Merge?<\/h2>\n\n\n\n<p>UXPin Merge is a code-based technology that enables component-driven prototyping for design teams. Instead of designing from scratch, designers use production-ready UI elements from a repository to build high-fidelity, fully functioning prototypes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"501\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/uxpin-merge-component-responsive-1.png\" alt=\"uxpin merge component responsive 1\" class=\"wp-image-32891\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/uxpin-merge-component-responsive-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/uxpin-merge-component-responsive-1-449x300.png 449w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Designers work with visual elements, and engineers the code behind them, creating a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/single-source-truth-benefits\/\" target=\"_blank\" rel=\"noreferrer noopener\">single source of truth<\/a> for the entire product development team. Teams like PayPal or TeamPassword improved the quality, speed, and consistency of their design with UXPin.<\/p>\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>Using UXPin Merge for a private design system requires some engineering knowledge to set up the repository for syncing. But, to use an open-source <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">component library<\/a>, design teams can complete the npm Integration using an intuitive dashboard.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/logo-uxpin-merge-npm-packages.png\" alt=\"logo uxpin merge npm packages\" class=\"wp-image-35050\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/logo-uxpin-merge-npm-packages.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/logo-uxpin-merge-npm-packages-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Designers can manage component imports and properties using <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/merge-component-manager\/\" target=\"_blank\" rel=\"noreferrer noopener\">Merge Component Manager<\/a>. For example, you can import a <a href=\"https:\/\/getbootstrap.com\/docs\/5.2\/components\/buttons\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">button<\/a> from Bootstrap&#8217;s component library and its nine variants:<\/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>Danger<\/li>\n\n\n\n<li>Warning<\/li>\n\n\n\n<li>Info<\/li>\n\n\n\n<li>Light<\/li>\n\n\n\n<li>Dark<\/li>\n\n\n\n<li>Link&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>These variants appear in UXPin&#8217;s Properties Panel as a dropdown. Merge also includes basic hover states for most components, so designers don&#8217;t have to worry about these minor details and can begin prototyping immediately.<\/p>\n\n\n\n<p>Design teams can find component properties to import via the <a href=\"https:\/\/react-bootstrap.netlify.app\/docs\/components\/alerts\/\" target=\"_blank\" rel=\"noreferrer noopener\">React Bootstrap docs<\/a>. They can import every property or only those relevant to the project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-benefits-of-working-with-bootstrap\">The Benefits of Working With Bootstrap<\/h2>\n\n\n\n<p>Bootstrap is one of the oldest and most comprehensive <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-hands-on-guide-to-mobile-first-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">mobile-first<\/a> <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/vue-react-angular-framework-comparison\/\" target=\"_blank\" rel=\"noreferrer noopener\">front-end frameworks<\/a> available for React, Vue, and Angular. UXPin&#8217;s npm integration uses the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-react-component-libraries\/#h-2-react-bootstrap\" target=\"_blank\" rel=\"noreferrer noopener\">React Bootstrap component library<\/a>, but you can import the Vue or Angular versions using our <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook Integration<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"500\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/bootstrap-logo-vector.png\" alt=\"bootstrap logo vector\" class=\"wp-image-36492\" style=\"width:350px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/bootstrap-logo-vector.png 900w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/bootstrap-logo-vector-540x300.png 540w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/bootstrap-logo-vector-768x427.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<p>Bootstrap is best for building responsive websites and web applications, but you could use the React library for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/principles-mobile-app-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">mobile app design<\/a> projects. Bootstrap&#8217;s extensive collection of form elements, responsive tables, and other relevant components makes it an excellent option for web-based enterprise products.<\/p>\n\n\n\n<p>We recommend checking <a href=\"https:\/\/getbootstrap.com\/docs\/5.2\/examples\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Bootstrap&#8217;s Examples page<\/a> to see what&#8217;s possible with this comprehensive front-end framework.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bootstrap-npm-integration-with-uxpin-merge\">Bootstrap npm Integration With UXPin Merge<\/h2>\n\n\n\n<p>You can import Bootstrap components into UXPin&#8217;s design editor using the npm package (<a href=\"https:\/\/www.npmjs.com\/package\/react-bootstrap\">react-bootstrap<\/a>). <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/merge-component-manager\/\" target=\"_blank\" rel=\"noreferrer noopener\">Merge Component Manager<\/a> allows you to import each UI element and its available properties.<\/p>\n\n\n\n<p>With component-driven prototyping in UXPin, design teams get the same fidelity and functionality as engineers because the elements come from the same repository. Designers can replicate whatever engineers can do with repository components in UXPin via the <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/configuring-the-properties-panel\/\" target=\"_blank\" rel=\"noreferrer noopener\">Properties Panel<\/a>.<\/p>\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>You can assign these properties using Bootstrap&#8217;s React props found in the framework&#8217;s documentation.<\/p>\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>Merge Component Manager is a central hub for importing and managing your npm components. You can import as many of these as you need to complete your project.&nbsp;<\/p>\n\n\n\n<p>You also have control over how many properties you import. For example, if you&#8217;re only going to use the Bootstrap button&#8217;s primary and secondary variants, you only need to import two instead of all nine.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-connecting-uxpin-to-the-react-bootstrap-npm-package\">Connecting UXPin to the React Bootstrap npm Package<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1\">Step 1<\/h3>\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\/H22JA5rV8rNai0TZRgen-o2CSdghrizlSRP9zGk7q8glUfZ2L76S48a_twaNiQN8RaskXujfNOKGCSHWPZqkqiiCN_H7d9muEEk2DDeAWhIsB5G7zFbLvvJdaUY_GZixyiaSNqIvRucdPTBAxy7qNM-3GNr2uKRGdaJE6uiCFv7AwduiaJQ2f-9diA\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2\">Step 2<\/h3>\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:\/\/lh5.googleusercontent.com\/Nw9I5Iu3gyCmC4cmJA5TxloRoftp4tcXUQtbhAZm80HScCHKAtkT_cofEI59ctIwBBO6OhNIhFBOzs4kZ6D2A00W4EdyDKZhh9DrPm1PQ_ovAToxCa_1EMJ36jfFRH_Aob4v8UZPZlCcKMIU783PfXWl6J-qxbUev64xBEWHc5X0rH1ZiAKz9ViufQ\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3\">Step 3<\/h3>\n\n\n\n<p>Click &#8220;Design with Merge components&#8221; and &#8220;+ Add new Library.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/U82FDZx3n5riCpDBvrKkjnqFzfcTHqEaYOx2MyVYzNJ6G_0zeg6EHuH5usZdQ6g1x-DJAVHjGFBZ-1f6w-ogRyEsWj9rUNN81AKcjUcigukf2Ypw9hf3eUjLLzj6K4mFNdCToj14iGLK7dcJwwxsIKW5VQWl3Z78YbBttUT2m8Haqnzg9nIdgtFUmA\" alt=\"\" style=\"width:650px\"\/><\/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-step-4\">Step 4<\/h3>\n\n\n\n<p>Select &#8220;Import React Components with npm integration&#8221; and click &#8220;Next.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/EZbizlHcpHHc1awsGxSYOQrJjmpejCES0Bno2quoYbIuRhvEYwZLQRpimk6fPRb3yht03RTTHnzpNdMqo22-r5nJ3DqT-xq67JZ-UshCqayzU0OtGiwtSiaDLxTNcIcUTleRMHyOKIA70IcE9erDlqltI21CrO8q8jVXuCI29MB8akY0tmguL5YTnA\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-5\">Step 5<\/h3>\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<p>Merge requires two Bootstrap packages for the npm Integration to work. You&#8217;ll need <a href=\"https:\/\/www.npmjs.com\/package\/react-bootstrap\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">React Bootstrap (react-bootstrap)<\/a> and <a href=\"https:\/\/www.npmjs.com\/package\/bootstrap\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Boostrap (bootstrap)<\/a>.<\/p>\n\n\n\n<p>Lastly, you must include a path to Bootstrap&#8217;s CSS file for component properties to work in UXPin. You can find this path under <a href=\"https:\/\/react-bootstrap.netlify.app\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CSS in React-Bootstrap&#8217;s documentation<\/a>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>bootstrap\/dist\/css\/bootstrap.min.css<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/qCCf5tsXIOzuOKxD0eEnPNbY42ic4aTX4mlwT3OyIXxpSyUppQBDom3LAhcw2Jh1aLo1yw1tBczv7jaFBXlda6_fPdtgkYLFHuJIPZdMlaijOjQAhU8R_aTMU-gHsEOLuSMSBxzMfNN0phDGwmT2XW5RarfiDB0SRxYulnLXNq_XxHvbIjVjSWxG5A\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-importing-react-bootstrap-components\">Importing React Bootstrap Components<\/h2>\n\n\n\n<p>Once you complete the steps above, UXPin will redirect you to Merge Component Manager. You can also get there from the canvas following Step 1.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-1\">Step 1<\/h3>\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:\/\/lh3.googleusercontent.com\/ysHVpJEeHinQ63F3wXDF2mqq7_jrlO7Vgc3PYKjfJz_BC7FYRlStmdOkkBThBZE1sV6zoztEZyiqF-Gv_6kdjm0OIPZ5r7VIzvGhxDTD3wcdrJoz8jwEK681sNIYS6V5m3k-8VNDwr0ZgFVHg33FIIf0DeWFTCgGXKnbnbF2hesPwaamcM7hphY27Q\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<p>Merge Component Manager will open in a new tab.<\/p>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2-1\">Step 2<\/h3>\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:\/\/lh6.googleusercontent.com\/sT-q8szPE7bOUIVYuDkOIABENc_iR50yO7T9xy-hCVcqxRU7C_gsceUIKYcssmskocq-xX-879gceUm3IuWwdHE7xeDajI6XMyipKpsp2mt2HndoMeVl9p2HyVroGLcZZbQD5cJJmNxxbHzBDg8shNOYMB1HV8R89EYViUQA8c-QAq7mIGg8ro8XUQ\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3-1\">Step 3<\/h3>\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 <a href=\"https:\/\/react-bootstrap.netlify.app\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">React Bootstrap&#8217;s documentation<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/tpnqOLCOkAa21pHuA-InkCs3N5tkhMCZxpmC9RWstj0rgtYQu8SQoM1e8FjdYUwfG09gItNbEeFkCgXvGjpJRp71uWGdEAC1Bh06736wnH621pnWRsonlHhkaMCW9xXfYKnQta-aCPFr6-cR651o1KFloKmVnvzlMX5LhD85YaXgDrkmxUujzuqAJQ\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>We&#8217;ll import a <a href=\"https:\/\/react-bootstrap.netlify.app\/docs\/components\/buttons\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Bootstrap button<\/a> for this tutorial and create a new category called &#8220;Components.&#8221; We recommend using the same categories as React Bootstrap&#8217;s docs so designers and engineers have the same reference point.<\/p>\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<p>Click &#8220;Import Components.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/fx1Rbd-j5NUAswvT9HxehOj4YvPJE29jJafAYfv2PG2M8G89SH7DUtNiGkuSxL5lBOCi7n3lAyRWeWRcT8ew4mWPJP3kLHoAgtFEJU_wE39drfy7BRG7Sf1xJwpo4oGGeLedJ7RmJNlQCnCyqPZIkr4DTjx3v4c4pfQ-bzu0sY0pQDnzHsGIrmr_-A\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-4-1\">Step 4<\/h3>\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 is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/WAxtAFeiD4xkPx4WNLWelOQYcaQDILPQYOiq1yobG5dAUxuINXiZaG0R9a9f7pYjVveAoNecaBTPqoeFVOnoncm6xRjg9fse8SMjv-6wls_c22AjHNAHsYliPetwRK2iJ6zwe-G02AzIrAI0bWtbAbb0CWb0u21BReqLN_Pf7XgKAHXuaesI4n6E5w\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<p>The first time you do this for a new component, it might take a minute.<\/p>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-5-1\">Step 5<\/h3>\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:\/\/lh5.googleusercontent.com\/Xn89i_SqvBkz_qBS3WuV770pIr9GMNMYD0LQDUPpFHWLVSDDZu0yPAxLb3AhcjRw6Osy-BPh7JI6rPFb5dDdPjMXLQ6zf1RU9ycMnbUKSDDeateyr5eR7ZgL8ZY96K6JOWfxY5pzUcxpfD3WE2Z8fIeCml7HIiRu0Mpe1FrTAtTJ4jXq3TZyPihEJA\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<p>If you follow these instructions step-by-step, you&#8217;ll notice you have a category (Components) and your first component (Button) in the left sidebar.<\/p>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-6\">Step 6<\/h3>\n\n\n\n<p>Click on the Button to begin adding properties. You can find these React props in React Bootstrap&#8217;s documentation under API in <a href=\"https:\/\/react-bootstrap.netlify.app\/docs\/components\/buttons\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Components &gt; Button<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/D0ojIXzT2zOl3KB23ZMiPiU0WBNOvG8RrlDo5cGHoKBex_B3xNBC0EcQJ9AjOJlieO9VWA7CRZXKuu8IE9l1T8d8VMeBpkEZ6aoV7SvZKNw8OQtfgxA-4sELBl48ish1Bki5VYCHpVAO7GdT8AO_l68maiUUuvU9erdnfC_y1sNHJ_OFeLp9VHrAGw\" alt=\"\" style=\"width:650px\"\/><\/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>We&#8217;ll add a couple of button properties using <a href=\"https:\/\/react-bootstrap.netlify.app\/docs\/components\/buttons\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">React Bootstrap&#8217;s documentation<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-button-label\">Button Label<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-step-1-2\">Step 1<\/h4>\n\n\n\n<p>You set a React Bootstrap button label using the children property as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Property name:<\/strong> enter &#8220;children&#8221; (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 &#8220;Label&#8221; to keep things uniform<\/li>\n\n\n\n<li><strong>Description:<\/strong> Add a short description or instructions for designers<\/li>\n\n\n\n<li><strong>Property type:<\/strong> &#8220;string&#8221;<\/li>\n\n\n\n<li><strong>Property control:<\/strong> &#8220;textfield&#8221;<\/li>\n\n\n\n<li><strong>Default value:<\/strong> Your preference\u2013we&#8217;ve gone with &#8220;Button&#8221;<\/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<h4 class=\"wp-block-heading\" id=\"h-step-2-2\">Step 2<\/h4>\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\/eZMKA-W_K2zJzDVN3D9EahmWgf_nedLsytQDKW9O_xSY5Ty4L7ggBSLoexNc56TrbvlDjHQgt0GyqxMGABw2VPgUic_NBPreRUYCQo1AHpn8pFBoMpRMajcfN54eVLGUelZzWo2XwG-ejbAtlxvMUrs4DhtvBLaZlA7VMB2w3IApfMu6roYo_vuJYA\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<div style=\"height:21px\" 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\/3wxn-fOHQHDAMnp5-O8i5CG7ovIEg5k3jIHvozGlRi8IIPg88EpyE1_56qlIe298a8NXKWF3eGQZUKzTxaOdx7N3d86nyd6rljkPtCgflpZ4MlhzyWCWYZnw4PImO0xZxE5QihEf0UheFBNPoIWzKU0yxb5Xxn_FGbfxMkql2ukeowUItDia3yCrUQ\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<div style=\"height:21px\" 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:\/\/lh5.googleusercontent.com\/RrlRN8CNTvZcbbx8nHS7uhjZVYahlSf94xx4bB0bPBHJhRiulNx6adndPgvte1IudNyQOiO2lHQF0UboEbtoQ2itgt-ShYt7KvJUAkfMDMypsht7obFNKoXWBewU7vmiwAyMiIOZA5jY2EDZiSqWCc0i2AA4wQGDJA1bW8YpsR6dQxFiF-8YcdZvnQ\" alt=\"\" style=\"width:650px\"\/><\/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-try-component-driven-prototyping-in-uxpin\">Try Component-Driven Prototyping in UXPin<\/h2>\n\n\n\n<p>Once you import the React Bootstrap components and properties 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 Bootstrap 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\/EM5XIL7-VsiwGW5ZCWA1aaPtTN_zwYaaun8gRzn0O7Nrbnan5VbN8HHbbx02bhpHV9P92SX-YNMtbiInIoHR0GQlp4G4BpjwPN8DBMhR9-oRSi3fgRE2Pvnz0vonLkEFkGC9EIioKoxwo0V4Mk80rALOoibSw1t4iftAEOsiHyaWU3ppDdwCRGv7Eg\" alt=\"\" style=\"width:650px\"\/><\/figure>\n\n\n\n<div style=\"height:21px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>When you select a Bootstrap component, the properties you created in Merge Component Manager appear in the righthand Properties Panel.<\/p>\n\n\n\n<p>Try component-driven prototyping with UXPin&#8217;s npm Integration today. Bring Bootstrap&#8217;s npm components and discover how quickly your product gets from ideation to development. Release features much faster.<\/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>UXPin&#8217;s npm Integration empowers design teams to prototype at a higher fidelity and with code-like functionality. Component-driven prototyping in UXPin allows designers to create prototypes that previously required engineers to code. With npm Integration, teams can bring component libraries to UXPin&#8217;s design tool and leverage full interactivity of shared components without complicated technical setup. Let&#8217;s<\/p>\n","protected":false},"author":3,"featured_media":36490,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,442,199,334,440,19],"tags":[],"class_list":["post-36489","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-component-driven-prototyping","category-design-systems","category-features","category-merge","category-uxpin"],"yoast_title":"Bring Bootstrap npm Components to UXPin \u2013 A Short Tutorial","yoast_metadesc":"Get our step-by-step guide on bringing Bootstrap's components to UXPin's design editor. Learn how you can integrate the library through npm.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Bring Bootstrap npm Components to UXPin \u2013 A Short Tutorial<\/title>\n<meta name=\"description\" content=\"Get our step-by-step guide on bringing Bootstrap&#039;s components to UXPin&#039;s design editor. Learn how you can integrate the library through npm.\" \/>\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-bootstrap-npm-integration-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Bring Bootstrap Components to UXPin\u00a0\u2013 npm Integration Walkthrough\" \/>\n<meta property=\"og:description\" content=\"Get our step-by-step guide on bringing Bootstrap&#039;s components to UXPin&#039;s design editor. Learn how you can integrate the library through npm.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-24T11:43:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-30T23:33:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Bootstrap-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=\"10 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-bootstrap-npm-integration-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-bootstrap-npm-integration-tutorial\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"How to Bring Bootstrap Components to UXPin\u00a0\u2013 npm Integration Walkthrough\",\"datePublished\":\"2023-08-24T11:43:47+00:00\",\"dateModified\":\"2023-11-30T23:33:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-bootstrap-npm-integration-tutorial\\\/\"},\"wordCount\":1161,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-bootstrap-npm-integration-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Bootstrap-NPM-Integration.png\",\"articleSection\":[\"Blog\",\"Component-Driven Prototyping\",\"Design Systems\",\"Features\",\"Merge by UXPin\",\"UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-bootstrap-npm-integration-tutorial\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-bootstrap-npm-integration-tutorial\\\/\",\"name\":\"Bring Bootstrap npm Components to UXPin \u2013 A Short Tutorial\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-bootstrap-npm-integration-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-bootstrap-npm-integration-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Bootstrap-NPM-Integration.png\",\"datePublished\":\"2023-08-24T11:43:47+00:00\",\"dateModified\":\"2023-11-30T23:33:10+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Get our step-by-step guide on bringing Bootstrap's components to UXPin's design editor. Learn how you can integrate the library through npm.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-bootstrap-npm-integration-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-bootstrap-npm-integration-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-bootstrap-npm-integration-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Bootstrap-NPM-Integration.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Bootstrap-NPM-Integration.png\",\"width\":1200,\"height\":600,\"caption\":\"Bootstrap NPM Integration\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/merge-bootstrap-npm-integration-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Bring Bootstrap Components to UXPin\u00a0\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":"Bring Bootstrap npm Components to UXPin \u2013 A Short Tutorial","description":"Get our step-by-step guide on bringing Bootstrap's components to UXPin's design editor. Learn how you can integrate the library through npm.","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-bootstrap-npm-integration-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"How to Bring Bootstrap Components to UXPin\u00a0\u2013 npm Integration Walkthrough","og_description":"Get our step-by-step guide on bringing Bootstrap's components to UXPin's design editor. Learn how you can integrate the library through npm.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/","og_site_name":"Studio by UXPin","article_published_time":"2023-08-24T11:43:47+00:00","article_modified_time":"2023-11-30T23:33:10+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Bootstrap-NPM-Integration.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"How to Bring Bootstrap Components to UXPin\u00a0\u2013 npm Integration Walkthrough","datePublished":"2023-08-24T11:43:47+00:00","dateModified":"2023-11-30T23:33:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/"},"wordCount":1161,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Bootstrap-NPM-Integration.png","articleSection":["Blog","Component-Driven Prototyping","Design Systems","Features","Merge by UXPin","UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/","name":"Bring Bootstrap npm Components to UXPin \u2013 A Short Tutorial","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Bootstrap-NPM-Integration.png","datePublished":"2023-08-24T11:43:47+00:00","dateModified":"2023-11-30T23:33:10+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Get our step-by-step guide on bringing Bootstrap's components to UXPin's design editor. Learn how you can integrate the library through npm.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Bootstrap-NPM-Integration.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Bootstrap-NPM-Integration.png","width":1200,"height":600,"caption":"Bootstrap NPM Integration"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/merge-bootstrap-npm-integration-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to Bring Bootstrap Components to UXPin\u00a0\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\/36489","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=36489"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36489\/revisions"}],"predecessor-version":[{"id":51381,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36489\/revisions\/51381"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/36490"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=36489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=36489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=36489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}