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/collections/forms/package.json b/collections/forms/package.json
index 6318ab868e..1f4c6aa1f1 100644
--- a/collections/forms/package.json
+++ b/collections/forms/package.json
@@ -49,10 +49,12 @@
         "react-final-form": "^6.5.3"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13"
-    }
+    },
+    "types": "types"
 }
diff --git a/collections/ui/package.json b/collections/ui/package.json
index d009fed03e..c9b16288b1 100644
--- a/collections/ui/package.json
+++ b/collections/ui/package.json
@@ -83,5 +83,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 7fb2de53db..83755deba2 100644
--- a/components/alert/package.json
+++ b/components/alert/package.json
@@ -39,11 +39,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/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 5b730bd2e5..70651ba495 100644
--- a/components/box/package.json
+++ b/components/box/package.json
@@ -37,11 +37,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/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 47c9e0a0d7..9dd3b27688 100644
--- a/components/button/package.json
+++ b/components/button/package.json
@@ -41,11 +41,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/button/types/index.d.ts b/components/button/types/index.d.ts
new file mode 100644
index 0000000000..b67e153f17
--- /dev/null
+++ b/components/button/types/index.d.ts
@@ -0,0 +1,256 @@
+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
+    /**
+     * Indicates that the button makes potentially dangerous
+     * deletions or data changes.
+     * Mutually exclusive with `primary` and `secondary` props
+     */
+    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.
+     * Mutually exclusive with `destructive` and `secondary` props
+     */
+    primary?: boolean
+    /**
+     * Applies 'secondary' button appearance.
+     * Mutually exclusive with `primary` and `destructive` props
+     */
+    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
+    /**
+     * Button variant. Mutually exclusive with `primary` and `secondary` props
+     */
+    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
+    /**
+     * Button variant. Mutually exclusive with `destructive` and `secondary` props
+     */
+    primary?: boolean
+    /**
+     * Button variant. Mutually exclusive with `primary` and `destructive` props
+     */
+    secondary?: boolean
+    /**
+     * 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' appearance to indicate purpose. Mutually exclusive with `primary` and `secondary` props
+     */
+    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' appearance to indicate purpose. Mutually exclusive with `destructive` and `secondary` props
+     */
+    primary?: boolean
+    /**
+     * Applies 'secondary' appearance to indicate purpose. Mutually exclusive with `primary` and `destructive` props
+     */
+    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 960a875bcd..5da988aea8 100644
--- a/components/calendar/package.json
+++ b/components/calendar/package.json
@@ -45,12 +45,14 @@
         "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 17db7a3473..eaa81984cc 100644
--- a/components/card/package.json
+++ b/components/card/package.json
@@ -37,11 +37,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/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 0d854f6bce..76a993756b 100644
--- a/components/center/package.json
+++ b/components/center/package.json
@@ -37,11 +37,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/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 5cd5e65dae..efa2523897 100644
--- a/components/checkbox/package.json
+++ b/components/checkbox/package.json
@@ -39,11 +39,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/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 70d533cbc0..d69baccda8 100644
--- a/components/chip/package.json
+++ b/components/chip/package.json
@@ -37,11 +37,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/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 7377506322..ebd9a486d6 100644
--- a/components/cover/package.json
+++ b/components/cover/package.json
@@ -37,11 +37,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/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 a0428d54a9..379e8b46ad 100644
--- a/components/css/package.json
+++ b/components/css/package.json
@@ -37,11 +37,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/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 b78a3124ca..2d8991c75c 100644
--- a/components/divider/package.json
+++ b/components/divider/package.json
@@ -37,11 +37,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/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 9b787a687e..64b1227cd3 100644
--- a/components/field/package.json
+++ b/components/field/package.json
@@ -40,11 +40,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/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 0ed006afd0..fb690baf35 100644
--- a/components/file-input/package.json
+++ b/components/file-input/package.json
@@ -44,12 +44,14 @@
         "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 cd05b8aed4..25b98a9942 100644
