Presenting data

The DHIS2 academy covers the design system, UI Component library and Storybook in greater detail.

The DHIS2 Design System

Before we get to the UI Library you should know what a Design System is.

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Having a design system brings several benefits. It encourages a more standardized look and more predictible application behavior, which helps end-users. It also reduces the design and development resources required to build an application.

Creating a design system for a single company is hard enough, and it gets exponentially harder in regards to platforms. Because applications vary in functionality and goals creating a single design system that makes sense for all of the application contexts is essentially impossible. In most cases you should try to follow the design principles as best as you can.

The DHIS2 Design System establishes the principles all designers and developers should strive to follow while developing applications on DHIS2. It also informs how specific components should be used in certain contexts.

The DHIS2 UI Library

The DHIS2 UI Library is a library of React UI components that are designed specifically for use in DHIS2 applications. It includes dozens of common components that most applications need like buttons, tables and data inputs.

Storybook is the easiest way to browse the UI Library. Storybook lets you:

• Browse all UI components.
• Interactively customize these components.
• Copy the code

We recommend that you browse Storybook a bit and play around with some of the available components or at least watch this video.