Skip to content
[DEPRECATED] Please refer to the DHIS2 App Platform
JavaScript HTML CSS Shell
Branch: master
Clone or download
Latest commit 5ee6baa Jan 20, 2020
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: add stale bot configuration (#392) Mar 8, 2019
.tx chore: transifex integration Sep 2, 2019
config chore: remove umd and resolve (#319) Oct 30, 2018
docs Update Nov 2, 2018
.babelrc Merged with master May 28, 2018
.editorconfig Partial form implementation Sep 21, 2015
.eslintrc chore/Switch to cra eslint configuration and add lint to build step (#… Dec 7, 2018
.gitignore Modify root .gitignore to include css folders Sep 7, 2018
.npmignore Chore/switch to jest (#120) Sep 20, 2017
.scss-lint.yml Added header-bar component Oct 9, 2015
.travis.yml chore: update tokens to dhis2-bot (#440) Jul 21, 2019 Show master build for travis badge Mar 4, 2019
jest.config.js Merged with master May 28, 2018
package.json feat: favorites dialog filter by type (#540) Jan 20, 2020


Build Status FOSSA Status


D2-UI is a user interface component library for developing DHIS2 applications. The core development team uses and maintains these components to ensure visual consistency between DHIS2 web applications.


This is a monorepo comprised of many packages which are individually published to NPM using Yarn Workspaces. Yarn Workspaces handles linking the packages in this repository together, and ensures that everything is using the latest code.

See packages to see what components are available.

The example application

In examples you will find an application bootstrapped with create-react-app which demonstrates how one consumes the components d2-ui provides.

Getting started

In the d2-ui root directory:

yarn install
yarn watch

In the examples/create-react-app subdirectory:

yarn start

Now you are able to change any component in packages/ and the changes will be reflected live in the example application.

Linking individual components

When working on a component that's consumed by a different app, you can preview the changes without publishing by using yarn link. Let's say you're working on the legend component. First you'll need to build the components. Run this from the d2-ui root directory:

yarn install
yarn run build

After that link the components you're working on (we'll use legend for this example):

cd d2-ui/packages/legend/build
yarn link

After that, change directory to the app that consumes the component you're working on (let's say the maintenance-app). From the root of that project run:

yarn link @dhis2/d2-ui-legend`

This will link your local version of the component and your local changes will be reflected in the app.


See how to contribute.

Release process

Documented in RELEASING.


FOSSA Status

You can’t perform that action at this time.