diff --git a/.gitignore b/.gitignore
index 0f7f11b..d3fd097 100644
--- a/.gitignore
+++ b/.gitignore
@@ -84,6 +84,7 @@ jspm_packages/
 
 # TypeScript v1 declaration files
 typings/
+types/
 
 # TypeScript cache
 *.tsbuildinfo
diff --git a/package.json b/package.json
index a4a1b91..2e9ed70 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.19",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
+  "types": "./types/types.d.ts",
   "scripts": {
     "prepublish": "npm run test && npm run build",
     "start": "start-storybook -p 9009 -s public",
@@ -12,7 +13,8 @@
     "lint": "npm run lint:scss && npm run lint:js",
     "lint:js": "eslint --ext js,jsx,ts .",
     "lint:scss": "stylelint '?(.)**/*.{css,scss}' --aei",
-    "build-storybook": "build-storybook -s public"
+    "build-storybook": "build-storybook -s public",
+    "types": "jsdoc -t node_modules/tsd-jsdoc/dist -r src/. -d types"
   },
   "publishConfig": {
     "@acpaas-ui:registry": "https://nexusrepo.antwerpen.be/repository/npm-private"
@@ -35,6 +37,7 @@
     "@popperjs/core": "^2.6.0",
     "array-tree-filter": "^2.1.0",
     "classnames": "^2.2.6",
+    "docsjs": "^1.2.7",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2",
     "ramda": "^0.27.1",
@@ -91,6 +94,7 @@
     "stylelint": "^13.2.1",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.18.0",
+    "tsd-jsdoc": "^2.5.0",
     "typescript": "^3.8.3"
   }
 }
diff --git a/src/components/ActionBar/ActionBar.jsx b/src/components/ActionBar/ActionBar.jsx
index 1a2f73f..f67c51e 100644
--- a/src/components/ActionBar/ActionBar.jsx
+++ b/src/components/ActionBar/ActionBar.jsx
@@ -10,6 +10,16 @@ import { ActionBarContentSection } from './ActionBar.slots';
 
 const cx = classNames.bind(styles);
 
