> ## Documentation Index
> Fetch the complete documentation index at: https://developer.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

export const Link = ({href, children, className, ...props}) => {
  const localizedHref = localizeLink(href);
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

export const MultiRelatedLinks = ({sections = []}) => {
  if (!sections || sections.length === 0) {
    return null;
  }
  return <div className="space-y-8">
      {sections.map((section, index) => <RelatedLinks key={index} title={section.title} items={section.items} />)}
    </div>;
};

export const RelatedLinks = ({title, items = []}) => {
  const getBadgeClass = badge => {
    if (!badge) return "badge-default";
    const badgeType = badge.toLowerCase().replace(/\s+/g, "-");
    return `badge-${badge === "ガイド" ? "guide" : badgeType}`;
  };
  if (!items || items.length === 0) {
    return null;
  }
  return <div className="my-8">
      {}
      <h3 className="text-sm font-bold uppercase tracking-wider mb-4">{title}</h3>

      {}
      <div className="flex flex-col gap-3">
        {items.map((item, index) => <a key={index} href={item.href} className="py-2 px-3 rounded related_link hover:bg-[#f2f2f2] dark:hover:bg-[#111827] flex items-center gap-3 group no-underline hover:no-underline border-b-0">
            {}
            <span className={`px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-wide flex-shrink-0 ${getBadgeClass(item.badge)}`}>
              {item.badge}
            </span>

            {}
            <span className="text-base">{item.label}</span>
          </a>)}
      </div>
    </div>;
};

UI Elements can be used either by downloading the Javascript libraries
directly from the Box CDN or by installing our [NPM package][npm]. All UI
Elements require their corresponding CSS stylesheet to render properly.

## Prerequisites

To use Box UI Elements, you need the following Node and React versions:

* Node version: `>=18.18.2 <22.11.0`
* React version `>=18.0.0 <=19.0.0`

The available versions of UI elements are listed in the [manual installation][manual-installation] section.

### Migration to React 19

For existing projects based on React 18 or below, check the [React 19 migration guide][react-migration].

<Warning>
  Update `react-tether` in your `package.json` to `>= v3.0.3` to avoid compatibility issues.
</Warning>

Once you upgrade React in your project, update the `box-ui-elements` package with `npm` or `yarn`:

```shell theme={null}
npm install box-ui-elements --legacy-peer-deps

yarn add box-ui-elements
```

This should result in updated version in the `package.json` file:

```json theme={null}
"box-ui-elements": "^26.3.0"
```

No additional changes related to Box UI elements are required in your code.

For more information, check the blog post about React 19 upgrade for UI elements.

## NPM installation

Use this when you are building a React based app and would like to import the
components directly into your app at build time.

> **Note** The `--legacy-peer-deps` flag is necessary when installing UI elements with `npm` due to library dependencies.

```sh theme={null}
npm install box-ui-elements --legacy-peer-deps
yarn add box-ui-elements
```

<Card href="https://www.npmjs.com/package/box-ui-elements" arrow title="Learn more on the NPM website" />

<Warning>
  ## Content Preview

  Use the Content Preview SDK if you need a specific
  version of the preview library. Otherwise,
  use Content Preview UI Element wrapper.
</Warning>

## Manual installation

All the UI elements are also available directly from the Box CDN.

| Element                                                                                   | Version  | File                                                                                                                                                                                             |
| ----------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <Link href="/guides/embed/ui-elements/explorer">Content Explorer</Link>                   | `26.3.0` | CSS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/explorer.css">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/explorer.css`</Link>                              |
|                                                                                           |          | JS with React <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/explorer.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/explorer.js`</Link>                      |
|                                                                                           |          | JS without React <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/explorer.no.react.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/explorer.no.react.js`</Link> |
| <Link href="/guides/embed/ui-elements/open-with">Content Open With</Link>                 | `26.3.0` | CSS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/openwith.css">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/openwith.css`</Link>                              |
|                                                                                           |          | JS with React <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/openwith.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/openwith.js`</Link>                      |
|                                                                                           |          | JS without React <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/openwith.no.react.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/openwith.no.react.js`</Link> |
| <Link href="/guides/embed/ui-elements/picker">Content Picker</Link>                       | `26.3.0` | CSS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/picker.css">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/picker.css`</Link>                                  |
|                                                                                           |          | JS with React <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/picker.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/picker.js`</Link>                          |
|                                                                                           |          | JS without React <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/picker.no.react.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/picker.no.react.js`</Link>     |
| <Link href="/guides/embed/ui-elements/sidebar">Content Sidebar</Link>                     | `26.3.0` | CSS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/sidebar.css">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/sidebar.css`</Link>                                |
|                                                                                           |          | JS with React <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/sidebar.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/sidebar.js`</Link>                        |
|                                                                                           |          | JS without React <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/sidebar.no.react.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/sidebar.no.react.js`</Link>   |
| <Link href="/guides/embed/ui-elements/uploader">Content Uploader</Link>                   | `26.3.0` | CSS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/uploader.css">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/uploader.css`</Link>                              |
|                                                                                           |          | JS with React <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/uploader.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/uploader.js`</Link>                      |
|                                                                                           |          | JS without React <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/uploader.no.react.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/uploader.no.react.js`</Link> |
| <Link href="https://github.com/box/box-content-preview">Content Preview UI Element</Link> | `26.3.0` | CSS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/preview.css">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/preview.css`</Link>                                |
|                                                                                           | `26.3.0` | JS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/preview.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/preview.js`</Link>                                   |
| <Link href="/guides/embed/ui-elements/preview">Content Preview SDK</Link>                 | `3.55.0` | CSS <Link href="https://cdn01.boxcdn.net/platform/preview/3.55.0/en-US/preview.css">`https://cdn01.boxcdn.net/platform/preview/3.55.0/en-US/preview.css`</Link>                                  |
|                                                                                           |          | JS <Link href="https://cdn01.boxcdn.net/platform/preview/3.55.0/en-US/preview.js">`https://cdn01.boxcdn.net/platform/preview/3.55.0/en-US/preview.js`</Link>                                     |

Use these links to either download the elements code to your application's
code, or embed them straight into your page from the CDN.

```html theme={null}
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <!-- Latest version of the explorer css for your locale -->
    <link
      rel="stylesheet"
      href="https://cdn01.boxcdn.net/platform/elements/{VERSION}/en-US/explorer.css"
    />
  </head>
  <body>
    <!-- Latest version of the explorer js for your locale -->
    <script src="https://cdn01.boxcdn.net/platform/elements/{VERSION}/en-US/explorer.js"></script>
    ...
  </body>
</html>
```

For Box Preview, the sample would look slightly different.

```html theme={null}
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Box Content Preview Demo</title>

    <!-- Latest version of Box Content Preview for en-US locale -->
    <script src="https://cdn01.boxcdn.net/platform/preview/{VERSION}/en-US/preview.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn01.boxcdn.net/platform/preview/{VERSION}/en-US/preview.css"
    />
  </head>
  <body>
    <div class="preview-container" style="height:400px; width:100%;"></div>
    <script>
      var preview = new Box.Preview();
      preview.show("93392244621", "EqFyi1Yq1tD9mxY8F38sxDfp73pFd7FP", {
        container: ".preview-container",
        showDownload: true,
      });
    </script>
  </body>
</html>
```

### Versions

Most of the UI elements have 2 distinct versions.

* A standard `*.js` file (e.g. `explore.js`) that includes React and ReactDOM in the bundle.
  * Use this when you are not building a React based app or you don't want to include the components as part of your app's build process.
  * It includes React and ReactDOM libraries.
  * The file size of this asset will be larger than the one below.
* A smaller `*.no.react.js` file (e.g. `explore.no.react.js`) that does not get bundled with React and ReactDOM.
  * Use this when both React and ReactDOM libraries are already loaded on the application.
  * These libraries expect a React and ReactDOM `>= 16.6` and `< 18`.

<message>
  Only one of the two `js` files and the additional `css` file need to be added
  to a project.
</message>

### Supported Locales

The above asset URLs use `en-US`. If you want to use another locale, then
replace `en-US` in the URLs above with any of the following:

`en-AU`, `en-CA`, `en-GB`, `da-DK`, `de-DE`, `es-ES`, `fi-FI`, `fr-CA`, `fr-FR`,
`it-IT`, `ja-JP,`, `ko-KR`, `nb-NO`, `nl-NL`, `pl-PL`, `pt-BR`, `ru-RU`,
`sv-SE`, `tr-TR`, `zh-CN`, `zh-TW`

## Self-hosting Content Preview

To serve the Box Content Preview library from your own server, follow these
steps.

### 1. Download release

Either fork the repository and check out the version you want to serve or
download the specific version as a zip.

* Check out a specific version with `git checkout v3.0.0`.
* Download a specific version as a zip from the [releases][preview-releases] page.

### 2. Install dependencies

Install the dependencies and build the library with the following command.

```sh theme={null}
yarn install && yarn build:i18n && yarn build:prod
```

### 3. Serve files

Self-serve everything except for the `dev` folder from the `/dist` folder. You
must not alter the folder structure and `third-party` needs to be in the same
folder as `3.0.0`.

For example, if you self-host using a `box-assets` directory, these URLs must
be accessible:

* `https://cdn.YOUR_SITE.com/box-assets/3.0.0/en-US/preview.js`
* `https://cdn.YOUR_SITE.com/box-assets/third-party/text/2.65.0/papaparse.min.js`
* `https://cdn.YOUR_SITE.com/box-assets/third-party/model3d/1.12.0/three.min.js`

## Authentication

In order to initialize any of the UI Elements, an application will need to
provide a valid Access Token.

<Card href={localizeLink("/guides/authentication/select")} arrow title="Learn how to authenticate an application" />

It is also recommended to <Link href="/guides/authentication/tokens/downscope">downscope</Link> an Access Token before passing
it into an insecure environment (the user's web browser).

UI Elements only expect any Access Token to be passed in for authentication, and
can therefore be used for any type of authentication available from Box
Platform.

For testing purposes, a <Link href="/guides/authentication/tokens/developer-tokens">Developer Token</Link> can be used.

## CORS

To use UI Elements, an application needs to allow the domain the widget is
used on for Cross Origin Resource sharing. See the <Link href="/guides/security/cors">CORS guide</Link> for more
details.

## Source Code & Releases

Source code for Box UI Elements is [hosted on GitHub][gh]. The repository
contains detailed documentation for usage and development. Please file any bugs
you encounter under the "Issues" tab with clear steps to reproduce. This
repository also holds a list of [releases][releases].

[npm]: https://www.npmjs.com/package/box-ui-elements

[gh]: https://github.com/box/box-ui-elements

[releases]: https://github.com/box/box-ui-elements/releases

[scopes]: /guides/api-calls/permissions-and-errors/scopes

[preview-releases]: https://github.com/box/box-content-preview/releases

[manual-installation]: #manual-installation

[react-migration]: https://react.dev/blog/2024/04/25/react-19-upgrade-guide

<RelatedLinks
  title="RELATED GUIDES"
  items={[
{ label: translate("Select Auth Method"), href: "/guides/authentication/select", badge: "GUIDE" },
{ label: translate("Cross-Origin Resource Sharing (CORS)"), href: "/guides/security/cors", badge: "GUIDE" }
]}
/>