This guide shows how to bring your own React components into UXPin Merge. By the end, your components appear in the UXPin Editor and stay in sync with your code. It’s written for developers who work with a React component library in Git.
Setting up the environment and rendering your first component shouldn’t take more than 30 minutes. A complete integration of a complex design system can take from 2 hours to 3–4 days.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Clean integration. Merge works directly with your production code. No wrappers or code changes are necessary.
Wrapped integration. Merge works with wrappers for your components. Wrappers are typically HOC components.
Choose clean integration if your components already meet Merge’s requirements. Choose wrapped integration if you need to change how components behave for designers, or can’t change your source code.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"1. Install the Merge CLI in your project:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"npm install @uxpin/merge-cli --save-dev"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"2. Create the config files. Run `npx uxpin-merge init`. It creates `uxpin.config.js`, `uxpin.webpack.config.js`, a wrapper in `src/components/UXPinWrapper/UXPinWrapper.js` and an example Button in `src/components/Button`. It doesn’t overwrite files that already exist.
3. Add your components to `uxpin.config.js`. To make debugging easier, start with one component and add the rest one by one. A starting config looks like this:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"module.exports = {\n components: {\n categories: [\n {\n name: 'General',\n include: ['src/components/Button/Button.js'],\n },\n ],\n wrapper: 'src/components/UXPinWrapper/UXPinWrapper.js',\n webpackConfig: 'uxpin.webpack.config.js',\n },\n name: 'My Design System',\n};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"See Config File for all options.
4. Check your webpack config. Merge uses webpack to bundle JavaScript, CSS and the assets you import, such as icons and font files, and it merges your config with its own settings. If your config is complex, create a separate one for Merge. See Webpack Configuration.
5. If you need to provide a theme or other context for your components, create a wrapper component. It’s a HOC you can place in any directory in your repository. Here’s a wrapper with a theme provider:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\nimport { ThemeProvider } from 'your-ui-library';\nimport theme from './theme';\n\nexport default function UXPinWrapper({ children }) {\n returnSee Wrapper Component for more.
6. Add a preset, so Merge knows how to render the component first. Put preset files in a `presets` folder inside the component’s directory. A preset file name is a number, a dash and a name, for example `0-default.jsx`. The number sets the order.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\nimport Button from '../Button';\n\nexport default (\n \n);"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"The `uxpId` is a unique identifier. Two elements in one preset can’t have the same `uxpId`.
7. Preview your components. Run this from the root of your repository:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"npx uxpin-merge"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"This starts experimental mode, where you can see your library and components in the UXPin Editor.
8. Push your library to UXPin. First create a library in the UXPin Editor: select “Import React or Web Components from Git repo” and copy the authentication token. Don’t share it and don’t commit it to Git.
"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity%2Fc011a6cb-44d7-4fef-acd7-cc5bb8f2a6b2_merge_ci.mp4"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Then run:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"npx uxpin-merge push --tokenThe `wrapper` and `webpackConfig` paths come from `uxpin.config.js`, so you don’t need to pass them as flags.
To send components automatically on every change, use a CI server. See Connecting code to UXPin (CI & push). A one-time push is an alternative, but only if you don’t plan frequent updates.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"1. Decide where the wrappers live. You can create new directories for wrapper components inside your existing repository, for example `./src/components/Button/Merge/Button/Button.js`, or create a new repository for them. Both work the same in this guide, but they change how you manage and release your components.
2. Install the Merge CLI as a dev dependency, as in step 1 above.
3. Create your first wrapper. A typical wrapper is a HOC React component that imports and returns your original component:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Button as ButtonM } from '../../Button';\n\nfunction Button(props) {\n returnMerge requires the parent directory and the exported component to have the same name. This name shows up in the UXPin Editor and in Spec mode, so the wrapper must be named like the original component. To avoid a name conflict, import the original under a different name, such as `ButtonM`.
4. Continue with steps 2 to 8 of the clean integration, with one difference: point `include` in `uxpin.config.js` at your wrapper files, for example `src/components/Button/Merge/Button/Button.js`.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"The config file tells Merge which components to import into UXPin and describes your library. It can also hold the paths to your webpack config and, optionally, a wrapper component.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"The config file is a JavaScript file named `uxpin.config.js` stored in the root directory of your project. To use another path, pass it with the `--config` option (see CLI Tool). The file exports a JavaScript object with `module.exports`.
To create a starting config, run `npx uxpin-merge init`.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"./uxpin.config.js"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"The name of the library shows up in the UXPin Editor once you upload your library to UXPin.
"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/0bcf1b01-e587-4b8d-84bf-feea3ac5ac90_Config+file.png?w=752&h=500?auto=compress,format","Retina__2x_":{"url":"https://prismic-io.s3.amazonaws.com/uxpincommunity/0bcf1b01-e587-4b8d-84bf-feea3ac5ac90_Config+file.png"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"The category names appear in the list of components in the UXPin Editor. If you plan to import many components, create several categories to make navigation in UXPin easier. To add a category, add another object with the keys `name` and `include` to the array:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"categories: [\n {\n name: 'General',\n include: [\n 'src/components/Button/Button.js',\n 'src/components/Link/Link.js',\n ],\n },\n {\n name: 'Navigation',\n include: [\n 'src/components/Tabs/Tabs.js',\n 'src/components/Tab/Tab.js',\n ],\n },\n],"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"If a category should contain only one component, you can assign the path directly to `include`:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"{\n name: 'Category',\n include: 'src/components/YourComponent/YourComponent.js',\n}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"`include` also accepts glob patterns:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"module.exports = {\n components: {\n categories: [\n {\n name: 'General',\n include: [\n 'src/library/Avatar/Avatar.js',\n 'src/library/Checkbox/!(__tests__)/*.js',\n 'src/library/Form/!(__tests__)/*.js',\n ],\n },\n {\n name: 'Card',\n include: 'src/library/Card/!(__tests__)/*.js',\n },\n {\n name: 'Icons',\n include: 'src/library/Icon/!(index).js',\n },\n ],\n wrapper: 'src/components/UXPinWrapper/UXPinWrapper.js',\n webpackConfig: 'uxpin.webpack.config.js',\n },\n};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"If `uxpin.config.js` doesn’t exist or isn’t in the root directory, Merge prints a message and loads the default config:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"module.exports = {\n components: {\n categories: [\n {\n name: 'Uncategorized',\n include: [\n 'src/components/*/*.{js,jsx,ts,tsx}',\n 'src/*/*.{js,jsx,ts,tsx}',\n ],\n },\n ],\n },\n name: 'Library from Code',\n};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"The `settings` object is sent to UXPin with your library. It turns on features for your library in UXPin. Two are documented:
The settings option needs `@uxpin/merge-cli` 3.4.3 or newer.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Webpack Configuration"},"content":{"html":"Merge uses webpack to bundle your component files into one JavaScript bundle that it sends to UXPin. This page explains how to set up your webpack config, so Merge can bundle your components together with their styles and assets.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Merge combines your webpack config with its own settings. Its settings define the entry point, the output (a CommonJS library file named `designsystemlibrary.js`) and the build mode. If you don’t provide a config, Merge uses only its own settings.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"All the code and encoded files are merged into one bundle sent to UXPin. As a result, your webpack config has to be built in a way that doesn’t export any external files.
If you use webpack 5, asset modules do the same job: a rule with `type: 'asset/inline'` inlines the imported file into the bundle as a data URI.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"{\n test: /\\.(png|jpe?g|gif|svg|woff2?|ttf|eot)$/,\n type: 'asset/inline',\n},"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"If this approach doesn’t fit your current webpack config, create a separate config for Merge.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"This is the config that `npx uxpin-merge init` creates in `uxpin.webpack.config.js`. It serves a repository with CSS loaded through `style-loader` and `css-loader`.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"const path = require('path');\nconst webpack = require('webpack');\n\nmodule.exports = {\n output: {\n path: path.resolve(__dirname, 'build'),\n filename: 'bundle.js',\n publicPath: '/',\n },\n resolve: {\n modules: [__dirname, 'node_modules'],\n extensions: ['*', '.js', '.jsx'],\n },\n devtool: 'eval-source-map',\n module: {\n rules: [\n {\n test: /\\.(s*)css$/,\n use: [\n { loader: 'style-loader' },\n { loader: 'css-loader', options: { importLoaders: 2 } },\n ],\n },\n {\n loader: require.resolve('babel-loader', { paths: ['./node_modules/@uxpin/merge-cli'] }),\n test: /\\.js?$/,\n exclude: /node_modules/,\n options: {\n presets: [\n require.resolve('@babel/preset-env', { paths: ['./node_modules/@uxpin/merge-cli'] }),\n require.resolve('@babel/preset-react', { paths: ['./node_modules/@uxpin/merge-cli'] }),\n ],\n },\n },\n ],\n },\n};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Babel comes with the Merge CLI, which is why the config resolves `babel-loader`, `@babel/preset-env` and `@babel/preset-react` from it. `style-loader` and `css-loader` are not part of the Merge CLI, so install them in your project.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Add these rules to the `module.rules` array of the basic config.
CSS-in-JS (Emotion) and SVG icons inlined into an Icon component:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"{\n test: /\\.svg$/,\n exclude: /node_modules/,\n loader: 'svg-react-loader',\n},"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Sass and inlined SVG icons:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"{\n test: /\\.svg$/,\n loader: 'svg-react-loader',\n},\n{\n test: /\\.(s*)css$/,\n use: [\n { loader: 'style-loader' },\n { loader: 'css-loader', options: { importLoaders: 2 } },\n { loader: 'sass-loader' },\n ],\n},"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"A wrapper component is a React component that wraps everything Merge renders in UXPin. Use it to provide a theme, import a shared style file, or give your components any other context they need. A wrapper is optional. It’s typically a HOC React component.
You can store a wrapper component anywhere in the repository, but you have to refer to its location in the Config File under `wrapper`. You can also pass it with the `--wrapper` option. See CLI Tool.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"module.exports = {\n components: {\n categories: [\n {\n name: 'First Category',\n include: [\n 'src/components/FirstComponent/FirstComponent.js',\n 'src/components/SecondComponent/SecondComponent.js',\n ],\n },\n ],\n wrapper: 'src/components/UXPinWrapper/UXPinWrapper.js',\n webpackConfig: 'uxpin.webpack.config.js',\n },\n name: 'Name of your Library',\n};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"`npx uxpin-merge init` creates a basic wrapper in `src/components/UXPinWrapper/UXPinWrapper.js`.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"The most basic wrapper component is a React component that returns its `children`:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\n\nexport default function UXPinWrapper({ children }) {\n return children;\n}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"A wrapper can implement a theme provider. As a result, the theme styles are attached to every component rendered in UXPin:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\nimport { ThemeProvider } from 'your-ui-library';\n\nconst theme = {\n palette: {\n primary: { main: '#006CFF' },\n secondary: { main: '#444444' },\n },\n};\n\nexport default function UXPinWrapper({ children }) {\n returnA wrapper can also import a common style file. Webpack captures any import in the wrapper and adds it, after compilation, to the JavaScript package sent to UXPin:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\nimport '../../styles/sass/common.scss';\n\nexport default function UXPinWrapper({ children }) {\n return children;\n}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"For fonts stored in external services, such as Google Fonts or Adobe Fonts, add the tags to `pageHeadTags` in the config file. Merge adds them to the `<head>` of the page.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"module.exports = {\n components: {\n categories: [ /* ... */ ],\n pageHeadTags: [\n '',\n '',\n ],\n },\n name: 'Name of your Library',\n};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"For font files in your repository, import them directly, so webpack handles them. See Webpack Configuration.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Design faster with Storybook components. Connect your own Storybook, public or private, to your UXPin account and use its interactive, code-based components in the UXPin Editor. You build prototypes with the same components your developers use, and you don’t need to know how to code.
Merge supports all Storybook frameworks.
Storybook integration is an alternative to the Git repository integration. Both let you design with pre-built code components. The main difference is how you add the components to UXPin.
"}}},{"__typename":"PrismicDocsPageBodyTip","slice_type":"tip","primary":{"tip_type":"Info tip mini size","tip_title":"Note","tip":{"html":"This page doesn’t show how to create a Storybook. It shows how to integrate an existing one with UXPin. Storybook is a development environment for UI components: it lets you browse components as a library, add interactions, view them in different states and test them in a safe environment. For details, see the Storybook website and its introduction guide.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"You need two things:
If you use Vite with Storybook, add one more setting before you integrate. Vite assumes assets are in the root directory, so in your Storybook main.* file, add config.base = '' in viteFinal. See the Vite documentation for details.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"1. Open a new or existing prototype from the UXPin Dashboard.
"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/26d7757c-5060-4a45-92dd-fbe6c9fe7475_Docs_Storybook_01.mp4"},"video_description":{"text":""}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"2. Select the ‘Design System Libraries’ tab at the bottom left, then click ‘+ New Library’.
"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/244a1dae-df1b-442a-b6d7-b783d7001bf4_Docs_Storybook_02-update.mp4"},"video_description":{"text":""}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"3. Select ‘Import Components from Storybook’, enter the URL of your Storybook and save the library.
"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/23a9feb0-34df-4c9f-8115-a7546fc774c4_Docs_Storybook_03-update.mp4"},"video_description":{"text":""}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"1. Follow the same steps as for a public Storybook, but select “Private” and copy the token.
"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/9047a926-c7a2-42a4-b3b8-76bc7878d70f_Docs_Storybook_04-PrivateLibrary.mp4"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"2. Install the Storybook deployer in your design system:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"npm install @uxpin/storybook-deployer --save-dev"}]},"language":null}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"3. Build your Storybook as static files, then deploy it to UXPin:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"npx uxpin-storybook-deployer -t TOKEN -s path/to/your/storybook"}]},"language":null}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"With a private Storybook, your Storybook is protected by a UXPin login session. This also means you can’t see Storybook components in Preview without logging in to an account that has permission to the library.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"You’re good to go. Start dragging and dropping the components.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"With Storybook’s mechanism, Args, you can change properties, slots, styles, inputs and more dynamically in the UXPin Editor. There’s no need to alter a component in Storybook: you can do it while designing in UXPin. Learn more about Args.
"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/fcaf90a7-8c36-464c-9af8-93012aac8df2_Docs_Storybook_04.mp4"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Just make sure:
There’s a similar feature called “knobs”, which isn’t supported, because Storybook announced it would be deprecated in future versions. See how Controls replace knobs.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"After you integrate a public Storybook with UXPin, components update automatically whenever you change a component in your Storybook. The updated component looks and works exactly like in your Storybook, so don’t worry about components being a bit off after the sync.
For a private Storybook, run the deployer again after you change your components, because the deployer sends a static build.
"}}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"merge","pageUid":"merge-connect-your-library","meta_description":"UXPin's merge Docs, connect your library for new and advanced users","meta_image":"https://images.prismic.io/uxpincommunity/fa3875f8df8606e6405ba46165becc1ea6ed3d34.png?auto=compress,format","meta_title":"Connect your library | Merge","page_title":"Connect your library | Merge"}}