{"data":{"prismicDocsCategory":{"data":{"pages":[{"page":{"uid":"what-is-uxpin-merge","document":[{"data":{"title":{"text":"What is UXPin Merge?"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"using-react.js-components","document":[{"data":{"title":{"text":"Using React.js Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"creating-a-library","document":[{"data":{"title":{"text":"Creating a Library"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ai-assisted-merge-integration","document":[{"data":{"title":{"text":"AI-Assisted Merge Integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"start-with-a-boilerplate-repo","document":[{"data":{"title":{"text":"Start with a Boilerplate Repo"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"integrating-your-own-components","document":[{"data":{"title":{"text":"Integrating Your Own Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"config-file","document":[{"data":{"title":{"text":"Config File"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"webpack-configuration","document":[{"data":{"title":{"text":"Webpack Configuration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"wrapper-component","document":[{"data":{"title":{"text":"Wrapper Component"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"adjusting-components","document":[{"data":{"title":{"text":"Adjusting Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"configuring-the-properties-panel","document":[{"data":{"title":{"text":"Configuring the Properties Panel"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"authoring-and-managing-jsx-presets","document":[{"data":{"title":{"text":"Authoring and Managing JSX Presets"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"cli-tool","document":[{"data":{"title":{"text":"CLI Tool"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ci-servers","document":[{"data":{"title":{"text":"Connecting code to UXPin (CI & push)"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"version-control","document":[{"data":{"title":{"text":"Version Control"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"patterns","document":[{"data":{"title":{"text":"Patterns"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"tailwind-css-integration","document":[{"data":{"title":{"text":"Tailwind CSS Integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-design-system-documentation","document":[{"data":{"title":{"text":"Merge Design System Documentation"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-component-manager","document":[{"data":{"title":{"text":"Merge Component Manager"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"storybook-integration","document":[{"data":{"title":{"text":"Storybook integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-faq","document":[{"data":{"title":{"text":"Frequently Asked Questions"},"visible_in_table_of_content":"true"}}]}}]}},"prismicDocsPage":{"data":{"title":{"text":"Creating a Library"},"isVisibleForRobots":"true","body":[{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>If you want to integrate your own React.js components with UXPin Merge, you&#39;re in the right place! This Wiki page walks you through the process of integrating your repository and testing it with UXPin Merge.</p>"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/15b24e7f-4c2d-44c1-b206-1bc1d93c892f_Creating+a+library.mp4"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>We prepared two step-by-step guides:</p><ul><li><a target=\"_blank\" rel=\"noopener\" href=\"https://www.uxpin.com/docs/merge/start-with-a-boilerplate-repo\">Start with a Boilerplate Repo</a> – perfect for your first steps in the world of Merge Technology. Even if you&#39;re not too familiar with JavaScript, you&#39;ll be able to launch our dev environment and a sample design system.</li><li><a target=\"_blank\" rel=\"noopener\" href=\"https://www.uxpin.com/docs/merge/integrating-your-own-components\">Integrating Your Own Components</a> - advanced tutorial focused on the integration of your own components with Merge. It&#39;s good if you already have experience with modern Javascript.</li></ul><p><strong>FAQ</strong></p><ol><li><strong>What approaches to CSS are supported?<br /></strong>Merge is CSS agnostic. You can use pure CSS, Sass, Less, Styled Components, Emotion... it doesn&#39;t really matter. UXPin Merge is rendering a compiled version of JS and CSS.<br /></li><li><strong>Can you use Web Components or Angular?<br /></strong>Right now Merge supports only React.js. You may experiment with React wrappers for Web Components or Angular. We&#39;ve managed to successfully integrate <a  href=\"https://github.com/uxpin-merge/rmwc-merge\">RMWC design system</a> which consists of React.js wrappers for web components.</li></ol><p></p>"}}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"merge","pageUid":"creating-a-library","meta_description":"UXPin's merge Docs, creating a library for new and advanced users","meta_image":"https://images.prismic.io/uxpincommunity/fa3875f8df8606e6405ba46165becc1ea6ed3d34.png?auto=compress,format","meta_title":"Creating a Library | Merge","page_title":"Creating a Library | Merge"}}