diff --git a/.eslintignore b/.eslintignore
index 4ce89ab663..c260bbe6cd 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 .yarn/
 utilities/icons/src/react/**/*.js
 **/locales/
+*.d.ts
diff --git a/.eslintrc.js b/.eslintrc.js
index 9861b1c164..0bd37b6457 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -33,6 +33,7 @@ const config = {
                 '*.stories*.js',
                 '**/__stories__/*.js',
                 '**/__stories__/**/*.js',
+                '*.d.ts',
             ],
             rules: {
                 'import/no-extraneous-dependencies': 'error',
diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd406ec8c4..b304e831c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [9.0.0-alpha.2](https://github.com/dhis2/ui/compare/v9.0.0-alpha.1...v9.0.0-alpha.2) (2023-12-08)
+
+
+### Features
+
+* **menu-item:** add suffix prop ([77cd949](https://github.com/dhis2/ui/commit/77cd94953cf8c14b21373c53d055a8f8ed68110d))
+
 # [8.16.0](https://github.com/dhis2/ui/compare/v8.15.1...v8.16.0) (2023-12-07)
 
 
diff --git a/collections/forms/package.json b/collections/forms/package.json
index 76e174697c..abe472a7b2 100644
--- a/collections/forms/package.json
+++ b/collections/forms/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui-forms",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "sideEffects": [
@@ -8,6 +8,7 @@
         "build/cjs/locales/index.js"
     ],
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -34,25 +35,27 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "8.16.0",
-        "@dhis2-ui/checkbox": "8.16.0",
-        "@dhis2-ui/field": "8.16.0",
-        "@dhis2-ui/file-input": "8.16.0",
-        "@dhis2-ui/input": "8.16.0",
-        "@dhis2-ui/radio": "8.16.0",
-        "@dhis2-ui/select": "8.16.0",
-        "@dhis2-ui/switch": "8.16.0",
-        "@dhis2-ui/text-area": "8.16.0",
+        "@dhis2-ui/button": "9.0.0-alpha.2",
+        "@dhis2-ui/checkbox": "9.0.0-alpha.2",
+        "@dhis2-ui/field": "9.0.0-alpha.2",
+        "@dhis2-ui/file-input": "9.0.0-alpha.2",
+        "@dhis2-ui/input": "9.0.0-alpha.2",
+        "@dhis2-ui/radio": "9.0.0-alpha.2",
+        "@dhis2-ui/select": "9.0.0-alpha.2",
+        "@dhis2-ui/switch": "9.0.0-alpha.2",
+        "@dhis2-ui/text-area": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "final-form": "^4.20.2",
         "prop-types": "^15.7.2",
         "react-final-form": "^6.5.3"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13"
-    }
+    },
+    "types": "types"
 }
diff --git a/collections/forms/types/CheckboxFieldFF/CheckboxFieldFF.d.ts b/collections/forms/types/CheckboxFieldFF/CheckboxFieldFF.d.ts
new file mode 100644
index 0000000000..8375721a23
--- /dev/null
+++ b/collections/forms/types/CheckboxFieldFF/CheckboxFieldFF.d.ts
@@ -0,0 +1,16 @@
+import type { FieldRenderProps } from 'react-final-form'
+import type { CheckboxFieldProps } from '@dhis2-ui/checkbox'
+import React from 'react'
+
+type CheckBoxValue = CheckboxFieldProps['value']
+type CheckboxRestProps = Omit<
+    CheckboxFieldProps,
+    'onChange' | 'value' | 'checked' | 'name'
+>
+
+export type CheckboxFieldFFProps = FieldRenderProps<CheckBoxValue> &
+    CheckboxRestProps & {
+        showValidStatus?: boolean
+    }
+
+export const CheckboxFieldFF: React.FC<CheckboxFieldFFProps>
diff --git a/collections/forms/types/FieldGroupFF/FieldGroupFF.d.ts b/collections/forms/types/FieldGroupFF/FieldGroupFF.d.ts
new file mode 100644
index 0000000000..203e544641
--- /dev/null
+++ b/collections/forms/types/FieldGroupFF/FieldGroupFF.d.ts
@@ -0,0 +1,9 @@
+import React from 'react'
+import type { FieldGroupProps } from '@dhis2-ui/field'
+
+export type FieldGroupFFProps = Omit<
+    FieldGroupProps,
+    'children' | 'label' | 'name' | 'required'
+>
+
+export const FieldGroupFF: React.FC<FieldGroupFFProps>
diff --git a/collections/forms/types/FileInputFieldFF/FileInputFieldFF.d.ts b/collections/forms/types/FileInputFieldFF/FileInputFieldFF.d.ts
new file mode 100644
index 0000000000..338dfc6626
--- /dev/null
+++ b/collections/forms/types/FileInputFieldFF/FileInputFieldFF.d.ts
@@ -0,0 +1,18 @@
+import React from 'react'
+import type { FileInputFieldProps } from '@dhis2-ui/file-input'
+import type { FieldRenderProps } from 'react-final-form'
+
+export type FilesValue = File[] | undefined | null | ''
+
+type FileInputRestProps = Omit<
+    FileInputFieldProps,
+    'onChange' | 'multiple' | 'name'
+>
+
+export type FileInputFieldFFProps = FieldRenderProps<FilesValue> &
+    FileInputRestProps & {
+        showValidStatus?: boolean
+        multifile: FileInputFieldProps['multiple']
+    }
+
+export const FileInputFieldFF: React.FC<FileInputFieldFFProps>
diff --git a/collections/forms/types/InputFieldFF/InputFieldFF.d.ts b/collections/forms/types/InputFieldFF/InputFieldFF.d.ts
new file mode 100644
index 0000000000..048590da5e
--- /dev/null
+++ b/collections/forms/types/InputFieldFF/InputFieldFF.d.ts
@@ -0,0 +1,15 @@
+import React from 'react'
+import type { InputFieldProps } from '@dhis2-ui/input'
+import type { FieldRenderProps } from 'react-final-form'
+
+export type InputValue = InputFieldProps['value']
+
+type InputFieldRestProps = Omit<InputFieldProps, 'onChange' | 'value' | 'name'>
+
+export type InputFieldFFProps = FieldRenderProps<InputValue> &
+    InputFieldRestProps & {
+        showLoadingStatus?: boolean
+        showValidStatus?: boolean
+    }
+
+export const InputFieldFF: React.FC<InputFieldFFProps>
diff --git a/collections/forms/types/MultiSelectFieldFF/MutliSelectFieldFF.d.ts b/collections/forms/types/MultiSelectFieldFF/MutliSelectFieldFF.d.ts
new file mode 100644
index 0000000000..d30d6b6a04
--- /dev/null
+++ b/collections/forms/types/MultiSelectFieldFF/MutliSelectFieldFF.d.ts
@@ -0,0 +1,24 @@
+import React from 'react'
+import type { FieldRenderProps } from 'react-final-form'
+import type {
+    MultiSelectOptionProps,
+    MultiSelectFieldProps,
+} from '@dhis2-ui/select'
+
+type InputValue = MultiSelectFieldProps['selected'] | ''
+
+type MultiSelectFieldRestProps = Omit<
+    MultiSelectFieldProps,
+    'onChange' | 'value'
+>
+
+type MultiSelectOptions = Array<Pick<MultiSelectOptionProps, 'value' | 'label'>>
+
+export type MultiSelectFieldFFProps = FieldRenderProps<InputValue> &
+    MultiSelectFieldRestProps & {
+        showLoadingStatus?: boolean
+        showValidStatus?: boolean
+        options: MultiSelectOptions
+    }
+
+export const MultiSelectFieldFF: React.FC<MultiSelectFieldFFProps>
diff --git a/collections/forms/types/RadioFieldFF/RadioFieldFF.d.ts b/collections/forms/types/RadioFieldFF/RadioFieldFF.d.ts
new file mode 100644
index 0000000000..847b65ae2a
--- /dev/null
+++ b/collections/forms/types/RadioFieldFF/RadioFieldFF.d.ts
@@ -0,0 +1,17 @@
+import React from 'react'
+import type { FieldRenderProps } from 'react-final-form'
+import type { RadioProps } from '@dhis2-ui/radio'
+
+type InputValue = RadioProps['value']
+
+type RadioRestProps = Omit<
+    RadioProps,
+    'onChange' | 'value' | 'checked' | 'name'
+>
+
+export type RadioFieldFFProps = FieldRenderProps<InputValue> &
+    RadioRestProps & {
+        showValidStatus?: boolean
+    }
+
+export const RadioFieldFF: React.FC<RadioFieldFFProps>
diff --git a/collections/forms/types/SingleSelectFieldFF/SingleSelectFieldFF.d.ts b/collections/forms/types/SingleSelectFieldFF/SingleSelectFieldFF.d.ts
new file mode 100644
index 0000000000..40bb616d5c
--- /dev/null
+++ b/collections/forms/types/SingleSelectFieldFF/SingleSelectFieldFF.d.ts
@@ -0,0 +1,26 @@
+import React from 'react'
+import type { FieldRenderProps } from 'react-final-form'
+import type {
+    SingleSelectOptionProps,
+    SingleSelectFieldProps,
+} from '@dhis2-ui/select'
+
+type InputValue = SingleSelectFieldProps['selected']
+
+type SingleSelectOptions = Array<
+    Pick<SingleSelectOptionProps, 'value' | 'label'>
+>
+
+type SingleSelectRestProps = Omit<
+    SingleSelectFieldProps,
+    'onChange' | 'value' | 'name'
+>
+
+export type SingleSelectFieldFFProps = FieldRenderProps<InputValue> &
+    SingleSelectRestProps & {
+        showLoadingStatus?: boolean
+        showValidStatus?: boolean
+        options: SingleSelectOptions
+    }
+
+export const SingleSelectFieldFF: React.FC<SingleSelectFieldFFProps>
diff --git a/collections/forms/types/SwitchFieldFF/SwitchFieldFF.d.ts b/collections/forms/types/SwitchFieldFF/SwitchFieldFF.d.ts
new file mode 100644
index 0000000000..5996b936c4
--- /dev/null
+++ b/collections/forms/types/SwitchFieldFF/SwitchFieldFF.d.ts
@@ -0,0 +1,15 @@
+import React from 'react'
+import type { FieldRenderProps } from 'react-final-form'
+import type { SwitchFieldProps } from '@dhis2-ui/switch'
+
+type InputValue = SwitchFieldProps['value']
+
+type SwitchFieldRestProps = Omit<
+    SwitchFieldProps,
+    'onChange' | 'checked' | 'value' | 'name'
+>
+
+export type SwitchFieldFFProps = FieldRenderProps<InputValue> &
+    SwitchFieldRestProps
+
+export const SwitchFieldFF: React.FC<SwitchFieldFFProps>
diff --git a/collections/forms/types/TextAreaFieldFF/TextAreaFieldFF.d.ts b/collections/forms/types/TextAreaFieldFF/TextAreaFieldFF.d.ts
new file mode 100644
index 0000000000..af829af51e
--- /dev/null
+++ b/collections/forms/types/TextAreaFieldFF/TextAreaFieldFF.d.ts
@@ -0,0 +1,15 @@
+import React from 'react'
+import type { FieldRenderProps } from 'react-final-form'
+import type { TextAreaFieldProps } from '@dhis2-ui/text-area'
+
+type InputValue = TextAreaFieldProps['value']
+
+type TextAreaFieldRestProps = Omit<
+    TextAreaFieldProps,
+    'onChange' | 'value' | 'name'
+>
+
+export type TextAreaFieldFFProps = FieldRenderProps<InputValue> &
+    TextAreaFieldRestProps
+
+export const TextAreaFieldFF: React.FC<TextAreaFieldFFProps>
diff --git a/collections/forms/types/index.d.ts b/collections/forms/types/index.d.ts
new file mode 100644
index 0000000000..844d413348
--- /dev/null
+++ b/collections/forms/types/index.d.ts
@@ -0,0 +1,28 @@
+import * as FinalForm from 'final-form'
+import * as ReactFinalForm from 'react-final-form'
+
+export { CheckboxFieldFF } from './CheckboxFieldFF/CheckboxFieldFF'
+export { FileInputFieldFF } from './FileInputFieldFF/FileInputFieldFF'
+export { InputFieldFF } from './InputFieldFF/InputFieldFF'
+export { MultiSelectFieldFF } from './MultiSelectFieldFF/MutliSelectFieldFF'
+export { SingleSelectFieldFF } from './SingleSelectFieldFF/SingleSelectFieldFF'
+export { RadioFieldFF } from './RadioFieldFF/RadioFieldFF'
+export { SwitchFieldFF } from './SwitchFieldFF/SwitchFieldFF'
+export { TextAreaFieldFF } from './TextAreaFieldFF/TextAreaFieldFF'
+export { FieldGroupFF } from './FieldGroupFF/FieldGroupFF'
+
+export * from './transformers'
+export * from './validators'
+
+/**
+ * Allows direct access to the FinalForm library. Please note that this is considered advanced
+ * usage and that you need to stay up to date with breaking changes in the FinalForm library.
+ */
+export { FinalForm }
+
+/**
+ * Allows direct access to the ReactFinalForm library. Please note that this is considered
+ * advanced usage and that you need to stay up to date with breaking changes in the FinalForm
+ * library.
+ */
+export { ReactFinalForm }
diff --git a/collections/forms/types/transformers/index.d.ts b/collections/forms/types/transformers/index.d.ts
new file mode 100644
index 0000000000..e985979da6
--- /dev/null
+++ b/collections/forms/types/transformers/index.d.ts
@@ -0,0 +1,6 @@
+export type ValuesWithId = Array<{ id: string }> | undefined
+
+export const arrayWithIdObjects: {
+    format: (value: ValuesWithId) => string
+    pars: (value: string) => ValuesWithId
+}
diff --git a/collections/forms/types/validators/index.d.ts b/collections/forms/types/validators/index.d.ts
new file mode 100644
index 0000000000..0ead88dae6
--- /dev/null
+++ b/collections/forms/types/validators/index.d.ts
@@ -0,0 +1,31 @@
+export type Validator = (value: unknown) => string | undefined
+
+export const alphaNumeric: Validator
+export const boolean: Validator
+export const composeValidators: (...validators: Validator[]) => Validator
+
+export const createCharacterLengthRange: (
+    lowerBound: number,
+    upperBound: number,
+    customMessage?: string
+) => Validator
+export const createEqualTo: (key: string, description?: string) => Validator
+export const createMaxCharacterLength: (upperBound: number) => Validator
+export const createMaxNumber: (upperBound: number) => Validator
+export const createMinCharacterLength: (lowerBound: number) => Validator
+export const createMinNumber: (lowerBound: number) => Validator
+export const createNumberRange: (
+    lowerBound: number,
+    upperBound: number,
+    customMessage?: string
+) => Validator
+export const createPattern: (pattern: RegExp, message?: string) => Validator
+export const dhis2Password: Validator
+export const dhis2Username: Validator
+export const email: Validator
+export const hasValue: Validator
+export const integer: Validator
+export const internationalPhoneNumber: Validator
+export const number: Validator
+export const string: Validator
+export const url: Validator
diff --git a/collections/ui/API.md b/collections/ui/API.md
index bba3b0d9ef..696a60c073 100644
--- a/collections/ui/API.md
+++ b/collections/ui/API.md
@@ -1283,6 +1283,43 @@ import { NoticeBox } from '@dhis2/ui'
 |valid|custom|||Applies 'valid' message styles. Mutually exclusive with the `error` and `warning` props|
 |warning|custom|||Applies 'warning' message styles. Mutually exclusive with the `error` and `valid` props|
 
+### OrganisationUnitTreeRootError
+
+#### Usage
+
+**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+
+
+```js
+import { OrganisationUnitTreeRootError } from '@dhis2/ui'
+```
+
+
+#### Props
+
+|Name|Type|Default|Required|Description|
+|---|---|---|---|---|
+|error|string||*||
+|dataTest|string|`'dhis2-uiwidgets-orgunittree-error'`|||
+
+### OrganisationUnitTreeRootLoading
+
+#### Usage
+
+**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+
+
+```js
+import { OrganisationUnitTreeRootLoading } from '@dhis2/ui'
+```
+
+
+#### Props
+
+|Name|Type|Default|Required|Description|
+|---|---|---|---|---|
+|dataTest|string|`'dhis2-uiwidgets-orgunittree-loading'`|||
+
 ### OrganisationUnitTree
 
 #### Usage
diff --git a/collections/ui/package.json b/collections/ui/package.json
index 21cc749f20..36d4c1e0e8 100644
--- a/collections/ui/package.json
+++ b/collections/ui/package.json
@@ -1,9 +1,10 @@
 {
     "name": "@dhis2/ui",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -20,54 +21,54 @@
         "build": "d2-app-scripts build"
     },
     "dependencies": {
-        "@dhis2-ui/alert": "8.16.0",
-        "@dhis2-ui/box": "8.16.0",
-        "@dhis2-ui/button": "8.16.0",
-        "@dhis2-ui/calendar": "8.16.0",
-        "@dhis2-ui/card": "8.16.0",
-        "@dhis2-ui/center": "8.16.0",
-        "@dhis2-ui/checkbox": "8.16.0",
-        "@dhis2-ui/chip": "8.16.0",
-        "@dhis2-ui/cover": "8.16.0",
-        "@dhis2-ui/css": "8.16.0",
-        "@dhis2-ui/divider": "8.16.0",
-        "@dhis2-ui/field": "8.16.0",
-        "@dhis2-ui/file-input": "8.16.0",
-        "@dhis2-ui/header-bar": "8.16.0",
-        "@dhis2-ui/help": "8.16.0",
-        "@dhis2-ui/input": "8.16.0",
-        "@dhis2-ui/intersection-detector": "8.16.0",
-        "@dhis2-ui/label": "8.16.0",
-        "@dhis2-ui/layer": "8.16.0",
-        "@dhis2-ui/legend": "8.16.0",
-        "@dhis2-ui/loader": "8.16.0",
-        "@dhis2-ui/logo": "8.16.0",
-        "@dhis2-ui/menu": "8.16.0",
-        "@dhis2-ui/modal": "8.16.0",
-        "@dhis2-ui/node": "8.16.0",
-        "@dhis2-ui/notice-box": "8.16.0",
-        "@dhis2-ui/organisation-unit-tree": "8.16.0",
-        "@dhis2-ui/pagination": "8.16.0",
-        "@dhis2-ui/popover": "8.16.0",
-        "@dhis2-ui/popper": "8.16.0",
-        "@dhis2-ui/portal": "8.16.0",
-        "@dhis2-ui/radio": "8.16.0",
-        "@dhis2-ui/required": "8.16.0",
-        "@dhis2-ui/segmented-control": "8.16.0",
-        "@dhis2-ui/select": "8.16.0",
-        "@dhis2-ui/selector-bar": "8.16.0",
-        "@dhis2-ui/sharing-dialog": "8.16.0",
-        "@dhis2-ui/switch": "8.16.0",
-        "@dhis2-ui/tab": "8.16.0",
-        "@dhis2-ui/table": "8.16.0",
-        "@dhis2-ui/tag": "8.16.0",
-        "@dhis2-ui/text-area": "8.16.0",
-        "@dhis2-ui/tooltip": "8.16.0",
-        "@dhis2-ui/transfer": "8.16.0",
-        "@dhis2-ui/user-avatar": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-forms": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2-ui/alert": "9.0.0-alpha.2",
+        "@dhis2-ui/box": "9.0.0-alpha.2",
+        "@dhis2-ui/button": "9.0.0-alpha.2",
+        "@dhis2-ui/calendar": "9.0.0-alpha.2",
+        "@dhis2-ui/card": "9.0.0-alpha.2",
+        "@dhis2-ui/center": "9.0.0-alpha.2",
+        "@dhis2-ui/checkbox": "9.0.0-alpha.2",
+        "@dhis2-ui/chip": "9.0.0-alpha.2",
+        "@dhis2-ui/cover": "9.0.0-alpha.2",
+        "@dhis2-ui/css": "9.0.0-alpha.2",
+        "@dhis2-ui/divider": "9.0.0-alpha.2",
+        "@dhis2-ui/field": "9.0.0-alpha.2",
+        "@dhis2-ui/file-input": "9.0.0-alpha.2",
+        "@dhis2-ui/header-bar": "9.0.0-alpha.2",
+        "@dhis2-ui/help": "9.0.0-alpha.2",
+        "@dhis2-ui/input": "9.0.0-alpha.2",
+        "@dhis2-ui/intersection-detector": "9.0.0-alpha.2",
+        "@dhis2-ui/label": "9.0.0-alpha.2",
+        "@dhis2-ui/layer": "9.0.0-alpha.2",
+        "@dhis2-ui/legend": "9.0.0-alpha.2",
+        "@dhis2-ui/loader": "9.0.0-alpha.2",
+        "@dhis2-ui/logo": "9.0.0-alpha.2",
+        "@dhis2-ui/menu": "9.0.0-alpha.2",
+        "@dhis2-ui/modal": "9.0.0-alpha.2",
+        "@dhis2-ui/node": "9.0.0-alpha.2",
+        "@dhis2-ui/notice-box": "9.0.0-alpha.2",
+        "@dhis2-ui/organisation-unit-tree": "9.0.0-alpha.2",
+        "@dhis2-ui/pagination": "9.0.0-alpha.2",
+        "@dhis2-ui/popover": "9.0.0-alpha.2",
+        "@dhis2-ui/popper": "9.0.0-alpha.2",
+        "@dhis2-ui/portal": "9.0.0-alpha.2",
+        "@dhis2-ui/radio": "9.0.0-alpha.2",
+        "@dhis2-ui/required": "9.0.0-alpha.2",
+        "@dhis2-ui/segmented-control": "9.0.0-alpha.2",
+        "@dhis2-ui/select": "9.0.0-alpha.2",
+        "@dhis2-ui/selector-bar": "9.0.0-alpha.2",
+        "@dhis2-ui/sharing-dialog": "9.0.0-alpha.2",
+        "@dhis2-ui/switch": "9.0.0-alpha.2",
+        "@dhis2-ui/tab": "9.0.0-alpha.2",
+        "@dhis2-ui/table": "9.0.0-alpha.2",
+        "@dhis2-ui/tag": "9.0.0-alpha.2",
+        "@dhis2-ui/text-area": "9.0.0-alpha.2",
+        "@dhis2-ui/tooltip": "9.0.0-alpha.2",
+        "@dhis2-ui/transfer": "9.0.0-alpha.2",
+        "@dhis2-ui/user-avatar": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-forms": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "prop-types": "^15.7.2"
     },
     "peerDependencies": {
@@ -83,5 +84,10 @@
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "files": [
+        "build",
+        "types"
+    ],
+    "types": "types"
 }