--- a/components/header-bar/package.json
+++ b/components/header-bar/package.json
@@ -53,7 +53,8 @@
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/app-runtime": "^3.9.0",
@@ -61,5 +62,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 ab8b8477d1..e0956c6a36 100644
--- a/components/help/package.json
+++ b/components/help/package.json
@@ -37,11 +37,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/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 284530d2fe..1eca321d7f 100644
--- a/components/input/package.json
+++ b/components/input/package.json
@@ -43,11 +43,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/input/types/index.d.ts b/components/input/types/index.d.ts
new file mode 100644
index 0000000000..9c537da7ee
--- /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
+    name?: string
+}
+
+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 6e96aaf5c0..6f0f913918 100644
--- a/components/intersection-detector/package.json
+++ b/components/intersection-detector/package.json
@@ -37,11 +37,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/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 334a8522c2..29ad7183e6 100644
--- a/components/label/package.json
+++ b/components/label/package.json
@@ -38,11 +38,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/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 4c80e4e0f1..c33963cbef 100644
--- a/components/layer/package.json
+++ b/components/layer/package.json
@@ -38,11 +38,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/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 c54ed83d13..262fb00404 100644
--- a/components/legend/package.json
+++ b/components/legend/package.json
@@ -38,11 +38,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/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 25698c6266..7ff25a8a0c 100644
--- a/components/loader/package.json
+++ b/components/loader/package.json
@@ -37,11 +37,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/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 bb30ec7d1d..8551c7cbb3 100644
--- a/components/logo/package.json
+++ b/components/logo/package.json
@@ -37,11 +37,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/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 66ec451651..f5b7a62343 100644
--- a/components/menu/package.json
+++ b/components/menu/package.json
@@ -43,11 +43,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/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 2611c45569..133ac00b7d 100644
--- a/components/modal/package.json
+++ b/components/modal/package.json
@@ -42,11 +42,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/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 472236a6cf..05e2945ce8 100644
--- a/components/node/package.json
+++ b/components/node/package.json
@@ -38,11 +38,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/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 8081af012b..562bb58d54 100644
--- a/components/notice-box/package.json
+++ b/components/notice-box/package.json
@@ -38,11 +38,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/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/package.json b/components/organisation-unit-tree/package.json
index c7712fc3f6..13cb126738 100644
--- a/components/organisation-unit-tree/package.json
+++ b/components/organisation-unit-tree/package.json
@@ -42,7 +42,8 @@
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/app-runtime": "^3.9.0",
@@ -50,5 +51,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..afcba8f6a1
--- /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[]
+
+interface OrganisationUnitNode {
+    id: string
+    displayName: string
+    children?: number
+    path: string
+}
+
+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 c229825c2d..f5278bab0e 100644
--- a/components/pagination/package.json
+++ b/components/pagination/package.json
@@ -41,12 +41,14 @@
         "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 fee450d41a..29c2cb3e2b 100644
--- a/components/popover/package.json
+++ b/components/popover/package.json
@@ -39,11 +39,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/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 7b29b6e9fc..5f95268a7c 100644
--- a/components/popper/package.json
+++ b/components/popper/package.json
@@ -40,11 +40,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 2b0ccc0648..a470ee7bc6 100644
--- a/components/portal/package.json
+++ b/components/portal/package.json
@@ -35,11 +35,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 6d5e76f382..4054826775 100644
--- a/components/radio/package.json
+++ b/components/radio/package.json
@@ -37,11 +37,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/radio/types/index.d.ts b/components/radio/types/index.d.ts
new file mode 100644
index 0000000000..dc0a1f541d
--- /dev/null
+++ b/components/radio/types/index.d.ts
@@ -0,0 +1,67 @@
+import * as React from 'react'
+
+type RadioEventPayload = {
+    value?: string
+    name?: string
+    checked: boolean
+}
+
+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 f5b38ad714..b809b7fc4f 100644
--- a/components/required/package.json
+++ b/components/required/package.json
@@ -37,11 +37,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/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 e6cd65e897..f35f8edb76 100644
--- a/components/segmented-control/package.json
+++ b/components/segmented-control/package.json
@@ -37,11 +37,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/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 b8b004f937..6d0062c925 100644
--- a/components/select/package.json
+++ b/components/select/package.json
@@ -50,12 +50,14 @@
         "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..800d4e34ff
