diff --git a/docs/components/Props.js b/docs/components/Props.js
index 775a87303d..22ec913e56 100644
--- a/docs/components/Props.js
+++ b/docs/components/Props.js
@@ -12,16 +12,24 @@ import { CheckIcon } from '@welcome-ui/icons'
 
 import * as TYPES from '../../utils/propTypes'
 
-const removeQuote = str => str?.replace(/'/g, '')
+const removeQuote = str => str?.toString()?.replace(/'/g, '')
 
 const isArray = Array.isArray
 
-const Type = ({ type }) => {
+const reactTypes = ['ElementType<any>']
+
+function Type({ type }) {
   if (!type) {
     return null
   }
   const { name, raw, value } = type
 
+  if (reactTypes.includes(raw)) {
+    return `React.${raw}`
+  }
+
+  if (raw === 'boolean') return 'Boolean'
+
   // Enum
   if (name === 'enum') {
     let values
@@ -58,11 +66,13 @@ const Type = ({ type }) => {
   return name
 }
 
-export const Props = ({ propTypes }) => {
+export function Props({ propTypes }) {
   if (!propTypes) {
-    return 'No propTypes specified'
+    return 'No props specified'
   }
 
+  const { props } = propTypes
+
   return (
     <Card>
       <Card.Body color="dark.900" padding="xl">
@@ -76,8 +86,8 @@ export const Props = ({ propTypes }) => {
             </Table.Tr>
           </Table.Thead>
           <Table.Tbody>
-            {Object.keys(propTypes).map(key => {
-              const { defaultValue, description, required, type } = propTypes[key]
+            {Object.keys(props).map(key => {
+              const { defaultValue, description, required, type } = props[key]
 
               if (!type) {
                 return null
diff --git a/docs/getStaticProps.js b/docs/getStaticProps.js
index 48eba0ff3d..caa7f799a3 100644
--- a/docs/getStaticProps.js
+++ b/docs/getStaticProps.js
@@ -1,57 +1,28 @@
-const isComponentFile = file => {
-  if (file === 'index.js') {
-    return true
-  }
-
-  const [name, extension] = file.split('.')
-  const firstLetter = name[0]
-
-  // Components start with capital letter e.g. Title.js
-  if (extension === 'js' && firstLetter === firstLetter.toUpperCase()) {
-    return true
-  }
-
-  return false
-}
+const path = require('path')
+const fs = require('fs/promises')
 
 export async function getStaticProps() {
-  // Only import on server
-  const reactDocs = require('react-docgen')
-  const path = require('path')
-  const fs = require('fs')
-
-  let propTypes = {}
-
-  // Use react-docgen to get proptypes
-  const cwd = process.cwd()
-  const packages = fs.readdirSync(path.join(cwd, 'packages'))
-
-  // Loop through all packages…
-  packages.forEach(packageName => {
-    const componentFiles = fs
-      .readdirSync(path.join(cwd, `packages/${packageName}`))
-      .filter(isComponentFile)
-
-    // Loop through all component files for a package and add to prepped propTypes object
-    componentFiles.forEach(file => {
-      const content = fs.readFileSync(path.join(cwd, `packages/${packageName}/${file}`), 'utf8')
-      try {
-        const { props } = reactDocs.parse(content)
-        if (!props) {
-          return
-        }
-
-        let key = packageName
-        if (file !== 'index.js') {
-          const [filename] = file.split('.')
-          key = `${key}.${filename}`
-        }
-        propTypes[key] = props
-      } catch (e) {
-        console.error({ packageName, file, e: e.message })
-        return
-      }
-    })
+  const propTypes = {}
+  const packages = await fs.readdir(path.join(process.cwd(), 'docs', 'pages', 'components'))
+
+  packages.forEach(file => {
+    const packageName = file.replace('.mdx', '')
+
+    try {
+      const packageProps = require(`@welcome-ui/${packageName}/dist/${packageName}.doc.json`)
+
+      Object.keys(packageProps).forEach(key => {
+        propTypes[key] = packageProps[key]
+      })
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(`@welcome-ui/${packageName}/dist/${packageName}.doc.json is missing`)
+    }
   })
-  return { props: { propTypes } }
+
+  return {
+    props: {
+      propTypes,
+    },
+  }
 }
diff --git a/docs/pages/components/badge.mdx b/docs/pages/components/badge.mdx
index a75cbe6df1..40624c9956 100644
--- a/docs/pages/components/badge.mdx
+++ b/docs/pages/components/badge.mdx
@@ -1,3 +1,5 @@
+export { getStaticProps } from '../../getStaticProps'
+
 import {
   component,
   dependencies,
@@ -27,6 +29,10 @@ Badge is the [Tag](/components/tag) component with small size.
 <Badge variant="primary">New</Badge>
 ```
 
+## Properties
+
+<props propTypes={props.propTypes.Badge} />
+
 ## Dependencies
 
 <dependencies dependencies={dependencies} />
diff --git a/docs/pages/components/radio-group.mdx b/docs/pages/components/radio-group.mdx
index 116af403cc..9b2a0a4942 100644
--- a/docs/pages/components/radio-group.mdx
+++ b/docs/pages/components/radio-group.mdx
@@ -76,7 +76,7 @@ function () {
 
 ## Properties
 
-<props propTypes={props.propTypes.Radio} />
+<props propTypes={props.propTypes.RadioGroup} />
 
 ## Dependencies
 
diff --git a/docs/pages/components/toggle.mdx b/docs/pages/components/toggle.mdx
index 9143d8f050..4ab0e45a7d 100644
--- a/docs/pages/components/toggle.mdx
+++ b/docs/pages/components/toggle.mdx
@@ -74,7 +74,7 @@ function () {
 
 ## Properties
 
-<props propTypes={props.propTypes.Checkbox} />
+<props propTypes={props.propTypes.Toggle} />
 
 ## Dependencies
 
diff --git a/docs/pages/installation.mdx b/docs/pages/installation.mdx
index 3338a9dab7..33dacaa141 100644
--- a/docs/pages/installation.mdx
+++ b/docs/pages/installation.mdx
@@ -40,6 +40,8 @@ export default function Root() {
 
 ### WuiProvider Props
 
+<!-- todo -->
+<!--
 <props
   propTypes={{
     children: {
@@ -80,6 +82,7 @@ export default function Root() {
     },
   }}
 />
+-->
 
 ## Hide Focus Ring
 
diff --git a/package.json b/package.json
index 8b2ad47187..f36c20eef6 100644
--- a/package.json
+++ b/package.json
@@ -19,10 +19,11 @@
     "webfont:build": "node -r esm scripts/webfont-build.js --force && yarn build:packages --scope @welcome-ui/icons.font",
     "webfont:deploy": "./scripts/webfont-deploy.sh",
     "pre-build": "yarn icons:collect",
-    "build": "yarn webfont:build && yarn build:core && yarn build:packages && yarn build:types",
+    "build": "yarn webfont:build && yarn build:core && yarn build:packages && yarn build:types && yarn build:docs",
     "build:packages": "lerna run build --ignore docs --ignore @welcome-ui/core",
     "build:core": "./scripts/core.sh",
-    "build:types": "lerna run types --scope @welcome-ui/core && lerna run types --ignore @welcome-ui/core",
+    "build:types": "lerna run types",
+    "build:docs": "lerna run doc --concurrency 2",
     "watch": "onchange 'packages/**/*.ts*' -e '**/dist/**' -- node -r esm scripts/watch.js {{changed}}",
     "release:publish": "yarn lerna publish --conventional-commits --no-private",
     "release:prerelease": "yarn -s check:ssh && yarn build && yarn lerna publish --conventional-prerelease --no-private --pre-dist-tag next --yes || yarn -s check:ssh-error",
@@ -85,19 +86,19 @@
     "@rollup/plugin-replace": "^2.3.4",
     "@testing-library/dom": "7.29.4",
     "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/react": "^11.2.3",
+    "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/user-event": "12.6.0",
     "@types/emoji-mart": "3.0.8",
-    "@types/lodash.range": "^3.2.6",
-    "@types/ramda": "^0.27.44",
-    "@types/react-datepicker": "^4.3.2",
-    "@types/react": "^17.0.11",
-    "@types/styled-components": "^5.1.11",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.escaperegexp": "^4.1.6",
     "@types/lodash.groupby": "^4.6.6",
+    "@types/lodash.range": "^3.2.6",
+    "@types/ramda": "^0.27.44",
+    "@types/react": "^17.0.11",
+    "@types/react-datepicker": "^4.3.2",
     "@types/react-window": "^1.8.5",
+    "@types/styled-components": "^5.1.11",
     "@typescript-eslint/eslint-plugin": "^4.28.2",
     "@typescript-eslint/parser": "^4.28.2",
     "@xstyled/styled-components": "^3.0.3",
@@ -112,47 +113,48 @@
     "conventional-github-releaser": "^3.1.3",
     "date-fns": "^2.19.0",
     "depcheck": "=0.9.1",
+    "eslint": "^7.28.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-sort-destructure-keys": "^1.3.3",
-    "eslint": "^7.28.0",
     "esm": "^3.2.25",
     "final-form": "^4.20.2",
     "husky": "=3.1.0",
-    "jest-styled-components": "7.0.3",
     "jest": "26.6.3",
-    "lerna-update-wizard": "^0.17.8",
+    "jest-styled-components": "7.0.3",
     "lerna": "^3.22.1",
+    "lerna-update-wizard": "^0.17.8",
     "lodash.difference": "^4.5.0",
     "minimist": "1.2.5",
     "netlify-cli": "^2.59.1",
     "onchange": "^7.0.2",
     "prettier": "^2.4.0",
     "prop-types": "^15.7.2",
+    "react": "^17.0.1",
+    "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.1",
     "react-final-form": "^6.5.2",
     "react-helmet": "^5.2.1",
     "react-live": "^2.2.1",
     "react-router-dom": "=5.1.2",
-    "react": "^17.0.1",
     "rimraf": "^3.0.2",
+    "rollup": "2.51.1",
     "rollup-plugin-babel": "=4.3.2",
     "rollup-plugin-node-resolve": "^5.0.1",
     "rollup-plugin-postcss": "=2.0.3",
-    "rollup": "2.51.1",
     "standard-version": "^6.0.1",
     "style-loader": "=0.23.1",
     "styled-components": "^5.3.0",
+    "stylelint": "=12.0.0",
     "stylelint-config-recommended": "=3.0.0",
     "stylelint-config-styled-components": "=0.1.1",
     "stylelint-processor-styled-components": "=1.9.0",
-    "stylelint": "=12.0.0",
     "surge": "=0.21.3",
     "svgo": "^2.2.0",
     "typescript": "^4.4.3",
diff --git a/packages/Accordion/package.json b/packages/Accordion/package.json
index 93a576040e..f8fd570e8a 100644
--- a/packages/Accordion/package.json
+++ b/packages/Accordion/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Accordion"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Alert/Title.tsx b/packages/Alert/Title.tsx
index 8852394f5e..4862ac2ce3 100644
--- a/packages/Alert/Title.tsx
+++ b/packages/Alert/Title.tsx
@@ -8,6 +8,9 @@ import { AlertOptions } from '.'
 
 export type AlertTitleProps = CreateWuiProps<'h5', VariantIconOptions & AlertOptions>
 
+/**
+ * @name Alert.Title
+ */
 export const Title: React.FC<AlertTitleProps> = ({
   children,
   dataTestId,
diff --git a/packages/Alert/package.json b/packages/Alert/package.json
index 3f5d6f43a2..55b03f8f18 100644
--- a/packages/Alert/package.json
+++ b/packages/Alert/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Alert"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Avatar/package.json b/packages/Avatar/package.json
index 2d63cd7905..116668e8ee 100644
--- a/packages/Avatar/package.json
+++ b/packages/Avatar/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Avatar"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Badge/index.tsx b/packages/Badge/index.tsx
index 71dda71f4b..c1576c1679 100644
--- a/packages/Badge/index.tsx
+++ b/packages/Badge/index.tsx
@@ -2,7 +2,8 @@ import React from 'react'
 import { Tag, TagOptions } from '@welcome-ui/tag'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 
-export type BadgeProps = CreateWuiProps<'div', Omit<TagOptions, 'size'>>
+export type BadgeOptions = Omit<TagOptions, 'size'>
+export type BadgeProps = CreateWuiProps<'div', BadgeOptions>
 
 export const Badge = forwardRef<'div', BadgeProps>((props, ref) => (
   <Tag ref={ref} size="sm" {...props} />
diff --git a/packages/Badge/package.json b/packages/Badge/package.json
index b36d547351..7376562b36 100644
--- a/packages/Badge/package.json
+++ b/packages/Badge/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Badge"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Box/package.json b/packages/Box/package.json
index 6002d87a06..599fc81c9b 100644
--- a/packages/Box/package.json
+++ b/packages/Box/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Box"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Breadcrumb/Item.tsx b/packages/Breadcrumb/Item.tsx
index 3491f1cbb5..f09218d645 100644
--- a/packages/Breadcrumb/Item.tsx
+++ b/packages/Breadcrumb/Item.tsx
@@ -11,6 +11,9 @@ export interface ItemOptions {
 
 export type ItemProps = CreateWuiProps<'li', ItemOptions>
 
+/**
+ * @name Breadcrumb.Item
+ */
 export const Item: React.FC<ItemProps> = ({ children, dataTestId, separator, ...rest }) => {
   return (
     <Box
diff --git a/packages/Breadcrumb/package.json b/packages/Breadcrumb/package.json
index 9ab14f6690..186eda08f5 100644
--- a/packages/Breadcrumb/package.json
+++ b/packages/Breadcrumb/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Breadcrumb"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Button/index.tsx b/packages/Button/index.tsx
index 71f4099351..3407846c6d 100644
--- a/packages/Button/index.tsx
+++ b/packages/Button/index.tsx
@@ -30,6 +30,9 @@ export interface ButtonOptions {
 
 export type ButtonProps = CreateWuiProps<'button', ButtonOptions>
 
+/**
+ * @tag button
+ */
 export const Button = forwardRef<'button', ButtonProps>(
   ({ children, dataTestId, disabled, size = 'md', variant = 'primary', ...rest }, ref) => (
     <S.Button
diff --git a/packages/Button/package.json b/packages/Button/package.json
index 31ab4cbf11..72a264172b 100644
--- a/packages/Button/package.json
+++ b/packages/Button/package.json
@@ -10,7 +10,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Button"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Button/styles.ts b/packages/Button/styles.ts
index bb04904a1d..155d553020 100644
--- a/packages/Button/styles.ts
+++ b/packages/Button/styles.ts
@@ -1,12 +1,12 @@
 import styled, { css } from '@xstyled/styled-components'
 import { system, th } from '@xstyled/system'
 import { Button as ReakitButton } from 'reakit/Button'
-import { shouldForwardProp, WuiProps } from '@welcome-ui/system'
+import { shouldForwardProp } from '@welcome-ui/system'
 import { hideFocusRingsDataAttribute } from '@welcome-ui/utils'
 
-import { Shape, Size, Variant } from './index'
+import { ButtonOptions } from './index'
 
-const shapeStyles = (size: Size, shape = 'square') => css`
+const shapeStyles = (size: ButtonOptions['size'], shape: ButtonOptions['shape'] = 'square') => css`
   width: ${th(`buttons.sizes.${size}.height`)};
   padding: 0;
   ${shape === 'circle' &&
@@ -15,16 +15,7 @@ const shapeStyles = (size: Size, shape = 'square') => css`
   `};
 `
 
-export interface StyledButtonProps {
-  disabled?: boolean
-  shape?: Shape
-  size?: Size
-  variant?: Variant
-}
-
-export const Button = styled(ReakitButton).withConfig({ shouldForwardProp })<
-  StyledButtonProps & WuiProps
->(
+export const Button = styled(ReakitButton).withConfig({ shouldForwardProp })<ButtonOptions>(
   ({ disabled, shape, size = 'md', variant }) => css`
     ${th(`buttons.${variant}`)};
     position: relative;
diff --git a/packages/Card/Cover.tsx b/packages/Card/Cover.tsx
index f00a7ac880..81b22d520d 100644
--- a/packages/Card/Cover.tsx
+++ b/packages/Card/Cover.tsx
@@ -9,6 +9,9 @@ export interface CoverOptions {
 
 export type CoverProps = CoverOptions & ShapeProps
 
+/**
+ * @name Card.Cover
+ */
 export const Cover: React.FC<CoverProps> = ({ src, ...rest }) => (
   <S.Cover {...rest}>
     <img src={src} />
diff --git a/packages/Card/package.json b/packages/Card/package.json
index 7c03c4418b..6bdf319eef 100644
--- a/packages/Card/package.json
+++ b/packages/Card/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Card"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Checkbox/index.tsx b/packages/Checkbox/index.tsx
index 08b9f3794e..5f1a57640e 100644
--- a/packages/Checkbox/index.tsx
+++ b/packages/Checkbox/index.tsx
@@ -4,13 +4,13 @@ import { DefaultFieldStylesProps } from '@welcome-ui/utils'
 
 import * as S from './styles'
 
-export type CheckboxOptions = {
+export interface CheckboxOptions extends DefaultFieldStylesProps {
   checked?: boolean
   Component?: React.ElementType
   disabled?: boolean
   name?: string
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-} & DefaultFieldStylesProps
+}
 
 export type CheckboxProps = CreateWuiProps<'input', CheckboxOptions>
 
diff --git a/packages/Checkbox/package.json b/packages/Checkbox/package.json
index d3ae914bf8..e0ddb88a9e 100644
--- a/packages/Checkbox/package.json
+++ b/packages/Checkbox/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Checkbox"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/ClearButton/package.json b/packages/ClearButton/package.json
index e7724a4ec7..8ce4e53f49 100644
--- a/packages/ClearButton/package.json
+++ b/packages/ClearButton/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name ClearButton"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/CloseButton/package.json b/packages/CloseButton/package.json
index e5c84094e8..12b21f6b71 100644
--- a/packages/CloseButton/package.json
+++ b/packages/CloseButton/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name CloseButton"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/DateTimePickerCommon/package.json b/packages/DateTimePickerCommon/package.json
index 747df4d727..5615e010c8 100644
--- a/packages/DateTimePickerCommon/package.json
+++ b/packages/DateTimePickerCommon/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name DateTimePicker"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Drawer/index.tsx b/packages/Drawer/index.tsx
index 3f751512a5..d0dcc62097 100644
--- a/packages/Drawer/index.tsx
+++ b/packages/Drawer/index.tsx
@@ -57,6 +57,9 @@ export type DrawerBackdropProps = DrawerBackdropOptions & DialogBackdropProps
 
 // Needed to allow to style the backdrop
 // see: https://reakit.io/docs/styling/#css-in-js
+/**
+ * @name Drawer.Backdrop
+ */
 export const DrawerBackdrop: React.FC<DrawerBackdropProps> = ({
   children,
   hideOnClickOutside = true,
diff --git a/packages/Drawer/package.json b/packages/Drawer/package.json
index 6d3e04e927..15f58f5185 100644
--- a/packages/Drawer/package.json
+++ b/packages/Drawer/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Drawer"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/DropdownMenu/package.json b/packages/DropdownMenu/package.json
index d0a41ed2e2..5aa65d8a6d 100644
--- a/packages/DropdownMenu/package.json
+++ b/packages/DropdownMenu/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name DropdownMenu"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Emoji/package.json b/packages/Emoji/package.json
index ff7dd13b80..71201a3a92 100644
--- a/packages/Emoji/package.json
+++ b/packages/Emoji/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Emoji"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/EmojiPicker/package.json b/packages/EmojiPicker/package.json
index 4df31d2c9e..d3fa5a2749 100644
--- a/packages/EmojiPicker/package.json
+++ b/packages/EmojiPicker/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name EmojiPicker"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Field/index.tsx b/packages/Field/index.tsx
index 8cbebed664..efc9734819 100644
--- a/packages/Field/index.tsx
+++ b/packages/Field/index.tsx
@@ -8,7 +8,7 @@ import { RowContainer } from './layout'
 import * as S from './styles'
 import { generateRandomId, getBaseType, getVariant } from './utils'
 
-type FieldOptions = {
+export interface FieldOptions {
   children: JSX.Element
   disabled?: boolean
   disabledIcon?: JSX.Element
@@ -19,7 +19,7 @@ type FieldOptions = {
   warning?: string | JSX.Element
 }
 
-type FieldProps = CreateWuiProps<'div', FieldOptions>
+export type FieldProps = CreateWuiProps<'div', FieldOptions>
 
 export const Field = forwardRef<'div', FieldProps>(
   (
diff --git a/packages/Field/package.json b/packages/Field/package.json
index bd0d003f53..21f7257cbd 100644
--- a/packages/Field/package.json
+++ b/packages/Field/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Field"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/FieldGroup/package.json b/packages/FieldGroup/package.json
index 28a5294fda..0291279aa7 100644
--- a/packages/FieldGroup/package.json
+++ b/packages/FieldGroup/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name FieldGroup"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/FileDrop/package.json b/packages/FileDrop/package.json
index e29bf0975b..3c79d32c03 100644
--- a/packages/FileDrop/package.json
+++ b/packages/FileDrop/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name FileDrop"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/FileUpload/package.json b/packages/FileUpload/package.json
index c8f96e7e7b..f802013d34 100644
--- a/packages/FileUpload/package.json
+++ b/packages/FileUpload/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name FileUpload"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Group/package.json b/packages/Group/package.json
index 9234aaceab..ddfccb0296 100644
--- a/packages/Group/package.json
+++ b/packages/Group/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Group"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Hint/package.json b/packages/Hint/package.json
index 59cacca9a4..3eae4b44ae 100644
--- a/packages/Hint/package.json
+++ b/packages/Hint/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Hint"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Icon/package.json b/packages/Icon/package.json
index cb4fa0777d..0ef313bd88 100644
--- a/packages/Icon/package.json
+++ b/packages/Icon/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Icon"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/InputText/index.tsx b/packages/InputText/index.tsx
index 84ee7866a7..eb523ea838 100644
--- a/packages/InputText/index.tsx
+++ b/packages/InputText/index.tsx
@@ -6,7 +6,7 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 
 import * as S from './styles'
 
-export type InputTextOptions = {
+export interface InputTextOptions extends DefaultFieldStylesProps {
   autoFocus?: boolean
   disabled?: boolean
   icon?: JSX.Element
@@ -20,7 +20,7 @@ export type InputTextOptions = {
   placeholder?: string
   type?: string
   value?: string
-} & DefaultFieldStylesProps
+}
 
 export type InputTextProps = CreateWuiProps<'input', InputTextOptions>
 
diff --git a/packages/InputText/package.json b/packages/InputText/package.json
index 6edd41a376..43cf192d0a 100644
--- a/packages/InputText/package.json
+++ b/packages/InputText/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name InputText"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Label/package.json b/packages/Label/package.json
index 6625feec3e..def95eb485 100644
--- a/packages/Label/package.json
+++ b/packages/Label/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Label"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Link/package.json b/packages/Link/package.json
index 95ec944254..1d0ca17848 100644
--- a/packages/Link/package.json
+++ b/packages/Link/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Link"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Loader/package.json b/packages/Loader/package.json
index 7194c37c74..9ba1154313 100644
--- a/packages/Loader/package.json
+++ b/packages/Loader/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Loader"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/MarkdownEditor/index.tsx b/packages/MarkdownEditor/index.tsx
index 1ee24036b5..4feabcb69f 100644
--- a/packages/MarkdownEditor/index.tsx
+++ b/packages/MarkdownEditor/index.tsx
@@ -27,7 +27,7 @@ interface Actions {
   [key: string]: Action
 }
 export type Variant = 'error' | 'info' | 'success' | 'valid' | 'warning'
-export type MarkdownEditorOptions = {
+export interface MarkdownEditorOptions extends DefaultFieldStylesProps {
   actions?: React.ReactElement
   autoFocus?: SimpleMDEEditorProps['options']['autofocus']
   disabled?: boolean
@@ -39,7 +39,7 @@ export type MarkdownEditorOptions = {
   placeholder: SimpleMDEEditorProps['options']['placeholder']
   toolbar?: DefaultToolbar
   value: string | null
-} & DefaultFieldStylesProps
+}
 
 export type MarkdownEditorProps = CreateWuiProps<
   'div',
diff --git a/packages/MarkdownEditor/package.json b/packages/MarkdownEditor/package.json
index 567bf50428..f49c082b85 100644
--- a/packages/MarkdownEditor/package.json
+++ b/packages/MarkdownEditor/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name MarkdownEditor"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Modal/package.json b/packages/Modal/package.json
index 739cd7ffdc..9b815026e6 100644
--- a/packages/Modal/package.json
+++ b/packages/Modal/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Modal"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Pagination/package.json b/packages/Pagination/package.json
index 3479e66904..934a9d2984 100644
--- a/packages/Pagination/package.json
+++ b/packages/Pagination/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Pagination"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/PasswordInput/package.json b/packages/PasswordInput/package.json
index 479dc50dc6..880fd9ba39 100644
--- a/packages/PasswordInput/package.json
+++ b/packages/PasswordInput/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name PasswordInput"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Picker/package.json b/packages/Picker/package.json
index 1ba965aa0d..b0e6105640 100644
--- a/packages/Picker/package.json
+++ b/packages/Picker/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Picker"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Popover/package.json b/packages/Popover/package.json
index aee34253d9..d14ce1d596 100644
--- a/packages/Popover/package.json
+++ b/packages/Popover/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Popover"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Radio/package.json b/packages/Radio/package.json
index 90cb52f57a..c10e4f0284 100644
--- a/packages/Radio/package.json
+++ b/packages/Radio/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Radio"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/RadioGroup/package.json b/packages/RadioGroup/package.json
index 6760136df5..e69787de5d 100644
--- a/packages/RadioGroup/package.json
+++ b/packages/RadioGroup/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name RadioGroup"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/RadioTab/index.tsx b/packages/RadioTab/index.tsx
index c5eb08f790..5c86a8edd9 100644
--- a/packages/RadioTab/index.tsx
+++ b/packages/RadioTab/index.tsx
@@ -5,14 +5,14 @@ import { RadioProps } from 'reakit/Radio'
 
 import * as S from './styles'
 
-export type RadioTabsOptions = {
+export interface RadioTabsOptions extends DefaultFieldStylesProps {
   checked?: boolean
   disabled?: boolean
   disabledIcon?: React.ReactElement
   label: React.ReactElement
   onChange?: (event: React.MouseEvent<HTMLLabelElement>) => void
   onClick?: (event: React.MouseEvent<HTMLLabelElement>) => void
-} & DefaultFieldStylesProps
+}
 
 export type RadioTabsProps = CreateWuiProps<
   'input',
diff --git a/packages/RadioTab/package.json b/packages/RadioTab/package.json
index fa314d329a..c49a2ced5f 100644
--- a/packages/RadioTab/package.json
+++ b/packages/RadioTab/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name RadioTab"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Search/index.tsx b/packages/Search/index.tsx
index e1832aa0aa..3f00779e6b 100644
--- a/packages/Search/index.tsx
+++ b/packages/Search/index.tsx
@@ -12,7 +12,7 @@ export type Option = { label: string; value: string }
 export type OptionGroup = { label: string; options: Option[] }
 type Item = Option | OptionGroup | string | unknown
 
-export type SearchOptions = {
+export interface SearchOptions extends DefaultFieldStylesProps {
   groupsEnabled?: boolean
   icon?: React.ReactElement
   itemToString: (item: Item) => string
@@ -23,7 +23,7 @@ export type SearchOptions = {
   search: (query: string) => Promise<unknown>
   throttle?: number
   value?: Item
-} & DefaultFieldStylesProps
+}
 
 export type SearchProps = CreateWuiProps<
   'input',
diff --git a/packages/Search/package.json b/packages/Search/package.json
index b0ab6136bc..c8f11029d8 100644
--- a/packages/Search/package.json
+++ b/packages/Search/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Search"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Select/index.tsx b/packages/Select/index.tsx
index 743ba27b86..c7c8452886 100644
--- a/packages/Select/index.tsx
+++ b/packages/Select/index.tsx
@@ -31,7 +31,7 @@ export type OptionItem = Option | OptionGroup
 export type Options = Array<Option | OptionGroup>
 export type SelectValue = string | number | string[] | Option | (string | Option)[]
 
-export type SelectOptions = {
+export interface SelectOptions extends DefaultFieldStylesProps {
   autoComplete?: string
   autoFocus?: boolean
   disabled?: boolean
@@ -57,7 +57,7 @@ export type SelectOptions = {
   disableCloseOnSelect?: boolean
   groupsEnabled?: boolean
   renderGroupHeader?: (option: OptionGroup) => void
-} & DefaultFieldStylesProps
+}
 export type SelectProps = CreateWuiProps<
   'input',
   SelectOptions & Omit<DownshiftProps<Option>, keyof SelectOptions | 'children'>
diff --git a/packages/Select/package.json b/packages/Select/package.json
index 659109ab07..2f690ae3c8 100644
--- a/packages/Select/package.json
+++ b/packages/Select/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Select"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Shape/package.json b/packages/Shape/package.json
index 13d7c4a3e2..746c56569b 100644
--- a/packages/Shape/package.json
+++ b/packages/Shape/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Shape"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Stack/package.json b/packages/Stack/package.json
index 9cf3226ecd..3d6090546d 100644
--- a/packages/Stack/package.json
+++ b/packages/Stack/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Stack"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Swiper/package.json b/packages/Swiper/package.json
index c4d2d01f30..78d453d94d 100644
--- a/packages/Swiper/package.json
+++ b/packages/Swiper/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Swiper"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Table/index.tsx b/packages/Table/index.tsx
index 6185c67389..8db6092109 100644
--- a/packages/Table/index.tsx
+++ b/packages/Table/index.tsx
@@ -4,7 +4,9 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 import * as S from './styles'
 
 export interface TableOptions {
-  /* Add space on first and last child on the Td and Th component */
+  /**
+   * Add space on first and last child on the Td and Th component
+   */
   indent?: boolean
 }
 
diff --git a/packages/Table/package.json b/packages/Table/package.json
index c3a0616251..4b0b8d7be6 100644
--- a/packages/Table/package.json
+++ b/packages/Table/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Table"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Tabs/TabList.tsx b/packages/Tabs/TabList.tsx
index 6c6a5dec7e..d11b288688 100644
--- a/packages/Tabs/TabList.tsx
+++ b/packages/Tabs/TabList.tsx
@@ -26,11 +26,13 @@ function useTrackActiveTabs(
   return [tabs, activeTab]
 }
 
-export type TabListProps = CreateWuiProps<
-  'div',
-  Pick<TabStateReturn, 'orientation' | 'selectedId'> & ReakitTabListOptions
->
+export type TabListOptions = Pick<TabStateReturn, 'orientation' | 'selectedId'> &
+  ReakitTabListOptions
+export type TabListProps = CreateWuiProps<'div', TabListOptions>
 
+/**
+ * @name Tabs.TabList
+ */
 export const TabList = forwardRef<HTMLDivElement, TabListProps>((props, ref) => {
   const { as, children, orientation, ...rest } = props
   const listRef = useRef()
diff --git a/packages/Tabs/TabPanel.tsx b/packages/Tabs/TabPanel.tsx
index b4b37ee2e8..697a3c1d94 100644
--- a/packages/Tabs/TabPanel.tsx
+++ b/packages/Tabs/TabPanel.tsx
@@ -8,11 +8,12 @@ import { CreateWuiProps } from '@welcome-ui/system'
 
 import * as S from './styles'
 
-export type TabPanelProps = CreateWuiProps<
-  typeof ReakitTabPanel,
-  Pick<TabStateReturn, 'orientation'> & ReakitTabOptions
->
+export type TabPanelOptions = Pick<TabStateReturn, 'orientation'> & ReakitTabOptions
+export type TabPanelProps = CreateWuiProps<typeof ReakitTabPanel, TabPanelOptions>
 
+/**
+ * @name Tabs.TabPanel
+ */
 export const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {
   const { as, children, orientation, tabId, ...rest } = props
   return (
diff --git a/packages/Tabs/index.tsx b/packages/Tabs/index.tsx
index 8fbe3de260..ce4b0d65f9 100644
--- a/packages/Tabs/index.tsx
+++ b/packages/Tabs/index.tsx
@@ -6,8 +6,12 @@ import { TabList } from './TabList'
 import { TabPanel } from './TabPanel'
 import * as S from './styles'
 
-export type TabProps = CreateWuiProps<'button', ReakitTabOptions>
+export type TabOptions = ReakitTabOptions
+export type TabProps = CreateWuiProps<'button', TabOptions>
 
+/**
+ * @name Tabs
+ */
 export const TabComponent = forwardRef<'button', TabProps>((props, ref) => {
   const { as, children, id, ...rest } = props
   return (
diff --git a/packages/Tabs/package.json b/packages/Tabs/package.json
index 4cdf827e28..657499bbdf 100644
--- a/packages/Tabs/package.json
+++ b/packages/Tabs/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Tabs"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Tag/package.json b/packages/Tag/package.json
index 040124ed75..81af1b7f14 100644
--- a/packages/Tag/package.json
+++ b/packages/Tag/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Tag"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Text/package.json b/packages/Text/package.json
index f5c34744d7..0fc6a3f017 100644
--- a/packages/Text/package.json
+++ b/packages/Text/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Text"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Textarea/index.tsx b/packages/Textarea/index.tsx
index edfee26429..c1114e4fd2 100644
--- a/packages/Textarea/index.tsx
+++ b/packages/Textarea/index.tsx
@@ -4,7 +4,7 @@ import { DefaultFieldStylesProps } from '@welcome-ui/utils'
 
 import * as S from './styles'
 
-export type TextareaOptions = {
+export interface TextareaOptions extends DefaultFieldStylesProps {
   autoFocus?: boolean
   disabled?: boolean
   maxLength?: number
@@ -16,7 +16,7 @@ export type TextareaOptions = {
   onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
   placeholder?: string
   value: string
-} & DefaultFieldStylesProps
+}
 
 export type TextareaProps = CreateWuiProps<'textarea', TextareaOptions>
 
diff --git a/packages/Textarea/package.json b/packages/Textarea/package.json
index 2137a520f2..2afa7f6960 100644
--- a/packages/Textarea/package.json
+++ b/packages/Textarea/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Textarea"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Toast/Growl.tsx b/packages/Toast/Growl.tsx
index 8c7ab20c7e..71729240ad 100644
--- a/packages/Toast/Growl.tsx
+++ b/packages/Toast/Growl.tsx
@@ -16,6 +16,9 @@ export interface GrowlOptions {
 
 export type GrowlProps = CreateWuiProps<'div', GrowlOptions>
 
+/**
+ * @name Toast.Growl
+ */
 export const Growl = forwardRef<'div', GrowlProps>(
   ({ children, closeButtonDataTestId, hasCloseButton = true, onClose, variant = 'info' }, ref) => {
     const content = Children.map(children, child => {
diff --git a/packages/Toast/Snackbar.tsx b/packages/Toast/Snackbar.tsx
index b63d5dbce1..499d62ace7 100644
--- a/packages/Toast/Snackbar.tsx
+++ b/packages/Toast/Snackbar.tsx
@@ -15,6 +15,9 @@ export interface SnackbarOptions {
 
 export type SnackbarProps = CreateWuiProps<'div', SnackbarOptions & TitleOptions>
 
+/**
+ * @name Toast.Snackbar
+ */
 export const Snackbar = forwardRef<'div', SnackbarProps>(
   ({ children, hasCloseButton = true, icon, onClose, variant = 'info', ...rest }, ref) => (
     <S.Snackbar hasCloseButton={hasCloseButton} ref={ref} variant={variant} {...rest}>
diff --git a/packages/Toast/Title.tsx b/packages/Toast/Title.tsx
index b1391a220c..4999e089aa 100644
--- a/packages/Toast/Title.tsx
+++ b/packages/Toast/Title.tsx
@@ -13,6 +13,9 @@ export interface TitleOptions {
 
 export type TitleProps = CreateWuiProps<'div', TitleOptions>
 
+/**
+ * @name Toast.Title
+ */
 export const Title: React.FC<TitleProps> = ({ children, icon, variant = 'info', ...rest }) => (
   <S.Title variant={variant} {...rest}>
     <VariantIcon icon={icon} variant={variant} />
diff --git a/packages/Toast/package.json b/packages/Toast/package.json
index f651cb2fc8..20ac654bea 100644
--- a/packages/Toast/package.json
+++ b/packages/Toast/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Toast"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Toggle/package.json b/packages/Toggle/package.json
index 1e1fe50297..cf31f113ff 100644
--- a/packages/Toggle/package.json
+++ b/packages/Toggle/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Toggle"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/Tooltip/package.json b/packages/Tooltip/package.json
index 4bf51f0870..64889aeffc 100644
--- a/packages/Tooltip/package.json
+++ b/packages/Tooltip/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name Tooltip"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/UniversalLink/package.json b/packages/UniversalLink/package.json
index 71d151d018..d25c038894 100644
--- a/packages/UniversalLink/package.json
+++ b/packages/UniversalLink/package.json
@@ -9,7 +9,8 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "test": "jest",
-    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "doc": "node -r esm ../../scripts/doc-props.js --name UniversalLink"
   },
   "publishConfig": {
     "access": "public"
diff --git a/scripts/doc-props.js b/scripts/doc-props.js
new file mode 100644
index 0000000000..71b8fcd1b7
--- /dev/null
+++ b/scripts/doc-props.js
@@ -0,0 +1,100 @@
+/* eslint-disable no-console */
+const path = require('path')
+const fs = require('fs/promises')
+
+const { argv } = require('yargs')
+const docgen = require('react-docgen-typescript')
+
+const { toKebabCase } = require('../utils/strings')
+
+const { name: packageName } = argv
+const tsConfigPath = path.join(process.cwd(), 'tsconfig.json')
+
+const shouldDisplayPropsFiles = [
+  'packages/Utils/dist/types/field-styles.d.ts',
+  'packages/Button/dist/types/index.d.ts',
+  'packages/InputText/dist/types/index.d.ts',
+  'welcome-ui/node_modules/reakit/ts/Tab/TabState.d.ts',
+]
+
+// Get only ComponentOptions declarations for prevent all WuiProps
+const propFilter = prop => {
+  if (prop.declarations?.length > 0) {
+    const isOptionDeclaration = prop.declarations.find(declaration => {
+      if (declaration.name.includes('Options')) return true
+
+      return shouldDisplayPropsFiles.includes(declaration.fileName)
+    })
+    return Boolean(isOptionDeclaration)
+  }
+  return true
+}
+
+const { parse } = docgen.withCustomConfig(tsConfigPath, {
+  propFilter,
+  shouldRemoveUndefinedFromOptional: true,
+  shouldExtractValuesFromUnion: true,
+})
+
+const isComponentFile = file => {
+  if (file === 'index.tsx') {
+    return true
+  }
+
+  const [name, extension] = file.split('.')
+  const firstLetter = name[0]
+
+  // Components start with capital letter e.g. Title.js
+  if (extension === 'tsx' && firstLetter === firstLetter.toUpperCase()) {
+    return true
+  }
+
+  return false
+}
+
+const getComponentFiles = async () => {
+  const componentFiles = await fs.readdir('.')
+
+  return componentFiles.filter(isComponentFile)
+}
+
+const getFileDefinitions = file => {
+  const absolutePath = path.join(process.cwd(), file)
+  const definitions = parse(absolutePath)
+
+  return definitions
+}
+
+const writePropsFile = async content => {
+  const destPath = path.join(process.cwd(), 'dist', `${toKebabCase(packageName)}.doc.json`)
+
+  await fs.writeFile(destPath, JSON.stringify(content, null, 2))
+}
+
+;(async () => {
+  if (!packageName) {
+    console.error('No package name provided, please add a `--name` option')
+    return
+  }
+
+  const files = await getComponentFiles(packageName)
+  const componentProps = {}
+
+  files.forEach(file => {
+    const definitions = getFileDefinitions(file)
+
+    definitions.forEach(definition => {
+      const { displayName, props, tags } = definition
+      const name = tags.name || displayName
+
+      if (props) {
+        componentProps[name] = {
+          tag: tags?.tag,
+          props,
+        }
+      }
+    })
+  })
+
+  await writePropsFile(componentProps)
+})()
diff --git a/yarn.lock b/yarn.lock
index 4a5463f8ab..32374d1861 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15304,6 +15304,11 @@ react-datepicker@^4.3.0:
     react-onclickoutside "^6.12.0"
     react-popper "^2.2.5"
 
+react-docgen-typescript@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c"
+  integrity sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==
+
 react-docgen@^5.3.1:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-5.4.0.tgz#2cd7236720ec2769252ef0421f23250b39a153a1"