diff --git a/collections/ui/types/index.d.ts b/collections/ui/types/index.d.ts
new file mode 100644
index 0000000000..cb74eda88b
--- /dev/null
+++ b/collections/ui/types/index.d.ts
@@ -0,0 +1,65 @@
+export * from '@dhis2/ui-constants'
+export * from '@dhis2/ui-icons'
+
+// DEPRECATED?
+export * from '@dhis2/ui-forms'
+
+// components
+export * from '@dhis2-ui/alert'
+export * from '@dhis2-ui/button'
+export * from '@dhis2-ui/box'
+export * from '@dhis2-ui/calendar'
+export * from '@dhis2-ui/card'
+export * from '@dhis2-ui/center'
+export * from '@dhis2-ui/checkbox'
+export * from '@dhis2-ui/chip'
+export * from '@dhis2-ui/cover'
+export * from '@dhis2-ui/css'
+export * from '@dhis2-ui/divider'
+export * from '@dhis2-ui/field'
+export * from '@dhis2-ui/file-input'
+export * from '@dhis2-ui/header-bar'
+export * from '@dhis2-ui/help'
+export * from '@dhis2-ui/input'
+export * from '@dhis2-ui/intersection-detector'
+export * from '@dhis2-ui/label'
+export * from '@dhis2-ui/layer'
+export * from '@dhis2-ui/legend'
+export * from '@dhis2-ui/loader'
+export * from '@dhis2-ui/logo'
+export * from '@dhis2-ui/menu'
+export * from '@dhis2-ui/modal'
+export * from '@dhis2-ui/node'
+export * from '@dhis2-ui/notice-box'
+export * from '@dhis2-ui/organisation-unit-tree'
+export * from '@dhis2-ui/popover'
+export { Popper, PopperProps } from '@dhis2-ui/popper'
+export * from '@dhis2-ui/portal'
+export * from '@dhis2-ui/radio'
+export * from '@dhis2-ui/required'
+export { Pagination, PaginationProps } from '@dhis2-ui/pagination'
+export * from '@dhis2-ui/sharing-dialog'
+export {
+    SingleSelect,
+    SingleSelectField,
+    SingleSelectOption,
+    MultiSelect,
+    MultiSelectField,
+    MultiSelectOption,
+    SingleSelectProps,
+    SingleSelectFieldProps,
+    SingleSelectOptionProps,
+    MultiSelectProps,
+    MultiSelectFieldProps,
+    MultiSelectOptionProps,
+} from '@dhis2-ui/select'
+export * from '@dhis2-ui/selector-bar'
+export * from '@dhis2-ui/switch'
+export * from '@dhis2-ui/table'
+export * from '@dhis2-ui/tab'
+export * from '@dhis2-ui/tag'
+export * from '@dhis2-ui/text-area'
+export * from '@dhis2-ui/tooltip'
+export * from '@dhis2-ui/transfer'
+export * from '@dhis2-ui/user-avatar'
+export * from '@dhis2-ui/segmented-control'
diff --git a/components/alert/package.json b/components/alert/package.json
index 0d18dd9a35..54f48ae23d 100644
--- a/components/alert/package.json
+++ b/components/alert/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/alert",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Alert",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,18 +33,20 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/portal": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2-ui/portal": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/alert/types/index.d.ts b/components/alert/types/index.d.ts
new file mode 100644
index 0000000000..388ad5dd1d
--- /dev/null
+++ b/components/alert/types/index.d.ts
@@ -0,0 +1,49 @@
+import * as React from 'react'
+
+export interface ActionsAction {
+    label: string
+    onClick: React.MouseEventHandler<HTMLSpanElement>
+}
+
+type ActionActionTuple = [ActionsAction?, ActionsAction?]
+
+export interface AlertBarProps {
+    /**
+     * An array of 0-2 action objects
+     */
+    actions?: ActionActionTuple
+    /**
+     * The message string for the alert
+     */
+    children?: string
+    className?: string
+    /**
+     * Alert bars with `critical` will not autohide
+     */
+    critical?: boolean
+    dataTest?: string
+    duration?: number
+    hidden?: boolean
+    /**
+     * A specific icon to override the default icon in the bar.
+     * If `false` is provided, no icon will be shown.
+     */
+    icon?: Element | boolean
+    permanent?: boolean
+    success?: boolean
+    /**
+     * Alert bars with `warning` will not autohide
+     */
+    warning?: boolean
+    onHidden?: (arg0: {}, argv1: null) => void
+}
+
+export const AlertBar: React.FC<AlertBarProps>
+
+export interface AlertStackProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+}
+
+export const AlertStack: React.FC<AlertStackProps>
diff --git a/components/box/package.json b/components/box/package.json
index 8fd4be9f45..3301a1a5a1 100644
--- a/components/box/package.json
+++ b/components/box/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/box",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Box",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/box/types/index.d.ts b/components/box/types/index.d.ts
new file mode 100644
index 0000000000..5d03067df8
--- /dev/null
+++ b/components/box/types/index.d.ts
@@ -0,0 +1,17 @@
+import * as React from 'react'
+
+export interface BoxProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    height?: string
+    marginTop?: string
+    maxHeight?: string
+    maxWidth?: string
+    minHeight?: string
+    minWidth?: string
+    overflow?: string
+    width?: string
+}
+
+export const Box: React.FC<BoxProps>
diff --git a/components/button/package.json b/components/button/package.json
index 0f128252bf..ab9e941ead 100644
--- a/components/button/package.json
+++ b/components/button/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/button",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Button",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,20 +33,22 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/layer": "8.16.0",
-        "@dhis2-ui/loader": "8.16.0",
-        "@dhis2-ui/popper": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2-ui/layer": "9.0.0-alpha.2",
+        "@dhis2-ui/loader": "9.0.0-alpha.2",
+        "@dhis2-ui/popper": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/button/types/index.d.ts b/components/button/types/index.d.ts
new file mode 100644
index 0000000000..da71d22c49
--- /dev/null
+++ b/components/button/types/index.d.ts
@@ -0,0 +1,234 @@
+import * as React from 'react'
+
+export type ButtonType = 'submit' | 'reset' | 'button'
+
+export interface ButtonEventPayload {
+    value?: string
+    name?: string
+}
+
+type ButtonEventHandler<Event extends React.SyntheticEvent> = (
+    arg0: ButtonEventPayload,
+    event: Event
+) => void
+
+type ButtonOpenEventHandler<
+    Event extends React.SyntheticEvent = React.MouseEvent<HTMLButtonElement>
+> = (arg0: ButtonEventPayload & { open: boolean }, event: Event) => void
+
+export interface ButtonProps {
+    /**
+     * Component to render inside the button
+     */
+    children?: React.ReactNode
+    /**
+     * A className that will be passed to the `<button>` element
+     */
+    className?: string
+    /**
+     * A string that will be applied as a `data-test` attribute on the button element
+     * for identification during testing
+     */
+    dataTest?: string
+    /** Applies 'destructive' button appearance, implying a dangerous action */
+    destructive?: boolean
+    /**
+     * Applies a greyed-out appearance and makes the button non-interactive
+     */
+    disabled?: boolean
+    /**
+     * An icon element to display inside the button
+     */
+    icon?: React.ReactElement
+    /**
+     * Use this variant to capture the initial focus on the page.
+     */
+    initialFocus?: boolean
+    /**
+     * Makes the button large. Mutually exclusive with `small`
+     */
+    large?: boolean
+    /**
+     * Sets the button into a loading state
+     */
+    loading?: boolean
+    /**
+     * Sets `name` attribute on button element.
+     * Gets passed as part of the first argument to callbacks (see `onClick`).
+     */
+    name?: string
+    /** Applies 'primary' button appearance, implying the most important action */
+    primary?: boolean
+    /** Applies 'secondary' button appearance */
+    secondary?: boolean
+    /**
+     * Makes the button small. Mutually exclusive with `large` prop
+     */
+    small?: boolean
+    /**
+     * Tab index for focusing the button with a keyboard
+     */
+    tabIndex?: string
+    /**
+     * Changes appearance of button to an on/off state
+     */
+    toggled?: boolean
+    /**
+     * Sets `type` attribute on `<button>` element
+     */
+    type?: ButtonType
+    /**
+     * Value associated with the button.
+     * Gets passed as part of the first argument to callbacks (see `onClick`).
+     */
+    value?: string
+    /**
+     * Callback to trigger on de-focus (blur).
+     * Called with same args as `onClick`
+     */
+    onBlur?: ButtonEventHandler<React.FocusEvent<HTMLButtonElement>>
+    /**
+     * Callback to trigger on click.
+     * Called with args `({ value, name }, event)`
+     */
+    onClick?: ButtonEventHandler<React.MouseEvent<HTMLButtonElement>>
+    /**
+     * Callback to trigger on focus. Called with same args as `onClick`
+     */
+    onFocus?: ButtonEventHandler<React.FocusEvent<HTMLButtonElement>>
+    /**
+     * Callback to trigger on key-down. Called with same args as `onClick`
+     */
+    onKeyDown?: ButtonEventHandler<React.KeyboardEvent<HTMLButtonElement>>
+}
+
+export const Button: React.FC<ButtonProps>
+
+export interface ButtonStripProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Horizontal alignment for buttons. Mutually exclusive with `middle` prop
+     */
+    end?: boolean
+    /**
+     * Horizontal alignment. Mutually exclusive with `end` prop
+     */
+    middle?: boolean
+}
+
+export const ButtonStrip: React.FC<ButtonStripProps>
+
+export type DropdownButtonType = 'submit' | 'reset' | 'button'
+
+export interface DropdownButtonProps {
+    /**
+     * Children to render inside the buton
+     */
+    children?: React.ReactNode
+    className?: string
+    /**
+     * Component to show/hide when button is clicked
+     */
+    component?: React.ReactElement<any>
+    dataTest?: string
+    /** Applies 'destructive' button appearance, implying a dangerous action. */
+    destructive?: boolean
+    /**
+     * Make the button non-interactive
+     */
+    disabled?: boolean
+    icon?: React.ReactElement<any>
+    /**
+     * Grants button initial focus on the page
+     */
+    initialFocus?: boolean
+    /**
+     * Button size. Mutually exclusive with `small` prop
+     */
+    large?: boolean
+    name?: string
+    /**
+     * Controls popper visibility. When implementing this prop the component becomes a controlled component
+     */
+    open?: boolean
+    /** Applies 'primary' button appearance, implying the most important action */
+    primary?: boolean
+    /** Applies 'secondary' button appearance */
+    secondary?: boolean
+    /**
+     * Changes button size. Mutually exclusive with `large` prop
+     */
+    small?: boolean
+    tabIndex?: string
+    /**
+     * Type of button. Can take advantage of different default behavior
+     */
+    type?: DropdownButtonType
+    value?: string
+    /**
+     * Callback triggered on click.
+     * Called with signature `({ name: string, value: string, open: bool }, event)`
+     * Is required when using the `open` prop to override the internal
+     * state.
+     */
+    onClick?: ButtonOpenEventHandler
+}
+
+export class DropdownButton extends React.Component<DropdownButtonProps, any> {
+    render(): JSX.Element
+}
+
+export type SplitButtonType = 'submit' | 'reset' | 'button'
+
+export interface SplitButtonProps {
+    children?: string
+    className?: string
+    /**
+     * Component to render when the dropdown is opened
+     */
+    component?: React.ReactElement<any>
+    dataTest?: string
+    /** Applies 'destructive' button appearance, implying a dangerous action. */
+    destructive?: boolean
+    /**
+     * Disables the button and makes it uninteractive
+     */
+    disabled?: boolean
+    /**
+     * An icon to add inside the button
+     */
+    icon?: React.ReactElement<any>
+    /**
+     * Grants the button the initial focus
+     */
+    initialFocus?: boolean
+    /**
+     * Changes button size. Mutually exclusive with `small` prop
+     */
+    large?: boolean
+    name?: string
+    /** Applies 'primary' button appearance, implying the most important action */
+    primary?: boolean
+    /** Applies 'secondary' button appearance */
+    secondary?: boolean
+    /**
+     * Changes button size. Mutually exclusive with `large` prop
+     */
+    small?: boolean
+    tabIndex?: string
+    /**
+     * Type of button. Applied to html `button` element
+     */
+    type?: SplitButtonType
+    /**
+     * Value associated with the button. Passed in object to onClick handler
+     */
+    value?: string
+    onClick?: ButtonOpenEventHandler
+}
+
+export class SplitButton extends React.Component<SplitButtonProps, any> {
+    render(): JSX.Element
+}
diff --git a/components/calendar/package.json b/components/calendar/package.json
index 9423b6db45..3202308c89 100644
--- a/components/calendar/package.json
+++ b/components/calendar/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/calendar",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Calendar",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,25 +33,27 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/button": "8.16.0",
-        "@dhis2-ui/card": "8.16.0",
-        "@dhis2-ui/input": "8.16.0",
-        "@dhis2-ui/layer": "8.16.0",
-        "@dhis2-ui/popper": "8.16.0",
+        "@dhis2-ui/button": "9.0.0-alpha.2",
+        "@dhis2-ui/card": "9.0.0-alpha.2",
+        "@dhis2-ui/input": "9.0.0-alpha.2",
+        "@dhis2-ui/layer": "9.0.0-alpha.2",
+        "@dhis2-ui/popper": "9.0.0-alpha.2",
         "@dhis2/multi-calendar-dates": "1.0.2",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/calendar/types/index.d.ts b/components/calendar/types/index.d.ts
