diff --git a/packages/__docs__/functionalComponentThemes.ts b/packages/__docs__/functionalComponentThemes.ts
new file mode 100644
index 0000000000..7b8ab46171
--- /dev/null
+++ b/packages/__docs__/functionalComponentThemes.ts
@@ -0,0 +1,31 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const themes = {
+  // TODO figure out subcomponents e.g.: Table.Cell
+  avatar: async (theme) =>
+    (await import('@instructure/ui-avatar/src/Avatar/theme.ts')).default(theme)
+}
+
+export default themes
diff --git a/packages/__docs__/src/Document/index.tsx b/packages/__docs__/src/Document/index.tsx
index 9d1f19e8ed..0ee9261231 100644
--- a/packages/__docs__/src/Document/index.tsx
+++ b/packages/__docs__/src/Document/index.tsx
@@ -33,6 +33,7 @@ import { SourceCodeEditor } from '@instructure/ui-source-code-editor'
 import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
+import functionalComponentThemes from '../../functionalComponentThemes'
 
 import { Description } from '../Description'
 import { Properties } from '../Properties'
@@ -59,7 +60,8 @@ class Document extends Component<DocumentProps, DocumentState> {
 
   state: DocumentState = {
     selectedDetailsTabIndex: 0,
-    pageRef: null
+    pageRef: null,
+    componentTheme: {}
   }
 
   ref: HTMLDivElement | null = null
@@ -67,6 +69,25 @@ class Document extends Component<DocumentProps, DocumentState> {
   componentDidMount() {
     this.props.makeStyles?.()
     this.setState({ pageRef: this.ref })
+    this.fetchGenerateComponentTheme()
+  }
+
+  fetchGenerateComponentTheme = async () => {
+    const { doc, themeVariables } = this.props
+    const generateComponentTheme =
+      doc?.componentInstance?.generateComponentTheme
+    if (
+      generateComponentTheme &&
+      typeof generateComponentTheme === 'function' &&
+      themeVariables
+    ) {
+      this.setState({ componentTheme: generateComponentTheme(themeVariables) })
+    } else {
+      const componentTheme = await functionalComponentThemes[
+        doc.id.toLowerCase()
+      ](themeVariables)
+      this.setState({ componentTheme })
+    }
   }
 
   componentDidUpdate() {
@@ -96,17 +117,11 @@ class Document extends Component<DocumentProps, DocumentState> {
 
   renderTheme(doc: DocDataType) {
     const { themeVariables } = this.props
-    const generateComponentTheme =
-      doc?.componentInstance?.generateComponentTheme
-
-    const componentTheme =
-      themeVariables &&
-      typeof generateComponentTheme === 'function' &&
-      generateComponentTheme(themeVariables)
+    const { componentTheme } = this.state
 
-    const themeVariableKeys = Object.keys(componentTheme)
+    const themeVariableKeys = componentTheme && Object.keys(componentTheme)
 
-    return componentTheme && themeVariableKeys.length > 0 ? (
+    return themeVariables && componentTheme && themeVariableKeys.length > 0 ? (
       <View margin="x-large 0" display="block">
         <Heading level="h2" as="h3" id={`${doc.id}Theme`} margin="0 0 small 0">
           Default Theme Variables
diff --git a/packages/__docs__/src/Document/props.ts b/packages/__docs__/src/Document/props.ts
index b2570a7dce..f2e87c362b 100644
--- a/packages/__docs__/src/Document/props.ts
+++ b/packages/__docs__/src/Document/props.ts
@@ -26,7 +26,8 @@ import PropTypes from 'prop-types'
 import type { ComponentStyle, WithStyleProps } from '@instructure/emotion'
 import type {
   PropValidators,
-  BaseThemeVariables
+  BaseThemeVariables,
+  ComponentTheme
 } from '@instructure/shared-types'
 import { DocData } from '../App/props'
 
@@ -72,6 +73,7 @@ type DocumentStyle = ComponentStyle<'githubCornerOctoArm' | 'githubCorner'>
 type DocumentState = {
   selectedDetailsTabIndex: number
   pageRef: HTMLDivElement | null
+  componentTheme: ComponentTheme
 }
 
 const allowedProps: AllowedPropKeys = [