--- /dev/null
+++ b/components/select/types/index.d.ts
@@ -0,0 +1,419 @@
+import * as React from 'react'
+import { LayerBackdropClickEvent } from '@dhis2-ui/layer'
+import { CheckboxProps } from '@dhis2-ui/checkbox'
+
+interface BaseEventPayload {
+    selected?: string | string[]
+}
+interface SingleSelectEventPayload extends BaseEventPayload {
+    selected?: string
+}
+interface MultiSelectEventPayload extends BaseEventPayload {
+    selected?: string[]
+}
+
+type SelectEventHandler<
+    T extends BaseEventPayload,
+    Event extends React.SyntheticEvent
+> = (payload: T, event: Event) => void
+
+type SelectOnBlurHandler<T extends BaseEventPayload> = SelectEventHandler<
+    T,
+    LayerBackdropClickEvent
+>
+type SelectOnFocusHandler<T extends BaseEventPayload> = SelectEventHandler<
+    T,
+    React.FocusEvent<HTMLDivElement>
+>
+type SelectKeyHandler<T extends BaseEventPayload> = SelectEventHandler<
+    T,
+    React.KeyboardEvent<HTMLDivElement>
+>
+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 7f842ac83a..418ecba5c2 100644
--- a/components/selector-bar/package.json
+++ b/components/selector-bar/package.json
@@ -54,6 +54,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 71e1e64e19..267908655f 100644
--- a/components/sharing-dialog/package.json
+++ b/components/sharing-dialog/package.json
@@ -55,7 +55,8 @@
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/app-runtime": "^3.9.0",
@@ -63,5 +64,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 e7da5c3ef6..7ae5107f2c 100644
--- a/components/status-icon/package.json
+++ b/components/status-icon/package.json
@@ -39,11 +39,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/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 ef8feeb06e..a2abfa8789 100644
--- a/components/switch/package.json
+++ b/components/switch/package.json
@@ -39,11 +39,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/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 df4dbfca9c..31aacb6800 100644
--- a/components/tab/package.json
+++ b/components/tab/package.json
@@ -38,11 +38,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/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 cf0a6b1f32..807aef4592 100644
--- a/components/table/package.json
+++ b/components/table/package.json
@@ -39,12 +39,14 @@
         "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 3ff846f803..8322678e15 100644
--- a/components/tag/package.json
+++ b/components/tag/package.json
@@ -37,11 +37,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/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 bd4fc6446c..666b4063aa 100644
--- a/components/text-area/package.json
+++ b/components/text-area/package.json
@@ -42,11 +42,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/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 b34eb24959..e315a02aa0 100644
--- a/components/tooltip/package.json
+++ b/components/tooltip/package.json
@@ -39,11 +39,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/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 98426307e8..9be0babf6d 100644
--- a/components/transfer/package.json
+++ b/components/transfer/package.json
@@ -42,11 +42,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/transfer/types/index.d.ts b/components/transfer/types/index.d.ts
new file mode 100644
index 0000000000..104ca659da
--- /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>
+
+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 f5a01a207d..e24c65be78 100644
--- a/components/user-avatar/package.json
+++ b/components/user-avatar/package.json
@@ -38,12 +38,14 @@
         "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/package.json b/constants/package.json
index 50726b97a9..ab66919705 100644
--- a/constants/package.json
+++ b/constants/package.json
@@ -29,6 +29,8 @@
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
-    ]
+        "build",
+        "types"
+    ],
+    "types": "types"
 }
diff --git a/constants/types/index.d.ts b/constants/types/index.d.ts
new file mode 100644
index 0000000000..8351160a68
--- /dev/null
+++ b/constants/types/index.d.ts
@@ -0,0 +1,63 @@
+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>
diff --git a/icons/package.json b/icons/package.json
index bba3167d44..499e659fcc 100644
--- a/icons/package.json
+++ b/icons/package.json
@@ -29,7 +29,8 @@
         "clean": "rimraf ./src/react"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "peerDependencies": {
         "react": "^16.8",
@@ -39,5 +40,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 61206bf9ec..16cf03b8ba 100644
--- a/package.json
+++ b/package.json
@@ -75,5 +75,8 @@
         "rimraf": "^3.0.2",
         "styled-jsx": "^4.0.1",
         "wait-on": "^6.0.0"
+    },
+    "peerDependencies": {
+        "@types/react": ">=16.14.0"
     }
 }