diff --git a/src/__tests__/__snapshots__/index.test.ts.snap b/src/__tests__/__snapshots__/index.test.ts.snap
index 680f648b..1ccfa63a 100644
--- a/src/__tests__/__snapshots__/index.test.ts.snap
+++ b/src/__tests__/__snapshots__/index.test.ts.snap
@@ -71,11 +71,63 @@ Object {
       "defaultProps": Object {
         "as": "a",
       },
+      "propTypes": Object {
+        "active": [Function],
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "defaultProps": Object {
       "as": "nav",
     },
+    "propTypes": Object {
+      "align": [Function],
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "separator": [Function],
+      "shadowless": [Function],
+      "size": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
     "render": [Function],
   },
   "Button": Object {
@@ -161,6 +213,30 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Footer": Object {
@@ -170,11 +246,59 @@ Object {
         "defaultProps": Object {
           "as": "div",
         },
+        "propTypes": Object {
+          "as": [Function],
+          "backgroundColor": [Function],
+          "className": [Function],
+          "clearfix": [Function],
+          "clipped": [Function],
+          "hidden": [Function],
+          "invisible": [Function],
+          "italic": [Function],
+          "marginless": [Function],
+          "overlay": [Function],
+          "paddingless": [Function],
+          "pull": [Function],
+          "radiusless": [Function],
+          "responsive": [Function],
+          "shadowless": [Function],
+          "srOnly": [Function],
+          "textAlignment": [Function],
+          "textColor": [Function],
+          "textSize": [Function],
+          "textTransform": [Function],
+          "textWeight": [Function],
+          "unselectable": [Function],
+        },
         "render": [Function],
       },
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Header": Object {
@@ -184,6 +308,30 @@ Object {
         "defaultProps": Object {
           "as": "div",
         },
+        "propTypes": Object {
+          "as": [Function],
+          "backgroundColor": [Function],
+          "className": [Function],
+          "clearfix": [Function],
+          "clipped": [Function],
+          "hidden": [Function],
+          "invisible": [Function],
+          "italic": [Function],
+          "marginless": [Function],
+          "overlay": [Function],
+          "paddingless": [Function],
+          "pull": [Function],
+          "radiusless": [Function],
+          "responsive": [Function],
+          "shadowless": [Function],
+          "srOnly": [Function],
+          "textAlignment": [Function],
+          "textColor": [Function],
+          "textSize": [Function],
+          "textTransform": [Function],
+          "textWeight": [Function],
+          "unselectable": [Function],
+        },
         "render": [Function],
       },
       "Title": Object {
@@ -191,11 +339,59 @@ Object {
         "defaultProps": Object {
           "as": "div",
         },
+        "propTypes": Object {
+          "as": [Function],
+          "backgroundColor": [Function],
+          "className": [Function],
+          "clearfix": [Function],
+          "clipped": [Function],
+          "hidden": [Function],
+          "invisible": [Function],
+          "italic": [Function],
+          "marginless": [Function],
+          "overlay": [Function],
+          "paddingless": [Function],
+          "pull": [Function],
+          "radiusless": [Function],
+          "responsive": [Function],
+          "shadowless": [Function],
+          "srOnly": [Function],
+          "textAlignment": [Function],
+          "textColor": [Function],
+          "textSize": [Function],
+          "textTransform": [Function],
+          "textWeight": [Function],
+          "unselectable": [Function],
+        },
         "render": [Function],
       },
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Image": Object {
@@ -203,11 +399,59 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "defaultProps": Object {
       "as": "div",
     },
+    "propTypes": Object {
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
     "render": [Function],
   },
   "Checkbox": Object {
@@ -527,20 +771,44 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
-      "render": [Function],
-    },
-    "Context": Object {
-      "$$typeof": Symbol(react.context),
-      "Consumer": Object {
-        "$$typeof": Symbol(react.context),
-        "_calculateChangedBits": null,
-        "_context": [Circular],
-      },
-      "Provider": Object {
-        "$$typeof": Symbol(react.provider),
-        "_context": [Circular],
-      },
-      "_calculateChangedBits": null,
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
+      "render": [Function],
+    },
+    "Context": Object {
+      "$$typeof": Symbol(react.context),
+      "Consumer": Object {
+        "$$typeof": Symbol(react.context),
+        "_calculateChangedBits": null,
+        "_context": [Circular],
+      },
+      "Provider": Object {
+        "$$typeof": Symbol(react.provider),
+        "_context": [Circular],
+      },
+      "_calculateChangedBits": null,
       "_currentRenderer": null,
       "_currentRenderer2": null,
       "_currentValue": Object {
@@ -558,6 +826,30 @@ Object {
       "defaultProps": Object {
         "as": "hr",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Item": Object {
@@ -565,6 +857,32 @@ Object {
       "defaultProps": Object {
         "as": "a",
       },
+      "propTypes": Object {
+        "active": [Function],
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "onClick": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Menu": Object {
@@ -572,6 +890,30 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Trigger": Object {
@@ -579,11 +921,65 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "onClick": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "defaultProps": Object {
       "as": "div",
     },
+    "propTypes": Object {
+      "active": [Function],
+      "align": [Function],
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "hidden": [Function],
+      "hoverable": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "managed": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+      "up": [Function],
+    },
     "render": [Function],
   },
   "Field": Object {
@@ -1337,6 +1733,30 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Left": Object {
@@ -1344,6 +1764,30 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Right": Object {
@@ -1351,34 +1795,133 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
-      "render": [Function],
-    },
-    "defaultProps": Object {
-      "as": "nav",
-    },
-    "render": [Function],
-  },
-  "List": Object {
-    "$$typeof": Symbol(react.forward_ref),
-    "Item": Object {
-      "$$typeof": Symbol(react.forward_ref),
-      "defaultProps": Object {
-        "active": false,
-        "as": "a",
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
       },
       "render": [Function],
     },
     "defaultProps": Object {
-      "as": "div",
-      "hoverable": false,
-    },
-    "render": [Function],
-  },
-  "Loader": Object {
-    "$$typeof": Symbol(react.forward_ref),
-    "defaultProps": Object {
-      "as": "div",
-      "children": null,
+      "as": "nav",
+    },
+    "propTypes": Object {
+      "as": [Function],
+      "backgroundColor": [Function],
+      "breakpoint": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
+    "render": [Function],
+  },
+  "List": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "Item": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "defaultProps": Object {
+        "active": false,
+        "as": "a",
+      },
+      "propTypes": Object {
+        "active": [Function],
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
+      "render": [Function],
+    },
+    "defaultProps": Object {
+      "as": "div",
+      "hoverable": false,
+    },
+    "propTypes": Object {
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "hidden": [Function],
+      "hoverable": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
+    "render": [Function],
+  },
+  "Loader": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "defaultProps": Object {
+      "as": "div",
+      "children": null,
     },
     "propTypes": Object {
       "as": [Function],
@@ -1414,11 +1957,60 @@ Object {
         "as": "div",
         "position": "content",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "position": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "defaultProps": Object {
       "as": "article",
     },
+    "propTypes": Object {
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
     "render": [Function],
   },
   "Menu": Object {
@@ -1428,6 +2020,30 @@ Object {
       "defaultProps": Object {
         "as": "p",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "List": Object {
@@ -1437,16 +2053,90 @@ Object {
         "defaultProps": Object {
           "as": "a",
         },
+        "propTypes": Object {
+          "active": [Function],
+          "as": [Function],
+          "backgroundColor": [Function],
+          "className": [Function],
+          "clearfix": [Function],
+          "clipped": [Function],
+          "hidden": [Function],
+          "invisible": [Function],
+          "italic": [Function],
+          "marginless": [Function],
+          "menu": [Function],
+          "overlay": [Function],
+          "paddingless": [Function],
+          "pull": [Function],
+          "radiusless": [Function],
+          "responsive": [Function],
+          "shadowless": [Function],
+          "srOnly": [Function],
+          "textAlignment": [Function],
+          "textColor": [Function],
+          "textSize": [Function],
+          "textTransform": [Function],
+          "textWeight": [Function],
+          "unselectable": [Function],
+        },
         "render": [Function],
       },
       "defaultProps": Object {
         "as": "ul",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "defaultProps": Object {
       "as": "aside",
     },
+    "propTypes": Object {
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
     "render": [Function],
   },
   "Message": Object {
@@ -1456,19 +2146,93 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
-      "render": [Function],
-    },
-    "Header": Object {
-      "$$typeof": Symbol(react.forward_ref),
-      "defaultProps": Object {
-        "as": "div",
-      },
-      "render": [Function],
-    },
-    "defaultProps": Object {
-      "as": "article",
-    },
-    "render": [Function],
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
+      "render": [Function],
+    },
+    "Header": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "defaultProps": Object {
+        "as": "div",
+      },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
+      "render": [Function],
+    },
+    "defaultProps": Object {
+      "as": "article",
+    },
+    "propTypes": Object {
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "color": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "size": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
+    "render": [Function],
   },
   "Modal": Object {
     "$$typeof": Symbol(react.forward_ref),
@@ -1477,6 +2241,31 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "onClick": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Card": Object {
@@ -1486,6 +2275,30 @@ Object {
         "defaultProps": Object {
           "as": "section",
         },
+        "propTypes": Object {
+          "as": [Function],
+          "backgroundColor": [Function],
+          "className": [Function],
+          "clearfix": [Function],
+          "clipped": [Function],
+          "hidden": [Function],
+          "invisible": [Function],
+          "italic": [Function],
+          "marginless": [Function],
+          "overlay": [Function],
+          "paddingless": [Function],
+          "pull": [Function],
+          "radiusless": [Function],
+          "responsive": [Function],
+          "shadowless": [Function],
+          "srOnly": [Function],
+          "textAlignment": [Function],
+          "textColor": [Function],
+          "textSize": [Function],
+          "textTransform": [Function],
+          "textWeight": [Function],
+          "unselectable": [Function],
+        },
         "render": [Function],
       },
       "Foot": Object {
@@ -1493,6 +2306,30 @@ Object {
         "defaultProps": Object {
           "as": "footer",
         },
+        "propTypes": Object {
+          "as": [Function],
+          "backgroundColor": [Function],
+          "className": [Function],
+          "clearfix": [Function],
+          "clipped": [Function],
+          "hidden": [Function],
+          "invisible": [Function],
+          "italic": [Function],
+          "marginless": [Function],
+          "overlay": [Function],
+          "paddingless": [Function],
+          "pull": [Function],
+          "radiusless": [Function],
+          "responsive": [Function],
+          "shadowless": [Function],
+          "srOnly": [Function],
+          "textAlignment": [Function],
+          "textColor": [Function],
+          "textSize": [Function],
+          "textTransform": [Function],
+          "textWeight": [Function],
+          "unselectable": [Function],
+        },
         "render": [Function],
       },
       "Head": Object {
@@ -1500,6 +2337,30 @@ Object {
         "defaultProps": Object {
           "as": "header",
         },
+        "propTypes": Object {
+          "as": [Function],
+          "backgroundColor": [Function],
+          "className": [Function],
+          "clearfix": [Function],
+          "clipped": [Function],
+          "hidden": [Function],
+          "invisible": [Function],
+          "italic": [Function],
+          "marginless": [Function],
+          "overlay": [Function],
+          "paddingless": [Function],
+          "pull": [Function],
+          "radiusless": [Function],
+          "responsive": [Function],
+          "shadowless": [Function],
+          "srOnly": [Function],
+          "textAlignment": [Function],
+          "textColor": [Function],
+          "textSize": [Function],
+          "textTransform": [Function],
+          "textWeight": [Function],
+          "unselectable": [Function],
+        },
         "render": [Function],
       },
       "Title": Object {
@@ -1507,11 +2368,59 @@ Object {
         "defaultProps": Object {
           "as": "p",
         },
+        "propTypes": Object {
+          "as": [Function],
+          "backgroundColor": [Function],
+          "className": [Function],
+          "clearfix": [Function],
+          "clipped": [Function],
+          "hidden": [Function],
+          "invisible": [Function],
+          "italic": [Function],
+          "marginless": [Function],
+          "overlay": [Function],
+          "paddingless": [Function],
+          "pull": [Function],
+          "radiusless": [Function],
+          "responsive": [Function],
+          "shadowless": [Function],
+          "srOnly": [Function],
+          "textAlignment": [Function],
+          "textColor": [Function],
+          "textSize": [Function],
+          "textTransform": [Function],
+          "textWeight": [Function],
+          "unselectable": [Function],
+        },
         "render": [Function],
       },
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Close": Object {
@@ -1519,6 +2428,31 @@ Object {
       "defaultProps": Object {
         "as": "button",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "onClick": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Content": Object {
@@ -1526,11 +2460,43 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
-      "render": [Function],
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
+      "render": [Function],
     },
     "defaultProps": Object {
       "as": "div",
     },
+    "propTypes": Object {
+      "active": [Function],
+      "className": [Function],
+      "closeOnBlur": [Function],
+      "closeOnEsc": [Function],
+      "containerClassName": [Function],
+      "onClose": [Function],
+    },
     "render": [Function],
   },
   "Navbar": Object {
@@ -1540,6 +2506,30 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Burger": Object {
@@ -1547,6 +2537,32 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "onClick": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "style": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Context": Object {
@@ -1578,6 +2594,30 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Dropdown": Object {
@@ -1585,6 +2625,32 @@ Object {
       "defaultProps": Object {
         "as": "span",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "boxed": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "right": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "End": Object {
@@ -1592,6 +2658,30 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Item": Object {
@@ -1599,6 +2689,34 @@ Object {
       "defaultProps": Object {
         "as": "a",
       },
+      "propTypes": Object {
+        "active": [Function],
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "dropdown": [Function],
+        "dropdownUp": [Function],
+        "hidden": [Function],
+        "hoverable": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Link": Object {
@@ -1606,6 +2724,31 @@ Object {
       "defaultProps": Object {
         "as": "span",
       },
+      "propTypes": Object {
+        "arrowless": [Function],
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Menu": Object {
@@ -1613,6 +2756,30 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Start": Object {
@@ -1620,11 +2787,64 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "defaultProps": Object {
       "as": "nav",
     },
+    "propTypes": Object {
+      "active": [Function],
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "color": [Function],
+      "fixed": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "managed": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "transparent": [Function],
+      "unselectable": [Function],
+    },
     "render": [Function],
   },
   "Notification": Object {
@@ -1657,14 +2877,205 @@ Object {
       "textWeight": [Function],
       "unselectable": [Function],
     },
-    "render": [Function],
-  },
-  "Numeric": Object {
-    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+  "Numeric": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "defaultProps": Object {
+      "as": "p",
+    },
+    "propTypes": Object {
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
+    "render": [Function],
+  },
+  "Pagination": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "Ellipsis": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "defaultProps": Object {
+        "as": "span",
+        "children": "…",
+      },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
+      "render": [Function],
+    },
+    "Link": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "defaultProps": Object {
+        "as": "a",
+      },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "current": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
+      "render": [Function],
+    },
+    "List": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "defaultProps": Object {
+        "as": "ul",
+      },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
+      "render": [Function],
+    },
+    "Next": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "defaultProps": Object {
+        "as": "a",
+        "children": "Next page",
+      },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
+      "render": [Function],
+    },
+    "Previous": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "defaultProps": Object {
+        "as": "a",
+        "children": "Previous",
+      },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
+      "render": [Function],
+    },
     "defaultProps": Object {
-      "as": "p",
+      "as": "nav",
     },
     "propTypes": Object {
+      "align": [Function],
       "as": [Function],
       "backgroundColor": [Function],
       "className": [Function],
@@ -1679,7 +3090,9 @@ Object {
       "pull": [Function],
       "radiusless": [Function],
       "responsive": [Function],
+      "rounded": [Function],
       "shadowless": [Function],
+      "size": [Function],
       "srOnly": [Function],
       "textAlignment": [Function],
       "textColor": [Function],
@@ -1690,51 +3103,6 @@ Object {
     },
     "render": [Function],
   },
-  "Pagination": Object {
-    "$$typeof": Symbol(react.forward_ref),
-    "Ellipsis": Object {
-      "$$typeof": Symbol(react.forward_ref),
-      "defaultProps": Object {
-        "as": "span",
-        "children": "…",
-      },
-      "render": [Function],
-    },
-    "Link": Object {
-      "$$typeof": Symbol(react.forward_ref),
-      "defaultProps": Object {
-        "as": "a",
-      },
-      "render": [Function],
-    },
-    "List": Object {
-      "$$typeof": Symbol(react.forward_ref),
-      "defaultProps": Object {
-        "as": "ul",
-      },
-      "render": [Function],
-    },
-    "Next": Object {
-      "$$typeof": Symbol(react.forward_ref),
-      "defaultProps": Object {
-        "as": "a",
-        "children": "Next page",
-      },
-      "render": [Function],
-    },
-    "Previous": Object {
-      "$$typeof": Symbol(react.forward_ref),
-      "defaultProps": Object {
-        "as": "a",
-        "children": "Previous",
-      },
-      "render": [Function],
-    },
-    "defaultProps": Object {
-      "as": "nav",
-    },
-    "render": [Function],
-  },
   "Panel": Object {
     "$$typeof": Symbol(react.forward_ref),
     "Block": Object {
@@ -1742,6 +3110,31 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "active": [Function],
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Heading": Object {
@@ -1749,6 +3142,30 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Icon": Object {
@@ -1756,6 +3173,30 @@ Object {
       "defaultProps": Object {
         "as": "span",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Tabs": Object {
@@ -1765,16 +3206,89 @@ Object {
         "defaultProps": Object {
           "as": "a",
         },
+        "propTypes": Object {
+          "active": [Function],
+          "as": [Function],
+          "backgroundColor": [Function],
+          "className": [Function],
+          "clearfix": [Function],
+          "clipped": [Function],
+          "hidden": [Function],
+          "invisible": [Function],
+          "italic": [Function],
+          "marginless": [Function],
+          "overlay": [Function],
+          "paddingless": [Function],
+          "pull": [Function],
+          "radiusless": [Function],
+          "responsive": [Function],
+          "shadowless": [Function],
+          "srOnly": [Function],
+          "textAlignment": [Function],
+          "textColor": [Function],
+          "textSize": [Function],
+          "textTransform": [Function],
+          "textWeight": [Function],
+          "unselectable": [Function],
+        },
         "render": [Function],
       },
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "defaultProps": Object {
       "as": "nav",
     },
+    "propTypes": Object {
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
     "render": [Function],
   },
   "Progress": Object {
@@ -2016,11 +3530,65 @@ Object {
       "defaultProps": Object {
         "as": "a",
       },
+      "propTypes": Object {
+        "active": [Function],
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "style": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "defaultProps": Object {
       "as": "div",
     },
+    "propTypes": Object {
+      "align": [Function],
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "fullwidth": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "size": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "type": [Function],
+      "unselectable": [Function],
+    },
     "render": [Function],
   },
   "Tag": Object {
diff --git a/src/__tests__/testing.tsx b/src/__tests__/testing.tsx
index c179ef59..95ee9241 100644
--- a/src/__tests__/testing.tsx
+++ b/src/__tests__/testing.tsx
@@ -145,3 +145,12 @@ export const validateOneOfPropType = (
     ...choices.map(value => ({ value, valid: true })),
     { value: "__UNKNOWN", valid: false },
   ]);
+
+export const validateStringPropType = (
+  propTypes: { [k: string]: PropTypes.Requireable<any> },
+  propName: string,
+) =>
+  validatePropType(propTypes, propName, [
+    { value: "string", valid: true },
+    { value: 1, valid: false },
+  ]);
diff --git a/src/components/breadcrumb/__tests__/breadcrumb-item.test.tsx b/src/components/breadcrumb/__tests__/breadcrumb-item.test.tsx
index 0e8cec8a..a6e87942 100644
--- a/src/components/breadcrumb/__tests__/breadcrumb-item.test.tsx
+++ b/src/components/breadcrumb/__tests__/breadcrumb-item.test.tsx
@@ -3,7 +3,11 @@ import React from "react";
 
 import { BreadcrumbItem } from "../breadcrumb-item";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+} from "@/__tests__/testing";
 
 describe("BreadcrumbItem component", () => {
   hasProperties(BreadcrumbItem, {
@@ -54,4 +58,10 @@ describe("BreadcrumbItem component", () => {
     const wrapper = Enzyme.shallow(<BreadcrumbItem active />);
     expect(wrapper.hasClass("is-active")).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = BreadcrumbItem;
+    testGenericPropTypes(propTypes);
+    validateBoolPropType(propTypes, "active");
+  });
 });
diff --git a/src/components/breadcrumb/__tests__/breadcrumb.test.tsx b/src/components/breadcrumb/__tests__/breadcrumb.test.tsx
index d415af73..19b65f7a 100644
--- a/src/components/breadcrumb/__tests__/breadcrumb.test.tsx
+++ b/src/components/breadcrumb/__tests__/breadcrumb.test.tsx
@@ -9,7 +9,11 @@ import {
 } from "../breadcrumb";
 import { BreadcrumbItem } from "../breadcrumb-item";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateOneOfPropType,
+} from "@/__tests__/testing";
 
 describe("Breadcrumb component", () => {
   hasProperties(Breadcrumb, {
@@ -78,4 +82,12 @@ describe("Breadcrumb component", () => {
       expect(wrapper.find(".breadcrumb").hasClass(`is-${size}`)).toBe(true);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = Breadcrumb;
+    testGenericPropTypes(propTypes);
+    validateOneOfPropType(propTypes, "align", BREADCRUMB_ALIGNMENTS);
+    validateOneOfPropType(propTypes, "separator", BREADCRUMB_SEPARATORS);
+    validateOneOfPropType(propTypes, "size", BREADCRUMB_SIZES);
+  });
 });
diff --git a/src/components/breadcrumb/breadcrumb-item.tsx b/src/components/breadcrumb/breadcrumb-item.tsx
index 7141cf5e..fed24eac 100644
--- a/src/components/breadcrumb/breadcrumb-item.tsx
+++ b/src/components/breadcrumb/breadcrumb-item.tsx
@@ -1,7 +1,13 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
 export interface BreadcrumbItemModifierProps {
   active?: boolean;
@@ -9,14 +15,22 @@ export interface BreadcrumbItemModifierProps {
 
 export type BreadcrumbItemProps = HelpersProps & BreadcrumbItemModifierProps;
 
-export const BreadcrumbItem = forwardRefAs<BreadcrumbItemProps, "a">(
-  (props, ref) => {
-    const { as, active, ...rest } = transformHelpers(props);
-    return (
-      <li className={classNames({ "is-active": active }) || undefined}>
-        {React.createElement(as!, { ref, ...rest })}
-      </li>
-    );
-  },
-  { as: "a" },
+const propTypes = {
+  ...genericPropTypes,
+  active: PropTypes.bool,
+};
+
+export const BreadcrumbItem = Object.assign(
+  forwardRefAs<BreadcrumbItemProps, "a">(
+    (props, ref) => {
+      const { as, active, ...rest } = transformHelpers(props);
+      return (
+        <li className={classNames({ "is-active": active }) || undefined}>
+          {React.createElement(as!, { ref, ...rest })}
+        </li>
+      );
+    },
+    { as: "a" },
+  ),
+  { propTypes },
 );
diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx
index b79c98d2..5c10a95c 100644
--- a/src/components/breadcrumb/breadcrumb.tsx
+++ b/src/components/breadcrumb/breadcrumb.tsx
@@ -1,7 +1,13 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { tuple } from "../../utils";
 import { BreadcrumbItem } from "./breadcrumb-item";
 
@@ -30,6 +36,13 @@ export type BreadcrumbProps = Prefer<
   React.HTMLAttributes<HTMLElement>
 >;
 
+const propTypes = {
+  ...genericPropTypes,
+  align: PropTypes.oneOf(BREADCRUMB_ALIGNMENTS),
+  separator: PropTypes.oneOf(BREADCRUMB_SEPARATORS),
+  size: PropTypes.oneOf(BREADCRUMB_SIZES),
+};
+
 export const Breadcrumb = Object.assign(
   forwardRefAs<BreadcrumbProps, "nav">(
     (props, ref) => {
@@ -55,5 +68,8 @@ export const Breadcrumb = Object.assign(
     },
     { as: "nav" },
   ),
-  { Item: BreadcrumbItem },
+  {
+    Item: BreadcrumbItem,
+    propTypes,
+  },
 );
diff --git a/src/components/card/__tests__/card-content.test.tsx b/src/components/card/__tests__/card-content.test.tsx
index 3eeb3b62..e07d91aa 100644
--- a/src/components/card/__tests__/card-content.test.tsx
+++ b/src/components/card/__tests__/card-content.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { CardContent } from "../card-content";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("CardContent component", () => {
   hasProperties(CardContent, {
@@ -46,4 +46,9 @@ describe("CardContent component", () => {
     const wrapper = Enzyme.shallow(<CardContent className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = CardContent;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/card/__tests__/card-footer-item.test.tsx b/src/components/card/__tests__/card-footer-item.test.tsx
index b28b38b4..0be7f371 100644
--- a/src/components/card/__tests__/card-footer-item.test.tsx
+++ b/src/components/card/__tests__/card-footer-item.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { CardFooterItem } from "../card-footer-item";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("CardFooterItem component", () => {
   hasProperties(CardFooterItem, {
@@ -46,4 +46,9 @@ describe("CardFooterItem component", () => {
     const wrapper = Enzyme.shallow(<CardFooterItem className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = CardFooterItem;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/card/__tests__/card-footer.test.tsx b/src/components/card/__tests__/card-footer.test.tsx
index d2fe41c4..29cdddcf 100644
--- a/src/components/card/__tests__/card-footer.test.tsx
+++ b/src/components/card/__tests__/card-footer.test.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { CardFooter } from "../card-footer";
 import { CardFooterItem } from "../card-footer-item";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("CardFooter component", () => {
   hasProperties(CardFooter, {
@@ -48,4 +48,9 @@ describe("CardFooter component", () => {
     const wrapper = Enzyme.shallow(<CardFooter className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = CardFooter;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/card/__tests__/card-header-icon.test.tsx b/src/components/card/__tests__/card-header-icon.test.tsx
index 8caed5db..3a783df0 100644
--- a/src/components/card/__tests__/card-header-icon.test.tsx
+++ b/src/components/card/__tests__/card-header-icon.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { CardHeaderIcon } from "../card-header-icon";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("CardHeaderIcon component", () => {
   hasProperties(CardHeaderIcon, {
@@ -46,4 +46,9 @@ describe("CardHeaderIcon component", () => {
     const wrapper = Enzyme.shallow(<CardHeaderIcon className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = CardHeaderIcon;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/card/__tests__/card-header-title.test.tsx b/src/components/card/__tests__/card-header-title.test.tsx
index 946201e1..7b30c4d4 100644
--- a/src/components/card/__tests__/card-header-title.test.tsx
+++ b/src/components/card/__tests__/card-header-title.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { CardHeaderTitle } from "../card-header-title";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("CardHeaderTitle component", () => {
   hasProperties(CardHeaderTitle, {
@@ -46,4 +46,9 @@ describe("CardHeaderTitle component", () => {
     const wrapper = Enzyme.shallow(<CardHeaderTitle className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = CardHeaderTitle;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/card/__tests__/card-header.test.tsx b/src/components/card/__tests__/card-header.test.tsx
index 26d857e0..de6e9747 100644
--- a/src/components/card/__tests__/card-header.test.tsx
+++ b/src/components/card/__tests__/card-header.test.tsx
@@ -5,7 +5,7 @@ import { CardHeader } from "../card-header";
 import { CardHeaderIcon } from "../card-header-icon";
 import { CardHeaderTitle } from "../card-header-title";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("CardHeader component", () => {
   hasProperties(CardHeader, {
@@ -50,4 +50,9 @@ describe("CardHeader component", () => {
     const wrapper = Enzyme.shallow(<CardHeader className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = CardHeader;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/card/__tests__/card-image.test.tsx b/src/components/card/__tests__/card-image.test.tsx
index 343b1f39..d97fc483 100644
--- a/src/components/card/__tests__/card-image.test.tsx
+++ b/src/components/card/__tests__/card-image.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { CardImage } from "../card-image";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("CardImage component", () => {
   hasProperties(CardImage, {
@@ -46,4 +46,9 @@ describe("CardImage component", () => {
     const wrapper = Enzyme.shallow(<CardImage className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = CardImage;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/card/__tests__/card.test.tsx b/src/components/card/__tests__/card.test.tsx
index 41889ed8..90709678 100644
--- a/src/components/card/__tests__/card.test.tsx
+++ b/src/components/card/__tests__/card.test.tsx
@@ -7,7 +7,7 @@ import { CardFooter } from "../card-footer";
 import { CardHeader } from "../card-header";
 import { CardImage } from "../card-image";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("Card component", () => {
   hasProperties(Card, {
@@ -54,4 +54,9 @@ describe("Card component", () => {
     const wrapper = Enzyme.shallow(<Card className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = Card;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/card/card-content.tsx b/src/components/card/card-content.tsx
index 09eb3667..4800715c 100644
--- a/src/components/card/card-content.tsx
+++ b/src/components/card/card-content.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type CardContentModifierProps = Partial<{ className: string }>;
+export type CardContentProps = HelpersProps;
 
-export type CardContentProps = HelpersProps & CardContentModifierProps;
-
-export const CardContent = forwardRefAs<CardContentProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("card-content", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const CardContent = Object.assign(
+  forwardRefAs<CardContentProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("card-content", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/card/card-footer-item.tsx b/src/components/card/card-footer-item.tsx
index f7679840..6be31ffc 100644
--- a/src/components/card/card-footer-item.tsx
+++ b/src/components/card/card-footer-item.tsx
@@ -1,16 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type CardFooterItemModifierProps = Partial<{ className: string }>;
-export type CardFooterItemProps = HelpersProps & CardFooterItemModifierProps;
+export type CardFooterItemProps = HelpersProps;
 
-export const CardFooterItem = forwardRefAs<CardFooterItemProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("card-footer-item", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const CardFooterItem = Object.assign(
+  forwardRefAs<CardFooterItemProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("card-footer-item", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/card/card-footer.tsx b/src/components/card/card-footer.tsx
index db554330..4af774c9 100644
--- a/src/components/card/card-footer.tsx
+++ b/src/components/card/card-footer.tsx
@@ -1,12 +1,15 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { CardFooterItem } from "./card-footer-item";
 
-export type CardFooterModifierProps = Partial<{ className: string }>;
-
-export type CardFooterProps = HelpersProps & CardFooterModifierProps;
+export type CardFooterProps = HelpersProps;
 
 export const CardFooter = Object.assign(
   forwardRefAs<CardFooterProps, "div">(
@@ -17,5 +20,8 @@ export const CardFooter = Object.assign(
     },
     { as: "div" },
   ),
-  { Item: CardFooterItem },
+  {
+    Item: CardFooterItem,
+    propTypes: genericPropTypes,
+  },
 );
diff --git a/src/components/card/card-header-icon.tsx b/src/components/card/card-header-icon.tsx
index 0bc09078..7cd104de 100644
--- a/src/components/card/card-header-icon.tsx
+++ b/src/components/card/card-header-icon.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type CardHeaderIconModifierProps = Partial<{ className: string }>;
+export type CardHeaderIconProps = HelpersProps;
 
-export type CardHeaderIconProps = HelpersProps & CardHeaderIconModifierProps;
-
-export const CardHeaderIcon = forwardRefAs<CardHeaderIconProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("card-header-icon", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const CardHeaderIcon = Object.assign(
+  forwardRefAs<CardHeaderIconProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("card-header-icon", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/card/card-header-title.tsx b/src/components/card/card-header-title.tsx
index 7c5430f0..124bd84e 100644
--- a/src/components/card/card-header-title.tsx
+++ b/src/components/card/card-header-title.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type CardHeaderTitleModifierProps = Partial<{ className: string }>;
+export type CardHeaderTitleProps = HelpersProps;
 
-export type CardHeaderTitleProps = HelpersProps & CardHeaderTitleModifierProps;
-
-export const CardHeaderTitle = forwardRefAs<CardHeaderTitleProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("card-header-title", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const CardHeaderTitle = Object.assign(
+  forwardRefAs<CardHeaderTitleProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("card-header-title", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/card/card-header.tsx b/src/components/card/card-header.tsx
index b3966e5f..332ec7fb 100644
--- a/src/components/card/card-header.tsx
+++ b/src/components/card/card-header.tsx
@@ -1,12 +1,16 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { CardHeaderIcon } from "./card-header-icon";
 import { CardHeaderTitle } from "./card-header-title";
 
-export type CardHeaderModifierProps = Partial<{ className: string }>;
-export type CardHeaderProps = HelpersProps & CardHeaderModifierProps;
+export type CardHeaderProps = HelpersProps;
 
 export const CardHeader = Object.assign(
   forwardRefAs<CardHeaderProps, "div">(
@@ -20,5 +24,6 @@ export const CardHeader = Object.assign(
   {
     Icon: CardHeaderIcon,
     Title: CardHeaderTitle,
+    propTypes: genericPropTypes,
   },
 );
diff --git a/src/components/card/card-image.tsx b/src/components/card/card-image.tsx
index 85b29626..43056aaf 100644
--- a/src/components/card/card-image.tsx
+++ b/src/components/card/card-image.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type CardImageModifierProps = Partial<{ className: string }>;
+export type CardImageProps = HelpersProps;
 
-export type CardImageProps = HelpersProps & CardImageModifierProps;
-
-export const CardImage = forwardRefAs<CardImageProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("card-image", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const CardImage = Object.assign(
+  forwardRefAs<CardImageProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("card-image", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index da9f3886..e4c186db 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -1,15 +1,18 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { CardContent } from "./card-content";
 import { CardFooter } from "./card-footer";
 import { CardHeader } from "./card-header";
 import { CardImage } from "./card-image";
 
-export type CardModifierProps = Partial<{ className: string }>;
-
-export type CardProps = HelpersProps & CardModifierProps;
+export type CardProps = HelpersProps;
 
 export const Card = Object.assign(
   forwardRefAs<CardProps, "div">(
@@ -25,5 +28,6 @@ export const Card = Object.assign(
     Footer: CardFooter,
     Header: CardHeader,
     Image: CardImage,
+    propTypes: genericPropTypes,
   },
 );
diff --git a/src/components/dropdown/__tests__/dropdown-content.test.tsx b/src/components/dropdown/__tests__/dropdown-content.test.tsx
index 06da0ebc..775a3662 100644
--- a/src/components/dropdown/__tests__/dropdown-content.test.tsx
+++ b/src/components/dropdown/__tests__/dropdown-content.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { DropdownContent } from "../dropdown-content";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("DropdownContent component", () => {
   hasProperties(DropdownContent, {
@@ -46,4 +46,9 @@ describe("DropdownContent component", () => {
     const wrapper = Enzyme.shallow(<DropdownContent className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = DropdownContent;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/dropdown/__tests__/dropdown-divider.test.tsx b/src/components/dropdown/__tests__/dropdown-divider.test.tsx
index 097ece56..b2359561 100644
--- a/src/components/dropdown/__tests__/dropdown-divider.test.tsx
+++ b/src/components/dropdown/__tests__/dropdown-divider.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { DropdownDivider } from "../dropdown-divider";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("DropdownDivider component", () => {
   hasProperties(DropdownDivider, {
@@ -46,4 +46,9 @@ describe("DropdownDivider component", () => {
     const wrapper = Enzyme.shallow(<DropdownDivider className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = DropdownDivider;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/dropdown/__tests__/dropdown-item.test.tsx b/src/components/dropdown/__tests__/dropdown-item.test.tsx
index 1441817b..a7f9f873 100644
--- a/src/components/dropdown/__tests__/dropdown-item.test.tsx
+++ b/src/components/dropdown/__tests__/dropdown-item.test.tsx
@@ -3,7 +3,12 @@ import React from "react";
 
 import { DropdownItem } from "../dropdown-item";
 
-import { hasProperties, shallowInContext } from "@/__tests__/testing";
+import {
+  hasProperties,
+  shallowInContext,
+  testGenericPropTypes,
+  validatePropType,
+} from "@/__tests__/testing";
 import { contextFactory } from "./helpers";
 
 describe("DropdownItem component", () => {
@@ -74,4 +79,13 @@ describe("DropdownItem component", () => {
       expect(setActive.mock.calls[0]).toEqual([false]);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = DropdownItem;
+    testGenericPropTypes(propTypes);
+    validatePropType(propTypes, "onClick", [
+      { value: () => null, valid: true, descriptor: "func" },
+      { value: "string", valid: false },
+    ]);
+  });
 });
diff --git a/src/components/dropdown/__tests__/dropdown-menu.test.tsx b/src/components/dropdown/__tests__/dropdown-menu.test.tsx
index 6105ff4e..65738761 100644
--- a/src/components/dropdown/__tests__/dropdown-menu.test.tsx
+++ b/src/components/dropdown/__tests__/dropdown-menu.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { DropdownMenu } from "../dropdown-menu";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("DropdownMenu component", () => {
   hasProperties(DropdownMenu, {
@@ -46,4 +46,9 @@ describe("DropdownMenu component", () => {
     const wrapper = Enzyme.shallow(<DropdownMenu className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = DropdownMenu;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/dropdown/__tests__/dropdown-trigger.test.tsx b/src/components/dropdown/__tests__/dropdown-trigger.test.tsx
index dd073d0d..24103ad5 100644
--- a/src/components/dropdown/__tests__/dropdown-trigger.test.tsx
+++ b/src/components/dropdown/__tests__/dropdown-trigger.test.tsx
@@ -3,7 +3,12 @@ import React from "react";
 
 import { DropdownTrigger } from "../dropdown-trigger";
 
-import { hasProperties, shallowInContext } from "@/__tests__/testing";
+import {
+  hasProperties,
+  shallowInContext,
+  testGenericPropTypes,
+  validatePropType,
+} from "@/__tests__/testing";
 import { contextFactory } from "./helpers";
 
 describe("DropdownTrigger component", () => {
@@ -67,4 +72,13 @@ describe("DropdownTrigger component", () => {
       expect(setActive.mock.calls[0]).toEqual([true]);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = DropdownTrigger;
+    testGenericPropTypes(propTypes);
+    validatePropType(propTypes, "onClick", [
+      { value: () => null, valid: true, descriptor: "func" },
+      { value: "string", valid: false },
+    ]);
+  });
 });
diff --git a/src/components/dropdown/__tests__/dropdown.test.tsx b/src/components/dropdown/__tests__/dropdown.test.tsx
index faa33f7c..395453ad 100644
--- a/src/components/dropdown/__tests__/dropdown.test.tsx
+++ b/src/components/dropdown/__tests__/dropdown.test.tsx
@@ -14,7 +14,12 @@ import { DropdownItem } from "../dropdown-item";
 import { DropdownMenu } from "../dropdown-menu";
 import { DropdownTrigger } from "../dropdown-trigger";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+  validateOneOfPropType,
+} from "@/__tests__/testing";
 
 describe("Card component", () => {
   hasProperties(Dropdown, {
@@ -235,4 +240,14 @@ describe("Card component", () => {
       }),
     ),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = Dropdown;
+    testGenericPropTypes(propTypes);
+    validateBoolPropType(propTypes, "active");
+    validateOneOfPropType(propTypes, "align", DROPDOWN_ALIGNMENTS);
+    validateBoolPropType(propTypes, "hoverable");
+    validateBoolPropType(propTypes, "managed");
+    validateBoolPropType(propTypes, "up");
+  });
 });
diff --git a/src/components/dropdown/dropdown-content.tsx b/src/components/dropdown/dropdown-content.tsx
index faf88325..d83e164b 100644
--- a/src/components/dropdown/dropdown-content.tsx
+++ b/src/components/dropdown/dropdown-content.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type DropdownContentModifierProps = Partial<{ className: string }>;
+export type DropdownContentProps = HelpersProps;
 
-export type DropdownContentProps = HelpersProps & DropdownContentModifierProps;
-
-export const DropdownContent = forwardRefAs<DropdownContentProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("dropdown-content", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const DropdownContent = Object.assign(
+  forwardRefAs<DropdownContentProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("dropdown-content", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/dropdown/dropdown-divider.tsx b/src/components/dropdown/dropdown-divider.tsx
index 6fbcb680..2fee6462 100644
--- a/src/components/dropdown/dropdown-divider.tsx
+++ b/src/components/dropdown/dropdown-divider.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type DropdownDividerModifierProps = Partial<{ className: string }>;
+export type DropdownDividerProps = HelpersProps;
 
-export type DropdownDividerProps = HelpersProps & DropdownDividerModifierProps;
-
-export const DropdownDivider = forwardRefAs<DropdownDividerProps, "hr">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("dropdown-divider", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "hr" },
+export const DropdownDivider = Object.assign(
+  forwardRefAs<DropdownDividerProps, "hr">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("dropdown-divider", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "hr" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/dropdown/dropdown-item.tsx b/src/components/dropdown/dropdown-item.tsx
index 743586df..e5130815 100644
--- a/src/components/dropdown/dropdown-item.tsx
+++ b/src/components/dropdown/dropdown-item.tsx
@@ -1,39 +1,53 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { DropdownContext } from "./dropdown-context";
 
 export type DropdownItemModifierProps = Partial<{
   active: boolean;
-  className: string;
   onClick: React.MouseEventHandler<any>;
 }>;
 
 export type DropdownItemProps = HelpersProps & DropdownItemModifierProps;
 
-export const DropdownItem = forwardRefAs<DropdownItemProps, "a">(
-  (props, ref) => {
-    const { as, active, onClick, ...rest } = transformHelpers(props);
-    rest.className = classNames("dropdown-item", rest.className, {
-      "is-active": active,
-    });
-    return (
-      <DropdownContext.Consumer>
-        {ctx =>
-          React.createElement(as!, {
-            onClick: (event: React.MouseEvent<any>) => {
-              if (onClick) {
-                onClick(event);
-              }
-              ctx.setActive(false);
-            },
-            ref,
-            ...rest,
-          })
-        }
-      </DropdownContext.Consumer>
-    );
-  },
-  { as: "a" },
+const propTypes = {
+  ...genericPropTypes,
+  active: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+export const DropdownItem = Object.assign(
+  forwardRefAs<DropdownItemProps, "a">(
+    (props, ref) => {
+      const { as, active, onClick, ...rest } = transformHelpers(props);
+      rest.className = classNames("dropdown-item", rest.className, {
+        "is-active": active,
+      });
+      return (
+        <DropdownContext.Consumer>
+          {ctx =>
+            React.createElement(as!, {
+              onClick: (event: React.MouseEvent<any>) => {
+                if (onClick) {
+                  onClick(event);
+                }
+                ctx.setActive(false);
+              },
+              ref,
+              ...rest,
+            })
+          }
+        </DropdownContext.Consumer>
+      );
+    },
+    { as: "a" },
+  ),
+  { propTypes },
 );
diff --git a/src/components/dropdown/dropdown-menu.tsx b/src/components/dropdown/dropdown-menu.tsx
index e4286727..e4bad454 100644
--- a/src/components/dropdown/dropdown-menu.tsx
+++ b/src/components/dropdown/dropdown-menu.tsx
@@ -1,16 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type DropdownMenuModifierProps = Partial<{ className: string }>;
-export type DropdownMenuProps = HelpersProps & DropdownMenuModifierProps;
+export type DropdownMenuProps = HelpersProps;
 
-export const DropdownMenu = forwardRefAs<DropdownMenuProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("dropdown-menu", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const DropdownMenu = Object.assign(
+  forwardRefAs<DropdownMenuProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("dropdown-menu", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/dropdown/dropdown-trigger.tsx b/src/components/dropdown/dropdown-trigger.tsx
index df8a459e..e80522ef 100644
--- a/src/components/dropdown/dropdown-trigger.tsx
+++ b/src/components/dropdown/dropdown-trigger.tsx
@@ -1,36 +1,49 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { DropdownContext } from "./dropdown-context";
 
 export type DropdownTriggerModifierProps = Partial<{
-  className: string;
   onClick: React.MouseEventHandler<any>;
 }>;
 
+const propTypes = {
+  ...genericPropTypes,
+  onClick: PropTypes.func,
+};
+
 export type DropdownTriggerProps = HelpersProps & DropdownTriggerModifierProps;
 
-export const DropdownTrigger = forwardRefAs<DropdownTriggerProps, "div">(
-  (props, ref) => {
-    const { as, onClick, ...rest } = transformHelpers(props);
-    rest.className = classNames("dropdown-trigger", rest.className);
-    return (
-      <DropdownContext.Consumer>
-        {({ active, setActive }) => {
-          return React.createElement(as!, {
-            onClick: (event: React.MouseEvent<any>) => {
-              if (onClick) {
-                onClick(event);
-              }
-              setActive(!active);
-            },
-            ref,
-            ...rest,
-          });
-        }}
-      </DropdownContext.Consumer>
-    );
-  },
-  { as: "div" },
+export const DropdownTrigger = Object.assign(
+  forwardRefAs<DropdownTriggerProps, "div">(
+    (props, ref) => {
+      const { as, onClick, ...rest } = transformHelpers(props);
+      rest.className = classNames("dropdown-trigger", rest.className);
+      return (
+        <DropdownContext.Consumer>
+          {({ active, setActive }) => {
+            return React.createElement(as!, {
+              onClick: (event: React.MouseEvent<any>) => {
+                if (onClick) {
+                  onClick(event);
+                }
+                setActive(!active);
+              },
+              ref,
+              ...rest,
+            });
+          }}
+        </DropdownContext.Consumer>
+      );
+    },
+    { as: "div" },
+  ),
+  { propTypes },
 );
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index aaa9999d..03be42dd 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -1,7 +1,13 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { tuple } from "../../utils";
 import { combineRefs } from "../../utils";
 import { DropdownContent } from "./dropdown-content";
@@ -17,7 +23,6 @@ export type DropdownAlignments = (typeof DROPDOWN_ALIGNMENTS)[number];
 export type DropdownModifierProps = Partial<{
   active: boolean;
   align: DropdownAlignments;
-  className: string;
   hoverable: boolean;
   managed: boolean;
   up: boolean;
@@ -25,6 +30,15 @@ export type DropdownModifierProps = Partial<{
 
 export type DropdownProps = HelpersProps & DropdownModifierProps;
 
+const propTypes = {
+  ...genericPropTypes,
+  active: PropTypes.bool,
+  align: PropTypes.oneOf(DROPDOWN_ALIGNMENTS),
+  hoverable: PropTypes.bool,
+  managed: PropTypes.bool,
+  up: PropTypes.bool,
+};
+
 const initialState = {
   active: false,
 };
@@ -129,5 +143,6 @@ export const Dropdown = Object.assign(
     Item: DropdownItem,
     Menu: DropdownMenu,
     Trigger: DropdownTrigger,
+    propTypes,
   },
 );
diff --git a/src/components/level/__tests__/level-item.test.tsx b/src/components/level/__tests__/level-item.test.tsx
index 1167a121..78f3b074 100644
--- a/src/components/level/__tests__/level-item.test.tsx
+++ b/src/components/level/__tests__/level-item.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { LevelItem } from "../level-item";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("LevelItem component", () => {
   hasProperties(LevelItem, {
@@ -46,4 +46,9 @@ describe("LevelItem component", () => {
     const wrapper = Enzyme.shallow(<LevelItem className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = LevelItem;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/level/__tests__/level-left.test.tsx b/src/components/level/__tests__/level-left.test.tsx
index 4d71e921..79bb4797 100644
--- a/src/components/level/__tests__/level-left.test.tsx
+++ b/src/components/level/__tests__/level-left.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { LevelLeft } from "../level-left";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("LevelLeft component", () => {
   // todo: LevelSide
@@ -47,4 +47,9 @@ describe("LevelLeft component", () => {
     const wrapper = Enzyme.shallow(<LevelLeft className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = LevelLeft;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/level/__tests__/level-right.test.tsx b/src/components/level/__tests__/level-right.test.tsx
index 8d2ea943..b9693f6e 100644
--- a/src/components/level/__tests__/level-right.test.tsx
+++ b/src/components/level/__tests__/level-right.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { LevelRight } from "../level-right";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("LevelRight component", () => {
   hasProperties(LevelRight, {
@@ -46,4 +46,9 @@ describe("LevelRight component", () => {
     const wrapper = Enzyme.shallow(<LevelRight className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = LevelRight;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/level/__tests__/level.test.tsx b/src/components/level/__tests__/level.test.tsx
index 85d7523c..052d68fc 100644
--- a/src/components/level/__tests__/level.test.tsx
+++ b/src/components/level/__tests__/level.test.tsx
@@ -7,7 +7,11 @@ import { LevelItem } from "../level-item";
 import { LevelLeft } from "../level-left";
 import { LevelRight } from "../level-right";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateOneOfPropType,
+} from "@/__tests__/testing";
 
 describe("Level component", () => {
   hasProperties(Level, {
@@ -54,13 +58,16 @@ describe("Level component", () => {
     expect(wrapper.hasClass(className)).toBe(true);
   });
 
-  /**
-   * Props
-   */
   BREAKPOINTS.map(breakpoint =>
     it(`should have breakpoint ${breakpoint}`, () => {
       const wrapper = Enzyme.shallow(<Level breakpoint={breakpoint} />);
       expect(wrapper.hasClass(`is-${breakpoint}`)).toBe(true);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = Level;
+    testGenericPropTypes(propTypes);
+    validateOneOfPropType(propTypes, "breakpoint", BREAKPOINTS);
+  });
 });
diff --git a/src/components/level/level-item.tsx b/src/components/level/level-item.tsx
index 8e214ad4..468627e6 100644
--- a/src/components/level/level-item.tsx
+++ b/src/components/level/level-item.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type LevelItemModifierProps = Partial<{ className: string }>;
+export type LevelItemProps = HelpersProps;
 
-export type LevelItemProps = HelpersProps & LevelItemModifierProps;
-
-export const LevelItem = forwardRefAs<LevelItemProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("level-item", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const LevelItem = Object.assign(
+  forwardRefAs<LevelItemProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("level-item", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/level/level-left.tsx b/src/components/level/level-left.tsx
index 3dbcd276..6a5568bb 100644
--- a/src/components/level/level-left.tsx
+++ b/src/components/level/level-left.tsx
@@ -1,19 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type LevelLeftModifierProps = Partial<{
-  className: string;
-}>;
+export type LevelLeftProps = HelpersProps;
 
-export type LevelLeftProps = HelpersProps & LevelLeftModifierProps;
-
-export const LevelLeft = forwardRefAs<LevelLeftProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("level-left", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const LevelLeft = Object.assign(
+  forwardRefAs<LevelLeftProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("level-left", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/level/level-right.tsx b/src/components/level/level-right.tsx
index 2112d9ff..b6f7896e 100644
--- a/src/components/level/level-right.tsx
+++ b/src/components/level/level-right.tsx
@@ -1,19 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type LevelRightModifierProps = Partial<{
-  className: string;
-}>;
+export type LevelRightProps = HelpersProps;
 
-export type LevelRightProps = HelpersProps & LevelRightModifierProps;
-
-export const LevelRight = forwardRefAs<LevelRightProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("level-right", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const LevelRight = Object.assign(
+  forwardRefAs<LevelRightProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("level-right", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/level/level.tsx b/src/components/level/level.tsx
index 95d84737..9c91f99b 100644
--- a/src/components/level/level.tsx
+++ b/src/components/level/level.tsx
@@ -1,19 +1,29 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
-import { Breakpoints } from "../../base/helpers";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
+import { Breakpoints, BREAKPOINTS } from "../../base/helpers";
 import { LevelItem } from "./level-item";
 import { LevelLeft } from "./level-left";
 import { LevelRight } from "./level-right";
 
 export type LevelModifierProps = Partial<{
   breakpoint: Breakpoints;
-  className: string;
 }>;
 
 export type LevelProps = HelpersProps & LevelModifierProps;
 
+const propTypes = {
+  ...genericPropTypes,
+  breakpoint: PropTypes.oneOf(BREAKPOINTS),
+};
+
 export const Level = Object.assign(
   forwardRefAs<LevelProps, "nav">(
     (props, ref) => {
@@ -29,5 +39,6 @@ export const Level = Object.assign(
     Item: LevelItem,
     Left: LevelLeft,
     Right: LevelRight,
+    propTypes,
   },
 );
diff --git a/src/components/list/__tests__/list-item.test.tsx b/src/components/list/__tests__/list-item.test.tsx
index e4b33faf..dbeeacb4 100644
--- a/src/components/list/__tests__/list-item.test.tsx
+++ b/src/components/list/__tests__/list-item.test.tsx
@@ -3,7 +3,11 @@ import React from "react";
 
 import { ListItem } from "../list-item";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+} from "@/__tests__/testing";
 
 describe("ListItem component", () => {
   hasProperties(ListItem, {
@@ -50,11 +54,14 @@ describe("ListItem component", () => {
     expect(wrapper.hasClass(className)).toBe(true);
   });
 
-  /**
-   * Props
-   */
   it("should be active", () => {
     const wrapper = Enzyme.shallow(<ListItem active />);
     expect(wrapper.hasClass("is-active")).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = ListItem;
+    testGenericPropTypes(propTypes);
+    validateBoolPropType(propTypes, "active");
+  });
 });
diff --git a/src/components/list/__tests__/list.test.tsx b/src/components/list/__tests__/list.test.tsx
index 8269d227..b48974f2 100644
--- a/src/components/list/__tests__/list.test.tsx
+++ b/src/components/list/__tests__/list.test.tsx
@@ -4,7 +4,11 @@ import React from "react";
 import { List } from "../list";
 import { ListItem } from "../list-item";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+} from "@/__tests__/testing";
 
 describe("List component", () => {
   hasProperties(List, {
@@ -52,11 +56,14 @@ describe("List component", () => {
     expect(wrapper.hasClass(className)).toBe(true);
   });
 
-  /**
-   * Props
-   */
   it("should be hoverable", () => {
     const wrapper = Enzyme.shallow(<List hoverable />);
     expect(wrapper.hasClass("is-hoverable")).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = List;
+    testGenericPropTypes(propTypes);
+    validateBoolPropType(propTypes, "hoverable");
+  });
 });
diff --git a/src/components/list/list-item.tsx b/src/components/list/list-item.tsx
index 563d8515..e5fe5882 100644
--- a/src/components/list/list-item.tsx
+++ b/src/components/list/list-item.tsx
@@ -1,25 +1,38 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
 export type ListItemModifierProps = Partial<{
   active: boolean;
-  className: string;
 }>;
 
 export type ListItemProps = HelpersProps & ListItemModifierProps;
 
-export const ListItem = forwardRefAs<ListItemProps, "a">(
-  (props, ref) => {
-    const { active, as, ...rest } = transformHelpers(props);
-    rest.className = classNames("list-item", rest.className, {
-      "is-active": active,
-    });
-    return React.createElement(as!, { ref, ...rest });
-  },
-  {
-    active: false,
-    as: "a",
-  },
+const propTypes = {
+  ...genericPropTypes,
+  active: PropTypes.bool,
+};
+
+export const ListItem = Object.assign(
+  forwardRefAs<ListItemProps, "a">(
+    (props, ref) => {
+      const { active, as, ...rest } = transformHelpers(props);
+      rest.className = classNames("list-item", rest.className, {
+        "is-active": active,
+      });
+      return React.createElement(as!, { ref, ...rest });
+    },
+    {
+      active: false,
+      as: "a",
+    },
+  ),
+  { propTypes },
 );
diff --git a/src/components/list/list.tsx b/src/components/list/list.tsx
index 0437447a..4cb24fbc 100644
--- a/src/components/list/list.tsx
+++ b/src/components/list/list.tsx
@@ -1,16 +1,26 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { ListItem } from "./list-item";
 
 export type ListModifierProps = Partial<{
-  className: string;
   hoverable: boolean;
 }>;
 
 export type ListProps = HelpersProps & ListModifierProps;
 
+const propTypes = {
+  ...genericPropTypes,
+  hoverable: PropTypes.bool,
+};
+
 export const List = Object.assign(
   forwardRefAs<ListProps, "div">(
     (props, ref) => {
@@ -25,5 +35,8 @@ export const List = Object.assign(
       hoverable: false,
     },
   ),
-  { Item: ListItem },
+  {
+    Item: ListItem,
+    propTypes,
+  },
 );
diff --git a/src/components/media/__tests__/media-item.test.tsx b/src/components/media/__tests__/media-item.test.tsx
index d2bae5f7..5cdf61d6 100644
--- a/src/components/media/__tests__/media-item.test.tsx
+++ b/src/components/media/__tests__/media-item.test.tsx
@@ -3,7 +3,11 @@ import React from "react";
 
 import { MEDIA_ITEM_POSITIONS, MediaItem } from "../media-item";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateOneOfPropType,
+} from "@/__tests__/testing";
 
 describe("MediaItem component", () => {
   hasProperties(MediaItem, {
@@ -53,4 +57,10 @@ describe("MediaItem component", () => {
       expect(wrapper.hasClass(`media-${position}`)).toBe(true);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = MediaItem;
+    testGenericPropTypes(propTypes);
+    validateOneOfPropType(propTypes, "position", MEDIA_ITEM_POSITIONS);
+  });
 });
diff --git a/src/components/media/__tests__/media.test.tsx b/src/components/media/__tests__/media.test.tsx
index 5df4cb6e..fc04c552 100644
--- a/src/components/media/__tests__/media.test.tsx
+++ b/src/components/media/__tests__/media.test.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { Media } from "../media";
 import { MediaItem } from "../media-item";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("Media component", () => {
   hasProperties(Media, {
@@ -48,4 +48,9 @@ describe("Media component", () => {
     const wrapper = Enzyme.shallow(<Media className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = Media;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/media/media-item.tsx b/src/components/media/media-item.tsx
index 56a2515e..dcef1611 100644
--- a/src/components/media/media-item.tsx
+++ b/src/components/media/media-item.tsx
@@ -1,29 +1,42 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { tuple } from "../../utils";
 
 export const MEDIA_ITEM_POSITIONS = tuple("content", "left", "right");
 export type MediaItemPositions = (typeof MEDIA_ITEM_POSITIONS)[number];
 
 export type MediaItemModifierProps = Partial<{
-  className: string;
   position: MediaItemPositions;
 }>;
 
 export type MediaItemProps = HelpersProps & MediaItemModifierProps;
 
-export const MediaItem = forwardRefAs<MediaItemProps, "div">(
-  (props, ref) => {
-    const { as, position, ...rest } = transformHelpers(props);
-    rest.className = classNames(rest.className, {
-      [`media-${position}`]: position,
-    });
-    return React.createElement(as!, { ref, ...rest });
-  },
-  {
-    as: "div",
-    position: "content",
-  },
+const propTypes = {
+  ...genericPropTypes,
+  position: PropTypes.oneOf(MEDIA_ITEM_POSITIONS),
+};
+
+export const MediaItem = Object.assign(
+  forwardRefAs<MediaItemProps, "div">(
+    (props, ref) => {
+      const { as, position, ...rest } = transformHelpers(props);
+      rest.className = classNames(rest.className, {
+        [`media-${position}`]: position,
+      });
+      return React.createElement(as!, { ref, ...rest });
+    },
+    {
+      as: "div",
+      position: "content",
+    },
+  ),
+  { propTypes },
 );
diff --git a/src/components/media/media.tsx b/src/components/media/media.tsx
index 1c439455..c7bc41cb 100644
--- a/src/components/media/media.tsx
+++ b/src/components/media/media.tsx
@@ -1,12 +1,15 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { MediaItem } from "./media-item";
 
-export type MediaModifierProps = Partial<{ className: string }>;
-
-export type MediaProps = HelpersProps & MediaModifierProps;
+export type MediaProps = HelpersProps;
 
 export const Media = Object.assign(
   forwardRefAs<MediaProps, "article">(
@@ -19,5 +22,6 @@ export const Media = Object.assign(
   ),
   {
     Item: MediaItem,
+    propTypes: genericPropTypes,
   },
 );
diff --git a/src/components/menu/__tests__/menu-label.test.tsx b/src/components/menu/__tests__/menu-label.test.tsx
index bbe59467..d6c8cec7 100644
--- a/src/components/menu/__tests__/menu-label.test.tsx
+++ b/src/components/menu/__tests__/menu-label.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { MenuLabel } from "../menu-label";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("MenuLabel component", () => {
   hasProperties(MenuLabel, {
@@ -46,4 +46,9 @@ describe("MenuLabel component", () => {
     const wrapper = Enzyme.shallow(<MenuLabel className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = MenuLabel;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/menu/__tests__/menu-list-item.test.tsx b/src/components/menu/__tests__/menu-list-item.test.tsx
index ff2db745..d67ba191 100644
--- a/src/components/menu/__tests__/menu-list-item.test.tsx
+++ b/src/components/menu/__tests__/menu-list-item.test.tsx
@@ -4,7 +4,12 @@ import React from "react";
 import { MenuList } from "../menu-list";
 import { MenuListItem } from "../menu-list-item";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+  validatePropType,
+} from "@/__tests__/testing";
 
 describe("MenuListItem component", () => {
   hasProperties(MenuListItem, {
@@ -58,4 +63,14 @@ describe("MenuListItem component", () => {
     expect(wrapper.childAt(0).is("a")).toBe(true);
     expect(wrapper.childAt(1).type()).toBe(MenuList);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = MenuListItem;
+    testGenericPropTypes(propTypes);
+    validateBoolPropType(propTypes, "active");
+    validatePropType(propTypes, "menu", [
+      { value: <div />, valid: true, descriptor: "div" },
+      { value: {}, valid: false, descriptor: "obj" },
+    ]);
+  });
 });
diff --git a/src/components/menu/__tests__/menu-list.test.tsx b/src/components/menu/__tests__/menu-list.test.tsx
index b2f46d5c..c1414ef1 100644
--- a/src/components/menu/__tests__/menu-list.test.tsx
+++ b/src/components/menu/__tests__/menu-list.test.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { MenuList } from "../menu-list";
 import { MenuListItem } from "../menu-list-item";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("MenuList component", () => {
   hasProperties(MenuList, {
@@ -42,4 +42,9 @@ describe("MenuList component", () => {
     const wrapper = Enzyme.shallow(<MenuList className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = MenuList;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/menu/__tests__/menu.test.tsx b/src/components/menu/__tests__/menu.test.tsx
index ad5b274b..968e0dcc 100644
--- a/src/components/menu/__tests__/menu.test.tsx
+++ b/src/components/menu/__tests__/menu.test.tsx
@@ -5,7 +5,7 @@ import { Menu } from "../menu";
 import { MenuLabel } from "../menu-label";
 import { MenuList } from "../menu-list";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("Menu component", () => {
   hasProperties(Menu, {
@@ -50,4 +50,9 @@ describe("Menu component", () => {
     const wrapper = Enzyme.shallow(<Menu className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = Menu;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/menu/menu-label.tsx b/src/components/menu/menu-label.tsx
index 2a56fea5..020bb411 100644
--- a/src/components/menu/menu-label.tsx
+++ b/src/components/menu/menu-label.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type MenuLabelModifierProps = Partial<{ className: string }>;
+export type MenuLabelProps = HelpersProps;
 
-export type MenuLabelProps = HelpersProps & MenuLabelModifierProps;
-
-export const MenuLabel = forwardRefAs<MenuLabelProps, "p">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("menu-label", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "p" },
+export const MenuLabel = Object.assign(
+  forwardRefAs<MenuLabelProps, "p">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("menu-label", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "p" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/menu/menu-list-item.tsx b/src/components/menu/menu-list-item.tsx
index 5b455828..f45fc9bb 100644
--- a/src/components/menu/menu-list-item.tsx
+++ b/src/components/menu/menu-list-item.tsx
@@ -1,27 +1,41 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
 export type MenuListItemModifierProps = Partial<{
   active: boolean;
-  className: string;
   menu: React.ReactNode;
 }>;
 
 export type MenuListItemProps = HelpersProps & MenuListItemModifierProps;
 
-export const MenuListItem = forwardRefAs<MenuListItemProps, "a">(
-  (props, ref) => {
-    const { active, as, menu, ...rest } = transformHelpers(props);
-    rest.className =
-      classNames({ "is-active": active }, rest.className) || undefined;
-    return (
-      <li>
-        {React.createElement(as!, { ref, ...rest })}
-        {menu && menu}
-      </li>
-    );
-  },
-  { as: "a" },
+const propTypes = {
+  ...genericPropTypes,
+  active: PropTypes.bool,
+  menu: PropTypes.node,
+};
+
+export const MenuListItem = Object.assign(
+  forwardRefAs<MenuListItemProps, "a">(
+    (props, ref) => {
+      const { active, as, menu, ...rest } = transformHelpers(props);
+      rest.className =
+        classNames({ "is-active": active }, rest.className) || undefined;
+      return (
+        <li>
+          {React.createElement(as!, { ref, ...rest })}
+          {menu && menu}
+        </li>
+      );
+    },
+    { as: "a" },
+  ),
+  { propTypes },
 );
diff --git a/src/components/menu/menu-list.tsx b/src/components/menu/menu-list.tsx
index 6136174b..1b633ef3 100644
--- a/src/components/menu/menu-list.tsx
+++ b/src/components/menu/menu-list.tsx
@@ -1,12 +1,15 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { MenuListItem } from "./menu-list-item";
 
-export type MenuListModifierProps = Partial<{ className: string }>;
-
-export type MenuListProps = HelpersProps & MenuListModifierProps;
+export type MenuListProps = HelpersProps;
 
 export const MenuList = Object.assign(
   forwardRefAs<MenuListProps, "ul">(
@@ -19,5 +22,6 @@ export const MenuList = Object.assign(
   ),
   {
     Item: MenuListItem,
+    propTypes: genericPropTypes,
   },
 );
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index 329613ed..82730bbf 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -1,13 +1,16 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { MenuLabel } from "./menu-label";
 import { MenuList } from "./menu-list";
 
-export type MenuModifierProps = Partial<{ className: string }>;
-
-export type MenuProps = HelpersProps & MenuModifierProps;
+export type MenuProps = HelpersProps;
 
 export const Menu = Object.assign(
   forwardRefAs<MenuProps, "aside">(
@@ -21,5 +24,6 @@ export const Menu = Object.assign(
   {
     Label: MenuLabel,
     List: MenuList,
+    propTypes: genericPropTypes,
   },
 );
diff --git a/src/components/message/__tests__/message-body.test.tsx b/src/components/message/__tests__/message-body.test.tsx
index 953542db..9bb8e06f 100644
--- a/src/components/message/__tests__/message-body.test.tsx
+++ b/src/components/message/__tests__/message-body.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { MessageBody } from "../message-body";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("MessageBody component", () => {
   hasProperties(MessageBody, {
@@ -46,4 +46,9 @@ describe("MessageBody component", () => {
     const wrapper = Enzyme.shallow(<MessageBody className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = MessageBody;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/message/__tests__/message-header.test.tsx b/src/components/message/__tests__/message-header.test.tsx
index 27bbeb45..6503d60a 100644
--- a/src/components/message/__tests__/message-header.test.tsx
+++ b/src/components/message/__tests__/message-header.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { MessageHeader } from "../message-header";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("MessageHeader component", () => {
   hasProperties(MessageHeader, {
@@ -46,4 +46,9 @@ describe("MessageHeader component", () => {
     const wrapper = Enzyme.shallow(<MessageHeader className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = MessageHeader;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/message/__tests__/message.test.tsx b/src/components/message/__tests__/message.test.tsx
index d812b1d9..45a41113 100644
--- a/src/components/message/__tests__/message.test.tsx
+++ b/src/components/message/__tests__/message.test.tsx
@@ -6,7 +6,11 @@ import { Message, MESSAGE_SIZES } from "../message";
 import { MessageBody } from "../message-body";
 import { MessageHeader } from "../message-header";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateOneOfPropType,
+} from "@/__tests__/testing";
 
 describe("Message component", () => {
   hasProperties(Message, {
@@ -68,4 +72,11 @@ describe("Message component", () => {
       expect(wrapper.hasClass(`is-${size}`)).toBe(true);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = Message;
+    testGenericPropTypes(propTypes);
+    validateOneOfPropType(propTypes, "color", COLORS);
+    validateOneOfPropType(propTypes, "size", MESSAGE_SIZES);
+  });
 });
diff --git a/src/components/message/message-body.tsx b/src/components/message/message-body.tsx
index baf48c7e..d837d9cc 100644
--- a/src/components/message/message-body.tsx
+++ b/src/components/message/message-body.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type MessageBodyModifierProps = Partial<{ className: string }>;
+export type MessageBodyProps = HelpersProps;
 
-export type MessageBodyProps = HelpersProps & MessageBodyModifierProps;
-
-export const MessageBody = forwardRefAs<MessageBodyProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("message-body", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const MessageBody = Object.assign(
+  forwardRefAs<MessageBodyProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("message-body", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/message/message-header.tsx b/src/components/message/message-header.tsx
index 401745f6..d54b07da 100644
--- a/src/components/message/message-header.tsx
+++ b/src/components/message/message-header.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type MessageHeaderModifierProps = Partial<{ className: string }>;
+export type MessageHeaderProps = HelpersProps;
 
-export type MessageHeaderProps = HelpersProps & MessageHeaderModifierProps;
-
-export const MessageHeader = forwardRefAs<MessageHeaderProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("message-header", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const MessageHeader = Object.assign(
+  forwardRefAs<MessageHeaderProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("message-header", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/message/message.tsx b/src/components/message/message.tsx
index 0adf38e2..a5d9c9cf 100644
--- a/src/components/message/message.tsx
+++ b/src/components/message/message.tsx
@@ -1,8 +1,14 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
-import { Colors } from "../../base/helpers";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
+import { Colors, COLORS } from "../../base/helpers";
 import { tuple } from "../../utils";
 import { MessageBody } from "./message-body";
 import { MessageHeader } from "./message-header";
@@ -11,13 +17,18 @@ export const MESSAGE_SIZES = tuple("small", "medium", "large");
 export type MessageSizes = (typeof MESSAGE_SIZES)[number];
 
 export type MessageModifierProps = Partial<{
-  className: string;
   color: Colors;
   size: MessageSizes;
 }>;
 
 export type MessageProps = HelpersProps & MessageModifierProps;
 
+const propTypes = {
+  ...genericPropTypes,
+  color: PropTypes.oneOf(COLORS),
+  size: PropTypes.oneOf(MESSAGE_SIZES),
+};
+
 export const Message = Object.assign(
   forwardRefAs<MessageProps, "article">(
     (props, ref) => {
@@ -30,5 +41,9 @@ export const Message = Object.assign(
     },
     { as: "article" },
   ),
-  { Body: MessageBody, Header: MessageHeader },
+  {
+    Body: MessageBody,
+    Header: MessageHeader,
+    propTypes,
+  },
 );
diff --git a/src/components/modal/__tests__/modal-background.test.tsx b/src/components/modal/__tests__/modal-background.test.tsx
index 5d855758..a4db88ab 100644
--- a/src/components/modal/__tests__/modal-background.test.tsx
+++ b/src/components/modal/__tests__/modal-background.test.tsx
@@ -2,7 +2,12 @@ import Enzyme from "enzyme";
 import React from "react";
 import { ModalBackground } from "../modal-background";
 
-import { hasProperties, shallowInContext } from "@/__tests__/testing";
+import {
+  hasProperties,
+  shallowInContext,
+  testGenericPropTypes,
+  validatePropType,
+} from "@/__tests__/testing";
 import { contextFactory } from "./helpers";
 
 describe("ModalBackground component", () => {
@@ -67,4 +72,13 @@ describe("ModalBackground component", () => {
       }),
     ),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = ModalBackground;
+    testGenericPropTypes(propTypes);
+    validatePropType(propTypes, "onClick", [
+      { value: () => null, valid: true, descriptor: "func" },
+      { value: "string", valid: false },
+    ]);
+  });
 });
diff --git a/src/components/modal/__tests__/modal-card-body.test.tsx b/src/components/modal/__tests__/modal-card-body.test.tsx
index fa5c8778..6ba910ae 100644
--- a/src/components/modal/__tests__/modal-card-body.test.tsx
+++ b/src/components/modal/__tests__/modal-card-body.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { ModalCardBody } from "../modal-card-body";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("ModalCardBody component", () => {
   hasProperties(ModalCardBody, {
@@ -46,4 +46,9 @@ describe("ModalCardBody component", () => {
     const wrapper = Enzyme.shallow(<ModalCardBody className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = ModalCardBody;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/modal/__tests__/modal-card-foot.test.tsx b/src/components/modal/__tests__/modal-card-foot.test.tsx
index 525c0ec7..e7839940 100644
--- a/src/components/modal/__tests__/modal-card-foot.test.tsx
+++ b/src/components/modal/__tests__/modal-card-foot.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { ModalCardFoot } from "../modal-card-foot";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("ModalCardFoot component", () => {
   hasProperties(ModalCardFoot, {
@@ -46,4 +46,9 @@ describe("ModalCardFoot component", () => {
     const wrapper = Enzyme.shallow(<ModalCardFoot className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = ModalCardFoot;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/modal/__tests__/modal-card-head.test.tsx b/src/components/modal/__tests__/modal-card-head.test.tsx
index 3f97925f..69d90d3a 100644
--- a/src/components/modal/__tests__/modal-card-head.test.tsx
+++ b/src/components/modal/__tests__/modal-card-head.test.tsx
@@ -4,7 +4,11 @@ import React from "react";
 import { Delete } from "@/elements";
 import { ModalCardHead } from "../modal-card-head";
 
-import { hasProperties, shallowInContext } from "@/__tests__/testing";
+import {
+  hasProperties,
+  shallowInContext,
+  testGenericPropTypes,
+} from "@/__tests__/testing";
 import { contextFactory } from "./helpers";
 
 describe("ModalCardHead component", () => {
@@ -74,4 +78,9 @@ describe("ModalCardHead component", () => {
     });
     expect(wrapper.children().prop("id")).toBe("foo");
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = ModalCardHead;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/modal/__tests__/modal-card-title.test.tsx b/src/components/modal/__tests__/modal-card-title.test.tsx
index 2a910567..702d0d02 100644
--- a/src/components/modal/__tests__/modal-card-title.test.tsx
+++ b/src/components/modal/__tests__/modal-card-title.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { ModalCardTitle } from "../modal-card-title";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("ModalCardTitle component", () => {
   hasProperties(ModalCardTitle, {
@@ -48,4 +48,9 @@ describe("ModalCardTitle component", () => {
     const wrapper = Enzyme.shallow(<ModalCardTitle className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = ModalCardTitle;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/modal/__tests__/modal-card.test.tsx b/src/components/modal/__tests__/modal-card.test.tsx
index f3680a5f..2352f037 100644
--- a/src/components/modal/__tests__/modal-card.test.tsx
+++ b/src/components/modal/__tests__/modal-card.test.tsx
@@ -7,7 +7,7 @@ import { ModalCardFoot } from "../modal-card-foot";
 import { ModalCardHead } from "../modal-card-head";
 import { ModalCardTitle } from "../modal-card-title";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("ModalCard component", () => {
   hasProperties(ModalCard, {
@@ -54,4 +54,9 @@ describe("ModalCard component", () => {
     const wrapper = Enzyme.shallow(<ModalCard className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = ModalCard;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/modal/__tests__/modal-close.test.tsx b/src/components/modal/__tests__/modal-close.test.tsx
index 6f07a270..cdde6912 100644
--- a/src/components/modal/__tests__/modal-close.test.tsx
+++ b/src/components/modal/__tests__/modal-close.test.tsx
@@ -4,7 +4,12 @@ import React from "react";
 import { ModalClose } from "../modal-close";
 import { contextFactory } from "./helpers";
 
-import { hasProperties, shallowInContext } from "@/__tests__/testing";
+import {
+  hasProperties,
+  shallowInContext,
+  testGenericPropTypes,
+  validatePropType,
+} from "@/__tests__/testing";
 
 describe("ModalClose component", () => {
   hasProperties(ModalClose, {
@@ -69,4 +74,13 @@ describe("ModalClose component", () => {
       expect(onClick.mock.calls).toHaveLength(hasOnClick ? 1 : 0);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = ModalClose;
+    testGenericPropTypes(propTypes);
+    validatePropType(propTypes, "onClick", [
+      { value: () => null, valid: true, descriptor: "func" },
+      { value: "string", valid: false },
+    ]);
+  });
 });
diff --git a/src/components/modal/__tests__/modal-content.test.tsx b/src/components/modal/__tests__/modal-content.test.tsx
index d4494275..af299344 100644
--- a/src/components/modal/__tests__/modal-content.test.tsx
+++ b/src/components/modal/__tests__/modal-content.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { ModalContent } from "../modal-content";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("ModalContent component", () => {
   hasProperties(ModalContent, {
@@ -46,4 +46,9 @@ describe("ModalContent component", () => {
     const wrapper = Enzyme.shallow(<ModalContent className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = ModalContent;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/modal/__tests__/modal.test.tsx b/src/components/modal/__tests__/modal.test.tsx
index 954480e0..5476e98f 100644
--- a/src/components/modal/__tests__/modal.test.tsx
+++ b/src/components/modal/__tests__/modal.test.tsx
@@ -8,7 +8,12 @@ import { ModalClose } from "../modal-close";
 import { ModalContent } from "../modal-content";
 import { ModalPortal } from "../modal-portal";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  validateBoolPropType,
+  validatePropType,
+  validateStringPropType,
+} from "@/__tests__/testing";
 
 describe("Modal component", () => {
   hasProperties(Modal, {
@@ -176,4 +181,17 @@ describe("Modal component", () => {
       expect(wrapper.type()).toBeNull();
     });
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = Modal;
+    validateBoolPropType(propTypes, "active");
+    validateStringPropType(propTypes, "className");
+    validateStringPropType(propTypes, "containerClassName");
+    validateBoolPropType(propTypes, "closeOnBlur");
+    validateBoolPropType(propTypes, "closeOnEsc");
+    validatePropType(propTypes, "onClose", [
+      { value: () => null, valid: true, descriptor: "func" },
+      { value: "string", valid: false },
+    ]);
+  });
 });
diff --git a/src/components/modal/modal-background.tsx b/src/components/modal/modal-background.tsx
index c6053191..e906ee00 100644
--- a/src/components/modal/modal-background.tsx
+++ b/src/components/modal/modal-background.tsx
@@ -1,39 +1,52 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { ModalContext } from "./modal-context";
 
 export type ModalBackgroundModifierProps = Partial<{
-  className: string;
   onClick: React.MouseEventHandler<any>;
 }>;
 
 export type ModalBackgroundProps = HelpersProps & ModalBackgroundModifierProps;
 
-export const ModalBackground = forwardRefAs<ModalBackgroundProps, "div">(
-  (props, ref) => {
-    const { as, onClick, ...rest } = transformHelpers(props);
-    rest.className = classNames("modal-background", rest.className);
-    return (
-      <ModalContext.Consumer>
-        {({ closeOnBlur, onClose }) =>
-          React.createElement(as!, {
-            onClick: (event: React.MouseEvent) => {
-              if (onClick) {
-                onClick(event);
-              }
-              if (closeOnBlur) {
-                onClose();
-              }
-            },
-            ref,
-            role: "presentation",
-            ...rest,
-          })
-        }
-      </ModalContext.Consumer>
-    );
-  },
-  { as: "div" },
+const propTypes = {
+  ...genericPropTypes,
+  onClick: PropTypes.func,
+};
+
+export const ModalBackground = Object.assign(
+  forwardRefAs<ModalBackgroundProps, "div">(
+    (props, ref) => {
+      const { as, onClick, ...rest } = transformHelpers(props);
+      rest.className = classNames("modal-background", rest.className);
+      return (
+        <ModalContext.Consumer>
+          {({ closeOnBlur, onClose }) =>
+            React.createElement(as!, {
+              onClick: (event: React.MouseEvent) => {
+                if (onClick) {
+                  onClick(event);
+                }
+                if (closeOnBlur) {
+                  onClose();
+                }
+              },
+              ref,
+              role: "presentation",
+              ...rest,
+            })
+          }
+        </ModalContext.Consumer>
+      );
+    },
+    { as: "div" },
+  ),
+  { propTypes },
 );
diff --git a/src/components/modal/modal-card-body.tsx b/src/components/modal/modal-card-body.tsx
index 323b217c..73bcfe80 100644
--- a/src/components/modal/modal-card-body.tsx
+++ b/src/components/modal/modal-card-body.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type ModalCardBodyModifierProps = Partial<{ className: string }>;
+export type ModalCardBodyProps = HelpersProps;
 
-export type ModalCardBodyProps = HelpersProps & ModalCardBodyModifierProps;
-
-export const ModalCardBody = forwardRefAs<ModalCardBodyProps, "section">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("modal-card-body", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "section" },
+export const ModalCardBody = Object.assign(
+  forwardRefAs<ModalCardBodyProps, "section">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("modal-card-body", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "section" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/modal/modal-card-foot.tsx b/src/components/modal/modal-card-foot.tsx
index 5323bff3..d49ae29a 100644
--- a/src/components/modal/modal-card-foot.tsx
+++ b/src/components/modal/modal-card-foot.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type ModalCardFootModifierProps = Partial<{ className: string }>;
+export type ModalCardFootProps = HelpersProps;
 
-export type ModalCardFootProps = HelpersProps & ModalCardFootModifierProps;
-
-export const ModalCardFoot = forwardRefAs<ModalCardFootProps, "footer">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("modal-card-foot", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "footer" },
+export const ModalCardFoot = Object.assign(
+  forwardRefAs<ModalCardFootProps, "footer">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("modal-card-foot", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "footer" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/modal/modal-card-head.tsx b/src/components/modal/modal-card-head.tsx
index d87c99ec..69e0a10c 100644
--- a/src/components/modal/modal-card-head.tsx
+++ b/src/components/modal/modal-card-head.tsx
@@ -1,38 +1,44 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { Delete } from "../../elements";
 import { ModalContext } from "./modal-context";
 
-export type ModalCardHeadModifierProps = Partial<{ className: string }>;
+export type ModalCardHeadProps = HelpersProps;
 
-export type ModalCardHeadProps = HelpersProps & ModalCardHeadModifierProps;
-
-export const ModalCardHead = forwardRefAs<ModalCardHeadProps, "header">(
-  (props, ref) => {
-    const { as, children, ...rest } = transformHelpers(props);
-    rest.className = classNames("modal-card-head", rest.className);
-    return (
-      <ModalContext.Consumer>
-        {({ onClose }) => {
-          const mapped = React.Children.map(children, (child, i) => {
-            if (typeof child === "object" && child.type === Delete) {
-              return React.cloneElement(child, {
-                onClick: (event: React.MouseEvent<any>) => {
-                  if (child.props.onClick) {
-                    child.props.onClick(event);
-                  }
-                  onClose();
-                },
-              });
-            }
-            return child;
-          });
-          return React.createElement(as!, { children: mapped, ref, ...rest });
-        }}
-      </ModalContext.Consumer>
-    );
-  },
-  { as: "header" },
+export const ModalCardHead = Object.assign(
+  forwardRefAs<ModalCardHeadProps, "header">(
+    (props, ref) => {
+      const { as, children, ...rest } = transformHelpers(props);
+      rest.className = classNames("modal-card-head", rest.className);
+      return (
+        <ModalContext.Consumer>
+          {({ onClose }) => {
+            const mapped = React.Children.map(children, (child, i) => {
+              if (typeof child === "object" && child.type === Delete) {
+                return React.cloneElement(child, {
+                  onClick: (event: React.MouseEvent<any>) => {
+                    if (child.props.onClick) {
+                      child.props.onClick(event);
+                    }
+                    onClose();
+                  },
+                });
+              }
+              return child;
+            });
+            return React.createElement(as!, { children: mapped, ref, ...rest });
+          }}
+        </ModalContext.Consumer>
+      );
+    },
+    { as: "header" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/modal/modal-card-title.tsx b/src/components/modal/modal-card-title.tsx
index fa6fa25a..d11f2d2d 100644
--- a/src/components/modal/modal-card-title.tsx
+++ b/src/components/modal/modal-card-title.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type ModalCardTitleModifierProps = Partial<{ className: string }>;
+export type ModalCardTitleProps = HelpersProps;
 
-export type ModalCardTitleProps = HelpersProps & ModalCardTitleModifierProps;
-
-export const ModalCardTitle = forwardRefAs<ModalCardTitleProps, "p">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("modal-card-title", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "p" },
+export const ModalCardTitle = Object.assign(
+  forwardRefAs<ModalCardTitleProps, "p">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("modal-card-title", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "p" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/modal/modal-card.tsx b/src/components/modal/modal-card.tsx
index 13f608e3..bdb69caf 100644
--- a/src/components/modal/modal-card.tsx
+++ b/src/components/modal/modal-card.tsx
@@ -1,7 +1,12 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { ModalCardBody } from "./modal-card-body";
 import { ModalCardFoot } from "./modal-card-foot";
 import { ModalCardHead } from "./modal-card-head";
@@ -26,5 +31,6 @@ export const ModalCard = Object.assign(
     Foot: ModalCardFoot,
     Head: ModalCardHead,
     Title: ModalCardTitle,
+    propTypes: genericPropTypes,
   },
 );
diff --git a/src/components/modal/modal-close.tsx b/src/components/modal/modal-close.tsx
index 4c0d0fbe..7895601f 100644
--- a/src/components/modal/modal-close.tsx
+++ b/src/components/modal/modal-close.tsx
@@ -1,37 +1,50 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { ModalContext } from "./modal-context";
 
 export type ModalCloseModifierProps = Partial<{
-  className: string;
   onClick: React.MouseEventHandler<any>;
 }>;
 
 export type ModalCloseProps = HelpersProps & ModalCloseModifierProps;
 
-export const ModalClose = forwardRefAs<ModalCloseProps, "button">(
-  (props, ref) => {
-    const { as, onClick, ...rest } = transformHelpers(props);
-    rest.className = classNames("modal-close", "is-large", rest.className);
-    return (
-      <ModalContext.Consumer>
-        {({ onClose }) =>
-          React.createElement(as!, {
-            ["aria-label"]: "close",
-            onClick: (event: React.MouseEvent<any>) => {
-              if (onClick) {
-                onClick(event);
-              }
-              onClose();
-            },
-            ref,
-            ...rest,
-          })
-        }
-      </ModalContext.Consumer>
-    );
-  },
-  { as: "button" },
+const propTypes = {
+  ...genericPropTypes,
+  onClick: PropTypes.func,
+};
+
+export const ModalClose = Object.assign(
+  forwardRefAs<ModalCloseProps, "button">(
+    (props, ref) => {
+      const { as, onClick, ...rest } = transformHelpers(props);
+      rest.className = classNames("modal-close", "is-large", rest.className);
+      return (
+        <ModalContext.Consumer>
+          {({ onClose }) =>
+            React.createElement(as!, {
+              ["aria-label"]: "close",
+              onClick: (event: React.MouseEvent<any>) => {
+                if (onClick) {
+                  onClick(event);
+                }
+                onClose();
+              },
+              ref,
+              ...rest,
+            })
+          }
+        </ModalContext.Consumer>
+      );
+    },
+    { as: "button" },
+  ),
+  { propTypes },
 );
diff --git a/src/components/modal/modal-content.tsx b/src/components/modal/modal-content.tsx
index 2c9c19e9..0ca6c3fd 100644
--- a/src/components/modal/modal-content.tsx
+++ b/src/components/modal/modal-content.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type ModalContentModifierProps = Partial<{ className: string }>;
+export type ModalContentProps = HelpersProps;
 
-export type ModalContentProps = HelpersProps & ModalContentModifierProps;
-
-export const ModalContent = forwardRefAs<ModalContentProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("modal-content", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const ModalContent = Object.assign(
+  forwardRefAs<ModalContentProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("modal-content", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 04a3aa28..ae419aa7 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import React from "react";
 import ReactDOM from "react-dom";
 
@@ -13,6 +14,17 @@ export type ModalModifierProps = Partial<{
   active: boolean;
 }>;
 
+export type ModalProps = Omit<ModalControllerProps, "as" | "innerRef">;
+
+const propTypes = {
+  active: PropTypes.bool,
+  className: PropTypes.string,
+  closeOnBlur: PropTypes.bool,
+  closeOnEsc: PropTypes.bool,
+  containerClassName: PropTypes.string,
+  onClose: PropTypes.func,
+};
+
 export type ModalControllerProps = ModalPortalProps &
   ModalModifierProps & { containerClassName?: string };
 
@@ -49,8 +61,6 @@ export class ModalController extends React.PureComponent<ModalControllerProps> {
   }
 }
 
-export type ModalProps = Omit<ModalControllerProps, "as" | "innerRef">;
-
 export const Modal = Object.assign(
   forwardRefAs<ModalProps, "div">(
     (props, ref) => {
@@ -64,5 +74,6 @@ export const Modal = Object.assign(
     Card: ModalCard,
     Close: ModalClose,
     Content: ModalContent,
+    propTypes,
   },
 );
diff --git a/src/components/navbar/__tests__/navbar-brand.test.tsx b/src/components/navbar/__tests__/navbar-brand.test.tsx
index c28a4d26..ca09bf2e 100644
--- a/src/components/navbar/__tests__/navbar-brand.test.tsx
+++ b/src/components/navbar/__tests__/navbar-brand.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { NavbarBrand } from "../navbar-brand";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("NavbarBrand component", () => {
   hasProperties(NavbarBrand, {
@@ -46,4 +46,9 @@ describe("NavbarBrand component", () => {
     const wrapper = Enzyme.shallow(<NavbarBrand className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = NavbarBrand;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/navbar/__tests__/navbar-burger.test.tsx b/src/components/navbar/__tests__/navbar-burger.test.tsx
index 46ed7b26..1be9fdb5 100644
--- a/src/components/navbar/__tests__/navbar-burger.test.tsx
+++ b/src/components/navbar/__tests__/navbar-burger.test.tsx
@@ -4,7 +4,12 @@ import React from "react";
 import { NavbarBurger } from "../navbar-burger";
 import { contextFactory } from "./helpers";
 
-import { hasProperties, shallowInContext } from "@/__tests__/testing";
+import {
+  hasProperties,
+  shallowInContext,
+  testGenericPropTypes,
+  validatePropType,
+} from "@/__tests__/testing";
 
 describe("NavbarBurger component", () => {
   hasProperties(NavbarBurger, {
@@ -96,4 +101,17 @@ describe("NavbarBurger component", () => {
       expect(setActive.mock.calls[0]).toEqual([true]);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = NavbarBurger;
+    testGenericPropTypes(propTypes);
+    validatePropType(propTypes, "onClick", [
+      { value: () => null, valid: true, descriptor: "func" },
+      { value: "string", valid: false },
+    ]);
+    validatePropType(propTypes, "style", [
+      { value: {}, valid: true, descriptor: "obj" },
+      { value: "string", valid: false },
+    ]);
+  });
 });
diff --git a/src/components/navbar/__tests__/navbar-divider.test.tsx b/src/components/navbar/__tests__/navbar-divider.test.tsx
index 3725fcf6..714c9d65 100644
--- a/src/components/navbar/__tests__/navbar-divider.test.tsx
+++ b/src/components/navbar/__tests__/navbar-divider.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { NavbarDivider } from "../navbar-divider";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("NavbarDivider component", () => {
   hasProperties(NavbarDivider, {
@@ -46,4 +46,9 @@ describe("NavbarDivider component", () => {
     const wrapper = Enzyme.shallow(<NavbarDivider className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = NavbarDivider;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/navbar/__tests__/navbar-dropdown.test.tsx b/src/components/navbar/__tests__/navbar-dropdown.test.tsx
index c15eb3b6..be9f62da 100644
--- a/src/components/navbar/__tests__/navbar-dropdown.test.tsx
+++ b/src/components/navbar/__tests__/navbar-dropdown.test.tsx
@@ -3,7 +3,11 @@ import React from "react";
 
 import { NavbarDropdown } from "../navbar-dropdown";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+} from "@/__tests__/testing";
 
 describe("NavbarDropdown component", () => {
   hasProperties(NavbarDropdown, {
@@ -60,4 +64,11 @@ describe("NavbarDropdown component", () => {
       expect(wrapper.hasClass("is-boxed")).toBe(boxed);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = NavbarDropdown;
+    testGenericPropTypes(propTypes);
+    validateBoolPropType(propTypes, "boxed");
+    validateBoolPropType(propTypes, "right");
+  });
 });
diff --git a/src/components/navbar/__tests__/navbar-end.test.tsx b/src/components/navbar/__tests__/navbar-end.test.tsx
index 6ff0ea1d..740341e0 100644
--- a/src/components/navbar/__tests__/navbar-end.test.tsx
+++ b/src/components/navbar/__tests__/navbar-end.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { NavbarEnd } from "../navbar-end";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("NavbarEnd component", () => {
   hasProperties(NavbarEnd, {
@@ -46,4 +46,9 @@ describe("NavbarEnd component", () => {
     const wrapper = Enzyme.shallow(<NavbarEnd className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = NavbarEnd;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/navbar/__tests__/navbar-item.test.tsx b/src/components/navbar/__tests__/navbar-item.test.tsx
index 1d56d44c..fcd074b1 100644
--- a/src/components/navbar/__tests__/navbar-item.test.tsx
+++ b/src/components/navbar/__tests__/navbar-item.test.tsx
@@ -3,7 +3,11 @@ import React from "react";
 
 import { NavbarItem } from "../navbar-item";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+} from "@/__tests__/testing";
 
 describe("NavbarItem component", () => {
   hasProperties(NavbarItem, {
@@ -74,4 +78,13 @@ describe("NavbarItem component", () => {
       expect(wrapper.hasClass("is-hoverable")).toBe(hoverable);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = NavbarItem;
+    testGenericPropTypes(propTypes);
+    validateBoolPropType(propTypes, "active");
+    validateBoolPropType(propTypes, "dropdown");
+    validateBoolPropType(propTypes, "dropdownUp");
+    validateBoolPropType(propTypes, "hoverable");
+  });
 });
diff --git a/src/components/navbar/__tests__/navbar-link.test.tsx b/src/components/navbar/__tests__/navbar-link.test.tsx
index db4f97b7..372f90a4 100644
--- a/src/components/navbar/__tests__/navbar-link.test.tsx
+++ b/src/components/navbar/__tests__/navbar-link.test.tsx
@@ -3,7 +3,11 @@ import React from "react";
 
 import { NavbarLink } from "../navbar-link";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+} from "@/__tests__/testing";
 
 describe("NavbarLink component", () => {
   hasProperties(NavbarLink, {
@@ -55,4 +59,10 @@ describe("NavbarLink component", () => {
       expect(wrapper.hasClass("is-arrowless")).toBe(arrowless);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = NavbarLink;
+    testGenericPropTypes(propTypes);
+    validateBoolPropType(propTypes, "arrowless");
+  });
 });
diff --git a/src/components/navbar/__tests__/navbar-menu.test.tsx b/src/components/navbar/__tests__/navbar-menu.test.tsx
index 0ed42f3c..7e75c25c 100644
--- a/src/components/navbar/__tests__/navbar-menu.test.tsx
+++ b/src/components/navbar/__tests__/navbar-menu.test.tsx
@@ -4,7 +4,11 @@ import React from "react";
 import { NavbarMenu } from "../navbar-menu";
 import { contextFactory } from "./helpers";
 
-import { hasProperties, shallowInContext } from "@/__tests__/testing";
+import {
+  hasProperties,
+  shallowInContext,
+  testGenericPropTypes,
+} from "@/__tests__/testing";
 
 describe("NavbarMenu component", () => {
   hasProperties(NavbarMenu, {
@@ -60,4 +64,9 @@ describe("NavbarMenu component", () => {
       expect(wrapper.hasClass("is-active")).toBe(active);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = NavbarMenu;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/navbar/__tests__/navbar-start.test.tsx b/src/components/navbar/__tests__/navbar-start.test.tsx
index 978896e6..0c77f736 100644
--- a/src/components/navbar/__tests__/navbar-start.test.tsx
+++ b/src/components/navbar/__tests__/navbar-start.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { NavbarStart } from "../navbar-start";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("NavbarStart component", () => {
   hasProperties(NavbarStart, {
@@ -46,4 +46,9 @@ describe("NavbarStart component", () => {
     const wrapper = Enzyme.shallow(<NavbarStart className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = NavbarStart;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/navbar/__tests__/navbar.test.tsx b/src/components/navbar/__tests__/navbar.test.tsx
index f4a623bb..810b1a89 100644
--- a/src/components/navbar/__tests__/navbar.test.tsx
+++ b/src/components/navbar/__tests__/navbar.test.tsx
@@ -19,7 +19,12 @@ import { NavbarLink } from "../navbar-link";
 import { NavbarMenu } from "../navbar-menu";
 import { NavbarStart } from "../navbar-start";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+  validateOneOfPropType,
+} from "@/__tests__/testing";
 
 describe("Navbar component", () => {
   hasProperties(Navbar, {
@@ -287,4 +292,14 @@ describe("Navbar component", () => {
       expect(wrapper.type()).toBeNull();
     });
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = Navbar;
+    testGenericPropTypes(propTypes);
+    validateBoolPropType(propTypes, "active");
+    validateOneOfPropType(propTypes, "color", COLORS);
+    validateOneOfPropType(propTypes, "fixed", NAVBAR_FIXED_ALIGNMENTS);
+    validateBoolPropType(propTypes, "managed");
+    validateBoolPropType(propTypes, "transparent");
+  });
 });
diff --git a/src/components/navbar/navbar-brand.tsx b/src/components/navbar/navbar-brand.tsx
index 46a9ce3b..cf131987 100644
--- a/src/components/navbar/navbar-brand.tsx
+++ b/src/components/navbar/navbar-brand.tsx
@@ -1,18 +1,26 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
 export type NavbarBrandProps = Prefer<
   HelpersProps,
   React.HTMLAttributes<HTMLDivElement>
 >;
 
-export const NavbarBrand = forwardRefAs<NavbarBrandProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("navbar-brand", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const NavbarBrand = Object.assign(
+  forwardRefAs<NavbarBrandProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("navbar-brand", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/navbar/navbar-burger.tsx b/src/components/navbar/navbar-burger.tsx
index b5350762..7af672cc 100644
--- a/src/components/navbar/navbar-burger.tsx
+++ b/src/components/navbar/navbar-burger.tsx
@@ -1,49 +1,63 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { NavbarContext } from "./navbar-context";
 
 export type NavbarBurgerModifierProps = Partial<{
-  className: string;
   onClick: React.MouseEventHandler<any>;
   style: React.CSSProperties;
 }>;
 
 export type NavbarBurgerProps = HelpersProps & NavbarBurgerModifierProps;
 
-export const NavbarBurger = forwardRefAs<NavbarBurgerProps, "div">(
-  (props, ref) => {
-    return (
-      <NavbarContext.Consumer>
-        {({ active, setActive }) => {
-          const { as, style, onClick, ...rest } = transformHelpers(props);
-          rest.className = classNames("navbar-burger", rest.className, {
-            "is-active": active,
-          });
-          return React.createElement(as!, {
-            children: (
-              <React.Fragment>
-                <span />
-                <span />
-                <span />
-              </React.Fragment>
-            ),
-            onClick: (event: React.MouseEvent) => {
-              if (onClick) {
-                onClick(event);
-              }
-              setActive(!active);
-            },
-            ref,
-            role: "button",
-            style: { outline: "none", ...style },
-            tabIndex: 0,
-            ...rest,
-          });
-        }}
-      </NavbarContext.Consumer>
-    );
-  },
-  { as: "div" },
+const propTypes = {
+  ...genericPropTypes,
+  onClick: PropTypes.func,
+  style: PropTypes.object,
+};
+
+export const NavbarBurger = Object.assign(
+  forwardRefAs<NavbarBurgerProps, "div">(
+    (props, ref) => {
+      return (
+        <NavbarContext.Consumer>
+          {({ active, setActive }) => {
+            const { as, style, onClick, ...rest } = transformHelpers(props);
+            rest.className = classNames("navbar-burger", rest.className, {
+              "is-active": active,
+            });
+            return React.createElement(as!, {
+              children: (
+                <React.Fragment>
+                  <span />
+                  <span />
+                  <span />
+                </React.Fragment>
+              ),
+              onClick: (event: React.MouseEvent) => {
+                if (onClick) {
+                  onClick(event);
+                }
+                setActive(!active);
+              },
+              ref,
+              role: "button",
+              style: { outline: "none", ...style },
+              tabIndex: 0,
+              ...rest,
+            });
+          }}
+        </NavbarContext.Consumer>
+      );
+    },
+    { as: "div" },
+  ),
+  { propTypes },
 );
diff --git a/src/components/navbar/navbar-divider.tsx b/src/components/navbar/navbar-divider.tsx
index d4bc9c1f..acda2915 100644
--- a/src/components/navbar/navbar-divider.tsx
+++ b/src/components/navbar/navbar-divider.tsx
@@ -1,18 +1,26 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
 export type NavbarDividerProps = Prefer<
   HelpersProps,
   React.HTMLAttributes<HTMLDivElement>
 >;
 
-export const NavbarDivider = forwardRefAs<NavbarDividerProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("navbar-divider", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const NavbarDivider = Object.assign(
+  forwardRefAs<NavbarDividerProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("navbar-divider", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/navbar/navbar-dropdown.tsx b/src/components/navbar/navbar-dropdown.tsx
index 69cf40f5..e9d1f674 100644
--- a/src/components/navbar/navbar-dropdown.tsx
+++ b/src/components/navbar/navbar-dropdown.tsx
@@ -1,24 +1,38 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
 export type NavbarDropdownModifierProps = Partial<{
   boxed: boolean;
-  className: string;
   right: boolean;
 }>;
 
 export type NavbarDropdownProps = HelpersProps & NavbarDropdownModifierProps;
 
-export const NavbarDropdown = forwardRefAs<NavbarDropdownProps, "span">(
-  (props, ref) => {
-    const { as, boxed, right, ...rest } = transformHelpers(props);
-    rest.className = classNames("navbar-dropdown", rest.className, {
-      "is-boxed": boxed,
-      "is-right": right,
-    });
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "span" },
+const propTypes = {
+  ...genericPropTypes,
+  boxed: PropTypes.bool,
+  right: PropTypes.bool,
+};
+
+export const NavbarDropdown = Object.assign(
+  forwardRefAs<NavbarDropdownProps, "span">(
+    (props, ref) => {
+      const { as, boxed, right, ...rest } = transformHelpers(props);
+      rest.className = classNames("navbar-dropdown", rest.className, {
+        "is-boxed": boxed,
+        "is-right": right,
+      });
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "span" },
+  ),
+  { propTypes },
 );
diff --git a/src/components/navbar/navbar-end.tsx b/src/components/navbar/navbar-end.tsx
index ff3f56e8..1bfb4558 100644
--- a/src/components/navbar/navbar-end.tsx
+++ b/src/components/navbar/navbar-end.tsx
@@ -1,11 +1,14 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type NavbarEndModifierProps = Partial<{ className: string }>;
-
-export type NavbarEndProps = HelpersProps & NavbarEndModifierProps;
+export type NavbarEndProps = HelpersProps;
 
 export const NavbarEnd = Object.assign(
   forwardRefAs<NavbarEndProps, "div">(
@@ -16,4 +19,5 @@ export const NavbarEnd = Object.assign(
     },
     { as: "div" },
   ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/navbar/navbar-item.tsx b/src/components/navbar/navbar-item.tsx
index 3518ff8b..55c6c49b 100644
--- a/src/components/navbar/navbar-item.tsx
+++ b/src/components/navbar/navbar-item.tsx
@@ -1,11 +1,16 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
 export type NavbarItemModifierProps = Partial<{
   active: boolean;
-  className: string;
   dropdown: boolean;
   dropdownUp: boolean;
   hoverable: boolean;
@@ -13,25 +18,36 @@ export type NavbarItemModifierProps = Partial<{
 
 export type NavbarItemProps = HelpersProps & NavbarItemModifierProps;
 
-export const NavbarItem = forwardRefAs<NavbarItemProps, "a">(
-  (props, ref) => {
-    const {
-      as,
-      active,
-      dropdown,
-      dropdownUp,
-      hoverable,
-      ...rest
-    } = transformHelpers(props);
-    rest.className = classNames("navbar-item", rest.className, {
-      "has-dropdown": dropdown,
-      "has-dropdown-up": dropdownUp,
-      "is-active": active,
-      "is-hoverable": hoverable,
-    });
+const propTypes = {
+  ...genericPropTypes,
+  active: PropTypes.bool,
+  dropdown: PropTypes.bool,
+  dropdownUp: PropTypes.bool,
+  hoverable: PropTypes.bool,
+};
 
-    const asOverride = dropdown && as === "a" ? "div" : as;
-    return React.createElement(asOverride!, { ref, ...rest });
-  },
-  { as: "a" },
+export const NavbarItem = Object.assign(
+  forwardRefAs<NavbarItemProps, "a">(
+    (props, ref) => {
+      const {
+        as,
+        active,
+        dropdown,
+        dropdownUp,
+        hoverable,
+        ...rest
+      } = transformHelpers(props);
+      rest.className = classNames("navbar-item", rest.className, {
+        "has-dropdown": dropdown,
+        "has-dropdown-up": dropdownUp,
+        "is-active": active,
+        "is-hoverable": hoverable,
+      });
+
+      const asOverride = dropdown && as === "a" ? "div" : as;
+      return React.createElement(asOverride!, { ref, ...rest });
+    },
+    { as: "a" },
+  ),
+  { propTypes },
 );
diff --git a/src/components/navbar/navbar-link.tsx b/src/components/navbar/navbar-link.tsx
index 643a16c4..7321e467 100644
--- a/src/components/navbar/navbar-link.tsx
+++ b/src/components/navbar/navbar-link.tsx
@@ -1,22 +1,35 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
 export type NavbarLinkModifierProps = Partial<{
   arrowless: boolean;
-  className: string;
 }>;
 
 export type NavbarLinkProps = HelpersProps & NavbarLinkModifierProps;
 
-export const NavbarLink = forwardRefAs<NavbarLinkProps, "span">(
-  (props, ref) => {
-    const { as, arrowless, ...rest } = transformHelpers(props);
-    rest.className = classNames("navbar-link", rest.className, {
-      "is-arrowless": arrowless,
-    });
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "span" },
+const propTypes = {
+  ...genericPropTypes,
+  arrowless: PropTypes.bool,
+};
+
+export const NavbarLink = Object.assign(
+  forwardRefAs<NavbarLinkProps, "span">(
+    (props, ref) => {
+      const { as, arrowless, ...rest } = transformHelpers(props);
+      rest.className = classNames("navbar-link", rest.className, {
+        "is-arrowless": arrowless,
+      });
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "span" },
+  ),
+  { propTypes },
 );
diff --git a/src/components/navbar/navbar-menu.tsx b/src/components/navbar/navbar-menu.tsx
index f54ef5bb..81c0aef7 100644
--- a/src/components/navbar/navbar-menu.tsx
+++ b/src/components/navbar/navbar-menu.tsx
@@ -1,7 +1,12 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { NavbarContext } from "./navbar-context";
 
 export type NavbarMenuProps = Prefer<
@@ -9,19 +14,22 @@ export type NavbarMenuProps = Prefer<
   React.HTMLAttributes<HTMLDivElement>
 >;
 
-export const NavbarMenu = forwardRefAs<NavbarMenuProps, "div">(
-  (props, ref) => {
-    return (
-      <NavbarContext.Consumer>
-        {({ active }) => {
-          const { as, ...rest } = transformHelpers(props);
-          rest.className = classNames("navbar-menu", rest.className, {
-            "is-active": active,
-          });
-          return React.createElement(as!, { ref, ...rest });
-        }}
-      </NavbarContext.Consumer>
-    );
-  },
-  { as: "div" },
+export const NavbarMenu = Object.assign(
+  forwardRefAs<NavbarMenuProps, "div">(
+    (props, ref) => {
+      return (
+        <NavbarContext.Consumer>
+          {({ active }) => {
+            const { as, ...rest } = transformHelpers(props);
+            rest.className = classNames("navbar-menu", rest.className, {
+              "is-active": active,
+            });
+            return React.createElement(as!, { ref, ...rest });
+          }}
+        </NavbarContext.Consumer>
+      );
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/navbar/navbar-start.tsx b/src/components/navbar/navbar-start.tsx
index 815ee701..0da4b747 100644
--- a/src/components/navbar/navbar-start.tsx
+++ b/src/components/navbar/navbar-start.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type NavbarStartModifierProps = Partial<{ className: string }>;
+export type NavbarStartProps = HelpersProps;
 
-export type NavbarStartProps = HelpersProps & NavbarStartModifierProps;
-
-export const NavbarStart = forwardRefAs<NavbarStartProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("navbar-start", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const NavbarStart = Object.assign(
+  forwardRefAs<NavbarStartProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("navbar-start", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
index 365b5918..82db2fe3 100644
--- a/src/components/navbar/navbar.tsx
+++ b/src/components/navbar/navbar.tsx
@@ -1,8 +1,14 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
-import { Colors } from "../../base/helpers";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
+import { Colors, COLORS } from "../../base/helpers";
 import { canUseDOM, tuple } from "../../utils";
 import { NavbarBrand } from "./navbar-brand";
 import { NavbarBurger } from "./navbar-burger";
@@ -19,11 +25,8 @@ export const NAVBAR_FIXED_ALIGNMENTS = tuple("top", "bottom");
 export type NavbarFixedAlignments = (typeof NAVBAR_FIXED_ALIGNMENTS)[number];
 
 export type NavbarModifierProps = Partial<{
-  /**
-   * Determines whether the menu is displayed on mobile
-   */
+  /** * Determines whether the menu is displayed on mobile */
   active: boolean;
-  className: string;
   color: Colors;
   fixed: NavbarFixedAlignments;
   managed: boolean;
@@ -32,6 +35,15 @@ export type NavbarModifierProps = Partial<{
 
 export type NavbarProps = HelpersProps & NavbarModifierProps;
 
+const propTypes = {
+  ...genericPropTypes,
+  active: PropTypes.bool,
+  color: PropTypes.oneOf(COLORS),
+  fixed: PropTypes.oneOf(NAVBAR_FIXED_ALIGNMENTS),
+  managed: PropTypes.bool,
+  transparent: PropTypes.bool,
+};
+
 export type NavbarControllerProps = NavbarProps & {
   as: React.ReactType<any>;
   innerRef: React.Ref<HTMLDivElement>;
@@ -149,5 +161,6 @@ export const Navbar = Object.assign(
     Link: NavbarLink,
     Menu: NavbarMenu,
     Start: NavbarStart,
+    propTypes,
   },
 );
diff --git a/src/components/pagination/__tests__/pagination-ellipsis.test.tsx b/src/components/pagination/__tests__/pagination-ellipsis.test.tsx
index 72569f59..f5555e48 100644
--- a/src/components/pagination/__tests__/pagination-ellipsis.test.tsx
+++ b/src/components/pagination/__tests__/pagination-ellipsis.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { PaginationEllipsis } from "../pagination-ellipsis";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("PaginationEllipsis component", () => {
   hasProperties(PaginationEllipsis, {
@@ -51,4 +51,9 @@ describe("PaginationEllipsis component", () => {
     );
     expect(wrapper.children().hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = PaginationEllipsis;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/pagination/__tests__/pagination-link.test.tsx b/src/components/pagination/__tests__/pagination-link.test.tsx
index 845d070d..3f32c5d3 100644
--- a/src/components/pagination/__tests__/pagination-link.test.tsx
+++ b/src/components/pagination/__tests__/pagination-link.test.tsx
@@ -3,7 +3,11 @@ import React from "react";
 
 import { PaginationLink } from "../pagination-link";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+} from "@/__tests__/testing";
 
 describe("PaginationLink component", () => {
   hasProperties(PaginationLink, {
@@ -53,4 +57,10 @@ describe("PaginationLink component", () => {
       expect(wrapper.children().hasClass("is-current")).toBe(current);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = PaginationLink;
+    testGenericPropTypes(propTypes);
+    validateBoolPropType(propTypes, "current");
+  });
 });
diff --git a/src/components/pagination/__tests__/pagination-list.test.tsx b/src/components/pagination/__tests__/pagination-list.test.tsx
index da0961d8..c6c2fad0 100644
--- a/src/components/pagination/__tests__/pagination-list.test.tsx
+++ b/src/components/pagination/__tests__/pagination-list.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { PaginationList } from "../pagination-list";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("PaginationList component", () => {
   hasProperties(PaginationList, {
@@ -46,4 +46,9 @@ describe("PaginationList component", () => {
     const wrapper = Enzyme.shallow(<PaginationList className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = PaginationList;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/pagination/__tests__/pagination-next.test.tsx b/src/components/pagination/__tests__/pagination-next.test.tsx
index 7e6a7aaf..836078de 100644
--- a/src/components/pagination/__tests__/pagination-next.test.tsx
+++ b/src/components/pagination/__tests__/pagination-next.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { PaginationNext } from "../pagination-next";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("PaginationNext component", () => {
   hasProperties(PaginationNext, {
@@ -49,4 +49,9 @@ describe("PaginationNext component", () => {
     const wrapper = Enzyme.shallow(<PaginationNext className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = PaginationNext;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/pagination/__tests__/pagination-previous.test.tsx b/src/components/pagination/__tests__/pagination-previous.test.tsx
index 42f7bb13..a44ea40e 100644
--- a/src/components/pagination/__tests__/pagination-previous.test.tsx
+++ b/src/components/pagination/__tests__/pagination-previous.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { PaginationPrevious } from "../pagination-previous";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("PaginationPrevious component", () => {
   hasProperties(PaginationPrevious, {
@@ -51,4 +51,9 @@ describe("PaginationPrevious component", () => {
     );
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = PaginationPrevious;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/pagination/__tests__/pagination.test.tsx b/src/components/pagination/__tests__/pagination.test.tsx
index 6480d89f..5a960264 100644
--- a/src/components/pagination/__tests__/pagination.test.tsx
+++ b/src/components/pagination/__tests__/pagination.test.tsx
@@ -12,7 +12,12 @@ import { PaginationList } from "../pagination-list";
 import { PaginationNext } from "../pagination-next";
 import { PaginationPrevious } from "../pagination-previous";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+  validateOneOfPropType,
+} from "@/__tests__/testing";
 
 describe("Pagination component", () => {
   hasProperties(Pagination, {
@@ -81,4 +86,12 @@ describe("Pagination component", () => {
       expect(wrapper.hasClass("is-rounded")).toBe(rounded);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = Pagination;
+    testGenericPropTypes(propTypes);
+    validateOneOfPropType(propTypes, "align", PAGINATION_ALIGNMENTS);
+    validateBoolPropType(propTypes, "rounded");
+    validateOneOfPropType(propTypes, "size", PAGINATION_SIZES);
+  });
 });
diff --git a/src/components/pagination/pagination-ellipsis.tsx b/src/components/pagination/pagination-ellipsis.tsx
index 80ff6dae..13be8569 100644
--- a/src/components/pagination/pagination-ellipsis.tsx
+++ b/src/components/pagination/pagination-ellipsis.tsx
@@ -1,21 +1,26 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type PaginationEllipsisModifierProps = Partial<{ className: string }>;
+export type PaginationEllipsisProps = HelpersProps;
 
-export type PaginationEllipsisProps = HelpersProps &
-  PaginationEllipsisModifierProps;
-
-export const PaginationEllipsis = forwardRefAs<PaginationEllipsisProps, "span">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("pagination-ellipsis", rest.className);
-    return <li children={React.createElement(as!, { ref, ...rest })} />;
-  },
-  {
-    as: "span",
-    children: "…",
-  },
+export const PaginationEllipsis = Object.assign(
+  forwardRefAs<PaginationEllipsisProps, "span">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("pagination-ellipsis", rest.className);
+      return <li children={React.createElement(as!, { ref, ...rest })} />;
+    },
+    {
+      as: "span",
+      children: "…",
+    },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/pagination/pagination-link.tsx b/src/components/pagination/pagination-link.tsx
index cce85167..7795e571 100644
--- a/src/components/pagination/pagination-link.tsx
+++ b/src/components/pagination/pagination-link.tsx
@@ -1,22 +1,35 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
 export type PaginationLinkModifiers = Partial<{
-  className: string;
   current: boolean;
 }>;
 
 export type PaginationLinkProps = HelpersProps & PaginationLinkModifiers;
 
-export const PaginationLink = forwardRefAs<PaginationLinkProps, "a">(
-  (props, ref) => {
-    const { as, current, ...rest } = transformHelpers(props);
-    rest.className = classNames("pagination-link", rest.className, {
-      "is-current": current,
-    });
-    return <li children={React.createElement(as!, { ref, ...rest })} />;
-  },
-  { as: "a" },
+const propTypes = {
+  ...genericPropTypes,
+  current: PropTypes.bool,
+};
+
+export const PaginationLink = Object.assign(
+  forwardRefAs<PaginationLinkProps, "a">(
+    (props, ref) => {
+      const { as, current, ...rest } = transformHelpers(props);
+      rest.className = classNames("pagination-link", rest.className, {
+        "is-current": current,
+      });
+      return <li children={React.createElement(as!, { ref, ...rest })} />;
+    },
+    { as: "a" },
+  ),
+  { propTypes },
 );
diff --git a/src/components/pagination/pagination-list.tsx b/src/components/pagination/pagination-list.tsx
index 81a1f06b..b100b4d8 100644
--- a/src/components/pagination/pagination-list.tsx
+++ b/src/components/pagination/pagination-list.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type PaginationListModifierProps = Partial<{ className: string }>;
+export type PaginationListProps = HelpersProps;
 
-export type PaginationListProps = HelpersProps & PaginationListModifierProps;
-
-export const PaginationList = forwardRefAs<PaginationListProps, "ul">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("pagination-list", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "ul" },
+export const PaginationList = Object.assign(
+  forwardRefAs<PaginationListProps, "ul">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("pagination-list", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "ul" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/pagination/pagination-next.tsx b/src/components/pagination/pagination-next.tsx
index 1e85261e..ff3c262d 100644
--- a/src/components/pagination/pagination-next.tsx
+++ b/src/components/pagination/pagination-next.tsx
@@ -1,20 +1,26 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type PaginationNextModifierProps = Partial<{ className: string }>;
+export type PaginationNextProps = HelpersProps;
 
-export type PaginationNextProps = HelpersProps & PaginationNextModifierProps;
-
-export const PaginationNext = forwardRefAs<PaginationNextProps, "a">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("pagination-next", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  {
-    as: "a",
-    children: "Next page",
-  },
+export const PaginationNext = Object.assign(
+  forwardRefAs<PaginationNextProps, "a">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("pagination-next", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    {
+      as: "a",
+      children: "Next page",
+    },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/pagination/pagination-previous.tsx b/src/components/pagination/pagination-previous.tsx
index fa925c3b..ddca71c4 100644
--- a/src/components/pagination/pagination-previous.tsx
+++ b/src/components/pagination/pagination-previous.tsx
@@ -1,20 +1,26 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type PaginationPreviousModifierProps = Partial<{ className: string }>;
-export type PaginationPreviousProps = HelpersProps &
-  PaginationPreviousModifierProps;
+export type PaginationPreviousProps = HelpersProps;
 
-export const PaginationPrevious = forwardRefAs<PaginationPreviousProps, "a">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("pagination-previous", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  {
-    as: "a",
-    children: "Previous",
-  },
+export const PaginationPrevious = Object.assign(
+  forwardRefAs<PaginationPreviousProps, "a">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("pagination-previous", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    {
+      as: "a",
+      children: "Previous",
+    },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
index c6d64efd..7c32d4ff 100644
--- a/src/components/pagination/pagination.tsx
+++ b/src/components/pagination/pagination.tsx
@@ -1,7 +1,13 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { tuple } from "../../utils";
 import { PaginationEllipsis } from "./pagination-ellipsis";
 import { PaginationLink } from "./pagination-link";
@@ -17,13 +23,19 @@ export type PaginationSizes = (typeof PAGINATION_SIZES)[number];
 
 export type PaginationModifiers = Partial<{
   align: PaginationAlignments;
-  className: string;
   rounded: boolean;
   size: PaginationSizes;
 }>;
 
 export type PaginationProps = HelpersProps & PaginationModifiers;
 
+const propTypes = {
+  ...genericPropTypes,
+  align: PropTypes.oneOf(PAGINATION_ALIGNMENTS),
+  rounded: PropTypes.bool,
+  size: PropTypes.oneOf(PAGINATION_SIZES),
+};
+
 export const Pagination = Object.assign(
   forwardRefAs<PaginationProps, "nav">(
     (props, ref) => {
@@ -43,5 +55,6 @@ export const Pagination = Object.assign(
     List: PaginationList,
     Next: PaginationNext,
     Previous: PaginationPrevious,
+    propTypes,
   },
 );
diff --git a/src/components/panel/__tests__/panel-block.test.tsx b/src/components/panel/__tests__/panel-block.test.tsx
index 473a32ad..e6ffa511 100644
--- a/src/components/panel/__tests__/panel-block.test.tsx
+++ b/src/components/panel/__tests__/panel-block.test.tsx
@@ -3,7 +3,11 @@ import React from "react";
 
 import { PanelBlock } from "../panel-block";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+} from "@/__tests__/testing";
 
 describe("PanelBlock component", () => {
   hasProperties(PanelBlock, {
@@ -53,4 +57,10 @@ describe("PanelBlock component", () => {
       expect(wrapper.hasClass("is-active")).toBe(active);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = PanelBlock;
+    testGenericPropTypes(propTypes);
+    validateBoolPropType(propTypes, "active");
+  });
 });
diff --git a/src/components/panel/__tests__/panel-heading.test.tsx b/src/components/panel/__tests__/panel-heading.test.tsx
index 2a350913..85362c9d 100644
--- a/src/components/panel/__tests__/panel-heading.test.tsx
+++ b/src/components/panel/__tests__/panel-heading.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { PanelHeading } from "../panel-heading";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("PanelHeading component", () => {
   hasProperties(PanelHeading, {
@@ -46,4 +46,9 @@ describe("PanelHeading component", () => {
     const wrapper = Enzyme.shallow(<PanelHeading className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = PanelHeading;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/panel/__tests__/panel-icon.test.tsx b/src/components/panel/__tests__/panel-icon.test.tsx
index 46094914..a33ac4af 100644
--- a/src/components/panel/__tests__/panel-icon.test.tsx
+++ b/src/components/panel/__tests__/panel-icon.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { PanelIcon } from "../panel-icon";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("PanelIcon component", () => {
   hasProperties(PanelIcon, {
@@ -46,4 +46,9 @@ describe("PanelIcon component", () => {
     const wrapper = Enzyme.shallow(<PanelIcon className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = PanelIcon;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/panel/__tests__/panel-tab.test.tsx b/src/components/panel/__tests__/panel-tab.test.tsx
index 362360e4..b9291c27 100644
--- a/src/components/panel/__tests__/panel-tab.test.tsx
+++ b/src/components/panel/__tests__/panel-tab.test.tsx
@@ -3,7 +3,11 @@ import React from "react";
 
 import { PanelTab } from "../panel-tab";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+} from "@/__tests__/testing";
 
 describe("PanelTab component", () => {
   hasProperties(PanelTab, {
@@ -53,4 +57,10 @@ describe("PanelTab component", () => {
       expect(wrapper.hasClass("is-active")).toBe(active);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = PanelTab;
+    testGenericPropTypes(propTypes);
+    validateBoolPropType(propTypes, "active");
+  });
 });
diff --git a/src/components/panel/__tests__/panel-tabs.test.tsx b/src/components/panel/__tests__/panel-tabs.test.tsx
index 6e4ab502..ca89737f 100644
--- a/src/components/panel/__tests__/panel-tabs.test.tsx
+++ b/src/components/panel/__tests__/panel-tabs.test.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { PanelTab } from "../panel-tab";
 import { PanelTabs } from "../panel-tabs";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("PanelTabs component", () => {
   hasProperties(PanelTabs, {
@@ -43,4 +43,9 @@ describe("PanelTabs component", () => {
     const wrapper = Enzyme.shallow(<PanelTabs className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = PanelTabs;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/panel/__tests__/panel.test.tsx b/src/components/panel/__tests__/panel.test.tsx
index 3ea3d54c..50150488 100644
--- a/src/components/panel/__tests__/panel.test.tsx
+++ b/src/components/panel/__tests__/panel.test.tsx
@@ -7,7 +7,7 @@ import { PanelHeading } from "../panel-heading";
 import { PanelIcon } from "../panel-icon";
 import { PanelTabs } from "../panel-tabs";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("Panel component", () => {
   hasProperties(Panel, {
@@ -54,4 +54,9 @@ describe("Panel component", () => {
     const wrapper = Enzyme.shallow(<Panel className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = Panel;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/components/panel/panel-block.tsx b/src/components/panel/panel-block.tsx
index 502596c7..09096565 100644
--- a/src/components/panel/panel-block.tsx
+++ b/src/components/panel/panel-block.tsx
@@ -1,24 +1,37 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
 export type PanelBlockModifierProps = Partial<{
   active: boolean;
-  className: string;
 }>;
 
 export type PanelBlockProps = HelpersProps & PanelBlockModifierProps;
 
-export const PanelBlock = forwardRefAs<PanelBlockProps, "div">(
-  (props, ref) => {
-    const { active, as, ...rest } = transformHelpers(props);
-    rest.className = classNames("panel-block", rest.className, {
-      "is-active": active,
-    });
-    return React.createElement(as!, { ref, ...rest });
-  },
-  {
-    as: "div",
-  },
+const propTypes = {
+  ...genericPropTypes,
+  active: PropTypes.bool,
+};
+
+export const PanelBlock = Object.assign(
+  forwardRefAs<PanelBlockProps, "div">(
+    (props, ref) => {
+      const { active, as, ...rest } = transformHelpers(props);
+      rest.className = classNames("panel-block", rest.className, {
+        "is-active": active,
+      });
+      return React.createElement(as!, { ref, ...rest });
+    },
+    {
+      as: "div",
+    },
+  ),
+  { propTypes },
 );
diff --git a/src/components/panel/panel-heading.tsx b/src/components/panel/panel-heading.tsx
index bbaf92a5..d2b1cb38 100644
--- a/src/components/panel/panel-heading.tsx
+++ b/src/components/panel/panel-heading.tsx
@@ -1,16 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type PanelHeadingModifierProps = Partial<{ className: string }>;
-export type PanelHeadingProps = HelpersProps & PanelHeadingModifierProps;
+export type PanelHeadingProps = HelpersProps;
 
-export const PanelHeading = forwardRefAs<PanelHeadingProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("panel-heading", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const PanelHeading = Object.assign(
+  forwardRefAs<PanelHeadingProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("panel-heading", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/panel/panel-icon.tsx b/src/components/panel/panel-icon.tsx
index c3f5707c..4772f647 100644
--- a/src/components/panel/panel-icon.tsx
+++ b/src/components/panel/panel-icon.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type PanelIconModifierProps = Partial<{ className: string }>;
+export type PanelIconProps = HelpersProps;
 
-export type PanelIconProps = HelpersProps & PanelIconModifierProps;
-
-export const PanelIcon = forwardRefAs<PanelIconProps, "span">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("panel-icon", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "span" },
+export const PanelIcon = Object.assign(
+  forwardRefAs<PanelIconProps, "span">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("panel-icon", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "span" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/components/panel/panel-tab.tsx b/src/components/panel/panel-tab.tsx
index 98d74733..2816bac4 100644
--- a/src/components/panel/panel-tab.tsx
+++ b/src/components/panel/panel-tab.tsx
@@ -1,20 +1,33 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
 export type PanelTabModifierProps = Partial<{
   active: boolean;
-  className: string;
 }>;
 
 export type PanelTabProps = HelpersProps & PanelTabModifierProps;
 
-export const PanelTab = forwardRefAs<PanelTabProps, "a">(
-  (props, ref) => {
-    const { active, as, className: cn, ...rest } = transformHelpers(props);
-    const className = classNames(cn, { "is-active": active }) || undefined;
-    return React.createElement(as!, { className, ref, ...rest });
-  },
-  { as: "a" },
+const propTypes = {
+  ...genericPropTypes,
+  active: PropTypes.bool,
+};
+
+export const PanelTab = Object.assign(
+  forwardRefAs<PanelTabProps, "a">(
+    (props, ref) => {
+      const { active, as, className: cn, ...rest } = transformHelpers(props);
+      const className = classNames(cn, { "is-active": active }) || undefined;
+      return React.createElement(as!, { className, ref, ...rest });
+    },
+    { as: "a" },
+  ),
+  { propTypes },
 );
diff --git a/src/components/panel/panel-tabs.tsx b/src/components/panel/panel-tabs.tsx
index c19756fa..ac1d8dd4 100644
--- a/src/components/panel/panel-tabs.tsx
+++ b/src/components/panel/panel-tabs.tsx
@@ -1,12 +1,15 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { PanelTab } from "./panel-tab";
 
-export type PanelTabsModifierProps = Partial<{ className: string }>;
-
-export type PanelTabsProps = HelpersProps & PanelTabsModifierProps;
+export type PanelTabsProps = HelpersProps;
 
 export const PanelTabs = Object.assign(
   forwardRefAs<PanelTabsProps, "div">(
@@ -17,5 +20,8 @@ export const PanelTabs = Object.assign(
     },
     { as: "div" },
   ),
-  { Tab: PanelTab },
+  {
+    Tab: PanelTab,
+    propTypes: genericPropTypes,
+  },
 );
diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx
index e2e5dfaa..ddf12018 100644
--- a/src/components/panel/panel.tsx
+++ b/src/components/panel/panel.tsx
@@ -1,15 +1,18 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { PanelBlock } from "./panel-block";
 import { PanelHeading } from "./panel-heading";
 import { PanelIcon } from "./panel-icon";
 import { PanelTabs } from "./panel-tabs";
 
-export type PanelModifierProps = Partial<{ className: string }>;
-
-export type PanelProps = HelpersProps & PanelModifierProps;
+export type PanelProps = HelpersProps;
 
 export const Panel = Object.assign(
   forwardRefAs<PanelProps, "nav">(
@@ -25,5 +28,6 @@ export const Panel = Object.assign(
     Heading: PanelHeading,
     Icon: PanelIcon,
     Tabs: PanelTabs,
+    propTypes: genericPropTypes,
   },
 );
diff --git a/src/components/tabs/__tests__/tab.test.tsx b/src/components/tabs/__tests__/tab.test.tsx
index 4c6acc4d..952bd02e 100644
--- a/src/components/tabs/__tests__/tab.test.tsx
+++ b/src/components/tabs/__tests__/tab.test.tsx
@@ -3,7 +3,12 @@ import React from "react";
 
 import { Tab } from "../tab";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+  validatePropType,
+} from "@/__tests__/testing";
 
 describe("Tab component", () => {
   hasProperties(Tab, {
@@ -53,4 +58,14 @@ describe("Tab component", () => {
       expect(wrapper.hasClass("is-active")).toBe(active);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = Tab;
+    testGenericPropTypes(propTypes);
+    validateBoolPropType(propTypes, "active");
+    validatePropType(propTypes, "style", [
+      { value: {}, valid: true, descriptor: "obj" },
+      { value: "string", valid: false },
+    ]);
+  });
 });
diff --git a/src/components/tabs/__tests__/tabs.test.tsx b/src/components/tabs/__tests__/tabs.test.tsx
index 82e2e6cd..186dff35 100644
--- a/src/components/tabs/__tests__/tabs.test.tsx
+++ b/src/components/tabs/__tests__/tabs.test.tsx
@@ -4,7 +4,12 @@ import React from "react";
 import { Tab } from "../tab";
 import { Tabs, TABS_ALIGNMENTS, TABS_SIZES, TABS_TYPES } from "../tabs";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+  validateOneOfPropType,
+} from "@/__tests__/testing";
 
 describe("Tabs component", () => {
   hasProperties(Tabs, {
@@ -79,4 +84,13 @@ describe("Tabs component", () => {
       expect(wrapper.hasClass("is-fullwidth")).toBe(fullwidth);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = Tabs;
+    testGenericPropTypes(propTypes);
+    validateOneOfPropType(propTypes, "align", TABS_ALIGNMENTS);
+    validateBoolPropType(propTypes, "fullwidth");
+    validateOneOfPropType(propTypes, "size", TABS_SIZES);
+    validateOneOfPropType(propTypes, "type", TABS_TYPES);
+  });
 });
diff --git a/src/components/tabs/tab.tsx b/src/components/tabs/tab.tsx
index ed8e3696..d51bf536 100644
--- a/src/components/tabs/tab.tsx
+++ b/src/components/tabs/tab.tsx
@@ -1,29 +1,43 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
 export type TabModifierProps = Partial<{
   active: boolean;
-  className: string;
   style: React.CSSProperties;
 }>;
 
 export type TabProps = HelpersProps & TabModifierProps;
 
-export const Tab = forwardRefAs<TabModifierProps, "a">(
-  (props, ref) => {
-    const { as, active, className, style, ...rest } = transformHelpers(props);
-    return (
-      <li
-        style={style}
-        className={classNames(className, {
-          "is-active": active,
-        })}
-      >
-        {React.createElement(as!, { ref, ...rest })}
-      </li>
-    );
-  },
-  { as: "a" },
+const propTypes = {
+  ...genericPropTypes,
+  active: PropTypes.bool,
+  style: PropTypes.object,
+};
+
+export const Tab = Object.assign(
+  forwardRefAs<TabModifierProps, "a">(
+    (props, ref) => {
+      const { as, active, className, style, ...rest } = transformHelpers(props);
+      return (
+        <li
+          style={style}
+          className={classNames(className, {
+            "is-active": active,
+          })}
+        >
+          {React.createElement(as!, { ref, ...rest })}
+        </li>
+      );
+    },
+    { as: "a" },
+  ),
+  { propTypes },
 );
diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
index bc8f6b89..f52b6dbe 100644
--- a/src/components/tabs/tabs.tsx
+++ b/src/components/tabs/tabs.tsx
@@ -1,7 +1,13 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { tuple } from "../../utils";
 import { Tab } from "./tab";
 
@@ -16,17 +22,22 @@ export type TabsTypes = (typeof TABS_TYPES)[number];
 
 export type TabsModifierProps = Partial<{
   align: TabsAlignments;
-  className: string;
   fullwidth: boolean;
   size: TabsSizes;
-  /**
-   * This is called style on Bulma documentation
-   */
+  /** * This is called style on Bulma documentation */
   type: TabsTypes;
 }>;
 
 export type TabsProps = HelpersProps & TabsModifierProps;
 
+const propTypes = {
+  ...genericPropTypes,
+  align: PropTypes.oneOf(TABS_ALIGNMENTS),
+  fullwidth: PropTypes.bool,
+  size: PropTypes.oneOf(TABS_SIZES),
+  type: PropTypes.oneOf(TABS_TYPES),
+};
+
 export const Tabs = Object.assign(
   forwardRefAs<TabsProps, "div">(
     (props, ref) => {
@@ -55,5 +66,8 @@ export const Tabs = Object.assign(
     },
     { as: "div" },
   ),
-  { Tab },
+  {
+    Tab,
+    propTypes,
+  },
 );