https://github.com/dhis2/ui
Components and related resources for the DHIS2 design system
https://github.com/dhis2/ui
hacktoberfest sdg-17 sdg-3 sdg-4 synced-settings web-lib
Last synced: 4 months ago
JSON representation
Components and related resources for the DHIS2 design system
- Host: GitHub
- URL: https://github.com/dhis2/ui
- Owner: dhis2
- License: bsd-3-clause
- Created: 2020-03-06T11:27:06.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2026-02-15T02:06:19.000Z (4 months ago)
- Last Synced: 2026-02-15T09:21:21.401Z (4 months ago)
- Topics: hacktoberfest, sdg-17, sdg-3, sdg-4, synced-settings, web-lib
- Language: JavaScript
- Homepage: https://developers.dhis2.org/demo/
- Size: 33.7 MB
- Stars: 53
- Watchers: 22
- Forks: 29
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# DHIS2 UI
[](https://www.npmjs.com/package/@dhis2/ui)
[](https://github.com/semantic-release/semantic-release)
[](https://conventionalcommits.org)
> **@dhis2/ui** is a suite of frontend components for building DHIS 2 applications
To install `@dhis2/ui` run:
```bash
yarn add @dhis2/ui
```
All components can be imported directly from `@dhis2/ui` like so:
```js
import { Button } from '@dhis2/ui'
```
We recommend that you use `@dhis2/ui` as the entrypoint for all imports of our frontend components (as in the example above). That way your imports won't break if any of the underlying packages change.
## Documentation
`@dhis2/ui` is based on the specifications in our design-system: https://github.com/dhis2/design-system. See the documentation there for more information.
- Docs: [Developer Portal](https://developers.dhis2.org/docs/tutorials/ui-library)
- Live demo: [Demo](https://developers.dhis2.org/demo/)
- Components reference: [Components](https://developers.dhis2.org/docs/ui/webcomponents)
## Bundled packages
| Package | Link | Status |
| ------------------- | -------------------------------------- | ------ |
| @dhis2/ui | [collections/ui](collections/ui) | Active |
| @dhis2/ui-constants | [constants](utilities/constants) | Active |
| @dhis2/ui-forms | [collections/forms](collections/forms) | Active |
| @dhis2/ui-icons | [icons](utilities/icons) | Active |
### `@dhis2/ui-constants`
This package provides access to shared constants, such as colors, spacers and elevation values. They are used across our frontend components and can be used directly in applications as well. Our constants can be imported like so:
```js
import { colors } from '@dhis2/ui'
```
See our [docs on the Developer Portal](https://developers.dhis2.org/design-system/utilities/constants) for a full list of the available constants.
### `@dhis2/ui-icons`
This package provides a collection of icons as react components. For tree shaking purposes the icon name, variant and size are all expressed in the component name. Our icons can be imported like so:
```js
import { IconApps16 } from '@dhis2/ui'
```
For a list of all the available icons see [the ui-icons package](https://github.com/dhis2/ui/tree/master/packages/icons/src). Note that during their transformation to React components the svg filenames are PascalCased and prefixed with `Icon`. So `apps-16.svg` becomes `IconApps16` and can then be imported as in the example above.
The default fill of our icons is inherited from `color` with `currentColor`. To set a custom icon color you can use the `color` prop like so:
```jsx
```
### `@dhis2/ui-forms`
This package provides several components that allow for easy integration of our form components with [react-final-form](https://github.com/final-form/react-final-form). Besides form components, we also export several validator functions for common usecases. Components from this library can be imported like so:
```js
import { TextAreaFieldFF } from '@dhis2/ui'
```
The `FF` suffix ensures that these components don't clash with our regular field components from the widgets package and is an abbreviation of `final-form`. See our [component documentation](https://developers.dhis2.org/docs/ui/webcomponents) or the [live docs](https://developers.dhis2.org/demo/) for a full list of the available components and validators.
## Development
```sh
git clone git@github.com:dhis2/ui.git && cd ui
yarn install
yarn build # make sure to run this at the top-level the first time
yarn start
# in case manager complains about the main.manager.bundle.js, e.g. cannot import @dhis2/ui-constants, then use:
yarn start --no-manager-cache
```
For the `yarn start` command, you can run it at the top-level directory if you are interested in looking at the StoryBook for all components, or navigate to a single component and run it there, which will usually start up StoryBook faster if you're working on one component.
## Conditional E2E Test Recording
To record e2e tests in Cypress Cloud, you can use one of the following methods based on your needs:
- **Commit Message**: Include `[e2e record]` in your commit messages to activate recording.
- **GitHub Labels**: Apply the `e2e record` label to your pull request to trigger recording.
This setup helps in managing Cypress Cloud credits more efficiently, ensuring recordings are only made when explicitly required.
## Reporting an issue or opening a PR
See [CONTRIBUTING.md](CONTRIBUTING.md)