new file mode 100644
index 0000000000..62bb95c843
--- /dev/null
+++ b/components/calendar/types/index.d.ts
@@ -0,0 +1,61 @@
+import * as React from 'react'
+import { useDatePicker } from '@dhis2/multi-calendar-dates'
+import { InputFieldProps } from '@dhis2-ui/input'
+
+export type CalendarDir = 'ltr' | 'rtl'
+
+type CalendarPickerParam = Parameters<typeof useDatePicker>[0]
+type CalendarPickerOptions = CalendarPickerParam['options']
+
+export interface CalendarProps {
+    /**
+     * the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts
+     */
+    calendar: CalendarPickerOptions['calendar']
+    /**
+     * Called with signature `(null)` \|\| `({ dateCalendarString: string, dateCalendar: Temporal.ZonedDateTime })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd`
+     */
+    onDateSelect: CalendarPickerParam['onDateSelect']
+    /**
+     * the size of a single cell in the table forming the calendar
+     */
+    cellSize?: string
+    /**
+     * the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601)
+     */
+    date?: string
+    /**
+     * the direction of the library - internally the library will use rtl for rtl-languages but this can be overridden here for more control
+     */
+    dir?: CalendarDir
+    /**
+     * any valid locale -  if none provided, the internal library will fallback to the user locale (more info here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/hooks/internal/useResolvedLocaleOptions.ts#L15)
+     */
+    locale?: string
+    /**
+     * numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts
+     */
+    numberingSystem?: CalendarPickerOptions['numberingSystem']
+    /**
+     * the timeZone to use
+     */
+    timeZone?: CalendarPickerOptions['timeZone']
+    /**
+     * the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow)
+     */
+    weekDayFormat?: CalendarPickerOptions['weekDayFormat']
+    /**
+     * the width of the calendar component
+     */
+    width?: string
+}
+
+export const Calendar: React.FC<CalendarProps>
+
+export type CalendarInputProps = Omit<
+    InputFieldProps,
+    'label' | 'type' | 'value'
+> &
+    CalendarProps
+
+export const CalendarInput: React.FC<CalendarInputProps>
diff --git a/components/card/package.json b/components/card/package.json
index 3ce143a96c..a84a742972 100644
--- a/components/card/package.json
+++ b/components/card/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/card",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Card",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/card/types/index.d.ts b/components/card/types/index.d.ts
new file mode 100644
index 0000000000..c9cd3db38c
--- /dev/null
+++ b/components/card/types/index.d.ts
@@ -0,0 +1,9 @@
+import * as React from 'react'
+
+export interface CardProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+}
+
+export const Card: React.FC<CardProps>
diff --git a/components/center/package.json b/components/center/package.json
index 684389c878..7579c96b8a 100644
--- a/components/center/package.json
+++ b/components/center/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/center",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Center",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/center/types/index.d.ts b/components/center/types/index.d.ts
new file mode 100644
index 0000000000..eff4dd12a6
--- /dev/null
+++ b/components/center/types/index.d.ts
@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+export type CenterPosition = 'top' | 'middle' | 'bottom'
+
+export interface CenterProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Vertical alignment
+     */
+    position?: CenterPosition
+}
+
+export const Center: React.FC<CenterProps>
diff --git a/components/checkbox/package.json b/components/checkbox/package.json
index 4a8c98265c..9b3e684177 100644
--- a/components/checkbox/package.json
+++ b/components/checkbox/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/checkbox",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Checkbox",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,18 +33,20 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/field": "8.16.0",
-        "@dhis2-ui/required": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2-ui/field": "9.0.0-alpha.2",
+        "@dhis2-ui/required": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/checkbox/types/index.d.ts b/components/checkbox/types/index.d.ts
new file mode 100644
index 0000000000..3dd65e8582
--- /dev/null
+++ b/components/checkbox/types/index.d.ts
@@ -0,0 +1,120 @@
+import * as React from 'react'
+
+export interface EventPayload {
+    value?: string
+    name?: string
+    checked: boolean
+}
+
+type CheckboxEventHandler<Event extends React.SyntheticEvent> = (
+    arg0: EventPayload,
+    event: Event
+) => void
+
+type CheckboxFocusHandler = CheckboxEventHandler<
+    React.FocusEvent<HTMLInputElement>
+>
+type CheckboxChangeHandler = CheckboxEventHandler<
+    React.ChangeEvent<HTMLInputElement>
+>
+type CheckboxKeyHandler = CheckboxEventHandler<
+    React.KeyboardEvent<HTMLInputElement>
+>
+
+export interface CheckboxProps {
+    checked?: boolean
+    className?: string
+    dataTest?: string
+    dense?: boolean
+    disabled?: boolean
+    error?: boolean
+    indeterminate?: boolean
+    initialFocus?: boolean
+    label?: React.ReactNode
+    name?: string
+    tabIndex?: string
+    valid?: boolean
+    value?: string
+    warning?: boolean
+    onBlur?: CheckboxFocusHandler
+    /**
+     * Called with signature `(object, event)`
+     */
+    onChange?: CheckboxChangeHandler
+    onFocus?: CheckboxFocusHandler
+    onKeyDown?: CheckboxKeyHandler
+}
+
+export class Checkbox extends React.Component<CheckboxProps, any> {
+    render(): JSX.Element
+}
+
+export interface CheckboxFieldProps {
+    checked?: boolean
+    className?: string
+    dataTest?: string
+    /**
+     * Smaller dimensions for information-dense layouts
+     */
+    dense?: boolean
+    /**
+     * Disables the checkbox
+     */
+    disabled?: boolean
+    /**
+     * Applies 'error' styling to checkbox and validation text for feedback. Mutually exclusive with `warning` and `valid` props
+     */
+    error?: boolean
+    /**
+     * Useful instructions for the user
+     */
+    helpText?: string
+    initialFocus?: boolean
+    /**
+     * Labels the checkbox
+     */
+    label?: React.ReactNode
+    /**
+     * Name associate with the checkbox. Passed in object as argument to event handlers
+     */
+    name?: string
+    /**
+     * Adds an asterisk to indicate this field is required
+     */
+    required?: boolean
+    tabIndex?: string
+    /**
+     * Applies 'valid' styling to checkbox and validation text for feedback. Mutually exclusive with `warning` and `error` props
+     */
+    valid?: boolean
+    /**
+     * Adds text below the checkbox to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses
+     */
+    validationText?: string
+    /**
+     * Value associated with the checkbox. Passed in object as argument to event handlers
+     */
+    value?: string
+    /**
+     * Applies 'warning' styling to checkbox and validation text for feedback. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+    /**
+     * Called with signature `({ name: string, value: string, checked: bool }, event)`
+     */
+    onBlur?: CheckboxFocusHandler
+    /**
+     * Called with signature `({ name: string, value: string, checked: bool }, event)`
+     */
+    onChange?: CheckboxChangeHandler
+    /**
+     * Called with signature `({ name: string, value: string, checked: bool }, event)`
+     */
+    onFocus?: CheckboxFocusHandler
+    /**
+     * Called with signature `({ name: string, value: string, checked: bool }, event)`
+     */
+    onKeyDown?: CheckboxKeyHandler
+}
+
+export const CheckboxField: React.FC<CheckboxFieldProps>
diff --git a/components/chip/package.json b/components/chip/package.json
index ab95606c2e..4ebab780df 100644
--- a/components/chip/package.json
+++ b/components/chip/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/chip",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Chip",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/chip/types/index.d.ts b/components/chip/types/index.d.ts
new file mode 100644
index 0000000000..40401ee07c
--- /dev/null
+++ b/components/chip/types/index.d.ts
@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+export interface ChipProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    dense?: boolean
+    disabled?: boolean
+    dragging?: boolean
+    icon?: React.ReactElement<any>
+    /**
+     * `margin-bottom` value, applied in `px`
+     */
+    marginBottom?: number
+    /**
+     * `margin-left` value, applied in `px`
+     */
+    marginLeft?: number
+    /**
+     * `margin-right` value, applied in `px`
+     */
+    marginRight?: number
+    /**
+     * `margin-top` value, applied in `px`
+     */
+    marginTop?: number
+    overflow?: boolean
+    selected?: boolean
+    onClick?: (arg0: {}, arg1: React.MouseEvent<HTMLSpanElement>) => void
+    onRemove?: (arg0: {}, arg1: React.MouseEvent<HTMLSpanElement>) => void
+}
+
+export const Chip: React.FC<ChipProps>
diff --git a/components/cover/package.json b/components/cover/package.json
index 1b037fcf07..4b3a3c58e2 100644
--- a/components/cover/package.json
+++ b/components/cover/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/cover",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Cover",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/cover/types/index.d.ts b/components/cover/types/index.d.ts
new file mode 100644
index 0000000000..e7a5973b85
--- /dev/null
+++ b/components/cover/types/index.d.ts
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+export interface CoverProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Adds a semi-transparent background to the cover
+     */
+    translucent?: boolean
+    onClick?: (arg0: {}, arg1: React.MouseEvent<HTMLDivElement>) => void
+}
+
+export const Cover: React.FC<CoverProps>
diff --git a/components/css/package.json b/components/css/package.json
index dfc5189267..728b1be8bc 100644
--- a/components/css/package.json
+++ b/components/css/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/css",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI CSS",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/css/types/index.d.ts b/components/css/types/index.d.ts
new file mode 100644
index 0000000000..95d44e9f3b
--- /dev/null
+++ b/components/css/types/index.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+export const CssReset: React.FC
+
+export interface CssVariablesProps {
+    colors?: boolean
+    elevations?: boolean
+    layers?: boolean
+    spacers?: boolean
+    theme?: boolean
+}
+
+export const CssVariables: React.FC<CssVariablesProps>
diff --git a/components/divider/package.json b/components/divider/package.json
index 33f3c59086..34b459bc8f 100644
--- a/components/divider/package.json
+++ b/components/divider/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/divider",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Divider",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/divider/types/index.d.ts b/components/divider/types/index.d.ts
new file mode 100644
index 0000000000..eca4584287
--- /dev/null
+++ b/components/divider/types/index.d.ts
@@ -0,0 +1,10 @@
+import * as React from 'react'
+
+export interface DividerProps {
+    className?: string
+    dataTest?: string
+    dense?: boolean
+    margin?: string
+}
+
+export const Divider: React.FC<DividerProps>
diff --git a/components/field/package.json b/components/field/package.json
index 6c7f160797..99461b9656 100644
--- a/components/field/package.json
+++ b/components/field/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/field",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Field",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,19 +33,21 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "8.16.0",
-        "@dhis2-ui/help": "8.16.0",
-        "@dhis2-ui/label": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2-ui/box": "9.0.0-alpha.2",
+        "@dhis2-ui/help": "9.0.0-alpha.2",
+        "@dhis2-ui/label": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/field/types/index.d.ts b/components/field/types/index.d.ts
new file mode 100644
index 0000000000..9abfd44b11
--- /dev/null
+++ b/components/field/types/index.d.ts
@@ -0,0 +1,97 @@
+import * as React from 'react'
+
+export interface FieldProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Disabled status, shown when mouse is over label
+     */
+    disabled?: boolean
+    /**
+     * Field status. Mutually exclusive with `valid` and `warning` props
+     */
+    error?: boolean
+    /**
+     * Useful text within the field
+     */
+    helpText?: string
+    /**
+     * Label at the top of the field
+     */
+    label?: string
+    /**
+     * `name` will become the target of the `for`/`htmlFor` attribute on the `<label>` element
+     */
+    name?: string
+    /**
+     * Inidcates this field is required
+     */
+    required?: boolean
+    /**
+     * Field status. Mutually exclusive with `error` and `warning` props
+     */
+    valid?: boolean
+    /**
+     * Feedback given related to validation status of field
+     */
+    validationText?: string
+    /**
+     * Field status. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+}
+
+export const Field: React.FC<FieldProps>
+
+export interface FieldGroupProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Disables the form controls within
+     */
+    disabled?: boolean
+    /**
+     * Applies 'error' styling to validation text for feedback. Mutually exclusive with `warning` and `valid` props
+     */
+    error?: boolean
+    /**
+     * Useful instructions for the user
+     */
+    helpText?: string
+    /**
+     * Labels the Field Group
+     */
+    label?: string
+    /**
+     * Name associate with the Field Group. Passed in object as argument to event handlers
+     */
+    name?: string
+    /**
+     * Adds an asterisk to indicate this field is required
+     */
+    required?: boolean
+    /**
+     * Applies 'valid' styling to validation text for feedback. Mutually exclusive with `warning` and `error` props
+     */
+    valid?: boolean
+    /**
+     * Adds text at the bottom of the field to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses
+     */
+    validationText?: string
+    /**
+     * Applies 'warning' styling to validation text for feedback. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+}
+
+export const FieldGroup: React.FC<FieldGroupProps>
+
+export interface FieldSetProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+}
+
+export const FieldSet: React.FC<FieldSetProps>
diff --git a/components/file-input/package.json b/components/file-input/package.json
index 05905a803d..93a4ad4a13 100644
--- a/components/file-input/package.json
+++ b/components/file-input/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/file-input",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI FileInput",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -33,23 +34,25 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "8.16.0",
-        "@dhis2-ui/field": "8.16.0",
-        "@dhis2-ui/label": "8.16.0",
-        "@dhis2-ui/loader": "8.16.0",
-        "@dhis2-ui/status-icon": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2-ui/button": "9.0.0-alpha.2",
+        "@dhis2-ui/field": "9.0.0-alpha.2",
+        "@dhis2-ui/label": "9.0.0-alpha.2",
+        "@dhis2-ui/loader": "9.0.0-alpha.2",
+        "@dhis2-ui/status-icon": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/file-input/types/index.d.ts b/components/file-input/types/index.d.ts
new file mode 100644
index 0000000000..4715927fb5
--- /dev/null
+++ b/components/file-input/types/index.d.ts
@@ -0,0 +1,287 @@
+import * as React from 'react'
+
+export interface FileInputEventPayload {
+    files: FileList
+    name?: string
+}
+
+type FileInputEventHandler<Event extends React.SyntheticEvent> = (
+    arg0: FileInputEventPayload,
+    event: Event
+) => void
+
+type FileInputFocusHandler = FileInputEventHandler<
+    React.FocusEvent<HTMLInputElement>
+>
+type FileInputChangeHandler = FileInputEventHandler<
+    React.ChangeEvent<HTMLInputElement>
+>
+type FileInputKeyHandler = FileInputEventHandler<
+    React.KeyboardEvent<HTMLInputElement>
+>
+
+export interface FileInputProps {
+    /**
+     * The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)
+     */
+    accept?: string
+    buttonLabel?: string
+    className?: string
+    dataTest?: string
+    disabled?: boolean
+    /**
+     * Input status. Mutually exclusive with `warning` and `valid`
+     */
+    error?: boolean
+    initialFocus?: boolean
+    /**
+     * Button size. Mutually exclusive with `small`
+     */
+    large?: boolean
+    /**
+     * The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)
+     */
+    multiple?: boolean
+    name?: string
+    /**
+     * Button size. Mutually exclusive with `large`
+     */
+    small?: boolean
+    tabIndex?: string
+    /**
+     * Input status. Mutually exclusive with `warning` and `error`
+     */
+    valid?: boolean
+    /**
+     * Input status. Mutually exclusive with `valid` and `error`
+     */
+    warning?: boolean
+    /**
+     * Called with signature `(object, event)`
+     */
+    onBlur?: FileInputFocusHandler
+    /**
+     * Called with signature `(object, event)`
+     */
+    onChange?: FileInputChangeHandler
+    /**
+     * Called with signature `(object, event)`
+     */
+    onFocus?: FileInputFocusHandler
+    /**
+     * Called with signature `(object, event)`
+     */
+    onKeyDown?: FileInputKeyHandler
+}
+
+export class FileInput extends React.Component<FileInputProps, any> {
+    render(): JSX.Element
+}
+
+type TranslateableProp = string | ((arg: any) => string)
+
+export interface FileInputFieldProps {
+    /**
+     * The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)
+     */
+    accept?: string
+    /**
+     * Text on the button
+     */
+    buttonLabel?: TranslateableProp
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Disables the button
+     */
+    disabled?: boolean
+    /**
+     * Applies 'error' styling to the validation text. Mutually exclusive with `warning` and `valid` props
+     */
+    error?: boolean
+    /**
+     * Useful guiding text for the user
+     */
+    helpText?: string
+    initialFocus?: boolean
+    /**
+     * A descriptive label above the button
+     */
+    label?: string
+    /**
+     * Size of the button. Mutually exclusive with the `small` prop
+     */
+    large?: boolean
+    /**
+     * The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)
+     */
+    multiple?: boolean
+    /**
+     * Name associated with input. Passed to event handler callbacks
+     */
+    name?: string
+    /**
+     * Placeholder below the button
+     */
+    placeholder?: TranslateableProp
+    /**
+     * Adds an asterisk to indicate this field is required
+     */
+    required?: boolean
+    /**
+     * Size of the button. Mutually exclusive with the `large` prop
+     */
+    small?: boolean
+    tabIndex?: string
+    /**
+     * Applies 'valid' styling to the validation text. Mutually exclusive with `warning` and `error` props
+     */
+    valid?: boolean
+    /**
+     * Text below the button that provides validation feedback
+     */
+    validationText?: string
+    /**
+     * Applies 'warning' styling to the validation text. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+    onBlur?: FileInputFocusHandler
+    /**
+     * Called with signature `({ name: string, files: [] }, event)`
+     */
+    onChange?: FileInputChangeHandler
+    /**
+     * Called with signature `({ name: string, files: [] }, event)`
+     */
+    onFocus?: FileInputFocusHandler
+    /**
+     * Called with signature `({ name: string, files: [] }, event)`
+     */
+    onKeyDown?: FileInputKeyHandler
+}
+
+export const FileInputField: React.FC<FileInputFieldProps>
+
+export interface FileInputFieldWithListProps {
+    /**
+     * The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)
+     */
+    accept?: string
+    /**
+     * Text on the button
+     */
+    buttonLabel?: TranslateableProp
+    className?: string
+    dataTest?: string
+    /**
+     * Disables the button
+     */
+    disabled?: boolean
+    /**
+     * Applies 'error' styling to the button and validation text. Mutually exclusive with `warning` and `valid` props
+     */
+    error?: boolean
+    files?: File[]
+    /**
+     * Useful guiding text for the user
+     */
+    helpText?: string
+    initialFocus?: boolean
+    /**
+     * A descriptive label above the button
+     */
+    label?: string
+    /**
+     * Size of the button. Mutually exclusive with the `small` prop
+     */
+    large?: boolean
+    /**
+     * The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)
+     */
+    multiple?: boolean
+    /**
+     * Name associated with input. Passed to event handler callbacks
+     */
+    name?: string
+    /**
+     * Placeholder below the button
+     */
+    placeholder?: TranslateableProp
+    /**
+     * Text used for the button that removes a file from the list
+     */
+    removeText?: TranslateableProp
+    /**
+     * Adds an asterisk to indicate this field is required
+     */
+    required?: boolean
+    /**
+     * Size of the button. Mutually exclusive with the `large` prop
+     */
+    small?: boolean
+    tabIndex?: string
+    /**
+     * Applies 'valid' styling to the button and validation text. Mutually exclusive with `warning` and `error` props
+     */
+    valid?: boolean
+    /**
+     * Text below the button that provides validation feedback
+     */
+    validationText?: string
+    /**
+     * Applies 'warning' styling to the button and validation text. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+    /**
+     * Called with signature `({ name: string, files: [] }, event)`
+     */
+    onBlur?: FileInputFocusHandler
+    /**
+     * Called with signature `({ name: string, files: [] }, event)`
+     */
+    onChange: FileInputChangeHandler
+    /**
+     * Called with signature `({ name: string, files: [] }, event)`
+     */
+    onFocus?: FileInputFocusHandler
+    /**
+     * Called with signature `({ name: string, files: [] }, event)`
+     */
+    onKeyDown?: FileInputKeyHandler
+}
+
+export class FileInputFieldWithList extends React.Component<
+    FileInputFieldWithListProps,
+    any
+> {
+    render(): JSX.Element
+}
+
+export interface FileListItemProps {
+    onRemove: (arg0: {}, event: React.MouseEvent<HTMLSpanElement>) => void
+    cancelText?: string
+    className?: string
+    dataTest?: string
+    label?: string
+    loading?: boolean
+    removeText?: string
+    onCancel?: (arg0: {}, event: React.MouseEvent<HTMLSpanElement>) => void
+}
+
+export const FileListItem: React.FC<FileListItemProps>
+
+export interface FileListPlaceholderProps {
+    children?: string
+    dataTest?: string
+}
+
+export const FileListPlaceholder: React.FC<FileListPlaceholderProps>
+
+export interface FileListProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+}
+
+export const FileList: React.FC<FileListProps>
diff --git a/components/header-bar/package.json b/components/header-bar/package.json
index b336ccfd0d..dea261dc0a 100644
--- a/components/header-bar/package.json
+++ b/components/header-bar/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/header-bar",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI HeaderBar",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -33,27 +34,28 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "8.16.0",
-        "@dhis2-ui/button": "8.16.0",
-        "@dhis2-ui/card": "8.16.0",
-        "@dhis2-ui/center": "8.16.0",
-        "@dhis2-ui/divider": "8.16.0",
-        "@dhis2-ui/input": "8.16.0",
-        "@dhis2-ui/layer": "8.16.0",
-        "@dhis2-ui/loader": "8.16.0",
-        "@dhis2-ui/logo": "8.16.0",
-        "@dhis2-ui/menu": "8.16.0",
-        "@dhis2-ui/modal": "8.16.0",
-        "@dhis2-ui/user-avatar": "8.16.0",
+        "@dhis2-ui/box": "9.0.0-alpha.2",
+        "@dhis2-ui/button": "9.0.0-alpha.2",
+        "@dhis2-ui/card": "9.0.0-alpha.2",
+        "@dhis2-ui/center": "9.0.0-alpha.2",
+        "@dhis2-ui/divider": "9.0.0-alpha.2",
+        "@dhis2-ui/input": "9.0.0-alpha.2",
+        "@dhis2-ui/layer": "9.0.0-alpha.2",
+        "@dhis2-ui/loader": "9.0.0-alpha.2",
+        "@dhis2-ui/logo": "9.0.0-alpha.2",
+        "@dhis2-ui/menu": "9.0.0-alpha.2",
+        "@dhis2-ui/modal": "9.0.0-alpha.2",
+        "@dhis2-ui/user-avatar": "9.0.0-alpha.2",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "moment": "^2.29.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/app-runtime": "^3.9.0",
@@ -61,5 +63,6 @@
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/header-bar/types/index.d.ts b/components/header-bar/types/index.d.ts
new file mode 100644
index 0000000000..bf258d5151
--- /dev/null
+++ b/components/header-bar/types/index.d.ts
@@ -0,0 +1,10 @@
+import * as React from 'react'
+
+export interface HeaderBarProps {
+    appName?: string
+    className?: string
+    updateAvailable?: boolean
+    onApplyAvailableUpdate?: () => void
+}
+
+export const HeaderBar: React.FC<HeaderBarProps>
diff --git a/components/help/package.json b/components/help/package.json
index 46689a1a7b..3302e68767 100644
--- a/components/help/package.json
+++ b/components/help/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/help",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Help",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/help/types/index.d.ts b/components/help/types/index.d.ts
new file mode 100644
index 0000000000..9a460e7269
--- /dev/null
+++ b/components/help/types/index.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+export interface HelpProps {
+    children?: string
+    className?: string
+    dataTest?: string
+    error?: boolean
+    valid?: boolean
+    warning?: boolean
+}
+
+export const Help: React.FC<HelpProps>
diff --git a/components/input/package.json b/components/input/package.json
index 958945285d..bca150da22 100644
--- a/components/input/package.json
+++ b/components/input/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/input",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Input",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,22 +33,24 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "8.16.0",
-        "@dhis2-ui/field": "8.16.0",
-        "@dhis2-ui/input": "8.16.0",
-        "@dhis2-ui/loader": "8.16.0",
-        "@dhis2-ui/status-icon": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2-ui/box": "9.0.0-alpha.2",
+        "@dhis2-ui/field": "9.0.0-alpha.2",
+        "@dhis2-ui/input": "9.0.0-alpha.2",
+        "@dhis2-ui/loader": "9.0.0-alpha.2",
+        "@dhis2-ui/status-icon": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/input/types/index.d.ts b/components/input/types/index.d.ts
new file mode 100644
index 0000000000..e9bca202d9
--- /dev/null
+++ b/components/input/types/index.d.ts
@@ -0,0 +1,240 @@
+import * as React from 'react'
+
+export type InputType =
+    | 'text'
+    | 'number'
+    | 'password'
+    | 'email'
+    | 'url'
+    | 'tel'
+    | 'date'
+    | 'datetime'
+    | 'datetime-local'
+    | 'month'
+    | 'week'
+    | 'time'
+    | 'search'
+
+export interface InputEventPayload {
+    value: string | undefined
+    name: string | undefined
+}
+
+export type InputEventHandler<Event extends React.SyntheticEvent> = (
+    payload: InputEventPayload,
+    event: Event
+) => void
+
+export type InputFocusHandler = InputEventHandler<
+    React.FocusEvent<HTMLInputElement>
+>
+export type InputChangeHandler = InputEventHandler<
+    React.ChangeEvent<HTMLInputElement>
+>
+export type InputKeyHandler = InputEventHandler<
+    React.KeyboardEvent<HTMLInputElement>
+>
+
+export interface InputProps {
+    /**
+     * The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete)
+     */
+    autoComplete?: string
+    className?: string
+    dataTest?: string
+    /**
+     * Makes the input smaller
+     */
+    dense?: boolean
+    /**
+     * Disables the input
+     */
+    disabled?: boolean
+    /**
+     * Applies 'error' appearance for validation feedback. Mutually exclusive with `valid` and `warning` props
+     */
+    error?: boolean
+    /**
+     * The input grabs initial focus on the page
+     */
+    initialFocus?: boolean
+    /**
+     * Adds a loading indicator beside the input
+     */
+    loading?: boolean
+    /**
+     * The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-max), for use when `type` is `'number'`
+     */
+    max?: string
+    /**
+     * The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-min), for use when `type` is `'number'`
+     */
+    min?: string
+    /**
+     * Name associated with the input. Passed to event handler callbacks in object
+     */
+    name?: string
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string
+    /**
+     * Makes the input read-only
+     */
+    readOnly?: boolean
+    /**
+     * Sets a role attribute on the input
+     */
+    role?: string
+    /**
+     * The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'`
+     */
+    step?: string
+    tabIndex?: string
+    /**
+     * The native input `type` attribute
+     */
+    type?: InputType
+    /**
+     * Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props
+     */
+    valid?: boolean
+    /**
+     * Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object
+     */
+    value?: string
+    /**
+     * Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+    /**
+     * Called with signature `({ name: string, value: string }, event)`
+     */
+    onBlur?: InputFocusHandler
+    /**
+     * Called with signature `({ name: string, value: string }, event)`
+     */
+    onChange?: InputChangeHandler
+    /**
+     * Called with signature `({ name: string, value: string }, event)`
+     */
+    onFocus?: InputFocusHandler
+    /**
+     * Called with signature `({ name: string, value: string }, event)`
+     */
+    onKeyDown?: InputKeyHandler
+}
+
+export class Input extends React.Component<InputProps, any> {
+    render(): JSX.Element
+}
+
+export interface InputFieldProps {
+    /**
+     * The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete)
+     */
+    autoComplete?: string
+    className?: string
+    dataTest?: string
+    /**
+     * Makes the input smaller
+     */
+    dense?: boolean
+    /**
+     * Disables the input
+     */
+    disabled?: boolean
+    /**
+     * Applies 'error' appearance for validation feedback. Mutually exclusive with `valid` and `warning` props
+     */
+    error?: boolean
+    /**
+     * Guiding text for how to use this input
+     */
+    helpText?: string
+    /**
+     * The input grabs initial focus on the page
+     */
+    initialFocus?: boolean
+    /**
+     * Defines the width of the input. Can be any valid CSS measurement
+     */
+    inputWidth?: string
+    /**
+     * Label text for the input
+     */
+    label?: string
+    /**
+     * Adds a loading indicator beside the input
+     */
+    loading?: boolean
+    /**
+     * The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-max), for use when `type` is `'number'`
+     */
+    max?: string
+    /**
+     * The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-min), for use when `type` is `'number'`
+     */
+    min?: string
+    /**
+     * Name associated with the input. Passed to event handler callbacks in object
+     */
+    name?: string
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string
+    /**
+     * Makes the input read-only
+     */
+    readOnly?: boolean
+    /**
+     * Indicates this input is required
+     */
+    required?: boolean
+    /**
+     * The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'`
+     */
+    step?: string
+    tabIndex?: string
+    /**
+     * Type of input
+     */
+    type?: InputType
+    /**
+     * Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props
+     */
+    valid?: boolean
+    /**
+     * Text below input for validation feedback. Receives styles depending on validation status
+     */
+    validationText?: string
+    /**
+     * Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object
+     */
+    value?: string
+    /**
+     * Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+    /**
+     * Called with signature `({ name: string, value: string }, event)`
+     */
+    onBlur?: InputFocusHandler
+    /**
+     * Called with signature `({ name: string, value: string }, event)`
+     */
+    onChange?: InputChangeHandler
+    /**
+     * Called with signature `({ name: string, value: string }, event)`
+     */
+    onFocus?: InputFocusHandler
+    /**
+     * Called with signature `({ name: string, value: string }, event)`
+     */
+    onKeyDown?: InputKeyHandler
+}
+
+export class InputField extends React.Component<InputFieldProps, any> {
+    render(): JSX.Element
+}
diff --git a/components/intersection-detector/package.json b/components/intersection-detector/package.json
index ba52766027..3d4eb5aee4 100644
--- a/components/intersection-detector/package.json
+++ b/components/intersection-detector/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/intersection-detector",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI IntersectionDetector",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/intersection-detector/types/index.d.ts b/components/intersection-detector/types/index.d.ts
new file mode 100644
index 0000000000..fcbf46e989
--- /dev/null
+++ b/components/intersection-detector/types/index.d.ts
@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+export interface IntersectionDetectorProps {
+    /**
+     * React ref on other component to detect intersections with
+     */
+    rootRef: React.MutableRefObject<HTMLElement>
+    /**
+     * Called with signature `({ isIntersecting: bool })`
+     */
+    onChange: ({ isIntersecting }: { isIntersecting: boolean }) => void
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * The [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) value: a value from 0.0 to 1.0 that controls the point at which an intersecting component is considered 'intersected' or 'visible' and the onChange callback triggers
+     */
+    threshold?: number
+}
+
+export const IntersectionDetector: React.FC<IntersectionDetectorProps>
diff --git a/components/label/package.json b/components/label/package.json
index d88611acd7..c15b3fcdbd 100644
--- a/components/label/package.json
+++ b/components/label/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/label",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Label",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,17 +33,19 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/required": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2-ui/required": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/label/types/index.d.ts b/components/label/types/index.d.ts
new file mode 100644
index 0000000000..5a9cb49436
--- /dev/null
+++ b/components/label/types/index.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+export interface LabelProps {
+    children?: string
+    className?: string
+    dataTest?: string
+    disabled?: boolean
+    htmlFor?: string
+    required?: boolean
+}
+
+export const Label: React.FC<LabelProps>
diff --git a/components/layer/package.json b/components/layer/package.json
index b060d44ac5..284822c11c 100644
--- a/components/layer/package.json
+++ b/components/layer/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/layer",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Layer",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,17 +33,19 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/portal": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2-ui/portal": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/layer/types/index.d.ts b/components/layer/types/index.d.ts
new file mode 100644
index 0000000000..60fa682d79
--- /dev/null
+++ b/components/layer/types/index.d.ts
@@ -0,0 +1,40 @@
+import * as React from 'react'
+
+export type LayerLevel = number | string
+
+export type LayerPosition = 'absolute' | 'fixed'
+
+export type LayerBackdropClickEvent = React.MouseEvent<HTMLDivElement>
+export type LayerBackdropClickHandler = (
+    arg0: {},
+    arg1: LayerBackdropClickEvent
+) => void
+
+export interface LayerProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Disable the Portal, useful for nesting layers
+     */
+    disablePortal?: boolean
+    /**
+     * Z-index level
+     */
+    level?: LayerLevel
+    position?: LayerPosition
+    /**
+     * Adds a semi-transparent background
+     */
+    translucent?: boolean
+    /**
+     * Backdrop click handler
+     */
+    onBackdropClick?: LayerBackdropClickHandler
+    /**
+     * Click handler - DEPRECATED
+     */
+    onClick?: LayerBackdropClickHandler
+}
+
+export const Layer: React.FC<LayerProps>
diff --git a/components/legend/package.json b/components/legend/package.json
index 60da22db9b..3a1955fdf2 100644
--- a/components/legend/package.json
+++ b/components/legend/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/legend",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Legend",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,17 +33,19 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/required": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2-ui/required": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/legend/types/index.d.ts b/components/legend/types/index.d.ts
new file mode 100644
index 0000000000..8173b6bbc2
--- /dev/null
+++ b/components/legend/types/index.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+export interface LegendProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Indicates the associated field set is required
+     */
+    required?: boolean
+}
+
+export const Legend: React.FC<LegendProps>
diff --git a/components/loader/package.json b/components/loader/package.json
index 47c9d20696..5792637665 100644
--- a/components/loader/package.json
+++ b/components/loader/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/loader",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Loaders",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/loader/types/index.d.ts b/components/loader/types/index.d.ts
new file mode 100644
index 0000000000..3d55ac5552
--- /dev/null
+++ b/components/loader/types/index.d.ts
@@ -0,0 +1,35 @@
+import * as React from 'react'
+
+export interface CircularLoaderProps {
+    className?: string
+    dataTest?: string
+    extrasmall?: boolean
+    invert?: boolean
+    large?: boolean
+    small?: boolean
+}
+
+export const CircularLoader: React.FC<CircularLoaderProps>
+
+export interface LinearLoaderProps {
+    /**
+     * The progression in percent without the '%' sign
+     */
+    amount: number
+    className?: string
+    dataTest?: string
+    /**
+     * Use inverted color scheme
+     */
+    invert?: boolean
+    /**
+     * The margin around the loader, can be a full shorthand
+     */
+    margin?: string
+    /**
+     * The width of the entire indicator
+     */
+    width?: string
+}
+
+export const LinearLoader: React.FC<LinearLoaderProps>
diff --git a/components/logo/package.json b/components/logo/package.json
index 8e4d76284e..42582a2b4f 100644
--- a/components/logo/package.json
+++ b/components/logo/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/logo",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Logo",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/logo/types/index.d.ts b/components/logo/types/index.d.ts
new file mode 100644
index 0000000000..f559bd5104
--- /dev/null
+++ b/components/logo/types/index.d.ts
@@ -0,0 +1,29 @@
+import * as React from 'react'
+
+export interface LogoIconProps {
+    className?: string
+    dataTest?: string
+}
+
+export const LogoIcon: React.FC<LogoIconProps>
+
+export interface LogoIconWhiteProps {
+    className?: string
+    dataTest?: string
+}
+
+export const LogoIconWhite: React.FC<LogoIconWhiteProps>
+
+export interface LogoProps {
+    className?: string
+    dataTest?: string
+}
+
+export const Logo: React.FC<LogoProps>
+
+export interface LogoWhiteProps {
+    className?: string
+    dataTest?: string
+}
+
+export const LogoWhite: React.FC<LogoWhiteProps>
diff --git a/components/menu/package.json b/components/menu/package.json
index 2711a7f4da..5767eee07f 100644
--- a/components/menu/package.json
+++ b/components/menu/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/menu",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Menu",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,22 +33,24 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/card": "8.16.0",
-        "@dhis2-ui/divider": "8.16.0",
-        "@dhis2-ui/layer": "8.16.0",
-        "@dhis2-ui/popper": "8.16.0",
-        "@dhis2-ui/portal": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2-ui/card": "9.0.0-alpha.2",
+        "@dhis2-ui/divider": "9.0.0-alpha.2",
+        "@dhis2-ui/layer": "9.0.0-alpha.2",
+        "@dhis2-ui/popper": "9.0.0-alpha.2",
+        "@dhis2-ui/portal": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/menu/types/index.d.ts b/components/menu/types/index.d.ts
new file mode 100644
index 0000000000..4f123396f5
--- /dev/null
+++ b/components/menu/types/index.d.ts
@@ -0,0 +1,103 @@
+import * as React from 'react'
+
+export interface FlyoutMenuProps {
+    /**
+     * Typically, but not limited to, `MenuItem` components
+     */
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Menu uses smaller dimensions
+     */
+    dense?: boolean
+    maxHeight?: string
+    maxWidth?: string
+}
+
+export const FlyoutMenu: React.FC<FlyoutMenuProps>
+
+export interface MenuProps {
+    /**
+     * Typically `MenuItem`, `MenuDivider`, and `MenuSectionHeader`
+     */
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Applies `dense` property to all child components unless already specified
+     */
+    dense?: boolean
+}
+
+export const Menu: React.FC<MenuProps>
+
+export interface MenuDividerProps {
+    className?: string
+    dataTest?: string
+    dense?: boolean
+}
+
+export const MenuDivider: React.FC<MenuDividerProps>
+
+export interface MenuItemProps {
+    active?: boolean
+    chevron?: boolean
+    /**
+     * Nested menu items can become submenus.
+     * See `showSubMenu` and `toggleSubMenu` props, and 'Children' demo
+     */
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    dense?: boolean
+    destructive?: boolean
+    disabled?: boolean
+    /**
+     * For using menu item as a link
+     */
+    href?: string
+    /**
+     * An icon for the left side of the menu item
+     */
+    icon?: React.ReactNode
+    /**
+     * Text in the menu item
+     */
+    label?: React.ReactNode
+    /**
+     * When true, nested menu items are shown in a Popper
+     */
+    showSubMenu?: boolean
+    /**
+     * For using menu item as a link
+     */
+    target?: string
+    /**
+     * On click, this function is called (without args)
+     */
+    toggleSubMenu?: () => void
+    /**
+     * Value associated with item. Passed as an argument to onClick handler.
+     */
+    value?: string
+    /**
+     * Click handler called with signature `({ value: string }, event)`
+     */
+    onClick?: (
+        payload: { value: string | undefined },
+        event: React.MouseEvent<HTMLAnchorElement>
+    ) => void
+}
+
+export const MenuItem: React.FC<MenuItemProps>
+
+export interface MenuSectionHeaderProps {
+    className?: string
+    dataTest?: string
+    dense?: boolean
+    hideDivider?: boolean
+    label?: React.ReactNode
+}
+
+export const MenuSectionHeader: React.FC<MenuSectionHeaderProps>
diff --git a/components/modal/package.json b/components/modal/package.json
index 0d90d893af..2d891fb04a 100644
--- a/components/modal/package.json
+++ b/components/modal/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/modal",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Modal",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,21 +33,23 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/card": "8.16.0",
-        "@dhis2-ui/center": "8.16.0",
-        "@dhis2-ui/layer": "8.16.0",
-        "@dhis2-ui/portal": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2-ui/card": "9.0.0-alpha.2",
+        "@dhis2-ui/center": "9.0.0-alpha.2",
+        "@dhis2-ui/layer": "9.0.0-alpha.2",
+        "@dhis2-ui/portal": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/modal/types/index.d.ts b/components/modal/types/index.d.ts
new file mode 100644
index 0000000000..ac9673c8bf
--- /dev/null
+++ b/components/modal/types/index.d.ts
@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { LayerBackdropClickHandler } from '@dhis2-ui/layer'
+
+export type ModalOnCloseEventHandler = LayerBackdropClickHandler
+
+export interface ModalProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    fluid?: boolean
+    hide?: boolean
+    large?: boolean
+    position?: 'top' | 'middle' | 'bottom'
+    small?: boolean
+    /**
+     * Callback used when the Modal closes
+     */
+    onClose?: LayerBackdropClickHandler
+}
+
+export const Modal: React.FC<ModalProps>
+
+export interface ModalActionsProps {
+    children?: React.ReactNode
+    dataTest?: string
+}
+
+export const ModalActions: React.FC<ModalActionsProps>
+
+export interface ModalContentProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+}
+
+export const ModalContent: React.FC<ModalContentProps>
+
+export interface ModalTitleProps {
+    children?: string
+    dataTest?: string
+}
+
+export const ModalTitle: React.FC<ModalTitleProps>
diff --git a/components/node/package.json b/components/node/package.json
index f3692a3be3..ac1cfad17d 100644
--- a/components/node/package.json
+++ b/components/node/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/node",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Node",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,17 +33,19 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/loader": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2-ui/loader": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/node/types/index.d.ts b/components/node/types/index.d.ts
new file mode 100644
index 0000000000..f443a8271b
--- /dev/null
+++ b/components/node/types/index.d.ts
@@ -0,0 +1,28 @@
+import * as React from 'react'
+
+type NodeEventHandler = (
+    payload: { open: boolean },
+    event: React.MouseEvent<HTMLDivElement>
+) => void
+
+export interface NodeProps {
+    /**
+     * Content below this level of the hierarchy; children are revealed when this leaf is 'open'
+     */
+    children?: React.ReactNode
+    className?: string
+    /**
+     * Content/label for this leaf, for example a checkbox
+     */
+    component?: React.ReactElement<any>
+    dataTest?: string
+    /**
+     * A custom icon to use instead of a toggle arrow
+     */
+    icon?: React.ReactNode
+    open?: boolean
+    onClose?: NodeEventHandler
+    onOpen?: NodeEventHandler
+}
+
+export const Node: React.FC<NodeProps>
diff --git a/components/notice-box/package.json b/components/notice-box/package.json
index 30259ee460..e1d3326fc5 100644
--- a/components/notice-box/package.json
+++ b/components/notice-box/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/notice-box",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI NoticeBox",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,17 +33,19 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/notice-box/types/index.d.ts b/components/notice-box/types/index.d.ts
new file mode 100644
index 0000000000..21dfc28633
--- /dev/null
+++ b/components/notice-box/types/index.d.ts
@@ -0,0 +1,22 @@
+import * as React from 'react'
+
+export interface NoticeBoxProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Applies 'error' message styles. Mutually exclusive with the `valid` and `warning` props
+     */
+    error?: boolean
+    title?: string
+    /**
+     * Applies 'valid' message styles. Mutually exclusive with the `error` and `warning` props
+     */
+    valid?: boolean
+    /**
+     * Applies 'warning' message styles. Mutually exclusive with the `error` and `valid` props
+     */
+    warning?: boolean
+}
+
+export const NoticeBox: React.FC<NoticeBoxProps>
diff --git a/components/organisation-unit-tree/API.md b/components/organisation-unit-tree/API.md
index 9d2e8973d2..31b142c845 100644
--- a/components/organisation-unit-tree/API.md
+++ b/components/organisation-unit-tree/API.md
@@ -1,3 +1,40 @@
+### OrganisationUnitTreeRootError
+
+#### Usage
+
+**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+
+
+```js
+import { OrganisationUnitTreeRootError } from '@dhis2-ui/organisation-unit-tree'
+```
+
+
+#### Props
+
+|Name|Type|Default|Required|Description|
+|---|---|---|---|---|
+|error|string||*||
+|dataTest|string|`'dhis2-uiwidgets-orgunittree-error'`|||
+
+### OrganisationUnitTreeRootLoading
+
+#### Usage
+
+**Note**: If possible, import the component from the main UI (`@dhis2/ui`) package.
+
+
+```js
+import { OrganisationUnitTreeRootLoading } from '@dhis2-ui/organisation-unit-tree'
+```
+
+
+#### Props
+
+|Name|Type|Default|Required|Description|
+|---|---|---|---|---|
+|dataTest|string|`'dhis2-uiwidgets-orgunittree-loading'`|||
+
 ### OrganisationUnitTree
 
 #### Usage
