{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"import-npm-libraries","__idx":0},"children":["Import npm libraries"]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Revel","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This topic explains how to incorporate external React component libraries from npm into your project."," ","You'll learn how to install and import UI components from popular React libraries."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"install-the-library","__idx":1},"children":["Install the library"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"install-the-library-locally","__idx":2},"children":["Install the library locally"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use npm to install the external library."," ","For example, to install React Icons, use the following command:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"npm install react-icons\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"install-the-library-in-reunite","__idx":3},"children":["Install the library in Reunite"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you are working in Reunite, you can install the library by adding it to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["package.json"]}," file."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n  // ...\n  \"dependencies\": {\n    // existing dependencies\n    \"react-icons\": \"^4.11.0\"\n  }\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Follow the steps in ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/get-started/upgrade-realm-version#run-a-specific-product-version-in-reunite"},"children":["Run a specific product version in Reunite"]}," ","to create a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["package.json"]}," file if you don't have one already."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configure-private-registries","__idx":4},"children":["Configure private registries"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You might need to install libraries from private npm registries (such as Artifactory, AWS CodeArtifact, or GitHub Packages)."," ","Configure registry access using either ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".npmrc"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bunfig.toml"]}," files."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"use-npmrc","__idx":5},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".npmrc"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".npmrc"]}," file in your project root:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"@myorg:registry=https://registry.myorg.com/\n//registry.myorg.com/:_authToken=${NPM_TOKEN}\n","lang":"text"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"use-bunfigtoml-recommended","__idx":6},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bunfig.toml"]}," (recommended)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For enhanced flexibility, create a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bunfig.toml"]}," file in your project root:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"toml","header":{"controls":{"copy":{}}},"source":"[install.scopes]\n# Using environment variables for credentials\n\"@myorg\" = { token = \"$NPM_TOKEN\", url = \"https://registry.myorg.com/\" }\n\n# Alternative with username/password\n\"@mycompany\" = {\n  username = \"$NPM_USERNAME\",\n  password = \"$NPM_PASSWORD\",\n  url = \"https://registry.mycompany.com/\"\n}\n","lang":"toml"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"secure-credential-management","__idx":7},"children":["Secure credential management"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Protect sensitive information"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Never commit registry credentials directly to your repository."," ","Always use environment variables for sensitive information like tokens, usernames, and passwords."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Store your registry credentials as environment variables:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For local development, add them to your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".env"]}," file (do not commit secrets to Git):"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"NPM_TOKEN=your-private-token-here\nNPM_USERNAME=your-username\nNPM_PASSWORD=your-password\n","lang":"text"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For Reunite projects, add them through the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Settings"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Environment variables"]}," page and mark them as secrets."," ","Reunite supports environment variable names that start with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["NPM_"]}," for private package registries."]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information about managing environment variables, see ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/reunite/project/env-variables"},"children":["Use environment variables"]}]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"import-and-use-components","__idx":8},"children":["Import and use components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After installation, you can import components directly in your React files, as in the following example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import * as React from 'react';\nimport { FaHeart, FaThumbsUp } from 'react-icons/fa';\n\nexport function MyComponent() {\n  return (\n    <div>\n      <FaHeart color=\"red\" size={24} />\n      <FaThumbsUp color=\"blue\" size={24} />\n    </div>\n  );\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage-with-markdoc","__idx":9},"children":["Usage with Markdoc"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information about how to register and use custom Markdoc tags, see ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/build-markdoc-tags"},"children":["Build markdoc tags"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To use external components within Markdoc, you'll need to register them in your schema, as in the following example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","data-title":"@theme/markdoc/schema.ts","header":{"title":"@theme/markdoc/schema.ts","controls":{"copy":{}}},"source":"// @theme/markdoc/schema.ts\nimport type { MarkdocTagSchema } from '@redocly/theme/markdoc/tags/types';\n\nexport const tags: Record<string, MarkdocTagSchema> = {\n  // ... existing tags ...\n  reactIcon: {\n    render: 'ReactIcon',\n    attributes: {\n      name: {\n        type: 'string',\n        required: true,\n      },\n      size: {\n        type: 'number',\n        default: 24,\n      },\n      color: {\n        type: 'string',\n        default: 'currentColor',\n      },\n    },\n  },\n};\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You also need to export your components as in the following example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","data-title":"@theme/markdoc/components.ts","header":{"title":"@theme/markdoc/components.ts","controls":{"copy":{}}},"source":"import * as React from 'react';\nimport { FaHeart, FaThumbsUp } from 'react-icons/fa';\n\nexport function ReactIcon({ name, size = 24, color = 'currentColor' }) {\n  const icons = {\n    heart: FaHeart,\n    thumbsUp: FaThumbsUp,\n  };\n\n  const IconComponent = icons[name];\n  return <IconComponent size={size} color={color} />;\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can use the icon tag in your Markdoc files, as in the following example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"markdoc","header":{"controls":{"copy":{}}},"source":"{% reactIcon name=\"heart\" color=\"red\" /%}\n{% reactIcon name=\"thumbsUp\" color=\"blue\" size=32 /%}\n","lang":"markdoc"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":10},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/reunite/project/env-variables"},"children":["Use environment variables"]}]}," - Configure secure credentials for private registry access using environment variables"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/build-markdoc-tags"},"children":["Build Markdoc tags"]}]}," - Create reusable Markdoc tags using imported npm libraries for enhanced functionality"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags/icon"},"children":["Icon tag"]}]}," - Use Redocly's built-in icon system and learn patterns for extending it with external icon libraries"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization"},"children":["Extend with code"]}]}," - Discover customizable components and customization options for your project"]}]}]},"frontmatter":{"products":["Revel","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"tagList":["admonition","configOptionRequirements"],"title":"Import npm libraries","lastModified":"2026-10-01T23:00:57.000Z"}