Box UI Elements

Box UI Elements are pre-built UI components that allow developers to add elements of the main Box web application into their own applications. They can be used to navigate through, upload, preview, and select content stored on Box and are available both as React components and framework-agnostic JavaScript libraries.

Available Box UI Elements

Box offers several UI Elements to create common user experiences with files and folders in an application.

The available UI Elements are:

Box UI Elements can be used in isolation or joined together to construct common user flows with content, such as uploading and then viewing a file.

Using the Box UI Elements

Box UI Elements can be used either by including one of our Javascript libraries linked above or by pulling from our NPM packages. The Box UI Elements also require their corresponding CSS stylesheet to render properly.

In order to initialize any of the Box UI Elements, you will need to provide a valid Access Token. An Access Token can be obtained when you authenticate your application to Box. We also recommend downscoping your Access Token using the Token Exchange mechanism to avoid passing an Access Token with superfluous permissions to the client.

Box UI Elements only expect an 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, you can use a Developer Token as your Access Token. A Developer Token can be generated in the Configuration section in your app's settings in the Box Developer Console. If you would like to use the demos embedded into the documentation, you will need to whitelist codepen.io's origins for CORS - https://s.codepen.io and http://s.codepen.io. This can be done in the Configuration section in your app's settings in the Box Developer Console.

You can learn how to specify a logo for a Box UI Element here.

Next Steps

To start using the Box UI Elements, please visit the documentation for any of the UI Elements listed above.