diff --git a/src/__docs__/components/component-doc/component-doc.tsx b/src/__docs__/components/component-doc/component-doc.tsx
index fd2048ee..ab9197da 100644
--- a/src/__docs__/components/component-doc/component-doc.tsx
+++ b/src/__docs__/components/component-doc/component-doc.tsx
@@ -3,7 +3,10 @@ import React from "react";
 
 import { Title } from "src/elements";
 
-import { ComponentFeatures, ComponentFeaturesProps } from "../feature";
+import {
+  ComponentFeatures,
+  ComponentFeaturesProps,
+} from "../feature/component-features";
 import {
   SimplePropsTable,
   SimplePropsTableProps,
diff --git a/src/__docs__/components/component-doc/forward-ref-as-exotic-component-doc.tsx b/src/__docs__/components/component-doc/forward-ref-as-exotic-component-doc.tsx
index 2986088e..f379e4c1 100644
--- a/src/__docs__/components/component-doc/forward-ref-as-exotic-component-doc.tsx
+++ b/src/__docs__/components/component-doc/forward-ref-as-exotic-component-doc.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { ForwardRefAsExoticComponent } from "src/base/exotic";
 
-import { ComponentFeaturesProps } from "../feature";
+import { ComponentFeaturesProps } from "../feature/component-features";
 import { SimplePropsTableProps } from "../simple-props-table/simple-props-table";
 import { ComponentDoc, ComponentDocProps } from "./component-doc";
 import { asDoc } from "./as-doc";
diff --git a/src/__docs__/components/feature.tsx b/src/__docs__/components/feature.tsx
deleted file mode 100644
index 357d24ea..00000000
--- a/src/__docs__/components/feature.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { Link } from "docz";
-import React from "react";
-
-import { Variables } from "src/base/helpers/variables";
-import { Control, Field, Tag } from "src/elements";
-
-export type FeatureGroupProps = {
-  children: React.ReactNode;
-};
-
-export const FeatureGroup: React.FC<FeatureGroupProps> = ({ children }) => (
-  <Field kind="group" children={children} />
-);
-
-export type FeatureProps = {
-  primaryName: string;
-  primaryColor: Variables["colors"];
-  secondaryName: string;
-  secondaryColor: Variables["colors"];
-  url?: string;
-};
-
-export const Feature = Object.assign(
-  ({
-    primaryName,
-    primaryColor,
-    secondaryName,
-    secondaryColor,
-    url,
-  }: FeatureProps) => {
-    const tagGroupProps =
-      url === undefined
-        ? {}
-        : /^\/[a-z]/.test(url) // Local path, e.g. '/somewhere'
-        ? { as: Link, to: url }
-        : {
-            as: "a" as keyof JSX.IntrinsicElements,
-            href: url,
-            target: "_blank",
-          };
-
-    return (
-      <Control>
-        <Tag.Group gapless {...tagGroupProps}>
-          <Tag color={primaryColor}>{primaryName}</Tag>
-          <Tag color={secondaryColor}>{secondaryName}</Tag>
-        </Tag.Group>
-      </Control>
-    );
-  },
-  { Group: FeatureGroup },
-);
-
-export type AsDocProps = {
-  asType: string;
-};
-
-export const AsDoc: React.FC<AsDocProps> = ({ asType }) => (
-  <Feature
-    primaryName="as"
-    primaryColor="light"
-    secondaryName={asType}
-    secondaryColor="warning"
-    url="/architecture/inversion-of-control"
-  />
-);
-
-export type DocFeatureProps = {
-  docPath?: string;
-};
-
-export const DocFeature: React.FC<DocFeatureProps> = ({ docPath }) => {
-  const url =
-    docPath !== undefined
-      ? `https://bulma.io/documentation${docPath}`
-      : undefined;
-  const secondaryName = docPath !== undefined ? "Bulma" : "n/a";
-  const secondaryColor = docPath !== undefined ? "primary" : "dark";
-
-  return (
-    <Feature
-      primaryName="docs"
-      primaryColor="light"
-      secondaryName={secondaryName}
-      secondaryColor={secondaryColor}
-      url={url}
-    />
-  );
-};
-
-export type CustomizeFeatureProps = {
-  customize?: boolean;
-};
-
-export const CustomizeFeature: React.FC<CustomizeFeatureProps> = ({
-  customize,
-}) => {
-  const name = customize === true ? "yes" : "no";
-  const color = customize === true ? "success" : "danger";
-
-  return (
-    <Feature
-      primaryName="customize"
-      primaryColor="light"
-      secondaryName={name}
-      secondaryColor={color}
-      url="/architecture/customize"
-    />
-  );
-};
-
-export type ComponentFeaturesProps = AsDocProps &
-  DocFeatureProps &
-  CustomizeFeatureProps;
-
-export const ComponentFeatures: React.FC<ComponentFeaturesProps> = ({
-  asType,
-  docPath,
-  customize,
-}) => (
-  <Feature.Group>
-    <AsDoc asType={asType} />
-    <CustomizeFeature customize={customize} />
-    <DocFeature docPath={docPath} />
-  </Feature.Group>
-);
diff --git a/src/__docs__/components/feature/as-doc.tsx b/src/__docs__/components/feature/as-doc.tsx
new file mode 100644
index 00000000..ad1cee7d
--- /dev/null
+++ b/src/__docs__/components/feature/as-doc.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+import { Feature } from "./feature";
+
+export type AsDocProps = {
+  asType: string;
+};
+
+export const AsDoc: React.FC<AsDocProps> = ({ asType }) => (
+  <Feature
+    primaryName="as"
+    primaryColor="light"
+    secondaryName={asType}
+    secondaryColor="warning"
+    url="/architecture/inversion-of-control"
+  />
+);
diff --git a/src/__docs__/components/feature/component-features.tsx b/src/__docs__/components/feature/component-features.tsx
new file mode 100644
index 00000000..21e81323
--- /dev/null
+++ b/src/__docs__/components/feature/component-features.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+import { AsDoc, AsDocProps } from "./as-doc";
+import { CustomizeFeature, CustomizeFeatureProps } from "./customize-feature";
+import { DocFeature, DocFeatureProps } from "./doc-feature";
+import { Feature } from "./feature";
+
+export type ComponentFeaturesProps = AsDocProps &
+  DocFeatureProps &
+  CustomizeFeatureProps;
+
+export const ComponentFeatures: React.FC<ComponentFeaturesProps> = ({
+  asType,
+  docPath,
+  customize,
+}) => (
+  <Feature.Group>
+    <AsDoc asType={asType} />
+    <CustomizeFeature customize={customize} />
+    <DocFeature docPath={docPath} />
+  </Feature.Group>
+);
diff --git a/src/__docs__/components/feature/customize-feature.tsx b/src/__docs__/components/feature/customize-feature.tsx
new file mode 100644
index 00000000..a06d5b64
--- /dev/null
+++ b/src/__docs__/components/feature/customize-feature.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import { Feature } from "./feature";
+
+export type CustomizeFeatureProps = {
+  customize?: boolean;
+};
+
+export const CustomizeFeature: React.FC<CustomizeFeatureProps> = ({
+  customize,
+}) => {
+  const name = customize === true ? "yes" : "no";
+  const color = customize === true ? "success" : "danger";
+
+  return (
+    <Feature
+      primaryName="customize"
+      primaryColor="light"
+      secondaryName={name}
+      secondaryColor={color}
+      url="/architecture/customize"
+    />
+  );
+};
diff --git a/src/__docs__/components/feature/doc-feature.tsx b/src/__docs__/components/feature/doc-feature.tsx
new file mode 100644
index 00000000..824a6470
--- /dev/null
+++ b/src/__docs__/components/feature/doc-feature.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import { Feature } from "./feature";
+
+export type DocFeatureProps = {
+  docPath?: string;
+};
+
+export const DocFeature: React.FC<DocFeatureProps> = ({ docPath }) => {
+  const url =
+    docPath !== undefined
+      ? `https://bulma.io/documentation${docPath}`
+      : undefined;
+  const secondaryName = docPath !== undefined ? "Bulma" : "n/a";
+  const secondaryColor = docPath !== undefined ? "primary" : "dark";
+
+  return (
+    <Feature
+      primaryName="docs"
+      primaryColor="light"
+      secondaryName={secondaryName}
+      secondaryColor={secondaryColor}
+      url={url}
+    />
+  );
+};
diff --git a/src/__docs__/components/feature/feature-group.tsx b/src/__docs__/components/feature/feature-group.tsx
new file mode 100644
index 00000000..87dbd888
--- /dev/null
+++ b/src/__docs__/components/feature/feature-group.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+import { Field } from "src/elements";
+
+export type FeatureGroupProps = {
+  children: React.ReactNode;
+};
+
+export const FeatureGroup: React.FC<FeatureGroupProps> = ({ children }) => (
+  <Field kind="group" children={children} />
+);
diff --git a/src/__docs__/components/feature/feature.tsx b/src/__docs__/components/feature/feature.tsx
new file mode 100644
index 00000000..45ac65e9
--- /dev/null
+++ b/src/__docs__/components/feature/feature.tsx
@@ -0,0 +1,46 @@
+import { Link } from "docz";
+import React from "react";
+
+import { Variables } from "src/base/helpers/variables";
+import { Control, Tag } from "src/elements";
+
+import { FeatureGroup } from "./feature-group";
+
+export type FeatureProps = {
+  primaryName: string;
+  primaryColor: Variables["colors"];
+  secondaryName: string;
+  secondaryColor: Variables["colors"];
+  url?: string;
+};
+
+export const Feature = Object.assign(
+  ({
+    primaryName,
+    primaryColor,
+    secondaryName,
+    secondaryColor,
+    url,
+  }: FeatureProps) => {
+    const tagGroupProps =
+      url === undefined
+        ? {}
+        : /^\/[a-z]/.test(url) // Local path, e.g. '/somewhere'
+        ? { as: Link, to: url }
+        : {
+            as: "a" as keyof JSX.IntrinsicElements,
+            href: url,
+            target: "_blank",
+          };
+
+    return (
+      <Control>
+        <Tag.Group gapless {...tagGroupProps}>
+          <Tag color={primaryColor}>{primaryName}</Tag>
+          <Tag color={secondaryColor}>{secondaryName}</Tag>
+        </Tag.Group>
+      </Control>
+    );
+  },
+  { Group: FeatureGroup },
+);
diff --git a/src/__docs__/components/feature/index.ts b/src/__docs__/components/feature/index.ts
new file mode 100644
index 00000000..ab394b85
--- /dev/null
+++ b/src/__docs__/components/feature/index.ts
@@ -0,0 +1,5 @@
+export { AsDoc } from "./as-doc";
+export { ComponentFeatures } from "./component-features";
+export { CustomizeFeature } from "./customize-feature";
+export { DocFeature } from "./doc-feature";
+export { Feature } from "./feature";
diff --git a/src/__docs__/components/index.ts b/src/__docs__/components/index.ts
index 8bf98f23..2a56f621 100644
--- a/src/__docs__/components/index.ts
+++ b/src/__docs__/components/index.ts
@@ -1,11 +1,6 @@
-export {
-  ComponentDoc,
-  ForwardRefAsExoticComponentDoc,
-  asDoc,
-  refDoc,
-} from "./component-doc";
-export { ComponentFeatures } from "./feature";
+export * from "./component-doc";
+export * from "./feature";
 export { Frame } from "./frame";
 export { OptionBlock } from "./option-block";
-export { SimplePropsTable } from "./simple-props-table";
+export * from "./simple-props-table";
 export { mapEnumerable } from "./utils";
diff --git a/src/__docs__/components/rbx-feature.tsx b/src/__docs__/components/rbx-feature.tsx
index d03bc053..2e22d31f 100644
--- a/src/__docs__/components/rbx-feature.tsx
+++ b/src/__docs__/components/rbx-feature.tsx
@@ -4,14 +4,22 @@ import { Media } from "src/components";
 import { Image, Title } from "src/elements";
 import { Column, ColumnProps } from "src/grid/columns/column";
 
-export const RbxFeature: React.FC<{
+export type RbxFeatureProps = {
   children: React.ReactNode;
   imageSrc: string;
   // tslint:disable-next-line: react-unused-props-and-state
   size?: ColumnProps["size"]; // false positive
   title: string;
   to: string;
-}> = ({ children, imageSrc, size: colSize, title, to }) => {
+};
+
+export const RbxFeature = ({
+  children,
+  imageSrc,
+  size: colSize,
+  title,
+  to,
+}: RbxFeatureProps) => {
   const size = colSize !== undefined ? colSize : "half";
 
   return (