diff --git a/components/organisation-unit-tree/package.json b/components/organisation-unit-tree/package.json
index 3a049d0791..1c38060383 100644
--- a/components/organisation-unit-tree/package.json
+++ b/components/organisation-unit-tree/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/organisation-unit-tree",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI OrganisationUnitTree",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -34,15 +35,16 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/checkbox": "8.16.0",
-        "@dhis2-ui/loader": "8.16.0",
-        "@dhis2-ui/node": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2-ui/checkbox": "9.0.0-alpha.2",
+        "@dhis2-ui/loader": "9.0.0-alpha.2",
+        "@dhis2-ui/node": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/app-runtime": "^3.9.0",
@@ -50,5 +52,6 @@
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/organisation-unit-tree/src/index.js b/components/organisation-unit-tree/src/index.js
index 941246e8cc..e9842591e7 100644
--- a/components/organisation-unit-tree/src/index.js
+++ b/components/organisation-unit-tree/src/index.js
@@ -1,6 +1,6 @@
 export {
     OrganisationUnitTree,
-    RootError as OrganisationUnitTreeRootError,
-    RootLoading as OrganisationUnitTreeRootLoading,
+    OrganisationUnitTreeRootError,
+    OrganisationUnitTreeRootLoading,
 } from './organisation-unit-tree/index.js'
 export { getAllExpandedPaths as getAllExpandedOrgUnitPaths } from './get-all-expanded-paths/index.js'
diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/index.js b/components/organisation-unit-tree/src/organisation-unit-tree/index.js
index a7713b457c..cacd93cbd3 100644
--- a/components/organisation-unit-tree/src/organisation-unit-tree/index.js
+++ b/components/organisation-unit-tree/src/organisation-unit-tree/index.js
@@ -1,3 +1,3 @@
 export { OrganisationUnitTree } from './organisation-unit-tree.js'
-export { RootError } from './root-error.js'
-export { RootLoading } from './root-loading.js'
+export { OrganisationUnitTreeRootError } from './organisation-unit-tree-root-error.js'
+export { OrganisationUnitTreeRootLoading } from './organisation-unit-tree-root-loading.js'
diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/root-error.js b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree-root-error.js
similarity index 70%
rename from components/organisation-unit-tree/src/organisation-unit-tree/root-error.js
rename to components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree-root-error.js
index 5fd1e8aa4e..bb9d9987d4 100644
--- a/components/organisation-unit-tree/src/organisation-unit-tree/root-error.js
+++ b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree-root-error.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../locales/index.js'
 
