Introducing Box UI Elements
Modular components to power user experiences with content in your web and mobile apps
For any developer, one of the biggest challenges in building apps is creating an experience your users will love. The bar is high — web and mobile UI and UX design is constantly pushed to new limits by leading consumer applications, and the technologies and trends are always evolving. And yet, the world of enterprise software has largely ignored this evolution, resulting in ugly, complicated interfaces that completely disregards the needs of users.
Years ago, we set out to build an application that gave people a better way to securely store, access, and collaborate on their files in the cloud. Today, our award-winning applications are used by millions of people around the world and leverage modern design and development techniques. As the next generation of developers set out to build content-centric applications in the cloud, we want to share our learnings and expertise to help raise the bar of enterprise applications everywhere.
Today, we’re excited to introduce Box UI Elements, a collection of modular user interface components to power user experiences with content in your apps. Derived from the Box app and fully integrated with the Box Platform APIs, each Box UI Element includes pre-packaged HTML, CSS, and Javascript that developers can embed in their applications and customize to fit their own look and feel. We’ve also created a Box UI Elements Sketch Design Kit that contains everything you need to design user experiences with content in your applications, leveraging best practices and expertise from Box.
Box UI Elements are available as Javascript libraries or as React components on NPM.
There are four UI Elements generally available today, which include:
- Content Picker: allow users to select files or folders stored in Box from within your app’s interface.
- Content Preview: display interactive viewers for nearly any type of file in the browser.
- Content Explorer: allow users to browse through and search files and folders.
- Content Uploader: allow users to drag-and-drop local files and upload them in your app.
To get started, simply sign up for a Box Developer account or visit our documentation to grab the code. You can also explore demos of the Box UI Elements on Codepen.
The Box UI Elements let you tap into Box’s expertise in cloud content management and bring it to your own apps. With just a few lines of code, you can take advantage of the best practices we’ve established, based on year’s of design and development
Beyond just releasing a new tool for developers, the Box UI Elements are about creating a community of people that care about how enterprise software looks and works. Since first announcing the Box UI Elements at BoxWorks 2016, we’ve been able to work with forward-thinking developers and designers from a variety of companies including Workplace by Facebook, Pressly, Maxwell, and many more. We’ve even started to integrate Box UI Elements into new software products that we’re developing at Box, like Box Relay.
For example, Facebook offers Workplace users a way to easily select content from their Box account to share in a Workplace Group using the Box Content Picker UI Element.
Or Pressly, a software solution that makes it easy for enterprises to curate and share content, including sharing files both internally and externally. Pressly leverages the Box Content Preview UI Element to allow users to share hundreds of file types in their content hubs.
Or Maxwell, a digital mortgage automation solution built with Box Platform, leverages the Box Content Preview UI Element to display loan materials, like W-2 forms, checking account statements, drivers licenses, and more, in their app.
We’d love to see how you’ve implemented the Box UI Elements in your own software products. Whether you’re a designer, an engineer, or just having fun, feel free to send us your feedback, ideas, and creations to box-ui-elements@box.com.
