UI Library

For Developer

The User Interface Library is packed with UI components – a collection of React components and variations ready to use out of the box in your projects. In this guide, you will learn about the fundamentals and key features of the library.

For Developer
  • Essentials
  • Fundamentals
  • Key Features
  • Getting started

Essentials

The User Interface Library is a fast-growing collection of 30+ React components with over 400+ variations ready to use out of the box in your projects. With accessibility and brand-compliance in mind, the library offers a wide selection to build everything from form-based transactional applications to content pages.

As a developer, you can quickly import, configure and use the components you need to build your projects. We also highly encourage you to contribute any components you have developed or modified to the User Interface Library and thereby share them will your colleagues around the world.

Fundamentals

Here’s how to import the library, choose and customize components, and contribute your own components.

1. Import the library
You can import the library via NPM as a privately distributed package. Contact the User Interface Library Team to request and receive your unique and stakeholder-specific token for access.

2. Select your components
Open Storybook or DSM to browse the available components. Choose the ones you need and try out variations and example configurations to customize based on your needs.

3. Import the components
In your code, import just the components you need, connecting them to your site and keeping the footprint small.

4. Contribute to the library
Have a component idea? We welcome additions to the library and would love to hear from you. Get in touch with us to initiate the review/approval process.

Key Features

  • Adherence to core responsive design principles and best practices in the WCAG 2.1 accessibility guidelines
  • A living style guide in Storybook to configure and customize components in real-time, fully connected to DSM for synchronization with designs and documentation
  • Rapid site development through a modularized NPM package that allows you to import just what you need and keep the footprint small
  • Continuous enhancement by integrating the latest updates and introducing new components
  • Continuous update policy to ensure state-of-the-art security and update-to-date brand compatibility
  • Robust quality assurance approach employing unit, interaction and visual regression tests
  • Streamlined submission/approval workflow for adding your components to the library

Here’s a list of tools and features for developers. For a list of tools needed for designers, check out the For Designers guide.

InVision DSM

InVision Design System Manager is where code and design come together. It is the platform that allows us to work together and in sync. You can use the components and styles as design or code snippets. To help you find your way around, you’ll find guidance for the individual areas as well as information to help new teams get started.

Visit InVision

Storybook

Storybook makes it easy to develop your components in isolation. Every branch gets a unique Storybook link that can be shared, even when the change has not yet been approved.

Visit Storybook

GIT Repository

The code is hosted in a GIT repository, with contributions made via pull requests. Automatic CI tests ensure we follow the coding standards.

NPM

Once your pull request is approved and merged, the version is published to NPM automatically and it can be used by any team.

Percy

Percy.io is the all-in-one visual review platform to trace component rendering and automate visual testing for confident component rollouts to catch every visual change.

Cypress

Interfaces aren't static. The user can interact with the UI, fill out form fields, and trigger events. Interaction tests with Cypress ensure that the UI is responding to interactions correctly.

Getting started

If you’re just getting started, make sure to review the Introduction guide and check out our Getting Started guide for next steps. If you don’t find what you’re looking for there – or in the other related guides – use the contact information at the end of the Getting Started to get help.