-export const RootError = ({ dataTest, error }) => (
+export const OrganisationUnitTreeRootError = ({ dataTest, error }) => (
     <div data-test={dataTest}>
         {i18n.t('Error: {{ ERRORMESSAGE }}', {
             ERRORMESSAGE: error,
@@ -11,11 +11,11 @@ export const RootError = ({ dataTest, error }) => (
     </div>
 )
 
-RootError.defaultProps = {
+OrganisationUnitTreeRootError.defaultProps = {
     dataTest: 'dhis2-uiwidgets-orgunittree-error',
 }
 
-RootError.propTypes = {
+OrganisationUnitTreeRootError.propTypes = {
     error: PropTypes.string.isRequired,
     dataTest: PropTypes.string,
 }
diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/root-loading.js b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree-root-loading.js
similarity index 72%
rename from components/organisation-unit-tree/src/organisation-unit-tree/root-loading.js
rename to components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree-root-loading.js
index 6b3e7cdbf5..d9558c1304 100644
--- a/components/organisation-unit-tree/src/organisation-unit-tree/root-loading.js
+++ b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree-root-loading.js
@@ -2,7 +2,7 @@ import { CircularLoader } from '@dhis2-ui/loader'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const RootLoading = ({ dataTest }) => (
+export const OrganisationUnitTreeRootLoading = ({ dataTest }) => (
     <div data-test={dataTest}>
         <CircularLoader small />
 
@@ -15,10 +15,10 @@ export const RootLoading = ({ dataTest }) => (
     </div>
 )
 
-RootLoading.defaultProps = {
+OrganisationUnitTreeRootLoading.defaultProps = {
     dataTest: 'dhis2-uiwidgets-orgunittree-loading',
 }
 
-RootLoading.propTypes = {
+OrganisationUnitTreeRootLoading.propTypes = {
     dataTest: PropTypes.string,
 }
diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js
index eb5165734e..30bb83d4d2 100644
--- a/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js
+++ b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js
@@ -5,8 +5,8 @@ import { OrganisationUnitNode } from '../organisation-unit-node/index.js'
 import { orgUnitPathPropType } from '../prop-types.js'
 import { defaultRenderNodeLabel } from './default-render-node-label/index.js'
 import { filterRootIds } from './filter-root-ids.js'
-import { RootError } from './root-error.js'
-import { RootLoading } from './root-loading.js'
+import { OrganisationUnitTreeRootError } from './organisation-unit-tree-root-error.js'
+import { OrganisationUnitTreeRootLoading } from './organisation-unit-tree-root-loading.js'
 import { useExpanded } from './use-expanded/index.js'
 import { useForceReload } from './use-force-reload.js'
 import { useRootOrgData } from './use-root-org-data/index.js'
@@ -73,8 +73,8 @@ const OrganisationUnitTree = ({
 
     return (
         <div data-test={dataTest}>
-            {isLoading && <RootLoading />}
-            {error && <RootError error={error} />}
+            {isLoading && <OrganisationUnitTreeRootLoading />}
+            {error && <OrganisationUnitTreeRootError error={error} />}
             {!error &&
                 !isLoading &&
                 rootIds.map((rootId) => {
diff --git a/components/organisation-unit-tree/types/index.d.ts b/components/organisation-unit-tree/types/index.d.ts
new file mode 100644
index 0000000000..d7b1e748ed
--- /dev/null
+++ b/components/organisation-unit-tree/types/index.d.ts
@@ -0,0 +1,165 @@
+import * as React from 'react'
+
+export type OrganisationUnitTreeRoots = string | string[]
+
+export interface OrganisationUnitNode {
+    id: string
+    displayName: string
+    children?: number
+    path: string
+}
+
+export interface OrganisationUnitEventPayload extends OrganisationUnitNode {
+    checked: boolean
+    selected: string[]
+}
+
+export interface NodeLabelProps {
+    disableSelection: boolean
+    hasChildren: boolean
+    hasSelectedDescendants: boolean
+    loading: boolean
+    selected: string[]
+    open: boolean
+    path: string[]
+    singleSelection: boolean
+    node: OrganisationUnitNode
+    label: string
+    checked: boolean
+    highlighted: boolean
+    error?: Error
+}
+
+export interface OrganisationUnitTreeProps {
+    /**
+     * Root org unit ID(s)
+     */
+    roots: OrganisationUnitTreeRoots
+    /**
+     * Will be called with the following object:
+     * `{ id: string, displayName: string, path: string, checked: boolean, selected: string[] }`
+     */
+    onChange: (
+        payload: OrganisationUnitEventPayload,
+        event: React.MouseEvent<HTMLSpanElement | HTMLInputElement>
+    ) => void
+    /**
+     * When set, the error when loading children fails will be shown automatically
+     */
+    autoExpandLoadingError?: boolean
+    dataTest?: string
+    /**
+     * When set to true, no unit can be selected
+     */
+    disableSelection?: boolean
+    expanded?: boolean
+    /**
+     * All organisation units with a path that includes the provided paths will be shown.
+     * All others will not be rendered. When not provided, all org units will be shown.
+     */
+    filter?: string[]
+    /**
+     * When true, everything will be reloaded. In order to load it again after reloading, `forceReload` has to be set to `false` and then to `true` again
+     */
+    forceReload?: boolean
+    handleCollapse?: ({ path: string }) => void
+    handleExpand?: ({ path: string }) => void
+    /**
+     * All units provided to "highlighted" as path will be visually
+     * highlighted.
+     * Note:
+     * The d2-ui component used two props for this:
+     * * searchResults
+     * * highlightSearchResults
+     */
+    highlighted?: string[]
+    /**
+     * An array of OU paths that will be expanded automatically
+     * as soon as they are encountered.
+     * The path of an OU is the UIDs of the OU
+     * and all its parent OUs separated by slashes (/)
+     * Note: This replaces "openFirstLevel" as that's redundant
+     */
+    initiallyExpanded?: string[]
+    /**
+     * When provided, the 'isUserDataViewFallback' option will be sent when requesting the org units
+     */
+    isUserDataViewFallback?: boolean
+    /**
+     * Renders the actual node component for each leaf, can be used to
+     * customize the node. The default function just returns the node's
+     * displayName
+     * Shape of the object passed to the callback:
+     * ```
+     * {
+     * label: string,
+     * node: {
+     * displayName: string,
+     * id: string,
+     * // Only provided once `loading` is false
+     * path?: string,
+     * // Only provided once `loading` is false
+     * children?: Array.<{
+     * id: string,
+     * path: string,
+     * displayName: string
+     * }>
+     * },
+     * loading: boolean,
+     * error: string,
+     * open: boolean,
+     * selected: string[],
+     * singleSelection: boolean,
+     * disableSelection: boolean,
+     * }
+     * ```
+     */
+    renderNodeLabel?: (props: NodeLabelProps) => React.ReactNode
+    /**
+     * An array of paths of selected OUs. The path of an OU is the UIDs of the OU and all its parent OUs separated by slashes (`/`)
+     */
+    selected?: string[]
+    /**
+     * When set, no checkboxes will be displayed and only the first selected path in `selected` will be highlighted
+     */
+    singleSelection?: boolean
+    /**
+     * Turns off alphabetical sorting of units
+     */
+    suppressAlphabeticalSorting?: boolean
+    /**
+     * Called with the children's data that was loaded
+     */
+    onChildrenLoaded?: (
+        data: OrganisationUnitNode & {
+            children: Array<Omit<OrganisationUnitNode, 'children'>>
+        }
+    ) => void
+    /**
+     * Called with `{ path: string }` with the path of the parent of the level closed
+     */
+    onCollapse?: ({ path: string }) => void
+    /**
+     * Called with `{ path: string }` with the path of the parent of the level opened
+     */
+    onExpand?: ({ path: string }) => void
+}
+
+export const OrganisationUnitTree: React.FC<OrganisationUnitTreeProps>
+
+export interface OrganisationUnitTreeRootErrorProps {
+    error: string
+    dataTest?: string
+}
+
+export const OrganisationUnitTreeRootError: React.FC<OrganisationUnitTreeRootErrorProps>
+
+export interface OrganisationUnitTreeRootLoadingProps {
+    dataTest?: string
+}
+
+export const OrganisationUnitTreeRootLoading: React.FC<OrganisationUnitTreeRootLoadingProps>
+
+export const getAllExpandedOrgUnitPaths: (
+    initiallyExpanded: string[]
+) => string[]
diff --git a/components/pagination/package.json b/components/pagination/package.json
index 8f877830ec..c393ada1f5 100644
--- a/components/pagination/package.json
+++ b/components/pagination/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/pagination",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Pagination",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -33,20 +34,22 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "8.16.0",
-        "@dhis2-ui/select": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2-ui/button": "9.0.0-alpha.2",
+        "@dhis2-ui/select": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/pagination/types/index.d.ts b/components/pagination/types/index.d.ts
new file mode 100644
index 0000000000..bb86ec4666
--- /dev/null
+++ b/components/pagination/types/index.d.ts
@@ -0,0 +1,28 @@
+import * as React from 'react'
+
+type TranslateableProp = string | ((argv0: any) => string)
+
+export interface PaginationProps {
+    page: number
+    pageSize: number
+    className?: string
+    dataTest?: string
+    disabled?: boolean
+    hidePageSelect?: boolean
+    hidePageSizeSelect?: boolean
+    hidePageSummary?: boolean
+    isLastPage?: boolean
+    nextPageText?: TranslateableProp
+    pageCount?: number
+    pageLength?: boolean
+    pageSelectText?: TranslateableProp
+    pageSizeSelectText?: TranslateableProp
+    pageSizes?: string[]
+    pageSummaryText?: TranslateableProp
+    previousPageText?: TranslateableProp
+    total?: number
+    onPageChange?: (page: number) => void
+    onPageSizeChange?: (pageSize: number) => void
+}
+
+export const Pagination: React.FC<PaginationProps>
diff --git a/components/popover/package.json b/components/popover/package.json
index 52910d7fb8..7c525b8890 100644
--- a/components/popover/package.json
+++ b/components/popover/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/popover",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Popover",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,18 +33,20 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/layer": "8.16.0",
-        "@dhis2-ui/popper": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2-ui/layer": "9.0.0-alpha.2",
+        "@dhis2-ui/popper": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/popover/types/index.d.ts b/components/popover/types/index.d.ts
new file mode 100644
index 0000000000..b8b8ec470f
--- /dev/null
+++ b/components/popover/types/index.d.ts
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { VirtualElement, Options as PopperOptions } from '@popperjs/core'
+
+type PopperReference = VirtualElement | Element
+type ReferenceElement = PopperReference | React.RefObject<PopperReference>
+
+export interface PopoverProps {
+    children: React.ReactNode
+    /**
+     * Show or hide the arrow
+     */
+    arrow?: boolean
+    className?: string
+    dataTest?: string
+    /**
+     * Box-shadow to create appearance of elevation.  Use `elevations` constants from the UI library.
+     */
+    elevation?: string
+    maxWidth?: number
+    observePopperResize?: boolean
+    observeReferenceResize?: boolean
+    placement?: PopperOptions['placement']
+    /**
+     * A React ref that refers to the element the Popover should position against
+     */
+    reference?: ReferenceElement
+    onClickOutside?: (arg0: {}, event: React.SyntheticEvent) => void
+}
+
+export const Popover: React.FC<PopoverProps>
diff --git a/components/popper/package.json b/components/popper/package.json
index 4ad1c5292b..ec7c8f9463 100644
--- a/components/popper/package.json
+++ b/components/popper/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/popper",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Popper",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "@popperjs/core": "^2.10.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2",
@@ -40,11 +41,13 @@
         "resize-observer-polyfill": "^1.5.1"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/popper/types/index.d.ts b/components/popper/types/index.d.ts
new file mode 100644
index 0000000000..3800f31096
--- /dev/null
+++ b/components/popper/types/index.d.ts
@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { StrictModifier } from 'react-popper'
+import { VirtualElement, Options as PopperOptions } from '@popperjs/core'
+
+type PopperReference = VirtualElement | Element
+type ReferenceElement = PopperReference | React.RefObject<PopperReference>
+
+export interface PopperProps {
+    /**
+     * Content inside the Popper
+     */
+    children: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/)
+     */
+    modifiers?: StrictModifier[]
+    /**
+     * Makes the Popper update position when the **Popper content** changes size
+     */
+    observePopperResize?: boolean
+    /**
+     * Makes the Popper update position when the **reference element** changes size
+     */
+    observeReferenceResize?: boolean
+    /**
+     * A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/)
+     */
+    placement?: PopperOptions['placement']
+    /**
+     * A React ref, DOM node, or [virtual element](https://popper.js.org/docs/v2/virtual-elements/) for the popper to position itself against
+     */
+    reference?: ReferenceElement
+    /**
+     * A property of the `createPopper` options. See [popper docs](https://popper.js.org/docs/v2/constructors/)
+     */
+    strategy?: PopperOptions['strategy']
+    onFirstUpdate?: PopperOptions['onFirstUpdate']
+}
+
+export const Popper: React.FC<PopperProps>
diff --git a/components/portal/package.json b/components/portal/package.json
index b34997bf1e..9380c1b242 100644
--- a/components/portal/package.json
+++ b/components/portal/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/portal",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Portal",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -35,11 +36,13 @@
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/portal/types/index.d.ts b/components/portal/types/index.d.ts
new file mode 100644
index 0000000000..5ef3caa045
--- /dev/null
+++ b/components/portal/types/index.d.ts
@@ -0,0 +1,9 @@
+import * as React from 'react'
+
+export interface PortalProps {
+    children?: React.ReactNode
+    disable?: boolean
+    node?: React.ReactNode
+}
+
+export const Portal: React.FC<PortalProps>
diff --git a/components/radio/package.json b/components/radio/package.json
index 9495b9e803..e2ffe0fa24 100644
--- a/components/radio/package.json
+++ b/components/radio/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/radio",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Radio",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/radio/types/index.d.ts b/components/radio/types/index.d.ts
new file mode 100644
index 0000000000..8f05bd0b78
--- /dev/null
+++ b/components/radio/types/index.d.ts
@@ -0,0 +1,67 @@
+import * as React from 'react'
+
+export type RadioEventPayload = {
+    value?: string
+    name?: string
+    checked: boolean
+}
+
+export type RadioEventHandler<Event extends React.SyntheticEvent> = (
+    payload: RadioEventPayload,
+    event: Event
+) => void
+
+type RadioFocusHandler = RadioEventHandler<React.FocusEvent<HTMLInputElement>>
+type RadioChangeHandler = RadioEventHandler<React.ChangeEvent<HTMLInputElement>>
+type RadioKeyHandler = RadioEventHandler<React.KeyboardEvent<HTMLInputElement>>
+
+export interface RadioProps {
+    checked?: boolean
+    className?: string
+    dataTest?: string
+    dense?: boolean
+    disabled?: boolean
+    /**
+     * Adds 'error' styling for feedback. Mutually exclusive with `valid` and `warning` props
+     */
+    error?: boolean
+    initialFocus?: boolean
+    label?: React.ReactNode
+    /**
+     * Name associated with this element. Passed in object to event handler functions
+     */
+    name?: string
+    tabIndex?: string
+    /**
+     * Adds 'valid' styling for feedback. Mutually exclusive with `error` and `warning` props
+     */
+    valid?: boolean
+    /**
+     * Value associated with this element. Passed in object to event handler functions
+     */
+    value?: string
+    /**
+     * Adds 'warning' styling for feedback. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+    /**
+     * Called with the signature `({ name: string, value: string, checked: bool }, event)`
+     */
+    onBlur?: RadioFocusHandler
+    /**
+     * Called with the signature `({ name: string, value: string, checked: bool }, event)`
+     */
+    onChange?: RadioChangeHandler
+    /**
+     * Called with the signature `({ name: string, value: string, checked: bool }, event)`
+     */
+    onFocus?: RadioFocusHandler
+    /**
+     * Called with the signature `({ name: string, value: string, checked: bool }, event)`
+     */
+    onKeyDown?: RadioKeyHandler
+}
+
+export class Radio extends React.Component<RadioProps, any> {
+    render(): JSX.Element
+}
diff --git a/components/required/package.json b/components/required/package.json
index d201f8bf07..b8542a2ba9 100644
--- a/components/required/package.json
+++ b/components/required/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/required",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Required",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/required/types/index.d.ts b/components/required/types/index.d.ts
new file mode 100644
index 0000000000..e65e6ced63
--- /dev/null
+++ b/components/required/types/index.d.ts
@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+export interface RequiredProps {
+    dataTest: string
+}
+
+export const Required: React.FC<RequiredProps>
diff --git a/components/segmented-control/package.json b/components/segmented-control/package.json
index 1ded521199..20493102b5 100644
--- a/components/segmented-control/package.json
+++ b/components/segmented-control/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/segmented-control",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Segmented Control",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/segmented-control/types/index.d.ts b/components/segmented-control/types/index.d.ts
new file mode 100644
index 0000000000..0d3d94228c
--- /dev/null
+++ b/components/segmented-control/types/index.d.ts
@@ -0,0 +1,27 @@
+import * as React from 'react'
+
+export interface SegmentedControlOptions {
+    label: string
+    value: string
+    disabled?: boolean
+}
+
+export interface SegmentedControlProps {
+    /**
+     * Options to populate the segmented control
+     */
+    options: SegmentedControlOptions[]
+    /**
+     * An option to select; should match the `value` property of the option to be selected
+     */
+    selected: string
+    /**
+     * Called with the signature `({ value: string }, event)`
+     */
+    onChange: (
+        payload: { value: string },
+        arg1: React.MouseEvent<HTMLButtonElement>
+    ) => void
+}
+
+export const SegmentedControl: React.FC<SegmentedControlProps>
diff --git a/components/select/package.json b/components/select/package.json
index 695d962419..e42bc2d155 100644
--- a/components/select/package.json
+++ b/components/select/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -33,29 +34,31 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "8.16.0",
-        "@dhis2-ui/button": "8.16.0",
-        "@dhis2-ui/card": "8.16.0",
-        "@dhis2-ui/checkbox": "8.16.0",
-        "@dhis2-ui/chip": "8.16.0",
-        "@dhis2-ui/field": "8.16.0",
-        "@dhis2-ui/input": "8.16.0",
-        "@dhis2-ui/layer": "8.16.0",
-        "@dhis2-ui/loader": "8.16.0",
-        "@dhis2-ui/popper": "8.16.0",
-        "@dhis2-ui/status-icon": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2-ui/box": "9.0.0-alpha.2",
+        "@dhis2-ui/button": "9.0.0-alpha.2",
+        "@dhis2-ui/card": "9.0.0-alpha.2",
+        "@dhis2-ui/checkbox": "9.0.0-alpha.2",
+        "@dhis2-ui/chip": "9.0.0-alpha.2",
+        "@dhis2-ui/field": "9.0.0-alpha.2",
+        "@dhis2-ui/input": "9.0.0-alpha.2",
+        "@dhis2-ui/layer": "9.0.0-alpha.2",
+        "@dhis2-ui/loader": "9.0.0-alpha.2",
+        "@dhis2-ui/popper": "9.0.0-alpha.2",
+        "@dhis2-ui/status-icon": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/select/types/index.d.ts b/components/select/types/index.d.ts
new file mode 100644
index 0000000000..d994784026
--- /dev/null
+++ b/components/select/types/index.d.ts
@@ -0,0 +1,415 @@
+import * as React from 'react'
+import { LayerBackdropClickEvent } from '@dhis2-ui/layer'
+import { CheckboxProps } from '@dhis2-ui/checkbox'
+
+interface BaseEventPayload {
+    selected: string | string[]
+}
+
+export interface SingleSelectEventPayload extends BaseEventPayload {
+    selected: string
+}
+
+export interface MultiSelectEventPayload extends BaseEventPayload {
+    selected: string[]
+}
+
+type SelectEventHandler<
+    T extends BaseEventPayload,
+    Event extends React.SyntheticEvent
+> = (payload: T, event: Event) => void
+
+export type SelectOnBlurHandler<T extends BaseEventPayload> =
+    SelectEventHandler<T, LayerBackdropClickEvent>
+export type SelectOnFocusHandler<T extends BaseEventPayload> =
+    SelectEventHandler<T, React.FocusEvent<HTMLDivElement>>
+export type SelectKeyHandler<T extends BaseEventPayload> = SelectEventHandler<
+    T,
+    React.KeyboardEvent<HTMLDivElement>
+>
+export type SelectChangeHandler<T extends BaseEventPayload> =
+    SelectEventHandler<T, React.MouseEvent>
+
+export interface MultiSelectProps {
+    children?: React.ReactNode
+    className?: string
+    /**
+     * Required if `clearable` prop is `true`
+     */
+    clearText?: string
+    /**
+     * Adds a 'clear' option to the menu
+     */
+    clearable?: boolean
+    dataTest?: string
+    dense?: boolean
+    disabled?: boolean
+    empty?: React.ReactNode
+    error?: boolean
+    filterPlaceholder?: string
+    /**
+     * Adds a 'filter' field to the menu
+     */
+    filterable?: boolean
+    initialFocus?: boolean
+    inputMaxHeight?: string
+    loading?: boolean
+    loadingText?: string
+    maxHeight?: string
+    /**
+     * Required if `filterable` prop is `true`
+     */
+    noMatchText?: string
+    placeholder?: string
+    prefix?: string
+    selected?: string[]
+    tabIndex?: string
+    valid?: boolean
+    warning?: boolean
+    onBlur?: SelectOnBlurHandler<MultiSelectEventPayload>
+    onChange?: SelectChangeHandler<MultiSelectEventPayload>
+    onFocus?: SelectOnFocusHandler<MultiSelectEventPayload>
+    onKeyDown?: SelectKeyHandler<MultiSelectEventPayload>
+}
+
+export const MultiSelect: React.FC<MultiSelectProps>
+
+type TranslateableProp = string | ((interpolationObject: any) => string)
+
+export interface MultiSelectFieldProps {
+    /**
+     * Should be `MultiSelectOption` components
+     */
+    children?: React.ReactNode
+    className?: string
+    /**
+     * Label for the button that clears selections
+     */
+    clearText?: TranslateableProp
+    /**
+     * Adds a button to the MultiSelect that clears selections when pressed
+     */
+    clearable?: boolean
+    dataTest?: string
+    /**
+     * Makes the MultiSelect smaller
+     */
+    dense?: boolean
+    /**
+     * Disables the MultiSelect
+     */
+    disabled?: boolean
+    /**
+     * Text to display when there are no options
+     */
+    empty?: TranslateableProp | React.ReactNode
+    /**
+     * Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props
+     */
+    error?: boolean
+    /**
+     * Placeholder text to show in the filter field when it is empty
+     */
+    filterPlaceholder?: TranslateableProp | React.ReactNode
+    /**
+     * Adds a field to filter options
+     */
+    filterable?: boolean
+    /**
+     * Useful guiding text to display below the MultiSelect
+     */
+    helpText?: string
+    /**
+     * Grabs initial focus on the page
+     */
+    initialFocus?: boolean
+    /**
+     * Constrains the height of the input
+     */
+    inputMaxHeight?: string
+    /**
+     * Sets the width of the input. Can be any valid CSS measurement
+     */
+    inputWidth?: string
+    /**
+     * Text for the label above the MultiSelect
+     */
+    label?: string
+    /**
+     * Applies a loading appearance to the dropdown options
+     */
+    loading?: boolean
+    /**
+     * Text to display when `loading` is true
+     */
+    loadingText?: TranslateableProp
+    /**
+     * Constrains height of the MultiSelect
+     */
+    maxHeight?: string
+    /**
+     * Text to display when there are no filter results
+     */
+    noMatchText?: TranslateableProp
+    /**
+     * Placeholder text when the MultiSelect is empty
+     */
+    placeholder?: string
+    /**
+     * Leading text to prefix selections
+     */
+    prefix?: string
+    /**
+     * Indicates that a selection is required
+     */
+    required?: boolean
+    /**
+     * Selected items in the MultiSelect (each string should refer to the item's `value` attribute)
+     */
+    selected?: string[]
+    tabIndex?: string
+    /**
+     * Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props
+     */
+    valid?: boolean
+    /**
+     * Text to provide form validation feedback. Receives styles according to validation status
+     */
+    validationText?: string
+    /**
+     * Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props
+     */
+    warning?: boolean
+    /**
+     * Called with signature `({ selected: [String] }, event)`
+     */
+    onBlur?: MultiSelectProps['onBlur']
+    /**
+     * Called with signature `({ selected: [String] }, event)`
+     */
+    onChange?: MultiSelectProps['onChange']
+    /**
+     * Called with signature `({ selected: [String] }, event)`
+     */
+    onFocus?: MultiSelectProps['onFocus']
+    /**
+     * Called with signature `({ selected: [String] }, event)`
+     */
+    onKeyDown?: MultiSelectProps['onKeyDown']
+}
+
+export class MultiSelectField extends React.Component<
+    MultiSelectFieldProps,
+    any
+> {
+    render(): JSX.Element
+}
+
+export interface MultiSelectOptionProps {
+    label: string
+    value: string
+    active?: boolean
+    className?: string
+    dataTest?: string
+    disabled?: boolean
+    onClick?: CheckboxProps['onChange']
+}
+
+export const MultiSelectOption: React.FC<MultiSelectOptionProps>
+
+export interface SingleSelectProps {
+    children?: React.ReactNode
+    className?: string
+    /**
+     * Text on button that clears selection. Required if `clearable` prop is true
+     */
+    clearText?: string
+    /**
+     * Adds a button to clear selection
+     */
+    clearable?: boolean
+    dataTest?: string
+    dense?: boolean
+    disabled?: boolean
+    /**
+     * Text or component to display when there are no options
+     */
+    empty?: React.ReactNode
+    /**
+     * Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props
+     */
+    error?: boolean
+    filterPlaceholder?: string
+    /**
+     * Adds a filter field to add text to filter options
+     */
+    filterable?: boolean
+    initialFocus?: boolean
+    inputMaxHeight?: string
+    loading?: boolean
+    loadingText?: string
+    maxHeight?: string
+    /**
+     * Text to show when filter returns no results. Required if `filterable` prop is true
+     */
+    noMatchText?: string
+    placeholder?: string
+    prefix?: string
+    selected?: string
+    tabIndex?: string
+    /**
+     * Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `error` props
+     */
+    valid?: boolean
+    /**
+     * Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+    onBlur?: SelectOnBlurHandler<SingleSelectEventPayload>
+    onChange?: SelectChangeHandler<SingleSelectEventPayload>
+    onFocus?: SelectOnFocusHandler<SingleSelectEventPayload>
+    onKeyDown?: SelectKeyHandler<SingleSelectEventPayload>
+}
+
+export const SingleSelect: React.FC<SingleSelectProps>
+
+export interface SingleSelectFieldProps {
+    /**
+     * Should be `SingleSelectOption` components
+     */
+    children?: React.ReactNode
+    className?: string
+    /**
+     * Label for the button that clears selections
+     */
+    clearText?: TranslateableProp
+    /**
+     * Adds a button to the SingleSelect that clears selections when pressed
+     */
+    clearable?: boolean
+    dataTest?: string
+    /**
+     * Makes the SingleSelect smaller
+     */
+    dense?: boolean
+    /**
+     * Disables the SingleSelect
+     */
+    disabled?: boolean
+    /**
+     * Text to display when there are no options
+     */
+    empty?: TranslateableProp | React.ReactNode
+    /**
+     * Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props
+     */
+    error?: boolean
+    /**
+     * Placeholder text to show in the filter field when it is empty
+     */
+    filterPlaceholder?: TranslateableProp | React.ReactNode
+    /**
+     * Adds a field to filter options
+     */
+    filterable?: boolean
+    /**
+     * Useful guiding text to display below the SingleSelect
+     */
+    helpText?: string
+    /**
+     * Grabs initial focus on the page
+     */
+    initialFocus?: boolean
+    /**
+     * Constrains the height of the input
+     */
+    inputMaxHeight?: string
+    /**
+     * Sets the width of the input. Can be any valid CSS measurement
+     */
+    inputWidth?: string
+    /**
+     * Text for the label above the SingleSelect
+     */
+    label?: string
+    /**
+     * Applies a loading appearance to the dropdown options
+     */
+    loading?: boolean
+    /**
+     * Text to display when `loading` is true
+     */
+    loadingText?: TranslateableProp
+    /**
+     * Constrains height of the SingleSelect
+     */
+    maxHeight?: string
+    /**
+     * Text to display when there are no filter results
+     */
+    noMatchText?: TranslateableProp
+    /**
+     * Placeholder text when the SingleSelect is empty
+     */
+    placeholder?: string
+    /**
+     * Leading text to prefix selections
+     */
+    prefix?: string
+    /**
+     * Indicates that a selection is required
+     */
+    required?: boolean
+    /**
+     * Selected item in the SingleSelect (the string should refer to the item's `value` attribute)
+     */
+    selected?: string
+    tabIndex?: string
+    /**
+     * Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props
+     */
+    valid?: boolean
+    /**
+     * Text to provide form validation feedback. Receives styles according to validation status
+     */
+    validationText?: string
+    /**
+     * Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props
+     */
+    warning?: boolean
+    /**
+     * Called with signature `({ selected: string }, event)`
+     */
+    onBlur?: SingleSelectProps['onBlur']
+    /**
+     * Called with signature `({ selected: string }, event)`
+     */
+    onChange?: SingleSelectProps['onChange']
+    /**
+     * Called with signature `({ selected: string }, event)`
+     */
+    onFocus?: SingleSelectProps['onFocus']
+    /**
+     * Called with signature `({ selected: string }, event)`
+     */
+    onKeyDown?: SingleSelectProps['onKeyDown']
+}
+
+export class SingleSelectField extends React.Component<
+    SingleSelectFieldProps,
+    any
+> {
+    render(): JSX.Element
+}
+
+export interface SingleSelectOptionProps {
+    label: string
+    value: string
+    active?: boolean
+    className?: string
+    dataTest?: string
+    disabled?: boolean
+    onClick?: (arg0: {}, event: React.MouseEvent<HTMLDivElement>) => void
+}
+
+export const SingleSelectOption: React.FC<SingleSelectOptionProps>
diff --git a/components/selector-bar/package.json b/components/selector-bar/package.json
index 402c67bf7e..42b7c53dbc 100644
--- a/components/selector-bar/package.json
+++ b/components/selector-bar/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/selector-bar",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,21 +33,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/button": "8.16.0",
-        "@dhis2-ui/card": "8.16.0",
-        "@dhis2-ui/popper": "8.16.0",
-        "@dhis2-ui/layer": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2-ui/button": "9.0.0-alpha.2",
+        "@dhis2-ui/card": "9.0.0-alpha.2",
+        "@dhis2-ui/popper": "9.0.0-alpha.2",
+        "@dhis2-ui/layer": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "@testing-library/react": "^12.1.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "devDependencies": {
-        "@dhis2-ui/css": "8.16.0",
-        "@dhis2-ui/menu": "8.16.0",
-        "@dhis2-ui/organisation-unit-tree": "8.16.0",
-        "@dhis2-ui/select": "8.16.0",
+        "@dhis2-ui/css": "9.0.0-alpha.2",
+        "@dhis2-ui/menu": "9.0.0-alpha.2",
+        "@dhis2-ui/organisation-unit-tree": "9.0.0-alpha.2",
+        "@dhis2-ui/select": "9.0.0-alpha.2",
         "@dhis2/d2-i18n": "^1.1.0",
         "@testing-library/jest-dom": "^5.16.1",
         "react": "16.13",
@@ -54,6 +55,8 @@
         "styled-jsx": "^4.0.1"
     },
     "files": [
-        "build"
-    ]
+        "build",
+        "types"
+    ],
+    "types": "types"
 }
diff --git a/components/selector-bar/types/index.d.ts b/components/selector-bar/types/index.d.ts
new file mode 100644
index 0000000000..e62d43fa36
--- /dev/null
+++ b/components/selector-bar/types/index.d.ts
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { ButtonProps } from '@dhis2-ui/button'
+
+export interface SelectorBarProps {
+    children: React.ReactNode
+    additionalContent?: React.ReactNode
+    className?: string
+    dataTest?: string
+    disableClearSelections?: boolean
+    onClearSelectionClick?: ButtonProps['onClick']
+}
+
+export const SelectorBar: React.FC<SelectorBarProps>
+
+export interface SelectorBarItemProps {
+    label: string
+    children: React.ReactNode
+    className?: string
+    dataTest?: string
+    disabled: boolean
+    displayOnly?: boolean
+    noValueMessage?: string
+    open?: boolean
+    setOpen?: (open: boolean) => void
+    value?: string
+    onClearSelectionClick: () => void
+}
diff --git a/components/sharing-dialog/package.json b/components/sharing-dialog/package.json
index 5f6101a78c..d4375af8e9 100644
--- a/components/sharing-dialog/package.json
+++ b/components/sharing-dialog/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/sharing-dialog",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI SharingDialog",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -34,28 +35,29 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "8.16.0",
-        "@dhis2-ui/button": "8.16.0",
-        "@dhis2-ui/card": "8.16.0",
-        "@dhis2-ui/divider": "8.16.0",
-        "@dhis2-ui/input": "8.16.0",
-        "@dhis2-ui/layer": "8.16.0",
-        "@dhis2-ui/menu": "8.16.0",
-        "@dhis2-ui/modal": "8.16.0",
-        "@dhis2-ui/notice-box": "8.16.0",
-        "@dhis2-ui/popper": "8.16.0",
-        "@dhis2-ui/select": "8.16.0",
-        "@dhis2-ui/tab": "8.16.0",
-        "@dhis2-ui/tooltip": "8.16.0",
-        "@dhis2-ui/user-avatar": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2-ui/box": "9.0.0-alpha.2",
+        "@dhis2-ui/button": "9.0.0-alpha.2",
+        "@dhis2-ui/card": "9.0.0-alpha.2",
+        "@dhis2-ui/divider": "9.0.0-alpha.2",
+        "@dhis2-ui/input": "9.0.0-alpha.2",
+        "@dhis2-ui/layer": "9.0.0-alpha.2",
+        "@dhis2-ui/menu": "9.0.0-alpha.2",
+        "@dhis2-ui/modal": "9.0.0-alpha.2",
+        "@dhis2-ui/notice-box": "9.0.0-alpha.2",
+        "@dhis2-ui/popper": "9.0.0-alpha.2",
+        "@dhis2-ui/select": "9.0.0-alpha.2",
+        "@dhis2-ui/tab": "9.0.0-alpha.2",
+        "@dhis2-ui/tooltip": "9.0.0-alpha.2",
+        "@dhis2-ui/user-avatar": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "@react-hook/size": "^2.1.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/app-runtime": "^3.9.0",
@@ -63,5 +65,6 @@
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/sharing-dialog/types/index.d.ts b/components/sharing-dialog/types/index.d.ts
new file mode 100644
index 0000000000..69a0c4b9e1
--- /dev/null
+++ b/components/sharing-dialog/types/index.d.ts
@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { ModalOnCloseEventHandler } from '../modal'
+
+interface SharingObject {
+    access: string
+    id: string
+    name: string
+}
+
+type SharingPublic = 'ACCESS_NONE' | 'ACCESS_VIEW_ONLY' | 'ACCESS_VIEW_AND_EDIT'
+type SharingType =
+    | 'visualization'
+    | 'dashboard'
+    | 'eventVisualization'
+    | 'interpretation'
+
+export interface SharingDialogInitialSharingSettings {
+    allowPublic: boolean
+    groups?: SharingObject
+    name?: string
+    public?: SharingPublic
+    users?: SharingObject
+}
+
+export interface SharingDialogProps {
+    /**
+     * The id of the object to share
+     */
+    id: string
+    /**
+     * The type of object to share
+     */
+    type: SharingType
+    /**
+     * Used to seed the component with data to show whilst loading
+     */
+    initialSharingSettings?: SharingDialogInitialSharingSettings
+    onClose?: ModalOnCloseEventHandler
+    onError?: (error: any) => void
+    onSave?: () => void
+}
+
+export const SharingDialog: React.FC<SharingDialogProps>
diff --git a/components/status-icon/package.json b/components/status-icon/package.json
index e58229cdd6..35002cd18c 100644
--- a/components/status-icon/package.json
+++ b/components/status-icon/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/status-icon",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI StatusIcon",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,18 +33,20 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/loader": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2-ui/loader": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/status-icon/types/index.d.ts b/components/status-icon/types/index.d.ts
new file mode 100644
index 0000000000..5b96ddf404
--- /dev/null
+++ b/components/status-icon/types/index.d.ts
@@ -0,0 +1,10 @@
+import * as React from 'react'
+
+export interface StatusIconProps {
+    error?: boolean
+    loading?: boolean
+    valid?: boolean
+    warning?: boolean
+}
+
+export const StatusIcon: React.FC<StatusIconProps>
diff --git a/components/switch/package.json b/components/switch/package.json
index 17bf48a1c9..8b6f05e938 100644
--- a/components/switch/package.json
+++ b/components/switch/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/switch",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Switch",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,18 +33,20 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/field": "8.16.0",
-        "@dhis2-ui/required": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2-ui/field": "9.0.0-alpha.2",
+        "@dhis2-ui/required": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/switch/types/index.d.ts b/components/switch/types/index.d.ts
new file mode 100644
index 0000000000..fbd94350a4
--- /dev/null
+++ b/components/switch/types/index.d.ts
@@ -0,0 +1,161 @@
+import * as React from 'react'
+
+export interface SwitchEventPayload {
+    value?: string
+    name?: string
+    checked: boolean
+}
+
+type SwitchEventHandler<Event extends React.SyntheticEvent> = (
+    arg0: SwitchEventPayload,
+    event: Event
+) => void
+
+type SwitchFocusHandler = SwitchEventHandler<React.FocusEvent<HTMLInputElement>>
+type SwitchChangeHandler = SwitchEventHandler<
+    React.ChangeEvent<HTMLInputElement>
+>
+type SwitchKeyHandler = SwitchEventHandler<
+    React.KeyboardEvent<HTMLInputElement>
+>
+
+export interface SwitchProps {
+    /**
+     * Sets an aria-label attribute on the input
+     */
+    ariaLabel?: string
+    checked?: boolean
+    className?: string
+    dataTest?: string
+    /**
+     * Makes the switch smaller for information-dense layouts
+     */
+    dense?: boolean
+    /**
+     * Disables the switch
+     */
+    disabled?: boolean
+    /**
+     * Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` prop types
+     */
+    error?: boolean
+    /**
+     * Grab initial focus on the page
+     */
+    initialFocus?: boolean
+    /**
+     * Label for the switch. Can be a string or an element, for example an image
+     */
+    label?: React.ReactNode
+    /**
+     * Name associated with the switch. Passed to event handlers in object
+     */
+    name?: string
+    /**
+     * Sets a role attribute on the input
+     */
+    role?: string
+    tabIndex?: string
+    /**
+     * Applies 'valid' styles for validation feedback. Mutually exclusive with `error` and `warning` prop types
+     */
+    valid?: boolean
+    /**
+     * Value associated with the switch. Passed to event handlers in object
+     */
+    value?: string
+    /**
+     * Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` prop types
+     */
+    warning?: boolean
+    /**
+     * Called with signature `({ name: string, value: string, checked: bool }, event)`
+     */
+    onBlur?: SwitchFocusHandler
+    /**
+     * Called with signature `({ name: string, value: string, checked: bool }, event)`
+     */
+    onChange?: SwitchChangeHandler
+    /**
+     * Called with signature `({ name: string, value: string, checked: bool }, event)`
+     */
+    onFocus?: SwitchFocusHandler
+    /**
+     * Called with signature `({ name: string, value: string, checked: bool }, event)`
+     */
+    onKeyDown?: SwitchKeyHandler
+}
+
+export class Switch extends React.Component<SwitchProps, any> {
+    render(): JSX.Element
+}
+
+export interface SwitchFieldProps {
+    checked?: boolean
+    className?: string
+    dataTest?: string
+    /**
+     * Smaller dimensions for information-dense layouts
+     */
+    dense?: boolean
+    /**
+     * Disables the switch
+     */
+    disabled?: boolean
+    /**
+     * Applies 'error' styling to switch and validation text for feedback. Mutually exclusive with `warning` and `valid` props
+     */
+    error?: boolean
+    /**
+     * Useful instructions for the user
+     */
+    helpText?: string
+    initialFocus?: boolean
+    /**
+     * Labels the switch
+     */
+    label?: React.ReactNode
+    /**
+     * Name associate with the switch. Passed in object as argument to event handlers
+     */
+    name?: string
+    /**
+     * Adds an asterisk to indicate this field is required
+     */
+    required?: boolean
+    tabIndex?: string
+    /**
+     * Applies 'valid' styling to switch and validation text for feedback. Mutually exclusive with `warning` and `error` props
+     */
+    valid?: boolean
+    /**
+     * Adds text below the switch to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses
+     */
+    validationText?: string
+    /**
+     * Value associated with the switch. Passed in object as argument to event handlers
+     */
+    value?: string
+    /**
+     * Applies 'warning' styling to switch and validation text for feedback. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+    /**
+     * Called with signature ({ name: string, value: string, checked: bool }, event)
+     */
+    onBlur?: SwitchFocusHandler
+    /**
+     * Called with signature ({ name: string, value: string, checked: bool }, event)
+     */
+    onChange?: SwitchChangeHandler
+    /**
+     * Called with signature ({ name: string, value: string, checked: bool }, event)
+     */
+    onFocus?: SwitchFocusHandler
+    /**
+     * Called with signature ({ name: string, value: string, checked: bool }, event)
+     */
+    onKeyDown?: SwitchKeyHandler
+}
+
+export const SwitchField: React.FC<SwitchFieldProps>
diff --git a/components/tab/package.json b/components/tab/package.json
index b51fc5a572..ec072d1679 100644
--- a/components/tab/package.json
+++ b/components/tab/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/tab",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Tabs",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,17 +33,19 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/tab/types/index.d.ts b/components/tab/types/index.d.ts
new file mode 100644
index 0000000000..fc0b88ba00
--- /dev/null
+++ b/components/tab/types/index.d.ts
@@ -0,0 +1,43 @@
+import * as React from 'react'
+
+export interface TabProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    disabled?: boolean
+    icon?: React.ReactElement<any>
+    /**
+     * Indicates this tab is selected
+     */
+    selected?: boolean
+    /**
+     * Called with the signature `({}, event)`
+     */
+    onClick?: (arg0: {}, event: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+export const Tab: React.FC<TabProps>
+
+export interface TabBarProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Fixed tabs fill the width of their container. If false (i.e. fluid), tabs take up an amount of space defined by the tab name. Fluid tabs should be used most of the time.
+     */
+    fixed?: boolean
+    /**
+     * Enables horizontal scrolling for many tabs that don't fit the width of the container
+     */
+    scrollable?: boolean
+}
+
+export const TabBar: React.FC<TabBarProps>
+
+export interface TabsProps {
+    dataTest: string
+    children?: React.ReactNode
+    fixed?: boolean
+}
+
+export const Tabs: React.FC<TabsProps>
diff --git a/components/table/package.json b/components/table/package.json
index b269218529..cddb5b6732 100644
--- a/components/table/package.json
+++ b/components/table/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/table",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Table",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -33,18 +34,20 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/table/types/index.d.ts b/components/table/types/index.d.ts
new file mode 100644
index 0000000000..6d2c2c590c
--- /dev/null
+++ b/components/table/types/index.d.ts
@@ -0,0 +1,396 @@
+import * as React from 'react'
+
+export interface TableProps {
+    /**
+     * Should be `<TableHead>`, `<TableBody>`, and `<TableFoot>` components
+     */
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    role?: string
+    /**
+     * Remove the default striping on alternating rows
+     */
+    suppressZebraStriping?: boolean
+}
+
+export const Table: React.FC<TableProps>
+
+export interface TableBodyProps {
+    /**
+     * Should be `<TableRow>` components
+     */
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    role?: string
+}
+
+export const TableBody: React.FC<TableBodyProps>
+
+export interface TableCellProps {
+    children?: React.ReactNode
+    className?: string
+    colSpan?: string
+    dataTest?: string
+    /**
+     * Uses less padding and height for information-dense layouts
+     */
+    dense?: boolean
+    role?: string
+    rowSpan?: string
+}
+
+export const TableCell: React.FC<TableCellProps>
+
+export interface TableFootProps {
+    /**
+     * Should be `<TableRow>` components
+     */
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    role?: string
+}
+
+export const TableFoot: React.FC<TableFootProps>
+
+export interface TableHeadProps {
+    /**
+     * Should be `<TableRowHead>` components
+     */
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    role?: string
+}
+
+export const TableHead: React.FC<TableHeadProps>
+
+export interface TableCellHeadProps {
+    children?: React.ReactNode
+    className?: string
+    colSpan?: string
+    dataTest?: string
+    /**
+     * Uses less padding and height for information-dense layouts
+     */
+    dense?: boolean
+    role?: string
+    rowSpan?: string
+}
+
+export const TableCellHead: React.FC<TableCellHeadProps>
+
+export interface TableRowProps {
+    /**
+     * Should be `<TableCell>` or `<TableCellHead>` components
+     */
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    role?: string
+    /**
+     * Disables the default row striping for this row
+     */
+    suppressZebraStriping?: boolean
+}
+
+export const TableRow: React.FC<TableRowProps>
+
+export interface TableRowHeadProps {
+    /**
+     * Should be `<TableCellHead>` components
+     */
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    role?: string
+    /**
+     * Disables the default row striping for this row
+     */
+    suppressZebraStriping?: boolean
+}
+
+export const TableRowHead: React.FC<TableRowHeadProps>
+
+/** STACKEDTABLE  */
+
+export interface StackedTableBodyProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+}
+
+export const StackedTableBody: React.FC<StackedTableBodyProps>
+
+export interface StackedTableCellHeadProps {
+    children?: string
+    className?: string
+    colSpan?: string
+    dataTest?: string
+    rowSpan?: string
+}
+
+export const StackedTableCellHead: React.FC<StackedTableCellHeadProps>
+
+export interface StackedTableCellProps {
+    children?: React.ReactNode
+    className?: string
+    colSpan?: string
+    column?: number
+    dataTest?: string
+    headerLabels?: string[]
+    hideTitle?: boolean
+    rowSpan?: string
+    title?: string
+}
+
+export const StackedTableCell: React.FC<StackedTableCellProps>
+
+export interface StackedTableFootProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+}
+
+export const StackedTableFoot: React.FC<StackedTableFootProps>
+
+export interface StackedTableHeadProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+}
+
+export const StackedTableHead: React.FC<StackedTableHeadProps>
+
+export interface StackedTableRowHeadProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+}
+
+export const StackedTableRowHead: React.FC<StackedTableRowHeadProps>
+
+export interface StackedTableRowProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+}
+
+export const StackedTableRow: React.FC<StackedTableRowProps>
+
+export interface StackedTableProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Labels for columns. Use an empty string for a column without a header.
+     */
+    headerLabels?: string[]
+}
+
+export const StackedTable: React.FC<StackedTableProps>
+
+/** DATATABLE */
+
+export type DataTableLayout = 'auto' | 'fixed' | 'initial' | 'inherit'
+
+export interface DataTableProps {
+    /**
+     * Should be `<DataTableHead>`, `<DataTableBody>`, and `<DataTableFoot>` components
+     */
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Sets the `datatable-layout` property. Switching to `fixed` can prevent style
+     * issues when dealing with a datatable with multiple frozen columns or when dealing
+     * with filter elements in the datatable headers.
+     */
+    layout?: DataTableLayout
+    role?: string
+    /**
+     * Sets max-height of scrollbox
+     */
+    scrollHeight?: string
+    /**
+     * Sets max-width of scrollbox
+     */
+    scrollWidth?: string
+    /**
+     * Sets the `width` property. Providing an explicit width can prevent style
+     * issues when dealing with horizontally scrolling datatables with a fixed layout.
+     */
+    width?: string
+}
+
+export const DataTable: React.ForwardRefExoticComponent<DataTableProps>
+
+export interface DataTableBodyProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    loading?: boolean
+    role?: string
+}
+
+export const DataTableBody: React.ForwardRefExoticComponent<DataTableBodyProps>
+
+type TdProps = React.ComponentPropsWithoutRef<'td'>
+type ThProps = React.ComponentPropsWithoutRef<'th'>
+type DataTableCellForwardProps = Omit<
+    TdProps | ThProps,
+    keyof DataTableCellProps
+>
+
+export type DataTableCellProps = {
+    /**
+     * To toggle border color, for example for editing
+     */
+    active?: boolean
+    align?: 'left' | 'center' | 'right'
+    /**
+     * Sets background color of the cell. Disables dynamic background colors from active, hover, and selected states
+     */
+    backgroundColor?: string
+    bordered?: boolean
+    children?: React.ReactNode
+    className?: string
+    colSpan?: string
+    dataTest?: string
+    /**
+     * Mutually exclusive with muted and valid
+     */
+    error?: boolean
+    /**
+     * When true a TableHeaderCell with sticky positioning will be rendered
+     */
+    fixed?: boolean
+    large?: boolean
+    /**
+     * Required when fixed
+     */
+    left?: boolean
+    /**
+     * Mutually exclusive with error and valid
+     */
+    muted?: boolean
+    role?: string
+    rowSpan?: string
+    scope?: string
+    /**
+     * Surpress hover and active event styles
+     */
+    staticStyle?: boolean
+    /**
+     * Render a TableDataCell or TableHeaderCell respectively
+     */
+    tag?: 'td' | 'th'
+    /**
+     * Mutually exclusive with error and muted
+     */
+    valid?: boolean
+    /**
+     * Required when fixed
+     */
+    width?: string
+    onClick?: React.MouseEventHandler
+}
+
+export const DataTableCell: React.ForwardRefExoticComponent<
+    DataTableCellProps & DataTableCellForwardProps
+>
+
+export type DataTableSortDirection = 'asc' | 'desc' | 'default'
+
+export interface DataTableColumnHeaderProps {
+    align?: 'left' | 'center' | 'right'
+    children?: React.ReactNode
+    className?: string
+    colSpan?: string
+    dataTest?: string
+    /**
+     * The filter element (JSX), required when onFilterIconClick or showFilter are present
+     */
+    filter?: boolean
+    fixed?: boolean
+    large?: boolean
+    /**
+     * Left or top required when fixed
+     */
+    left?: boolean
+    /**
+     * Can be used to match a column with a property name
+     */
+    name?: string
+    role?: string
+    rowSpan?: string
+    scope?: string
+    showFilter?: boolean
+    sortDirection?: DataTableSortDirection
+    sortIconTitle?: string
+    /**
+     * Left or top required when fixed
+     */
+    top?: boolean
+    width?: string
+    onFilterIconClick?: (
+        payload: { name?: string; active: boolean },
+        event: React.MouseEvent<HTMLButtonElement>
+    ) => void
+    /**
+     * Sort icon click callback with `nextSortDirection` and `name` in payload
+     */
+    onSortIconClick?: (
+        payload: { name?: string; direction: DataTableSortDirection },
+        event: React.MouseEvent<HTMLButtonElement>
+    ) => void
+}
+
+export const DataTableColumnHeader: React.ForwardRefExoticComponent<DataTableColumnHeaderProps>
+
+export const DataTableFoot: React.ForwardRefExoticComponent<TableFootProps>
+
+export const DataTableHead: React.ForwardRefExoticComponent<TableHeadProps>
+
+export interface DataTableRowProps {
+    /**
+     * Should be `<DataTableCell>` or `<DataTableCellHead>` components
+     */
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Renders and additional table cell with drag icon and applies draggable styles
+     */
+    draggable?: boolean
+    /**
+     * This content will be rendered into an additional row with fullwidth cell and the presence of this prop will display an additional table cell with expand icon
+     */
+    expandableContent?: React.ReactNode
+    /**
+     * Toggles expand icon (up/down) and expandable content visibility
+     */
+    expanded?: boolean
+    role?: string
+    /**
+     * Adds a green background color
+     */
+    selected?: boolean
+    /**
+     * Callback for expand icon cell clicks
+     */
+    onExpandToggle?: (payload: { expanded: boolean }) => void
+}
+
+export const DataTableRow: React.ForwardRefExoticComponent<DataTableRowProps>
+
+export interface DataTableToolbarProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    position?: 'top' | 'bottom'
+}
+
+export const DataTableToolbar: React.ForwardRefExoticComponent<DataTableToolbarProps>
diff --git a/components/tag/package.json b/components/tag/package.json
index 17445783f6..f5c0b4668b 100644
--- a/components/tag/package.json
+++ b/components/tag/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/tag",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Tag",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,16 +33,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/tag/types/index.d.ts b/components/tag/types/index.d.ts
new file mode 100644
index 0000000000..2a66f9ee9b
--- /dev/null
+++ b/components/tag/types/index.d.ts
@@ -0,0 +1,30 @@
+import * as React from 'react'
+
+export interface TagProps {
+    /**
+     * Use bold tags where it is important that the tag is seen by the user in an information dense interface. Bold tags should be reserved for edge cases and not overused.
+     */
+    bold?: boolean
+    children?: string
+    className?: string
+    dataTest?: string
+    /**
+     * Tags can contain icons. Use icons where they will help users easily identify the content of the tag. Tags must have a text label and cannot display only an icon.
+     */
+    icon?: React.ReactNode
+    maxWidth?: string
+    /**
+     * Red 'negative' tags imply an error or a problem. `neutral`, `positive`, and `negative` are mutually exclusive props
+     */
+    negative?: boolean
+    /**
+     * Blue 'neutral' tags are used when a tag _could_ have valid or error status but is currently neutral. `neutral`, `positive`, and `negative` are mutually exclusive props
+     */
+    neutral?: boolean
+    /**
+     * Green 'valid' tags should be used to indicate validity or success. `neutral`, `positive`, and `negative` are mutually exclusive props
+     */
+    positive?: boolean
+}
+
+export const Tag: React.FC<TagProps>
diff --git a/components/text-area/package.json b/components/text-area/package.json
index bd7dbe8a8d..ffc617de96 100644
--- a/components/text-area/package.json
+++ b/components/text-area/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/text-area",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI TextArea",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,21 +33,23 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "8.16.0",
-        "@dhis2-ui/field": "8.16.0",
-        "@dhis2-ui/loader": "8.16.0",
-        "@dhis2-ui/status-icon": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
-        "@dhis2/ui-icons": "8.16.0",
+        "@dhis2-ui/box": "9.0.0-alpha.2",
+        "@dhis2-ui/field": "9.0.0-alpha.2",
+        "@dhis2-ui/loader": "9.0.0-alpha.2",
+        "@dhis2-ui/status-icon": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
+        "@dhis2/ui-icons": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/text-area/types/index.d.ts b/components/text-area/types/index.d.ts
new file mode 100644
index 0000000000..aa2f8bff64
--- /dev/null
+++ b/components/text-area/types/index.d.ts
@@ -0,0 +1,209 @@
+import * as React from 'react'
+
+export type TextAreaResize = 'none' | 'both' | 'horizontal' | 'vertical'
+
+export interface TextAreaEventPayload {
+    value?: string
+    name?: string
+}
+
+export type TextAreaEventHandler<Event extends React.SyntheticEvent> = (
+    payload: TextAreaEventPayload,
+    event: Event
+) => void
+
+type TextAreaFocusHandler = TextAreaEventHandler<
+    React.FocusEvent<HTMLInputElement>
+>
+type TextAreaChangeHandler = TextAreaEventHandler<
+    React.ChangeEvent<HTMLInputElement>
+>
+type TextAreaKeyHandler = TextAreaEventHandler<
+    React.KeyboardEvent<HTMLInputElement>
+>
+
+export interface TextAreaProps {
+    /**
+     * Grow the text area in response to overflow instead of adding a scroll bar
+     */
+    autoGrow?: boolean
+    className?: string
+    dataTest?: string
+    /**
+     * Compact mode
+     */
+    dense?: boolean
+    /**
+     * Disables the textarea and makes in non-interactive
+     */
+    disabled?: boolean
+    /**
+     * Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` props
+     */
+    error?: boolean
+    /**
+     * Grabs initial focus on the page
+     */
+    initialFocus?: boolean
+    /**
+     * Adds a loading spinner
+     */
+    loading?: boolean
+    /**
+     * Name associated with the text area. Passed in object argument to event handlers.
+     */
+    name?: string
+    /**
+     * Placeholder text for an empty textarea
+     */
+    placeholder?: string
+    /**
+     * Makes the textarea read-only
+     */
+    readOnly?: boolean
+    /**
+     * [Resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for the textarea element
+     */
+    resize?: TextAreaResize
+    /**
+     * Initial height of the textarea, in lines of text
+     */
+    rows?: number
+    tabIndex?: string
+    /**
+     * Applies 'valid' styles for validation feedback. Mutually exclusive with `warning` and `error` props
+     */
+    valid?: boolean
+    /**
+     * Value in the textarea. Can be used to control component (recommended). Passed in object argument to event handlers.
+     */
+    value?: string
+    /**
+     * Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+    /**
+     * Width of the text area. Can be any valid CSS measurement
+     */
+    width?: string
+    /**
+     * Called with signature ({ name: string, value: string }, event)
+     */
+    onBlur?: TextAreaFocusHandler
+    /**
+     * Called with signature ({ name: string, value: string }, event)
+     */
+    onChange?: TextAreaChangeHandler
+    /**
+     * Called with signature ({ name: string, value: string }, event)
+     */
+    onFocus?: TextAreaFocusHandler
+    /**
+     * Called with signature ({ name: string, value: string }, event)
+     */
+    onKeyDown?: TextAreaKeyHandler
+}
+
+export class TextArea extends React.Component<TextAreaProps, any> {
+    render(): JSX.Element
+}
+
+export interface TextAreaFieldProps {
+    /**
+     * Grow the text area in response to overflow instead of adding a scroll bar
+     */
+    autoGrow?: boolean
+    className?: string
+    dataTest?: string
+    /**
+     * Compact mode
+     */
+    dense?: boolean
+    /**
+     * Disables the textarea and makes in non-interactive
+     */
+    disabled?: boolean
+    /**
+     * Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` props
+     */
+    error?: boolean
+    /**
+     * Adds useful help text below the textarea
+     */
+    helpText?: string
+    /**
+     * Grabs initial focus on the page
+     */
+    initialFocus?: boolean
+    /**
+     * Sets the width of the textarea. Minimum 220px. Any valid CSS measurement can be used
+     */
+    inputWidth?: string
+    /**
+     * Labels the textarea
+     */
+    label?: string
+    /**
+     * Adds a loading spinner
+     */
+    loading?: boolean
+    /**
+     * Name associated with the text area. Passed in object argument to event handlers.
+     */
+    name?: string
+    /**
+     * Placeholder text for an empty textarea
+     */
+    placeholder?: string
+    /**
+     * Makes the textarea read-only
+     */
+    readOnly?: boolean
+    /**
+     * Adds an asterisk to the label to indicate this field is required
+     */
+    required?: boolean
+    /**
+     * [Resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for the textarea element
+     */
+    resize?: TextAreaResize
+    /**
+     * Initial height of the textarea, in lines of text
+     */
+    rows?: number
+    tabIndex?: string
+    /**
+     * Applies 'valid' styles for validation feedback. Mutually exclusive with `warning` and `error` props
+     */
+    valid?: boolean
+    /**
+     * Validation text below the textarea to provide validation feedback. Changes appearance depending on validation status
+     */
+    validationText?: string
+    /**
+     * Value in the textarea. Can be used to control component (recommended). Passed in object argument to event handlers.
+     */
+    value?: string
+    /**
+     * Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` props
+     */
+    warning?: boolean
+    /**
+     * Called with signature ({ name: string, value: string }, event)
+     */
+    onBlur?: TextAreaFocusHandler
+    /**
+     * Called with signature ({ name: string, value: string }, event)
+     */
+    onChange?: TextAreaChangeHandler
+    /**
+     * Called with signature ({ name: string, value: string }, event)
+     */
+    onFocus?: TextAreaFocusHandler
+    /**
+     * Called with signature ({ name: string, value: string }, event)
+     */
+    onKeyDown?: TextAreaKeyHandler
+}
+
+export const TextAreaField: React.FC<TextAreaFieldProps>
diff --git a/components/tooltip/package.json b/components/tooltip/package.json
index c7b2c4420a..cb6650eda5 100644
--- a/components/tooltip/package.json
+++ b/components/tooltip/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/tooltip",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Tooltip",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,18 +33,20 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/popper": "8.16.0",
-        "@dhis2-ui/portal": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2-ui/popper": "9.0.0-alpha.2",
+        "@dhis2-ui/portal": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/tooltip/types/index.d.ts b/components/tooltip/types/index.d.ts
new file mode 100644
index 0000000000..9ae4b362d6
--- /dev/null
+++ b/components/tooltip/types/index.d.ts
@@ -0,0 +1,47 @@
+import * as React from 'react'
+
+type OnMouseEvent = React.MouseEventHandler<HTMLSpanElement>
+
+type TooltipRenderProps = {
+    onMouseOver: OnMouseEvent
+    onMouseOut: OnMouseEvent
+    ref: React.MutableRefObject<HTMLSpanElement>
+}
+export type TooltipRenderFunc = ({
+    onMouseOver,
+    onMouseOut,
+    ref,
+}: TooltipRenderProps) => React.ReactNode
+
+export type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left'
+
+export interface TooltipProps {
+    /**
+     * If child is a function, it's called with `{ onMouseOver, onMouseOut, ref }` args to apply to a reference element. If child is a node, it is wrapped in a `span` with the appropriate attributes and handlers.
+     */
+    children?: React.ReactNode | TooltipRenderFunc
+    className?: string
+    /**
+     * Time (in ms) until tooltip closes after mouse out
+     */
+    closeDelay?: number
+    /**
+     * Content to display when the tooltip is open
+     */
+    content?: React.ReactNode
+    dataTest?: string
+    /**
+     * Max width of the tooltip in px
+     */
+    maxWidth?: number
+    /**
+     * Time (in ms) until tooltip open after mouse over
+     */
+    openDelay?: number
+    /**
+     * Where to place the tooltip relative to its reference
+     */
+    placement?: TooltipPlacement
+}
+
+export const Tooltip: React.FC<TooltipProps>
diff --git a/components/transfer/package.json b/components/transfer/package.json
index 6bf13966dc..a52e2a5754 100644
--- a/components/transfer/package.json
+++ b/components/transfer/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/transfer",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Transfer",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,21 +33,23 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "8.16.0",
-        "@dhis2-ui/field": "8.16.0",
-        "@dhis2-ui/input": "8.16.0",
-        "@dhis2-ui/intersection-detector": "8.16.0",
-        "@dhis2-ui/loader": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2-ui/button": "9.0.0-alpha.2",
+        "@dhis2-ui/field": "9.0.0-alpha.2",
+        "@dhis2-ui/input": "9.0.0-alpha.2",
+        "@dhis2-ui/intersection-detector": "9.0.0-alpha.2",
+        "@dhis2-ui/loader": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/transfer/types/index.d.ts b/components/transfer/types/index.d.ts
new file mode 100644
index 0000000000..48748084b5
--- /dev/null
+++ b/components/transfer/types/index.d.ts
@@ -0,0 +1,83 @@
+import * as React from 'react'
+import { InputChangeHandler, InputEventHandler } from '@dhis2-ui/input'
+
+export interface TransferProps {
+    options: TransferOption[]
+    onChange: (payload: { selected: string[] }) => void
+    addAllText?: string
+    addIndividualText?: string
+    className?: string
+    dataTest?: string
+    disabled?: boolean
+    enableOrderChange?: boolean
+    filterCallback?: (
+        options: TransferOption[],
+        filter: string
+    ) => TransferOption[]
+    filterCallbackPicked?: (
+        options: TransferOption[],
+        filter: string
+    ) => TransferOption[]
+    filterLabel?: string
+    filterLabelPicked?: string
+    filterPlaceholder?: string
+    filterPlaceholderPicked?: string
+    filterable?: boolean
+    filterablePicked?: boolean
+    height?: string
+    hideFilterInput?: boolean
+    hideFilterInputPicked?: boolean
+    initialSearchTerm?: string
+    initialSearchTermPicked?: string
+    leftFooter?: React.ReactNode
+    leftHeader?: React.ReactNode
+    loading?: boolean
+    loadingPicked?: boolean
+    maxSelections?: number
+    optionsWidth?: string
+    removeAllText?: string
+    removeIndividualText?: string
+    renderOption?: (props: TransferOptionRenderProps) => JSX.Element
+    rightFooter?: React.ReactNode
+    rightHeader?: React.ReactNode
+    searchTerm?: string
+    searchTermPicked?: string
+    selected?: string[]
+    selectedEmptyComponent?: React.ReactNode
+    selectedWidth?: string
+    sourceEmptyPlaceholder?: React.ReactNode
+    onEndReached?: () => void
+    onEndReachedPicked?: () => void
+    onFilterChange?: InputChangeHandler
+    onFilterChangePicked?: InputChangeHandler
+}
+
+export const Transfer: React.FC<TransferProps>
+
+export type TransferOptionOnClickProp = (payload: { value: string }) => void
+
+export interface TransferOptionRenderProps extends TransferOption {
+    highlighted: boolean
+    selected: boolean
+    onClick: TransferOptionOnClickProp
+    onDoubleClick: TransferOptionOnClickProp
+}
+
+export interface TransferOptionProps {
+    label: React.ReactNode
+    value: string
+    onClick: TransferOptionOnClickProp
+    onDoubleClick: TransferOptionOnClickProp
+    className?: string
+    dataTest?: string
+    disabled?: boolean
+    highlighted?: boolean
+}
+
+export const TransferOption: React.FC<TransferOptionProps>
+
+export interface TransferOption {
+    label: string
+    value: string
+    disabled?: boolean
+}
diff --git a/components/user-avatar/package.json b/components/user-avatar/package.json
index eb18911f71..9b22341c74 100644
--- a/components/user-avatar/package.json
+++ b/components/user-avatar/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/user-avatar",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI User Avatar",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -33,17 +34,19 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/app-runtime": "^3.9.0",
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }
diff --git a/components/user-avatar/types/index.d.ts b/components/user-avatar/types/index.d.ts
new file mode 100644
index 0000000000..8d61de841c
--- /dev/null
+++ b/components/user-avatar/types/index.d.ts
@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+export interface UserAvatarProps {
+    name: string
+    avatarId?: string
+    className?: string
+    dataTest?: string
+    extralarge?: boolean
+    extrasmall?: boolean
+    large?: boolean
+    medium?: boolean
+    small?: boolean
+}
+
+export const UserAvatar: React.FC<UserAvatarProps>
diff --git a/constants/API.md b/constants/API.md
index 81ff91067b..30c8265cc8 100644
--- a/constants/API.md
+++ b/constants/API.md
@@ -4,7 +4,6 @@
 - [layers](src/layers.js)
 - [statusPropType](src/shared-prop-types.js)
 - [statusArgType](src/shared-prop-types.js)
-- [buttonVariantPropType](src/shared-prop-types.js)
 - [buttonVariantArgType](src/shared-prop-types.js)
 - [sizePropType](src/shared-prop-types.js)
 - [sizeArgType](src/shared-prop-types.js)
diff --git a/constants/package.json b/constants/package.json
index 6a890fe367..b41220e9f0 100644
--- a/constants/package.json
+++ b/constants/package.json
@@ -1,10 +1,11 @@
 {
     "name": "@dhis2/ui-constants",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "Constants used in the UI libs",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -29,6 +30,8 @@
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
-    ]
+        "build",
+        "types"
+    ],
+    "types": "types"
 }
diff --git a/constants/src/shared-prop-types.js b/constants/src/shared-prop-types.js
index db9df2a3cc..ef6dd65cc3 100644
--- a/constants/src/shared-prop-types.js
+++ b/constants/src/shared-prop-types.js
@@ -20,28 +20,12 @@ export const statusArgType = {
     control: { type: 'boolean' },
 }
 
-/**
- * @deprecated Not unused, will be removed in a future version.
- * Button variant propType
- * @return {PropType} Mutually exclusive variants:
- * primary/secondary/destructive
- */
-export const buttonVariantPropType = mutuallyExclusive(
-    ['primary', 'secondary', 'destructive'],
-    PropTypes.bool
-)
-export const buttonVariantArgType = {
+export const buttonVariantArgType =
     // No description because it should be set for the component description
-    table: {
-        type: {
-            summary: 'bool',
-            detail: "'primary', 'secondary', and 'destructive' are mutually exclusive props",
-        },
-    },
-    control: {
-        type: 'boolean',
-    },
-}
+    {
+        table: { type: { summary: 'bool' } },
+        control: { type: 'boolean' },
+    }
 
 /**
  * Size variant propType
diff --git a/constants/types/index.d.ts b/constants/types/index.d.ts
new file mode 100644
index 0000000000..0f7c7e77ba
--- /dev/null
+++ b/constants/types/index.d.ts
@@ -0,0 +1,78 @@
+import { bool } from 'prop-types'
+import {
+    insideAlignmentPropType,
+    popperPlacementPropType,
+    popperReferencePropType,
+} from '../src/shared-prop-types'
+
+export type ColorBase = 'blue' | 'teal' | 'red' | 'yellow' | 'green' | 'grey'
+export type ColorVariant =
+    | '900'
+    | '800'
+    | '700'
+    | '600'
+    | '500'
+    | '400'
+    | '300'
+    | '200'
+    | '100'
+    | '050'
+export type ColorProp = `${ColorBase}${ColorVariant}` | 'white'
+
+export const colors: Record<ColorProp, string>
+
+export type ElevantionVariant = 'e100' | 'e200' | 'e300' | 'e400'
+export const elevations: Record<ElevantionVariant, string>
+
+export type SpacerVariant =
+    | 'dp4'
+    | 'dp8'
+    | 'dp12'
+    | 'dp16'
+    | 'dp24'
+    | 'dp32'
+    | 'dp48'
+    | 'dp64'
+    | 'dp96'
+    | 'dp128'
+    | 'dp192'
+    | 'dp256'
+    | 'dp384'
+    | 'dp512'
+    | 'dp640'
+export const spacersNum: Record<SpacerVariant, number>
+export const spacers: Record<SpacerVariant, string>
+
+export type LayerVariant = 'applicationTop' | 'blocking' | 'alert'
+export const layer: Record<LayerVariant, number>
+
+export type ThemeBase = 'primary' | 'secondary'
+export type ThemeVariant =
+    | '900'
+    | '800'
+    | '700'
+    | '600'
+    | '500'
+    | '400'
+    | '300'
+    | '200'
+    | '100'
+    | '050'
+export type ThemeProp =
+    | `${ThemeBase}${ThemeVariant}`
+    | 'default'
+    | 'error'
+    | 'valid'
+    | 'warning'
+    | 'disabled'
+    | 'focus'
+    | 'fonts'
+export const theme: Record<ThemeProp, string>
+
+export interface sharedPropTypes {
+    statusPropType: typeof bool
+    sizePropType: typeof bool
+    insideAlignmentPropType: typeof insideAlignmentPropType
+    popperPlacementPropType: typeof popperPlacementPropType
+    popperReferencePropType: typeof popperReferencePropType
+}
diff --git a/docs/package.json b/docs/package.json
index d08295b6ed..ebb8447fd4 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ui-docusaurus",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "private": true,
     "description": "UI Docusaurus",
     "repository": {
diff --git a/icons/package.json b/icons/package.json
index 8f13f416c2..bd0f0531df 100644
--- a/icons/package.json
+++ b/icons/package.json
@@ -1,10 +1,11 @@
 {
     "name": "@dhis2/ui-icons",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "Icons used in the UI libs",
     "main": "./build/cjs/react/index.js",
     "module": "./build/es/react/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/react/index.js",
         "require": "./build/cjs/react/index.js"
     },
@@ -29,7 +30,8 @@
         "clean": "rimraf ./src/react"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "peerDependencies": {
         "react": "^16.8",
@@ -39,5 +41,6 @@
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13"
-    }
+    },
+    "types": "types"
 }
diff --git a/icons/types/index.d.ts b/icons/types/index.d.ts
new file mode 100644
index 0000000000..4dc4b03932
--- /dev/null
+++ b/icons/types/index.d.ts
@@ -0,0 +1,259 @@
+import * as React from 'react'
+
+export interface IconProps {
+    color?: string
+}
+
+export const IconAdd16: React.FC<IconProps>
+export const IconAdd24: React.FC<IconProps>
+export const IconAddCircle16: React.FC<IconProps>
+export const IconAddCircle24: React.FC<IconProps>
+export const IconApps16: React.FC<IconProps>
+export const IconApps24: React.FC<IconProps>
+export const IconArchive16: React.FC<IconProps>
+export const IconArchive24: React.FC<IconProps>
+export const IconArrowDown16: React.FC<IconProps>
+export const IconArrowDown24: React.FC<IconProps>
+export const IconArrowLeft16: React.FC<IconProps>
+export const IconArrowLeft24: React.FC<IconProps>
+export const IconArrowLeftMulti16: React.FC<IconProps>
+export const IconArrowLeftMulti24: React.FC<IconProps>
+export const IconArrowRight16: React.FC<IconProps>
+export const IconArrowRight24: React.FC<IconProps>
+export const IconArrowRightMulti16: React.FC<IconProps>
+export const IconArrowRightMulti24: React.FC<IconProps>
+export const IconArrowUp16: React.FC<IconProps>
+export const IconArrowUp24: React.FC<IconProps>
+export const IconAt16: React.FC<IconProps>
+export const IconAt24: React.FC<IconProps>
+export const IconAttachment16: React.FC<IconProps>
+export const IconAttachment24: React.FC<IconProps>
+export const IconBlock16: React.FC<IconProps>
+export const IconBlock24: React.FC<IconProps>
+export const IconCalendar16: React.FC<IconProps>
+export const IconCalendar24: React.FC<IconProps>
+export const IconCheckmark12: React.FC<IconProps>
+export const IconCheckmark16: React.FC<IconProps>
+export const IconCheckmark24: React.FC<IconProps>
+export const IconCheckmarkCircle16: React.FC<IconProps>
+export const IconCheckmarkCircle24: React.FC<IconProps>
+export const IconChevronDown16: React.FC<IconProps>
+export const IconChevronDown24: React.FC<IconProps>
+export const IconChevronLeft16: React.FC<IconProps>
+export const IconChevronLeft24: React.FC<IconProps>
+export const IconChevronRight16: React.FC<IconProps>
+export const IconChevronRight24: React.FC<IconProps>
+export const IconChevronUp16: React.FC<IconProps>
+export const IconChevronUp24: React.FC<IconProps>
+export const IconClock16: React.FC<IconProps>
+export const IconClock24: React.FC<IconProps>
+export const IconClockHistory16: React.FC<IconProps>
+export const IconClockHistory24: React.FC<IconProps>
+export const IconColor16: React.FC<IconProps>
+export const IconColor24: React.FC<IconProps>
+export const IconCopy16: React.FC<IconProps>
+export const IconCopy24: React.FC<IconProps>
+export const IconCross16: React.FC<IconProps>
+export const IconCross24: React.FC<IconProps>
+export const IconDashboardWindow16: React.FC<IconProps>
+export const IconDashboardWindow24: React.FC<IconProps>
+export const IconDataInteger16: React.FC<IconProps>
+export const IconDataInteger24: React.FC<IconProps>
+export const IconDataString16: React.FC<IconProps>
+export const IconDataString24: React.FC<IconProps>
+export const IconDelete16: React.FC<IconProps>
+export const IconDelete24: React.FC<IconProps>
+export const IconDimensionCategoryOptionGroupset16: React.FC<IconProps>
+export const IconDimensionData16: React.FC<IconProps>
+export const IconDimensionDataElementGroupset16: React.FC<IconProps>
+export const IconDimensionDataSet16: React.FC<IconProps>
+export const IconDimensionEventDataItem16: React.FC<IconProps>
+export const IconDimensionIndicator16: React.FC<IconProps>
+export const IconDimensionOrgUnit16: React.FC<IconProps>
+export const IconDimensionOrgUnitGroupset16: React.FC<IconProps>
+export const IconDimensionProgramIndicator16: React.FC<IconProps>
+export const IconDimensionValidationRule16: React.FC<IconProps>
+export const IconDirectionNorth16: React.FC<IconProps>
+export const IconDirectionNorth24: React.FC<IconProps>
+export const IconDownload16: React.FC<IconProps>
+export const IconDownload24: React.FC<IconProps>
+export const IconDragHandle16: React.FC<IconProps>
+export const IconDragHandle24: React.FC<IconProps>
+export const IconDuplicate16: React.FC<IconProps>
+export const IconDuplicate24: React.FC<IconProps>
+export const IconEdit16: React.FC<IconProps>
+export const IconEdit24: React.FC<IconProps>
+export const IconEditItems16: React.FC<IconProps>
+export const IconEditItems24: React.FC<IconProps>
+export const IconEmptyFrame16: React.FC<IconProps>
+export const IconEmptyFrame24: React.FC<IconProps>
+export const IconError16: React.FC<IconProps>
+export const IconError24: React.FC<IconProps>
+export const IconErrorFilled16: React.FC<IconProps>
+export const IconErrorFilled24: React.FC<IconProps>
+export const IconExportItems24: React.FC<IconProps>
+export const IconFaceAdd16: React.FC<IconProps>
+export const IconFaceAdd24: React.FC<IconProps>
+export const IconFile16: React.FC<IconProps>
+export const IconFile24: React.FC<IconProps>
+export const IconFileDocument16: React.FC<IconProps>
+export const IconFileDocument24: React.FC<IconProps>
+export const IconFilter16: React.FC<IconProps>
+export const IconFilter24: React.FC<IconProps>
+export const IconFlag16: React.FC<IconProps>
+export const IconFlag24: React.FC<IconProps>
+export const IconFolder16: React.FC<IconProps>
+export const IconFolder24: React.FC<IconProps>
+export const IconFolderOpen16: React.FC<IconProps>
+export const IconFolderOpen24: React.FC<IconProps>
+export const IconFullscreen16: React.FC<IconProps>
+export const IconFullscreen24: React.FC<IconProps>
+export const IconFullscreenExit16: React.FC<IconProps>
+export const IconFullscreenExit24: React.FC<IconProps>
+export const IconHome16: React.FC<IconProps>
+export const IconHome24: React.FC<IconProps>
+export const IconImage16: React.FC<IconProps>
+export const IconImage24: React.FC<IconProps>
+export const IconImportItems24: React.FC<IconProps>
+export const IconInfo16: React.FC<IconProps>
+export const IconInfo24: React.FC<IconProps>
+export const IconInfoFilled16: React.FC<IconProps>
+export const IconInfoFilled24: React.FC<IconProps>
+export const IconLaunch16: React.FC<IconProps>
+export const IconLaunch24: React.FC<IconProps>
+export const IconLayoutColumns16: React.FC<IconProps>
+export const IconLayoutColumns24: React.FC<IconProps>
+export const IconLayoutRows16: React.FC<IconProps>
+export const IconLayoutRows24: React.FC<IconProps>
+export const IconLegend16: React.FC<IconProps>
+export const IconLegend24: React.FC<IconProps>
+export const IconLink16: React.FC<IconProps>
+export const IconLink24: React.FC<IconProps>
+export const IconList16: React.FC<IconProps>
+export const IconList24: React.FC<IconProps>
+export const IconLocation16: React.FC<IconProps>
+export const IconLocation24: React.FC<IconProps>
+export const IconLock16: React.FC<IconProps>
+export const IconLock24: React.FC<IconProps>
+export const IconLockOpen16: React.FC<IconProps>
+export const IconLockOpen24: React.FC<IconProps>
+export const IconLogOut16: React.FC<IconProps>
+export const IconLogOut24: React.FC<IconProps>
+export const IconMail16: React.FC<IconProps>
+export const IconMail24: React.FC<IconProps>
+export const IconMailOpen16: React.FC<IconProps>
+export const IconMailOpen24: React.FC<IconProps>
+export const IconMessages16: React.FC<IconProps>
+export const IconMessages24: React.FC<IconProps>
+export const IconMore16: React.FC<IconProps>
+export const IconMore24: React.FC<IconProps>
+export const IconMove16: React.FC<IconProps>
+export const IconMove24: React.FC<IconProps>
+export const IconPushLeft16: React.FC<IconProps>
+export const IconPushLeft24: React.FC<IconProps>
+export const IconPushRight16: React.FC<IconProps>
+export const IconPushRight24: React.FC<IconProps>
+export const IconQuestion16: React.FC<IconProps>
+export const IconQuestion24: React.FC<IconProps>
+export const IconQuestionFilled16: React.FC<IconProps>
+export const IconQuestionFilled24: React.FC<IconProps>
+export const IconQueue16: React.FC<IconProps>
+export const IconQueue24: React.FC<IconProps>
+export const IconRedo16: React.FC<IconProps>
+export const IconRedo24: React.FC<IconProps>
+export const IconReorder16: React.FC<IconProps>
+export const IconReorder24: React.FC<IconProps>
+export const IconReply16: React.FC<IconProps>
+export const IconReply24: React.FC<IconProps>
+export const IconRuler16: React.FC<IconProps>
+export const IconRuler24: React.FC<IconProps>
+export const IconSave16: React.FC<IconProps>
+export const IconSave24: React.FC<IconProps>
+export const IconSearch16: React.FC<IconProps>
+export const IconSearch24: React.FC<IconProps>
+export const IconSettings16: React.FC<IconProps>
+export const IconSettings24: React.FC<IconProps>
+export const IconShare16: React.FC<IconProps>
+export const IconShare24: React.FC<IconProps>
+export const IconStar16: React.FC<IconProps>
+export const IconStar24: React.FC<IconProps>
+export const IconStarFilled16: React.FC<IconProps>
+export const IconStarFilled24: React.FC<IconProps>
+export const IconSubscribe16: React.FC<IconProps>
+export const IconSubscribe24: React.FC<IconProps>
+export const IconSubscribeOff16: React.FC<IconProps>
+export const IconSubscribeOff24: React.FC<IconProps>
+export const IconSubtractCircle16: React.FC<IconProps>
+export const IconSubtractCircle24: React.FC<IconProps>
+export const IconSync16: React.FC<IconProps>
+export const IconSync24: React.FC<IconProps>
+export const IconTable16: React.FC<IconProps>
+export const IconTable24: React.FC<IconProps>
+export const IconTerminalWindow16: React.FC<IconProps>
+export const IconTerminalWindow24: React.FC<IconProps>
+export const IconTextBold16: React.FC<IconProps>
+export const IconTextBold24: React.FC<IconProps>
+export const IconTextBox16: React.FC<IconProps>
+export const IconTextBox24: React.FC<IconProps>
+export const IconTextHeading16: React.FC<IconProps>
+export const IconTextHeading24: React.FC<IconProps>
+export const IconTextItalic16: React.FC<IconProps>
+export const IconTextItalic24: React.FC<IconProps>
+export const IconTextListOrdered16: React.FC<IconProps>
+export const IconTextListOrdered24: React.FC<IconProps>
+export const IconTextListUnordered16: React.FC<IconProps>
+export const IconTextListUnordered24: React.FC<IconProps>
+export const IconThumbDown16: React.FC<IconProps>
+export const IconThumbDown24: React.FC<IconProps>
+export const IconThumbUp16: React.FC<IconProps>
+export const IconThumbUp24: React.FC<IconProps>
+export const IconTranslate16: React.FC<IconProps>
+export const IconTranslate24: React.FC<IconProps>
+export const IconUndo16: React.FC<IconProps>
+export const IconUndo24: React.FC<IconProps>
+export const IconUpload16: React.FC<IconProps>
+export const IconUpload24: React.FC<IconProps>
+export const IconUser16: React.FC<IconProps>
+export const IconUser24: React.FC<IconProps>
+export const IconUserGroup16: React.FC<IconProps>
+export const IconUserGroup24: React.FC<IconProps>
+export const IconView16: React.FC<IconProps>
+export const IconView24: React.FC<IconProps>
+export const IconViewOff16: React.FC<IconProps>
+export const IconViewOff24: React.FC<IconProps>
+export const IconVisualizationArea16: React.FC<IconProps>
+export const IconVisualizationArea24: React.FC<IconProps>
+export const IconVisualizationAreaStacked16: React.FC<IconProps>
+export const IconVisualizationAreaStacked24: React.FC<IconProps>
+export const IconVisualizationBar16: React.FC<IconProps>
+export const IconVisualizationBar24: React.FC<IconProps>
+export const IconVisualizationBarStacked16: React.FC<IconProps>
+export const IconVisualizationBarStacked24: React.FC<IconProps>
+export const IconVisualizationColumn16: React.FC<IconProps>
+export const IconVisualizationColumn24: React.FC<IconProps>
+export const IconVisualizationColumnMulti16: React.FC<IconProps>
+export const IconVisualizationColumnMulti24: React.FC<IconProps>
+export const IconVisualizationColumnStacked16: React.FC<IconProps>
+export const IconVisualizationColumnStacked24: React.FC<IconProps>
+export const IconVisualizationGauge16: React.FC<IconProps>
+export const IconVisualizationGauge24: React.FC<IconProps>
+export const IconVisualizationLine16: React.FC<IconProps>
+export const IconVisualizationLine24: React.FC<IconProps>
+export const IconVisualizationLineMulti16: React.FC<IconProps>
+export const IconVisualizationLineMulti24: React.FC<IconProps>
+export const IconVisualizationPie16: React.FC<IconProps>
+export const IconVisualizationPie24: React.FC<IconProps>
+export const IconVisualizationRadar16: React.FC<IconProps>
+export const IconVisualizationRadar24: React.FC<IconProps>
+export const IconVisualizationScatter16: React.FC<IconProps>
+export const IconVisualizationScatter24: React.FC<IconProps>
+export const IconVisualizationSingleValue16: React.FC<IconProps>
+export const IconVisualizationSingleValue24: React.FC<IconProps>
+export const IconWarning16: React.FC<IconProps>
+export const IconWarning24: React.FC<IconProps>
+export const IconWarningFilled16: React.FC<IconProps>
+export const IconWarningFilled24: React.FC<IconProps>
+export const IconWindow16: React.FC<IconProps>
+export const IconWindow24: React.FC<IconProps>
+export const IconWorld16: React.FC<IconProps>
+export const IconWorld24: React.FC<IconProps>
diff --git a/package.json b/package.json
index 50dddab5d3..6d3edde9a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui-root",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/dhis2/ui.git"
@@ -75,5 +75,8 @@
         "rimraf": "^3.0.2",
         "styled-jsx": "^4.0.1",
         "wait-on": "^6.0.0"
+    },
+    "peerDependencies": {
+        "@types/react": ">=16.14.0"
     }
 }
diff --git a/storybook/package.json b/storybook/package.json
index c6474cdaf3..f635d38e70 100644
--- a/storybook/package.json
+++ b/storybook/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ui-storybook",
-    "version": "8.16.0",
+    "version": "9.0.0-alpha.2",
     "description": "UI Storybook",
     "repository": {
         "type": "git",
@@ -23,8 +23,8 @@
         "@babel/plugin-proposal-class-properties": "^7.13.0",
         "@babel/plugin-proposal-private-methods": "^7.13.0",
         "@babel/plugin-proposal-private-property-in-object": "^7.14.0",
-        "@dhis2-ui/css": "8.16.0",
-        "@dhis2/ui-constants": "8.16.0",
+        "@dhis2-ui/css": "9.0.0-alpha.2",
+        "@dhis2/ui-constants": "9.0.0-alpha.2",
         "@fontsource/roboto": "^4.5.0",
         "@storybook/addon-a11y": "^6.3.7",
         "@storybook/addon-console": "^1.2.3",