+/**
+ * @typedef ActionBarProps
+ * @prop {string} [className]
+ * @prop {React.ReactNode} [children]
+ * @prop {React.ReactNode} [container]
+ * @prop {boolean} [disablePortal]
+ * @prop {boolean} isOpen
+ */
+
+/** @param {ActionBarProps} props */
 const ActionBar = ({
 	children,
 	className,
diff --git a/src/components/Cascader/Cascader.jsx b/src/components/Cascader/Cascader.jsx
index 64b349f..b1c0fd3 100644
--- a/src/components/Cascader/Cascader.jsx
+++ b/src/components/Cascader/Cascader.jsx
@@ -9,6 +9,46 @@ import { ALLOWED_KEYS, BUILT_IN_PLACEMENTS, REOPEN_POPUP_KEYS } from './Cascader
 import { Menus } from './Menus';
 import './Cascader.scss';
 
+/**
+ * @typedef {object} CascaderOption
+* Value of the option
+* @prop {string|number} value
+* Human readable label
+* @prop {React.ReactNode} label
+* True when loading
+* @prop {boolean} CascaderOptionsProps.loading
+* Indicates the end of a cascader tree
+* @prop {boolean} CascaderOptionsProps.isLeaf
+ */
+
+/**
+ * @typedef CascaderProps
+ * Component class prefix
+ * @prop {string} [prefixCls]
+ * Default value
+ * @prop {string[] | number[]} [defaultValue]
+ * Value
+ * @prop {string[] | number[]} [value]
+ * Cascader options
+ * @prop {object[]} [options]
+ * @prop {string | number} [options.value]
+ * @prop {React.ReactNode} [options.label]
+ * @prop {boolean} [options.loading]
+ * @prop {boolean} [options.isLeaf]
+ * @prop {CascaderOption[]} [options.children]
+ * Change the value on each selection, by default it will only
+ * trigger the onchange event when selecting a leaf option
+ * @prop {boolean} [changeOnSelect]
+ * Callback when finisching the cascader select
+ * @prop {Function} [onChange]
+ * Lazy load children
+ * @prop {Function} [loadData]
+ * Selecting an option is not possible when disabled
+ * @prop {boolean} [disabled]
+ * @prop {React.ReactElement} [children]
+ */
+
+/** @param {CascaderProps} props */
 const Cascader = ({
 	defaultValue,
 	value,
diff --git a/src/components/Cascader/Menus/Menus.jsx b/src/components/Cascader/Menus/Menus.jsx
index c5971b1..b369e48 100644
--- a/src/components/Cascader/Menus/Menus.jsx
+++ b/src/components/Cascader/Menus/Menus.jsx
@@ -3,6 +3,35 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+/**
+ * @typedef {object} CascaderOption
+* Value of the option
+* @prop {string|number} value
+* Human readable label
+* @prop {React.ReactNode} label
+* True when loading
+* @prop {boolean} CascaderOptionsProps.loading
+* Indicates the end of a cascader tree
+* @prop {boolean} CascaderOptionsProps.isLeaf
+ */
+
+/**
+ * @typedef MenusProps
+ * @prop {string} [prefixCls]
+ * Value
+ * @prop {string[] | number[]} [value]
+ * Callback when selecting an option
+ * @prop {function} [onSelect]
+ * Options
+ * @prop {object[]} [options]
+ * @prop {string | number} [options.value]
+ * @prop {React.ReactNode} [options.label]
+ * @prop {boolean} [options.loading]
+ * @prop {boolean} [options.isLeaf]
+ * @prop {CascaderOption[]} [options.children]
+ */
+
+/** @param {MenusProps} props */
 const Menus = ({
 	value = [],
 	options = [],
diff --git a/src/components/Container/Container.jsx b/src/components/Container/Container.jsx
index d161c65..fbd5b19 100644
--- a/src/components/Container/Container.jsx
+++ b/src/components/Container/Container.jsx
@@ -2,6 +2,13 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+/**
+ * @typedef {object} ContainerProp
+ * @prop {string} [className]
+ * @prop {React.ReactNode} [children]
+ */
+
+/** @param {ContainerProp} props */
 const Container = ({ className, children }) => (
 	<div className={classnames(className, 'u-container u-wrapper u-margin-top u-margin-bottom-lg')}>
 		{children}
diff --git a/src/components/ContextHeader/ContextHeader.jsx b/src/components/ContextHeader/ContextHeader.jsx
index 03b4ce9..ad92e16 100644
--- a/src/components/ContextHeader/ContextHeader.jsx
+++ b/src/components/ContextHeader/ContextHeader.jsx
@@ -11,6 +11,23 @@ import { ContextHeaderActionsSection, ContextHeaderTopSection } from './ContextH
 
 const cx = classNames.bind(styles);
 
+/**
+ * @typedef ContextHeaderProps
+ * @prop {string} [className]
+ * @prop {React.ReactNode|React.ReactNode[]} [children]
+ * @prop {string | React.ReactNode} [title]
+ * @prop {object[]} [badges]
+ * @prop {'primary' | 'secondary' | 'success' | 'warning' | 'danger'} badges.type
+ * @prop {string} badges.name
+ * @prop {object[]} [tabs]
+ * @prop {string} tabs.name
+ * @prop {string} tabs.target
+ * @prop {boolean} [tabs.active]
+ * @prop {boolean} [tabs.disabled]
+ * @prop {Function} [linkProps]
+ *
+ */
+/** @param {ContextHeaderProps} props */
 const ContextHeader = ({
 	className,
 	children,
diff --git a/src/components/ControlledModal/ControlledModal.jsx b/src/components/ControlledModal/ControlledModal.jsx
index fbff7d1..6bdf69e 100644
--- a/src/components/ControlledModal/ControlledModal.jsx
+++ b/src/components/ControlledModal/ControlledModal.jsx
@@ -13,6 +13,19 @@ import {
 
 const cx = classnames.bind(styles);
 
+/**
+ * @typedef ControlledModalProp
+ * @prop {string} [className]
+ * @prop {React.ReactElement} [children]
+ * @prop {string} [overlayClassName]
+ * @prop {Element} [node]
+ * @prop {Function} [onClose]
+ * @prop {boolean} show
+ * @prop {'large'} [size]
+ * @prop {boolean} [lockBodyScroll]
+ */
+
+/** @param {ControlledModalProp} props */
 const ControlledModal = ({
 	children, className, overlayClassName, lockBodyScroll = true, node, onClose, show, size,
 }) => {
diff --git a/src/components/Dnd/DndContainer/DndContainer.jsx b/src/components/Dnd/DndContainer/DndContainer.jsx
index 0d96e7b..9cd47e8 100644
--- a/src/components/Dnd/DndContainer/DndContainer.jsx
+++ b/src/components/Dnd/DndContainer/DndContainer.jsx
@@ -5,6 +5,13 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 
 const DNDContext = createDndContext(HTML5Backend);
 
+/**
+ * @typedef {object} DndContainerProp
+ * @prop {boolean} [draggable]
+ * @prop {React.ReactNode[] | React.ReactNode} [children]
+ */
+
+/** @param {DndContainerProp} props */
 const DndContainer = ({ draggable, children }) => {
 	const manager = useRef(DNDContext);
 
diff --git a/src/components/Dnd/DndDragDroppable/DndDragDroppable.jsx b/src/components/Dnd/DndDragDroppable/DndDragDroppable.jsx
index cda44eb..e0c5e61 100644
--- a/src/components/Dnd/DndDragDroppable/DndDragDroppable.jsx
+++ b/src/components/Dnd/DndDragDroppable/DndDragDroppable.jsx
@@ -1,7 +1,17 @@
-import { PropTypes } from 'prop-types';
 import { useRef } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 
+/**
+ * @typedef DndDragDroppableProp
+ * @prop {string[]} [accept]
+ * @prop {boolean} [allowHorizontalDrag]
+ * @prop {number} [index]
+ * @prop {Function} [moveRow]
+ * @prop {Function} [children]
+ * @prop {*} [id]
+ */
+
+/** @param {DndDragDroppableProp} props */
 const DndDragDroppable = ({
 	allowHorizontalDrag = false,
 	accept,
@@ -81,13 +91,4 @@ const DndDragDroppable = ({
 	return children({ dragDropRef, isDragging });
 };
 
-DndDragDroppable.propTypes = {
-	accept: PropTypes.arrayOf(PropTypes.string),
-	allowHorizontalDrag: PropTypes.bool,
-	index: PropTypes.number,
-	moveRow: PropTypes.func,
-	children: PropTypes.func,
-	id: PropTypes.any, // eslint-disable-line
-};
-
 export default DndDragDroppable;
diff --git a/src/components/EllipsisWithTooltip/EllipsisWithTooltip.jsx b/src/components/EllipsisWithTooltip/EllipsisWithTooltip.jsx
index abd8e7c..2a8c799 100644
--- a/src/components/EllipsisWithTooltip/EllipsisWithTooltip.jsx
+++ b/src/components/EllipsisWithTooltip/EllipsisWithTooltip.jsx
@@ -8,6 +8,18 @@ import styles from './EllipsisWithTooltip.module.scss';
 
 const cx = classnames.bind(styles);
 
+/**
+ * @typedef EllipsisProp
+ * @prop {string} [className]
+ * @prop {string} [value]
+ * @prop {React.ReactNode[] | React.ReactNode} children
+ * @prop {object} [style]
+ * @prop {TooltipTypeMap.DEFAULT| TooltipTypeMap.PRIMARY | TooltipTypeMap.SECONDARY} [type]
+ * @prop {number} [delayShow]
+ *
+ */
+
+/** @param {EllipsisProp} props */
 const EllipsisWithTooltip = ({
 	children,
 	style,
diff --git a/src/components/FileUpload/FileUpload.jsx b/src/components/FileUpload/FileUpload.jsx
index f3fde9f..6dc357e 100644
--- a/src/components/FileUpload/FileUpload.jsx
+++ b/src/components/FileUpload/FileUpload.jsx
@@ -10,6 +10,34 @@ import { FileUploadZone } from './FileUploadZone';
 import { Uploader } from './Uploader';
 import { ValidationList } from './ValidationList';
 
+/**
+ * @typedef FileUploadProps
+ * @prop {string} id
+ * @prop {boolean} [disabled]
+ * @prop {string} [ariaLabelRemove]
+ * @prop {object} [options]
+ * @prop {string[]} [options.allowedMimeTypes]
+ * @prop {string[]} [options.allowedFileTypes]
+ * @prop {number} [options.maxFileSize]
+ * @prop {string} [options.type]
+ * @prop {string} [options.url]
+ * @prop {number} [options.fileLimit]
+ * @prop {object} [options.messages]
+ * @prop {string} [options.messages.INVALID_FILE_TYPE]
+ * @prop {string} [options.messages.INVALID_FILE_SIZE]
+ * @prop {string} [options.messages.INVALID_MIME_TYPE]
+ * @prop {string} [options.messages.REQUEST_ERROR]
+ * @prop {object} [options.requestHeader]
+ * @prop {string} [options.requestHeader.key]
+ * @prop {string} [options.requestHeader.value]
+ * @prop {object[]} [files]
+ * @prop {string} files.id
+ * @prop {string} files.name
+ * @prop {Function} [selectUploadedFiles]
+ * @prop {Function} [removeFile]
+ * @prop {React.ReactNode[] | React.ReactNode} [children]
+ */
+/** @param {FileUploadProps} props */
 const FileUpload = ({
 	id = '',
 	ariaLabelRemove = 'Verwijder',
diff --git a/src/components/FileUpload/FileUploadZone/FileUploadZone.jsx b/src/components/FileUpload/FileUploadZone/FileUploadZone.jsx
index a0a5f1b..62822a6 100644
--- a/src/components/FileUpload/FileUploadZone/FileUploadZone.jsx
+++ b/src/components/FileUpload/FileUploadZone/FileUploadZone.jsx
@@ -7,6 +7,24 @@ import { ProgressBar } from '../../ProgressBar';
 import { FileUploadDescription, FileUploadMessage } from '../FileUpload.slots';
 import { Uploader } from '../Uploader';
 
+/**
+ * @typedef FileUploadZoneProps
+ * @prop {boolean} [autoUpload]
+ * @prop {string} [id]
+ * @prop {Uploader} [uploader]
+ * @prop {boolean} [disabled]
+ * @prop {boolean} [multiple]
+ * @prop {string}  [ariaId]
+ * @prop {Function} [uploadedFiles]
+ * @prop {Function} [invalidFiles]
+ * @prop {Function} [onRequestError]
+ * @prop {Function} [onCustomClick]
+ * @prop {Function} [onCustomDrop]
+ * @prop {string[]} [allowedMimeTypes]
+ * @prop {string[]} [allowedFileTypes]
+ * @prop {React.ReactNode[] | React.ReactNode} [children]
+ */
+/** @param {FileUploadZoneProps} props */
 const FileUploadZone = ({
 	autoUpload = true,
 	id = '',
diff --git a/src/components/FileUpload/ValidationList/ValidationList.jsx b/src/components/FileUpload/ValidationList/ValidationList.jsx
index 686cf96..86331f1 100644
--- a/src/components/FileUpload/ValidationList/ValidationList.jsx
+++ b/src/components/FileUpload/ValidationList/ValidationList.jsx
@@ -3,6 +3,19 @@ import React from 'react';
 
 import { VALIDATION_MESSAGES_DEFAULT } from '../FileUpload.const';
 
+/**
+ * @typedef ValidationListProp
+ * @prop {object[]} [invalidFiles]
+ * @prop {string[]} [invalidFiles.reasons]
+ * @prop {File} [invalidFiles.file]
+ * @prop {string} [ariaLabelRemove]
+ * @prop {Function} [removeInvalidFile]
+ * @prop {object} [messages]
+ * @prop {string} [messages.INVALID_FILE_TYPE]
+ * @prop {string} [messages.INVALID_FILE_SIZE]
+ * @prop {string} [messages.INVALID_MIME_TYPE]
+ */
+/** @param {ValidationListProp} props */
 const ValidationList = ({
 	invalidFiles = [],
 	messages = VALIDATION_MESSAGES_DEFAULT,
diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx
index 084eb6f..888bfbd 100644
--- a/src/components/Filter/Filter.jsx
+++ b/src/components/Filter/Filter.jsx
@@ -10,6 +10,26 @@ import { useSlot } from '../../hooks/useSlot';
 import './Filter.scss';
 import { FilterBody } from './Filter.slots';
 
+/**
+ * @typedef FilterProps
+ * @prop {string} [actionsClassName]
+ * @prop {React.ReactNode[]  | React.ReactNode} [children]
+ * @prop {string} [className]
+ * @prop {string} [title]
+ * @prop {string} [noFilterText]
+ * @prop {Function} [onConfirm]
+ * @prop {string} [confirmText]
+ * @prop {Function} [onClean]
+ * @prop {string} [cleanText]
+ * @prop {object[]} [activeFilters]
+ * @prop {string} [activeFilters.valuePrefix]
+ * @prop {string} [activeFilters.value]
+ * @prop {string} [activeFilters.key]
+ * @prop {Function} [onFilterRemove]
+ * @prop {boolean} [enableSubmitOnEnter]
+ */
+
+/** @param {FilterProps} props */
 const Filter = ({
 	actionsClassName,
 	className,
diff --git a/src/components/NavList/NavList.jsx b/src/components/NavList/NavList.jsx
index 5cc1d27..2ae0d0b 100644
--- a/src/components/NavList/NavList.jsx
+++ b/src/components/NavList/NavList.jsx
@@ -5,6 +5,19 @@ import sanitizeHtml from 'sanitize-html';
 
 import './NavList.scss';
 
+/**
+ * @typedef NavListProps
+ * @prop {string} [className]
+ * @prop {React.ElementType} [linkComponent]
+ * @prop {object[]} items
+ * @prop {boolean} [items.hasError]
+ * @prop {string} items.label
+ * @prop {string} [items.description]
+ * @prop {'large'} [size]
+ * @prop {boolean} [lockBodyScroll]
+ */
+
+/** @param {NavListProps} props */
 const NavList = ({ className, linkComponent: LinkComponent = 'a', items }) => (
 	<ul className={classnames(className, 'm-nav-list')}>
 		{items.map(({
diff --git a/src/components/PaginatedTable/PaginatedTable.jsx b/src/components/PaginatedTable/PaginatedTable.jsx
index 96e3072..b60ff3e 100644
--- a/src/components/PaginatedTable/PaginatedTable.jsx
+++ b/src/components/PaginatedTable/PaginatedTable.jsx
@@ -7,6 +7,51 @@ import { Table } from '../Table';
 
 import './PaginatedTable.scss';
 
+/**
+ * @typedef PaginatedTableProps
+ * @prop {string} [className]
+ * @prop {boolean} [hideResultsMessage]
+ * @prop {Function} [resultsMessage]
+ *
+ * Pagination props
+ * @prop {number} [currentPage]
+ * @prop {number} [itemsPerPage]
+ * @prop {Function} [onPageChange]
+ * @prop {number} [totalValues]
+ *
+ * Table props
+ * @prop {object[]} [rows]
+ * @prop {object[]} [columns]
+ * @prop {string} columns.label
+ * @prop {string} [columns.value]
+ * @prop {Function} [columns.component]
+ * @prop {Function} [columns.headerComponent]
+ * @prop {Function} [columns.format]
+ * @prop {boolean} [columns.hidden]
+ * @prop {boolean} [columns.hideLabel]
+ * @prop {boolean} [columns.disabled]
+ * @prop {boolean} [columns.ellipsis]
+ * @prop {string} [columns.width]
+ * @prop {boolean} [columns.disableSorting]
+ * @prop {string[]} [columns.classList]
+ * @prop {string} [columns.fallback]
+ * @prop {boolean} [loading]
+ * @prop {boolean} [responsive]
+ * @prop {boolean} [fixed]
+ * @prop {boolean} [hasClickAction]
+ * @prop {object} [activeSorting]
+ * @prop {string} [activeSorting.key]
+ * @prop {'asc' | 'desc'} [activeSorting.order]
+ * @prop {string} [noDataMessage]
+ * @prop {string} [loadDataMessage]
+ * @prop {string} [noColumnsMessage]
+ * @prop {Function} [orderBy]
+ * @prop {Function} [rowClicked]
+ * @prop {boolean} [striped]
+ * @prop {'primary' | 'secondary'} [type]
+ */
+
+/** @param {PaginatedTableProps} props */
 const PaginatedTable = ({
 	className,
 	currentPage = 1,
diff --git a/src/components/ProgressBar/ProgressBar.jsx b/src/components/ProgressBar/ProgressBar.jsx
index 3d8ea33..4962b7d 100644
--- a/src/components/ProgressBar/ProgressBar.jsx
+++ b/src/components/ProgressBar/ProgressBar.jsx
@@ -2,6 +2,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+/**
+ * @typedef {object} ProgressBarProps
+ * @prop {number | string} [value]
+ * @prop {number | string} [max]
+ */
+
+/** @param {ProgressBarProps} props */
 const ProgressBar = ({
 	value = 0,
 	max = 0,
diff --git a/src/components/ScrollableTabs/ScrollableTabs.jsx b/src/components/ScrollableTabs/ScrollableTabs.jsx
index 1c743de..f0a1cb7 100644
--- a/src/components/ScrollableTabs/ScrollableTabs.jsx
+++ b/src/components/ScrollableTabs/ScrollableTabs.jsx
@@ -9,6 +9,18 @@ import styles from './ScrollableTabs.module.scss';
 
 const cx = classnames.bind(styles);
 
+/**
+ * @typedef ScrollableTabsProps
+ * @prop {string} [className]
+ * @prop {object[]} [items]
+ * @prop {string} item.name
+ * @prop {string} item.target
+ * @prop {boolean} [item.active]
+ * @prop {boolean} [item.disabled]
+ * @prop {Function} [linkProps]
+ */
+
+/** @param {ScrollableTabsProps} props */
 const ScrollableTabs = ({ className, items = [], linkProps = (props) => props }) => {
 	/**
 	 * Hooks
diff --git a/src/components/Status/Status.jsx b/src/components/Status/Status.jsx
index e31107d..11479cf 100644
--- a/src/components/Status/Status.jsx
+++ b/src/components/Status/Status.jsx
@@ -3,6 +3,11 @@ import React from 'react';
 
 import { typeMap } from './Status.helpers';
 
+/**
+ * @typedef {{label: string, type: 'ACTIVE' | 'INACTIVE' | 'ARCHIVED' }} StatusProps
+ */
+
+/** @param {StatusProps} props */
 const Status = ({
 	label,
 	type,
diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx
index 321c5bc..620922b 100644
--- a/src/components/Table/Table.jsx
+++ b/src/components/Table/Table.jsx
@@ -15,6 +15,51 @@ import './Table.scss';
 
 const DND_ITEM_TYPE = 'row';
 
+/**
+ * @typedef TableProps
+ * @prop {string} [dataKey]
+ * @prop {string} [className]
+ * @prop {string} [tableClassName]
+ * @prop {object[]} [rows]
+ *
+ * @prop {object[]} [columns]
+ * @prop {string} columns.label
+ * @prop {string} [columns.value]
+ * @prop {Function} [columns.component]
+ * @prop {Function} [columns.headerComponent]
+ * @prop {Function} [columns.format]
+ * @prop {boolean} [columns.hidden]
+ * @prop {boolean} [columns.hideLabel]
+ * @prop {boolean} [columns.disabled]
+ * @prop {boolean} [columns.ellipsis]
+ * @prop {string} [columns.width]
+ * @prop {boolean} [columns.disableSorting]
+ * @prop {string[]} [columns.classList]
+ * @prop {string} [columns.fallback]
+ *
+ * @prop {[] | object} [expandedRows]
+ * @prop {boolean} [loading]
+ * @prop {boolean} [responsive]
+ * @prop {boolean} [fixed]
+ * @prop {boolean} [hasClickAction]
+ *
+ * @prop {object[]} [activeSorting]
+ * @prop {string} [activeSorting.key]
+ * @prop {'asc' | 'desc'} [activeSorting.order]
+ *
+ * @prop {string} [noDataMessage]
+ * @prop {string} [loadDataMessage]
+ * @prop {string} [noColumnsMessage]
+ * @prop {Function} [orderBy]
+ * @prop {Function} [rowClicked]
+ * @prop {Function} [rowExpansionTemplate]
+ * @prop {boolean} [draggable]
+ * @prop {boolean} [striped]
+ * @prop {'primary' | 'secondary'} [type]
+ * @prop {Function} [moveRow]
+ */
+
+/** @param {TableProps} props */
 const Table = ({
 	dataKey,
 	className,
diff --git a/src/components/Table/TableCell/TableCell.jsx b/src/components/Table/TableCell/TableCell.jsx
index 9d1bf96..c6c4e72 100644
--- a/src/components/Table/TableCell/TableCell.jsx
+++ b/src/components/Table/TableCell/TableCell.jsx
@@ -5,6 +5,20 @@ import React from 'react';
 import { isNil } from '../../../helpers';
 import { EllipsisWithTooltip } from '../../EllipsisWithTooltip';
 
+/**
+ * @typedef TableCellProps
+ * @prop {string} [as]
+ * @prop {string[]} [classList]
+ * @prop {string} [className]
+ * @prop {boolean} [ellipsis]
+ * @prop {Function} [component]
+ * @prop {object} [rowData]
+ * @prop {number} [rowIndex]
+ * @prop {number | string | boolean} [value]
+ * @prop {object[]} [style]
+ */
+
+/** @param {TableCellProps} props */
 const TableCell = ({
 	as: HTMLTag = 'td',
 	classList,
diff --git a/src/components/Table/TableHeader/TableHeader.jsx b/src/components/Table/TableHeader/TableHeader.jsx
index 20b8fae..e713d54 100644
--- a/src/components/Table/TableHeader/TableHeader.jsx
+++ b/src/components/Table/TableHeader/TableHeader.jsx
@@ -3,6 +3,24 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+/**
+ * @typedef TableHeaderProps
+ * @prop {string} [as]
+ * @prop {string[]} [classList]
+ * @prop {string} [className]
+ * @prop {string} label
+ * @prop {string} [value]
+ * @prop {Function} [component]
+ * @prop {boolean} [disableSorting]
+ * @prop {object[]} [activeSorting]
+ * @prop {string} [activeSorting.key]
+ * @prop {'asc' | 'desc'} [activeSorting.order]
+ * @prop {Function} [onSortClick]
+ * @prop {string} [width]
+ * @prop {boolean} [hideLabel]
+ */
+
+/** @param {TableHeaderProps} props */
 const TableHeader = ({
 	activeSorting = { key: '', order: 'asc' },
 	as: HTMLTag = 'th',
diff --git a/src/components/Table/TableLoader/TableLoader.jsx b/src/components/Table/TableLoader/TableLoader.jsx
index b3753e0..5645d9a 100644
--- a/src/components/Table/TableLoader/TableLoader.jsx
+++ b/src/components/Table/TableLoader/TableLoader.jsx
@@ -4,6 +4,12 @@ import React from 'react';
 
 import '../Table.scss';
 
+/**
+ * @typedef {object} TableLoaderProp
+ * @prop {string} [loadDataMessage]
+ */
+
+/** @param {TableLoaderProp} props */
 const TableLoader = ({
 	loadDataMessage,
 }) => (
diff --git a/src/components/Table/TablePlaceholder/TablePlaceholder.jsx b/src/components/Table/TablePlaceholder/TablePlaceholder.jsx
index 57ad733..aa469e7 100644
--- a/src/components/Table/TablePlaceholder/TablePlaceholder.jsx
+++ b/src/components/Table/TablePlaceholder/TablePlaceholder.jsx
@@ -4,6 +4,16 @@ import React from 'react';
 
 import '../Table.scss';
 
+/**
+ * @typedef TablePlaceholderProps
+ * @prop {boolean} hasCols
+ * @prop {boolean} hasData
+ * @prop {string} [className]
+ * @prop {string} [noColumnsMessage]
+ * @prop {string} [noDataMessage]
+ */
+
+/** @param {TablePlaceholderProps} props */
 const TablePlaceholder = ({
 	hasCols,
 	hasData,
diff --git a/src/components/Table/TableRow/TableRow.jsx b/src/components/Table/TableRow/TableRow.jsx
index a7faef3..055a8d5 100644
--- a/src/components/Table/TableRow/TableRow.jsx
+++ b/src/components/Table/TableRow/TableRow.jsx
@@ -2,6 +2,20 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+/**
+ * @typedef TableRowProps
+ * @prop {React.ReactNode} children
+ * @prop {string} [className]
+ * @prop {boolean} [collapseOnDrag]
+ * @prop {boolean} [hasClickAction]
+ * @prop {boolean} [isDragging]
+ * @prop {boolean} [isLast]
+ * @prop {number} [level]
+ * @prop {Function} [onClick]
+ * @prop {Function | {current: Element}} [trRef]
+ */
+
+/** @param {TableRowProps} props */
 const TableRow = ({
 	children,
 	className,
diff --git a/src/components/Timepicker/Timepicker.jsx b/src/components/Timepicker/Timepicker.jsx
index eb9b319..d515bd4 100644
--- a/src/components/Timepicker/Timepicker.jsx
+++ b/src/components/Timepicker/Timepicker.jsx
@@ -11,6 +11,29 @@ import {
 } from './Timepicker.helpers';
 import './Timepicker.scss';
 
+/**
+ * @typedef TimePickerProps
+ * @prop {string} id
+ * @prop {string} [className]
+ * @prop {boolean} [required]
+ * @prop {boolean} [disabled]
+ * @prop {number | string} [value]
+ * @prop {string} [hourLabel]
+ * @prop {string} [minuteLabel]
+ * @prop {string} [secondLabel]
+ * @prop {string} [millisecondLabel]
+ * @prop {string} [hourPlaceholder]
+ * @prop {string} [minutePlaceholder]
+ * @prop {string} [secondPlaceholder]
+ * @prop {string} [millisecondPlaceholder]
+ * @prop {number} [hourStep]
+ * @prop {number} [minuteStep]
+ * @prop {number} [secondStep]
+ * @prop {number} [millisecondStep]
+ * @prop {Function} [onChange]
+ */
+
+/** @param {TimePickerProps} props */
 const Timepicker = ({
 	id,
 	className,
diff --git a/src/components/Tooltip/Tooltip.jsx b/src/components/Tooltip/Tooltip.jsx
index 8cb90fa..ef6f2cc 100644
--- a/src/components/Tooltip/Tooltip.jsx
+++ b/src/components/Tooltip/Tooltip.jsx
@@ -13,6 +13,18 @@ import { usePopper } from 'react-popper';
 import { TooltipTypeMap } from './Tooltip.const';
 import './Tooltip.scss';
 
+/**
+ * @typedef TooltipProps
+ * @prop {React.ReactNode[] | React.ReactNode} children
+ * @prop {TooltipTypeMap.DEFAULT | TooltipTypeMap.PRIMARY | TooltipTypeMap.SECONDARY} [type]
+ * @prop {Function | {current: Element}} targetRef
+ * @prop {boolean} isVisible
+ * @prop {boolean} [disablePortal]
+ * @prop {React.ReactNode} [container]
+ * @prop {string} [placement]
+ */
+
+/** @param {TooltipProps} props */
 const Tooltip = ({
 	children,
 	targetRef,