npm integration

Merge npm integration allows you to add components to a library in your UXPin account with an npm package. The great thing about npm integration method is that you do all the steps in UXPin. Watch the overview walkthrough here. Scroll down for a step-by-step explanation.

STEP 1: Add a Library Using npm Integration

This can be done like adding any other library while in Editor mode or the Merge Tab in your UXPin dashboard. An example of a complete form for creating a Library using Ant Design is shown below.

Name Your Library

This is how it will be shown in the Libraries list in UXPin, not the name of the npm package you want to import.

Component Library npm Packages

Simply provide the npm package name of the component library and the Version you wish to use. For example:

• @mui/material: Version 5.1.0
• antd: Latest

Additional Support Packages or Assets

If the component library requires additional packages or assets for Fonts, Icons, etc… Then for Packages, simply click the add more dependency package and enter information exactly as shown above for the main NPM package name.

For Assets, enter the URL or css file path in the existing Assets input field. We support both URL and file path for the Assets.

STEP 2: Adding a Component and Category

This step can be done in the library you just created.

Specify the component you want to add in the import statement and optionally create a category or place it into an existing one.

Example import statement: import Button from 'antd'

The import statement is usually really easy to find and probably in the documentation of your chosen library. For example, this is the documentation for MUI’s Button component, where you can view the code and see the import statement is import Button from ‘@mui/material/Button;’.

STEP 3: Publish Newly Added Component

Now you have created your component and want to add props, before you do that you need to publish your new changes or component additions. This can be done by clicking the 'Publish Library Changes' button in the top right of page.

After clicking the publish button you’ll be shown the status of your published library. Once the status % of your library reaches 100 and shows ‘Update Success’ you will need to refresh your browser to see the changes. Now you’re ready to add props to your component.

What's Next?

Now you can start designing with a UI component you've just published. Before starting, remember to first set the properties with the help of Component Manager. Read about MCM.