diff --git a/docs/content/Link.md b/docs/content/Link.md
deleted file mode 100644
index c9c60ef76da..00000000000
--- a/docs/content/Link.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Link
-status: Alpha
----
-
-The Link component styles anchor tags with default hyperlink color cues and hover text decoration. `Link` is used for destinations, or moving from one page to another.
-
-In special cases where you'd like a `<button>` styled like a `Link`, use `<Link as='button'>`. Make sure to provide a click handler with `onClick`.
-
-**Important:** When using the `as` prop, be sure to always render an accessible element type, like `a`, `button`, `input`, or `summary`.
-
-## Default example
-
-```jsx live
-<Link sx={{mb: 1}} href="https://github.com">
-  Link
-</Link>
-```
-
-## Component props
-
-| Name       | Type              | Default | Description                                                                     |
-| :--------- | :---------------- | :-----: | :------------------------------------------------------------------------------ |
-| href       | String            |         | URL to be used for the Link                                                     |
-| muted      | Boolean           |  false  | Uses a less prominent shade for Link color, and the default link shade on hover |
-| underline  | Boolean           |  false  | Adds underline to the Link                                                      |
-| as         | String            |   'a'   | Can be 'a', 'button', 'input', or 'summary'                                     |
-| hoverColor | String            |         | Color used when hovering over link                                              |
-| sx         | SystemStyleObject |   {}    | Style to be applied to the component                                            |
diff --git a/docs/content/Link.mdx b/docs/content/Link.mdx
new file mode 100644
index 00000000000..9149a090507
--- /dev/null
+++ b/docs/content/Link.mdx
@@ -0,0 +1,54 @@
+---
+title: Link
+status: Alpha
+---
+
+import {PropsTable} from '../src/props-table'
+import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
+import {Link} from '@primer/components'
+
+The Link component styles anchor tags with default hyperlink color cues and hover text decoration. `Link` is used for destinations, or moving from one page to another.
+
+In special cases where you'd like a `<button>` styled like a `Link`, use `<Link as='button'>`. Make sure to provide a click handler with `onClick`.
+
+**Important:** When using the `as` prop, be sure to always render an accessible element type, like `a`, `button`, `input`, or `summary`.
+
+## Default example
+
+```jsx live
+<Link sx={{mb: 1}} href="https://github.com">
+  Link
+</Link>
+```
+
+## Component props
+
+<PropsTable>
+  <PropsTable.Row
+    name="href"
+    type="string"
+    description={
+      <>
+        URL to be used for the Link. (The <InlineCode>href</InlineCode> is passed to the underlying{' '}
+        <InlineCode>&lt;a&gt;</InlineCode> element. If <InlineCode>as</InlineCode> is specified, the link behavior may
+        need different props).
+      </>
+    }
+  />
+  <PropsTable.Row
+    name="muted"
+    type="boolean"
+    defaultValue="false"
+    description="Uses a less prominent shade for Link color, and the default link shade on hover"
+  />
+  <PropsTable.Row name="underline" type="boolean" defaultValue="false" description="Adds underline to the Link" />
+  <PropsTable.Row name="hoverColor" type="string" description="Color used when hovering over link" />
+  <PropsTable.BasePropRows
+    elementType="a"
+    refType="React.RefObject<HTMLAnchorElement>"
+    passthroughPropsLink={
+      <Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes">MDN</Link>
+    }
+    isPolymorphic
+  />
+</PropsTable>
diff --git a/docs/content/TextInput.md b/docs/content/TextInput.md
deleted file mode 100644
index 5da5dc48376..00000000000
--- a/docs/content/TextInput.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: TextInput
-status: Alpha
----
-
-TextInput is a form component to add default styling to the native text input.
-
-**Note:** Don't forget to set `aria-label` to make the TextInput accessible to screen reader users.
-
-## Default example
-
-```jsx live
-<>
-  <TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
-
-  <TextInput sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
-
-  <TextInput
-    sx={{ml: 4}}
-    icon={SearchIcon}
-    aria-label="Zipcode"
-    name="zipcode"
-    placeholder="Find user"
-    autoComplete="postal-code"
-  />
-</>
-```
-
-## Component props
-
-Native `<input>` attributes are forwarded to the underlying React `input` component and are not listed below.
-
-| Name       | Type                                                                      | Default | Description                                                                           |
-| :--------- | :------------------------------------------------------------------------ | :-----: | :------------------------------------------------------------------------------------ |
-| aria-label | String                                                                    |         | Required. Allows input to be accessible.                                              |
-| block      | Boolean                                                                   |         | Adds `display: block` to element                                                      |
-| contrast   | Boolean                                                                   |         | Changes background color to a higher contrast color                                   |
-| variant    | String                                                                    |         | Can be either `small` or `large`. Creates a smaller or larger input than the default. |
-| width      | String or Number                                                          |         | Set the width of the input                                                            |
-| maxWidth   | String or Number or [Array](https://styled-system.com/guides/array-props) |         | Set the maximum width of the input                                                    |
-| minWidth   | String or Number or [Array](https://styled-system.com/guides/array-props) |         | Set the minimum width of the input                                                    |
-| icon       | Node (pass Octicon react component)                                       |         | Icon to be used inside of input. Positioned on the left edge.                         |
diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx
new file mode 100644
index 00000000000..97ed3dcce22
--- /dev/null
+++ b/docs/content/TextInput.mdx
@@ -0,0 +1,72 @@
+---
+title: TextInput
+status: Alpha
+---
+
+import {PropsTable} from '../src/props-table'
+import {Link} from '@primer/components'
+
+TextInput is a form component to add default styling to the native text input.
+
+**Note:** Don't forget to set `aria-label` to make the TextInput accessible to screen reader users.
+
+## Default example
+
+```jsx live
+<>
+  <TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
+
+  <TextInput sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
+
+  <TextInput
+    sx={{ml: 4}}
+    icon={SearchIcon}
+    aria-label="Zipcode"
+    name="zipcode"
+    placeholder="Find user"
+    autoComplete="postal-code"
+  />
+</>
+```
+
+## Component props
+
+Native `<input>` attributes are forwarded to the underlying React `input` component and are not listed below.
+
+<PropsTable>
+  <PropsTable.Row name="aria-label" required type="string" description="Allows input to be accessible." />
+  <PropsTable.Row name="block" type="boolean" description="Adds `display: block` to element" />
+  <PropsTable.Row name="contrast" type="boolean" description="Changes background color to a higher contrast color" />
+  <PropsTable.Row
+    name="variant"
+    type="string"
+    description="Can be either `small` or `large`. Creates a smaller or larger input than the default."
+  />
+  <PropsTable.Row name="width" type="string | number" description="Set the width of the input" />
+  <PropsTable.Row name="maxWidth" description="Set the maximum width of the input">
+    <PropsTable.Row.Type>
+      string | number | <Link href="https://styled-system.com/guides/array-props">Array</Link>
+    </PropsTable.Row.Type>
+  </PropsTable.Row>
+  <PropsTable.Row name="minWidth" description="Set the minimum width of the input">
+    <PropsTable.Row.Type>
+      string | number | <Link href="https://styled-system.com/guides/array-props">Array</Link>
+    </PropsTable.Row.Type>
+  </PropsTable.Row>
+  <PropsTable.Row
+    name="icon"
+    type="ReactNode"
+    description="An Octicon react component. To be used inside of input. Positioned on the left edge."
+  />
+  <PropsTable.SxRow />
+  <PropsTable.RefRow
+    elementType="input"
+    description="A ref to the input element rendered by this component. Note: this is not the outermost element rendered by TextInput. There is also a div wrapper for which a ref is not accepted."
+  />
+  <PropsTable.PassthroughPropsRow
+    elementName="input"
+    passthroughPropsLink={
+      <Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes">MDN</Link>
+    }
+  />
+</PropsTable>
diff --git a/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js b/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js
index 8f0922b2a8f..67cfa14d0eb 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js
+++ b/docs/src/@primer/gatsby-theme-doctocat/mdx-components.js
@@ -1,9 +1,11 @@
 import {Box} from '@primer/components'
 import {ComponentChecklist} from '../../component-checklist'
 import {Props} from '../../props'
+import {PropsTable} from '../../props-table'
 
 export default {
   Box,
   ComponentChecklist,
-  Props
+  Props,
+  PropsTable
 }
diff --git a/docs/src/props-table.js b/docs/src/props-table.js
new file mode 100644
index 00000000000..262a3314966
--- /dev/null
+++ b/docs/src/props-table.js
@@ -0,0 +1,144 @@
+import React from 'react'
+import {Box, Link, Label} from '@primer/components'
+import Table from '@primer/gatsby-theme-doctocat/src/components/table'
+import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
+
+function PropsTable({children}) {
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <Box as="th" textAlign="left">
+            Name
+          </Box>
+          <Box as="th" textAlign="left">
+            Type
+          </Box>
+          <Box as="th" textAlign="left">
+            Default
+          </Box>
+          <Box as="th" textAlign="left">
+            Description
+          </Box>
+        </tr>
+      </thead>
+      <tbody>{children}</tbody>
+    </Table>
+  )
+}
+
+function Row({name, type, defaultValue, description, required}) {
+  return (
+    <tr>
+      <Box as="td" fontFamily="mono" fontSize={1} sx={{whiteSpace: 'nowrap'}} verticalAlign="top">
+        {name}
+        {required ? (
+          <>
+            {` `}
+            <Label style={{verticalAlign: 'text-top'}}>Required</Label>
+          </>
+        ) : null}
+      </Box>
+      <Box as="td" fontFamily="mono" fontSize={1} verticalAlign="top">
+        {type}
+      </Box>
+      <Box as="td" fontFamily="mono" fontSize={1} verticalAlign="top">
+        {defaultValue}
+      </Box>
+      <Box as="td" verticalAlign="top">
+        {description}
+      </Box>
+    </tr>
+  )
+}
+
+function BasePropRows({passthroughPropsLink, elementType, isPolymorphic, refType}) {
+  return (
+    <>
+      <SxRow />
+      {isPolymorphic && <AsRow defaultElementType={elementType} />}
+      <RefRow refType={refType} isPolymorphic={isPolymorphic} />
+      <PassthroughPropsRow
+        passthroughPropsLink={passthroughPropsLink}
+        elementName={elementType}
+        isPolymorphic={isPolymorphic}
+      />
+    </>
+  )
+}
+
+function PassthroughPropsRow({elementName, isPolymorphic, passthroughPropsLink}) {
+  return (
+    <tr>
+      <Box as="td" colSpan={4} fontSize={1} verticalAlign="top" fontStyle="italic">
+        Additional props are passed through to the <InlineCode>&lt;{elementName}&gt;</InlineCode> element. See{' '}
+        {passthroughPropsLink} for a list of props accepted by the <InlineCode>&lt;{elementName}&gt;</InlineCode>{' '}
+        element.
+        {isPolymorphic && (
+          <>
+            {' '}
+            If an <InlineCode>as</InlineCode> prop is specified, the accepted props will change accordingly.
+          </>
+        )}
+      </Box>
+    </tr>
+  )
+}
+
+function AsRow({defaultElementType}) {
+  return (
+    <Row
+      name="as"
+      defaultValue={`"${defaultElementType}"`}
+      type={
+        <Link href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L73">
+          React.ElementType
+        </Link>
+      }
+      description="The underlying element to render — either a HTML element name or a React component."
+    />
+  )
+}
+
+function RefRow({refType, isPolymorphic}) {
+  return (
+    <Row
+      name="ref"
+      type={refType}
+      description={
+        <>
+          A ref to the element rendered by this component.
+          {isPolymorphic && (
+            <>
+              {' '}
+              Because this component is polymorphic, the type will vary based on the value of the{' '}
+              <InlineCode>as</InlineCode> prop.
+            </>
+          )}
+        </>
+      }
+    />
+  )
+}
+
+function SxRow() {
+  return (
+    <Row
+      name="sx"
+      type={
+        <Link href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/styled-system__css/index.d.ts#L407">
+          SystemStyleObject
+        </Link>
+      }
+      description={
+        <>
+          Style overrides to apply to the component. See also <Link href="/overriding-styles">overriding styles</Link>.
+        </>
+      }
+    />
+  )
+}
+
+Object.assign(PropsTable, {Row, BasePropRows, AsRow, RefRow, PassthroughPropsRow, SxRow})
+
+export {PropsTable}
diff --git a/docs/src/props.js b/docs/src/props.js
index f080647a75e..5ee9f168636 100644
--- a/docs/src/props.js
+++ b/docs/src/props.js
@@ -1,10 +1,9 @@
-import {Flash, Label} from '@primer/components'
+import {Flash} from '@primer/components'
 import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
-import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
 import Paragraph from '@primer/gatsby-theme-doctocat/src/components/paragraph'
-import Table from '@primer/gatsby-theme-doctocat/src/components/table'
 import {graphql, useStaticQuery} from 'gatsby'
 import React from 'react'
+import {PropsTable} from './props-table'
 
 /** Render prop documentation for the given component */
 export function Props({of}) {
@@ -44,31 +43,18 @@ export function Props({of}) {
     <>
       <H3>{component.name}</H3>
       {component.props.length > 0 ? (
-        <Table>
-          <thead>
-            <tr>
-              <th align="left">Prop</th>
-              <th align="left">Type</th>
-              <th align="left">Default</th>
-              <th align="left">Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            {component.props.map(prop => (
-              <tr key={prop.name}>
-                <td style={{whiteSpace: 'nowrap'}}>
-                  <InlineCode>{prop.name}</InlineCode>{' '}
-                  {prop.required ? <Label style={{verticalAlign: 'text-top'}}>Required</Label> : null}
-                </td>
-                <td>
-                  <InlineCode>{prop.type}</InlineCode>
-                </td>
-                <td>{prop.defaultValue ? <InlineCode>{prop.defaultValue}</InlineCode> : '–'}</td>
-                <td>{prop.description}</td>
-              </tr>
-            ))}
-          </tbody>
-        </Table>
+        <PropsTable>
+          {component.props.map(prop => (
+            <PropsTable.Row
+              key={prop.name}
+              required={prop.required}
+              name={prop.name}
+              defaultValue={prop.defaultValue}
+              type={prop.type}
+              description={prop.description}
+            />
+          ))}
+        </PropsTable>
       ) : (
         <Paragraph>No props</Paragraph>
       )}