{"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":"Merge Component Manager"},"isVisibleForRobots":"true","body":[{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

Merge Component Manager (MCM) simplifies adding and modifying components and their properties in UXPin. It's also useful for renaming properties, adding descriptions, and categorizing the components in UXPin.

You can use Merge Component Manager to change JSDoc values for props, too.

Supported JSDoc tags are:

  1. @uxpinpropname - changing prop name in the editor 
  2. @uxpincontroltype - input form type in the editor
  3. @uxpinignoreprop - hide a prop in the editor
  4. @uxpindescription - description of a prop in the editor
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Before you start"},"content":{"html":"

A couple of things you need to get started with Merge Component Manager.

  1. Access to Merge technology in UXPin. Don’t have it yet? Request it here. 
  2. You might also want to import components to UXPin through one of three Merge integrations.
    - Merge Git repo integration - Read more about it here.
    - npm integration - Follow our tutorial on how to do that here.

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"How does a Merge Component Manager work?"},"content":{"html":"

Here's how Merge Component Manager works when you want to use it to add the properties to the component.

To add a property to a component, select the component you want to add to and click the ‘Add new property’ button. For each property, add the necessary information for example from the MUI Button API you can see a list of its props, type and description. Simply add as many as you want. For example, the label for a Button component shown below.

"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/a8859039-fd3f-454b-a7dd-f8e6d2b7be5f_static_last.png?auto=compress,format&rect=0,0,1504,900&w=752&h=450","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/a8859039-fd3f-454b-a7dd-f8e6d2b7be5f_static_last.png?auto=compress,format&rect=0,0,1504,900&w=1504&h=900"}},"image_description":{"text":"Component properties preview"}}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"merge","pageUid":"merge-component-manager","meta_description":"UXPin's merge Docs, merge component manager for new and advanced users","meta_image":"https://images.prismic.io/uxpincommunity/fa3875f8df8606e6405ba46165becc1ea6ed3d34.png?auto=compress,format","meta_title":"Merge Component Manager | Merge","page_title":"Merge Component Manager | Merge"}}