diff --git a/.changeset/eight-pans-impress.md b/.changeset/eight-pans-impress.md
new file mode 100644
index 000000000..a845151cc
--- /dev/null
+++ b/.changeset/eight-pans-impress.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/__docs__/wonder-blocks-form/_overview_.mdx b/__docs__/wonder-blocks-form/_overview_.mdx
index b3d26325b..78c7e733d 100644
--- a/__docs__/wonder-blocks-form/_overview_.mdx
+++ b/__docs__/wonder-blocks-form/_overview_.mdx
@@ -7,4 +7,4 @@ import {Meta} from "@storybook/blocks";
 # Form
 
 `wonder-blocks-form` provides building blocks form Form components, including
-TextField, Choice, Checkbox, RadioButton, etc.
+TextField, TextArea, Choice, Checkbox, RadioButton, etc.
diff --git a/__docs__/wonder-blocks-form/accessibility.mdx b/__docs__/wonder-blocks-form/accessibility.mdx
new file mode 100644
index 000000000..21a876f9a
--- /dev/null
+++ b/__docs__/wonder-blocks-form/accessibility.mdx
@@ -0,0 +1,34 @@
+import {Meta, Story, Canvas} from "@storybook/blocks";
+import * as AccessibilityStories from './accessibility.stories';
+
+<Meta of={AccessibilityStories} />
+
+# Form Accessibility
+
+## Form Field Labels
+
+Form fields should have an associated `<label>` element that has the `htmlFor`
+prop set to the `id` of the form field element. This is helpful for
+screenreaders so that it can communicate the relationship between the label and
+the form field.
+
+### Guidelines
+- Make sure the id of the form field element is unique to the page
+- Consider using the `LabeledTextField` component if you are using `TextField`.
+This will automatically wire up the label and text input. (Note: we will have
+a more generic `LabelField` component later on to provide this functionality
+for other form fields.)
+- If you are using the `CheckboxGroup` or `RadioGroup` components, the accessible
+label for the field is already built-in when the `label` prop is used. This
+uses `<fieldset>` and `<legend>` elements instead of a `<label>` since the label
+is for a group of related controls. See
+[Grouping Controls](https://www.w3.org/WAI/tutorials/forms/grouping/)
+for more details!
+- When using Wonder Blocks typography components for form labels, the `tag`
+prop can be set to `label` to change the underlying element to render.
+
+
+Here is an example of a form field label using Wonder Blocks components
+`LabelMedium` and `TextArea`:
+
+<Canvas of={AccessibilityStories.FormLabelExample} />
diff --git a/__docs__/wonder-blocks-form/accessibility.stories.tsx b/__docs__/wonder-blocks-form/accessibility.stories.tsx
new file mode 100644
index 000000000..447719853
--- /dev/null
+++ b/__docs__/wonder-blocks-form/accessibility.stories.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {TextArea} from "@khanacademy/wonder-blocks-form";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
+
+export default {
+    title: "Packages / Form / Accessibility",
+    parameters: {
+        previewTabs: {
+            canvas: {
+                hidden: true,
+            },
+        },
+
+        viewMode: "docs",
+
+        chromatic: {
+            // Disabling because this is used for documentation purposes
+            disableSnapshot: true,
+        },
+    },
+    tags: [
+        "!dev", // Hide individual stories from sidebar so they are only shown in the docs page.
+    ],
+};
+
+/**
+ * An example of a form field label using Wonder Blocks components `LabelMedium`
+ * and `TextArea`.
+ */
+export const FormLabelExample = () => {
+    const [value, setValue] = React.useState("");
+    return (
+        <View style={styles.container}>
+            <LabelMedium tag="label" htmlFor="description-field">
+                Description
+            </LabelMedium>
+            <TextArea
+                value={value}
+                onChange={(value) => setValue(value)}
+                id="description-field"
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        gap: spacing.xSmall_8,
+    },
+});
diff --git a/__docs__/wonder-blocks-typography/body-monospace.stories.tsx b/__docs__/wonder-blocks-typography/body-monospace.stories.tsx
new file mode 100644
index 000000000..0f7ca674c
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/body-monospace.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {BodyMonospace} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / BodyMonospace",
+    component: BodyMonospace,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof BodyMonospace>;
+
+type StoryComponentType = StoryObj<typeof BodyMonospace>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "BodyMonospace",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/body-serif-block.stories.tsx b/__docs__/wonder-blocks-typography/body-serif-block.stories.tsx
new file mode 100644
index 000000000..97e50372f
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/body-serif-block.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {BodySerifBlock} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / BodySerifBlock",
+    component: BodySerifBlock,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof BodySerifBlock>;
+
+type StoryComponentType = StoryObj<typeof BodySerifBlock>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "BodySerifBlock",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/body-serif.stories.tsx b/__docs__/wonder-blocks-typography/body-serif.stories.tsx
new file mode 100644
index 000000000..28262b2b5
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/body-serif.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {BodySerif} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / BodySerif",
+    component: BodySerif,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof BodySerif>;
+
+type StoryComponentType = StoryObj<typeof BodySerif>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "BodySerif",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/body.stories.tsx b/__docs__/wonder-blocks-typography/body.stories.tsx
new file mode 100644
index 000000000..f2d4c3c2b
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/body.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {Body} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / Body",
+    component: Body,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof Body>;
+
+type StoryComponentType = StoryObj<typeof Body>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "Body",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/caption.stories.tsx b/__docs__/wonder-blocks-typography/caption.stories.tsx
new file mode 100644
index 000000000..c1ea163ec
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/caption.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {Caption} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / Caption",
+    component: Caption,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof Caption>;
+
+type StoryComponentType = StoryObj<typeof Caption>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "Caption",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/footnote.stories.tsx b/__docs__/wonder-blocks-typography/footnote.stories.tsx
new file mode 100644
index 000000000..db78bae44
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/footnote.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {Footnote} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / Footnote",
+    component: Footnote,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof Footnote>;
+
+type StoryComponentType = StoryObj<typeof Footnote>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "Footnote",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/heading-large.stories.tsx b/__docs__/wonder-blocks-typography/heading-large.stories.tsx
new file mode 100644
index 000000000..94fa3363b
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/heading-large.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / HeadingLarge",
+    component: HeadingLarge,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof HeadingLarge>;
+
+type StoryComponentType = StoryObj<typeof HeadingLarge>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "HeadingLarge",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/heading-medium.stories.tsx b/__docs__/wonder-blocks-typography/heading-medium.stories.tsx
new file mode 100644
index 000000000..46c324b8f
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/heading-medium.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {HeadingMedium} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / HeadingMedium",
+    component: HeadingMedium,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof HeadingMedium>;
+
+type StoryComponentType = StoryObj<typeof HeadingMedium>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "HeadingMedium",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/heading-small.stories.tsx b/__docs__/wonder-blocks-typography/heading-small.stories.tsx
new file mode 100644
index 000000000..545a94f4f
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/heading-small.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {HeadingSmall} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / HeadingSmall",
+    component: HeadingSmall,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof HeadingSmall>;
+
+type StoryComponentType = StoryObj<typeof HeadingSmall>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "HeadingSmall",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/heading-xsmall.stories.tsx b/__docs__/wonder-blocks-typography/heading-xsmall.stories.tsx
new file mode 100644
index 000000000..aae22f7fc
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/heading-xsmall.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {HeadingXSmall} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / HeadingXSmall",
+    component: HeadingXSmall,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof HeadingXSmall>;
+
+type StoryComponentType = StoryObj<typeof HeadingXSmall>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "HeadingXSmall",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/label-large.stories.tsx b/__docs__/wonder-blocks-typography/label-large.stories.tsx
new file mode 100644
index 000000000..1df4e0072
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/label-large.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / LabelLarge",
+    component: LabelLarge,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof LabelLarge>;
+
+type StoryComponentType = StoryObj<typeof LabelLarge>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "LabelLarge",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/label-medium.stories.tsx b/__docs__/wonder-blocks-typography/label-medium.stories.tsx
new file mode 100644
index 000000000..955b137e0
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/label-medium.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / LabelMedium",
+    component: LabelMedium,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof LabelMedium>;
+
+type StoryComponentType = StoryObj<typeof LabelMedium>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "LabelMedium",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/label-small.stories.tsx b/__docs__/wonder-blocks-typography/label-small.stories.tsx
new file mode 100644
index 000000000..a8d1d6fa1
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/label-small.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / LabelSmall",
+    component: LabelSmall,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof LabelSmall>;
+
+type StoryComponentType = StoryObj<typeof LabelSmall>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "LabelSmall",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/label-xsmall.stories.tsx b/__docs__/wonder-blocks-typography/label-xsmall.stories.tsx
new file mode 100644
index 000000000..1d3b73c54
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/label-xsmall.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {LabelXSmall} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / LabelXSmall",
+    component: LabelXSmall,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof LabelXSmall>;
+
+type StoryComponentType = StoryObj<typeof LabelXSmall>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "LabelXSmall",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/tagline.stories.tsx b/__docs__/wonder-blocks-typography/tagline.stories.tsx
new file mode 100644
index 000000000..d13ed975c
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/tagline.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {Tagline} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / Tagline",
+    component: Tagline,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof Tagline>;
+
+type StoryComponentType = StoryObj<typeof Tagline>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "Tagline",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/title.stories.tsx b/__docs__/wonder-blocks-typography/title.stories.tsx
new file mode 100644
index 000000000..2adf4db68
--- /dev/null
+++ b/__docs__/wonder-blocks-typography/title.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {Title} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / Title",
+    component: Title,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof Title>;
+
+type StoryComponentType = StoryObj<typeof Title>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "Title",
+    },
+};
diff --git a/__docs__/wonder-blocks-typography/typography.argtypes.ts b/__docs__/wonder-blocks-typography/typography.argtypes.ts
index 59cf949b9..ae02d2b8c 100644
--- a/__docs__/wonder-blocks-typography/typography.argtypes.ts
+++ b/__docs__/wonder-blocks-typography/typography.argtypes.ts
@@ -3,24 +3,26 @@ export default {
         control: {type: "text"},
         description: "Text to appear with the specified typography styles.",
         table: {type: {summary: "React.Node"}},
-        type: {required: false},
     },
     style: {
         control: {type: "object"},
         description: "Optional custom styles.",
         table: {type: {summary: "StyleType"}},
-        type: {required: false},
     },
     testId: {
         control: {type: "text"},
         description: "Test ID used for e2e testing.",
         table: {type: {summary: "string"}},
-        type: {required: false},
     },
     id: {
         control: {type: "text"},
         description: "Unique identifier.",
         table: {type: {summary: "string"}},
-        type: {required: false},
+    },
+    tag: {
+        control: {type: "text"},
+        description:
+            "The underlying HTML tag to render (e.g. `h1`, `h2`, `label`, etc.). Please use this to ensure that the typography is hierarchically correct.",
+        table: {type: {summary: "string"}},
     },
 };
diff --git a/__docs__/wonder-blocks-typography/typography.stories.tsx b/__docs__/wonder-blocks-typography/typography.stories.tsx
index b1c3c4cb9..f7ba7e92b 100644
--- a/__docs__/wonder-blocks-typography/typography.stories.tsx
+++ b/__docs__/wonder-blocks-typography/typography.stories.tsx
@@ -62,8 +62,7 @@ export default {
             },
         },
     },
-    // TODO(FEI-5000): Inline this
-    argTypes: TypographyArgTypes as any,
+    argTypes: TypographyArgTypes,
 } as Meta<typeof ComponentInfo>;
 
 export const ControlProps: StoryObj<typeof Title> = {