diff --git a/canon-docs/src/app/(docs)/components/button/page.mdx b/canon-docs/src/app/(docs)/components/button/page.mdx
index c92b5b9921..a92a6675d1 100644
--- a/canon-docs/src/app/(docs)/components/button/page.mdx
+++ b/canon-docs/src/app/(docs)/components/button/page.mdx
@@ -11,7 +11,7 @@ import {
   ButtonResponsive,
 } from '@/snippets/button';
 import { buttonVariants } from '@/snippets/_snippets';
-import { buttonPropDefs } from '../../../../../../packages/canon/src/components/Button/Button.props';
+import { buttonPropDefs } from './props';
 
 # Button
 
diff --git a/canon-docs/src/app/(docs)/components/button/props.ts b/canon-docs/src/app/(docs)/components/button/props.ts
new file mode 100644
index 0000000000..3a8f98e000
--- /dev/null
+++ b/canon-docs/src/app/(docs)/components/button/props.ts
@@ -0,0 +1,19 @@
+import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
+import type { PropDef } from '../../../../utils/propDefs';
+
+export const boxPropDefs: Record<string, PropDef> = {
+  variant: {
+    type: 'enum',
+    values: ['primary', 'secondary'],
+    default: 'primary',
+    responsive: true,
+  },
+  size: {
+    type: 'enum',
+    values: ['small', 'medium'],
+    default: 'medium',
+    responsive: true,
+  },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
diff --git a/canon-docs/src/app/(docs)/components/checkbox/page.mdx b/canon-docs/src/app/(docs)/components/checkbox/page.mdx
index 26a5d0f955..fd2ec42e1b 100644
--- a/canon-docs/src/app/(docs)/components/checkbox/page.mdx
+++ b/canon-docs/src/app/(docs)/components/checkbox/page.mdx
@@ -4,6 +4,7 @@ import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
 import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
+import { checkboxPropDefs } from './props';
 
 # Checkbox
 
@@ -42,50 +43,7 @@ A checkbox component that can be used to trigger actions.
 
 <BaseUI href="https://base-ui.com/react/components/checkbox" />
 
-<PropsTable
-  data={{
-    label: {
-      type: 'string',
-      responsive: false,
-    },
-    defaultChecked: {
-      type: ['boolean', "'indeterminate'"],
-      responsive: false,
-    },
-    checked: {
-      type: ['boolean', "'indeterminate'"],
-      responsive: false,
-    },
-    onChange: {
-      type: "(checked: boolean | 'indeterminate') => void",
-      responsive: false,
-    },
-    disabled: {
-      type: 'boolean',
-      responsive: false,
-    },
-    required: {
-      type: 'boolean',
-      responsive: false,
-    },
-    name: {
-      type: 'string',
-      responsive: false,
-    },
-    value: {
-      type: 'string',
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
+<PropsTable data={checkboxPropDefs} />
 
 ## Examples
 
diff --git a/canon-docs/src/app/(docs)/components/checkbox/props.ts b/canon-docs/src/app/(docs)/components/checkbox/props.ts
new file mode 100644
index 0000000000..8abbac1ec9
--- /dev/null
+++ b/canon-docs/src/app/(docs)/components/checkbox/props.ts
@@ -0,0 +1,44 @@
+import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
+import type { PropDef } from '../../../../utils/propDefs';
+
+export const checkboxPropDefs: Record<string, PropDef> = {
+  label: {
+    type: 'string',
+    responsive: false,
+  },
+  defaultChecked: {
+    type: 'enum',
+    values: ['boolean', "'indeterminate'"],
+    responsive: false,
+  },
+  checked: {
+    type: 'enum',
+    values: ['boolean', "'indeterminate'"],
+    responsive: false,
+  },
+  onChange: {
+    type: 'enum',
+    values: ["(checked: boolean | 'indeterminate') => void"],
+    responsive: false,
+  },
+  disabled: {
+    type: 'enum',
+    values: ['boolean'],
+    responsive: false,
+  },
+  required: {
+    type: 'enum',
+    values: ['boolean'],
+    responsive: false,
+  },
+  name: {
+    type: 'string',
+    responsive: false,
+  },
+  value: {
+    type: 'string',
+    responsive: false,
+  },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
diff --git a/canon-docs/src/app/(docs)/components/field/page.mdx b/canon-docs/src/app/(docs)/components/field/page.mdx
index 83029be506..54c091faeb 100644
--- a/canon-docs/src/app/(docs)/components/field/page.mdx
+++ b/canon-docs/src/app/(docs)/components/field/page.mdx
@@ -4,6 +4,12 @@ import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
 import { FieldPreview } from '@/snippets/field';
 import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
+import {
+  fieldRootPropDefs,
+  fieldLabelPropDefs,
+  fieldDescriptionPropDefs,
+  fieldErrorPropDefs,
+} from './props';
 
 # Field
 
@@ -49,113 +55,25 @@ A wrapper around `Input` or `Select` component to add label, description and err
 
 Groups all parts of the field. Renders a `<div>` element.
 
-<PropsTable
-  data={{
-    name: {
-      type: 'string',
-      responsive: false,
-    },
-    disabled: {
-      type: 'boolean',
-      responsive: false,
-    },
-    invalid: {
-      type: 'boolean',
-      responsive: false,
-    },
-    validate: {
-      type: '(value) => string | string[] | null | Promise',
-      responsive: false,
-    },
-    validationMode: {
-      type: ['onBlur', 'onChange'],
-      responsive: false,
-    },
-    validationDebounceTime: {
-      type: 'number',
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
+<PropsTable data={fieldRootPropDefs} />
 
 ### Field.Label
 
 An accessible label that is automatically associated with the field control. Renders a `<label>` element.
 
-<PropsTable
-  data={{
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
+<PropsTable data={fieldLabelPropDefs} />
 
 ### Field.Description
 
 A paragraph with additional information about the field. Renders a `<p>` element.
 
-<PropsTable
-  data={{
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
+<PropsTable data={fieldDescriptionPropDefs} />
 
 ### Field.Error
 
 An error message displayed if the field control fails validation. Renders a `<div>` element.
 
-<PropsTable
-  data={{
-    match: {
-      type: [
-        'badInput',
-        'customError',
-        'patternMismatch',
-        'rangeOverflow',
-        'rangeUnderflow',
-        'stepMismatch',
-        'tooLong',
-        'tooShort',
-        'typeMismatch',
-        'valid',
-        'valueMissing',
-      ],
-      responsive: false,
-    },
-    forceShow: {
-      type: 'boolean',
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
+<PropsTable data={fieldErrorPropDefs} />
 
 ## Examples
 
diff --git a/canon-docs/src/app/(docs)/components/field/props.ts b/canon-docs/src/app/(docs)/components/field/props.ts
new file mode 100644
index 0000000000..aaadafee50
--- /dev/null
+++ b/canon-docs/src/app/(docs)/components/field/props.ts
@@ -0,0 +1,69 @@
+import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
+import type { PropDef } from '../../../../utils/propDefs';
+
+export const fieldRootPropDefs: Record<string, PropDef> = {
+  name: {
+    type: 'string',
+    responsive: false,
+  },
+  disabled: {
+    type: 'boolean',
+    responsive: false,
+  },
+  invalid: {
+    type: 'boolean',
+    responsive: false,
+  },
+  validate: {
+    type: 'enum',
+    values: ['(value) => string | string[] | null | Promise'],
+    responsive: false,
+  },
+  validationMode: {
+    type: 'enum',
+    values: ['onBlur', 'onChange'],
+    responsive: false,
+  },
+  validationDebounceTime: {
+    type: 'number',
+    responsive: false,
+  },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
+
+export const fieldLabelPropDefs: Record<string, PropDef> = {
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
+
+export const fieldDescriptionPropDefs: Record<string, PropDef> = {
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
+
+export const fieldErrorPropDefs: Record<string, PropDef> = {
+  match: {
+    type: 'enum',
+    values: [
+      'badInput',
+      'customError',
+      'patternMismatch',
+      'rangeOverflow',
+      'rangeUnderflow',
+      'stepMismatch',
+      'tooLong',
+      'tooShort',
+      'typeMismatch',
+      'valid',
+      'valueMissing',
+    ],
+    responsive: false,
+  },
+  forceShow: {
+    type: 'boolean',
+    responsive: false,
+  },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
diff --git a/canon-docs/src/app/(docs)/components/heading/page.mdx b/canon-docs/src/app/(docs)/components/heading/page.mdx
index f2fbe0e929..ad8131cdbd 100644
--- a/canon-docs/src/app/(docs)/components/heading/page.mdx
+++ b/canon-docs/src/app/(docs)/components/heading/page.mdx
@@ -7,6 +7,7 @@ import {
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
+import { headingPropDefs } from './props';
 
 # Heading
 
@@ -43,26 +44,7 @@ Headings are used to structure the content of your page.
 
 ## API reference
 
-<PropsTable
-  data={{
-    variant: {
-      type: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
-      responsive: true,
-    },
-    children: {
-      type: 'ReactNode',
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
+<PropsTable data={headingPropDefs} />
 
 ## Examples
 
diff --git a/canon-docs/src/app/(docs)/components/heading/props.ts b/canon-docs/src/app/(docs)/components/heading/props.ts
new file mode 100644
index 0000000000..a3dd3288ff
--- /dev/null
+++ b/canon-docs/src/app/(docs)/components/heading/props.ts
@@ -0,0 +1,17 @@
+import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
+import type { PropDef } from '../../../../utils/propDefs';
+
+export const headingPropDefs: Record<string, PropDef> = {
+  variant: {
+    type: 'enum',
+    values: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
+    responsive: true,
+  },
+  children: {
+    type: 'enum',
+    values: ['ReactNode'],
+    responsive: false,
+  },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
diff --git a/canon-docs/src/app/(docs)/components/icon-button/page.mdx b/canon-docs/src/app/(docs)/components/icon-button/page.mdx
index 591ee321eb..28b6eefbf2 100644
--- a/canon-docs/src/app/(docs)/components/icon-button/page.mdx
+++ b/canon-docs/src/app/(docs)/components/icon-button/page.mdx
@@ -9,7 +9,7 @@ import {
   IconButtonResponsive,
 } from '@/snippets/icon-button';
 import { iconButtonVariants } from '@/snippets/_snippets';
-import { iconButtonPropDefs } from '../../../../../../packages/canon/src/components/IconButton/IconButton.props';
+import { iconButtonPropDefs } from './props';
 
 # Icon Button
 
@@ -50,12 +50,7 @@ A button component with a single icon that can be used to trigger actions.
 
 ## API reference
 
-<PropsTable
-  data={{
-    ...iconButtonPropDefs,
-    icon: { values: 'icon', responsive: false },
-  }}
-/>
+<PropsTable data={iconButtonPropDefs} />
 
 ## Examples
 
diff --git a/canon-docs/src/app/(docs)/components/icon-button/props.ts b/canon-docs/src/app/(docs)/components/icon-button/props.ts
new file mode 100644
index 0000000000..bcb1580247
--- /dev/null
+++ b/canon-docs/src/app/(docs)/components/icon-button/props.ts
@@ -0,0 +1,20 @@
+import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
+import type { PropDef } from '../../../../utils/propDefs';
+
+export const iconButtonPropDefs: Record<string, PropDef> = {
+  variant: {
+    type: 'enum',
+    values: ['primary', 'secondary'],
+    default: 'primary',
+    responsive: true,
+  },
+  size: {
+    type: 'enum',
+    values: ['small', 'medium'],
+    default: 'medium',
+    responsive: true,
+  },
+  icon: { type: 'enum', values: 'icon', responsive: false },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
diff --git a/canon-docs/src/app/(docs)/components/icon/page.mdx b/canon-docs/src/app/(docs)/components/icon/page.mdx
index cb7c0df626..3d8d065374 100644
--- a/canon-docs/src/app/(docs)/components/icon/page.mdx
+++ b/canon-docs/src/app/(docs)/components/icon/page.mdx
@@ -3,6 +3,7 @@ import { IconPreview } from '@/snippets/icon';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
+import { iconPropDefs } from './props';
 
 # Icon
 
@@ -40,23 +41,4 @@ Icons are used to represent an action or a state.
 
 ## API reference
 
-<PropsTable
-  data={{
-    name: {
-      type: 'icon',
-      responsive: false,
-    },
-    size: {
-      type: 'number',
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
+<PropsTable data={iconPropDefs} />
diff --git a/canon-docs/src/app/(docs)/components/icon/props.ts b/canon-docs/src/app/(docs)/components/icon/props.ts
new file mode 100644
index 0000000000..2ddbafd94e
--- /dev/null
+++ b/canon-docs/src/app/(docs)/components/icon/props.ts
@@ -0,0 +1,16 @@
+import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
+import type { PropDef } from '../../../../utils/propDefs';
+
+export const iconPropDefs: Record<string, PropDef> = {
+  name: {
+    type: 'enum',
+    values: 'icon',
+    responsive: false,
+  },
+  size: {
+    type: 'number',
+    responsive: false,
+  },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
diff --git a/canon-docs/src/app/(docs)/components/input/page.mdx b/canon-docs/src/app/(docs)/components/input/page.mdx
index 802003501e..228ef68061 100644
--- a/canon-docs/src/app/(docs)/components/input/page.mdx
+++ b/canon-docs/src/app/(docs)/components/input/page.mdx
@@ -4,6 +4,7 @@ import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
 import { InputPreview, InputSizes } from '@/snippets/input';
 import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
+import { inputPropDefs } from './props';
 
 # Input
 
@@ -42,22 +43,7 @@ A input component tfor your forms.
 
 <BaseUI href="https://base-ui.com/react/components/input" />
 
-<PropsTable
-  data={{
-    size: {
-      type: ['sm', 'md'],
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
+<PropsTable data={inputPropDefs} />
 
 ## Examples
 
diff --git a/canon-docs/src/app/(docs)/components/input/props.ts b/canon-docs/src/app/(docs)/components/input/props.ts
new file mode 100644
index 0000000000..412ae23dd6
--- /dev/null
+++ b/canon-docs/src/app/(docs)/components/input/props.ts
@@ -0,0 +1,13 @@
+import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
+import type { PropDef } from '../../../../utils/propDefs';
+
+export const inputPropDefs: Record<string, PropDef> = {
+  size: {
+    type: 'enum',
+    values: ['sm', 'md'],
+    default: 'md',
+    responsive: false,
+  },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
diff --git a/canon-docs/src/app/(docs)/components/text/page.mdx b/canon-docs/src/app/(docs)/components/text/page.mdx
index 450de0f79d..9b904f84c4 100644
--- a/canon-docs/src/app/(docs)/components/text/page.mdx
+++ b/canon-docs/src/app/(docs)/components/text/page.mdx
@@ -8,6 +8,7 @@ import {
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
+import { textPropDefs } from './props';
 
 # Text
 
@@ -48,30 +49,7 @@ The `Text` component is used to display content on your page.
 
 ## API reference
 
-<PropsTable
-  data={{
-    variant: {
-      type: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
-      responsive: true,
-    },
-    weight: {
-      type: ['regular', 'bold'],
-      responsive: true,
-    },
-    children: {
-      type: 'ReactNode',
-      responsive: false,
-    },
-    className: {
-      type: 'string',
-      responsive: false,
-    },
-    style: {
-      type: 'CSSProperties',
-      responsive: false,
-    },
-  }}
-/>
+<PropsTable data={textPropDefs} />
 
 ## Examples
 
diff --git a/canon-docs/src/app/(docs)/components/text/props.ts b/canon-docs/src/app/(docs)/components/text/props.ts
new file mode 100644
index 0000000000..53413dc9e7
--- /dev/null
+++ b/canon-docs/src/app/(docs)/components/text/props.ts
@@ -0,0 +1,22 @@
+import {
+  childrenPropDefs,
+  classNamePropDefs,
+  stylePropDefs,
+} from '../../../../utils/propDefs';
+import type { PropDef } from '../../../../utils/propDefs';
+
+export const textPropDefs: Record<string, PropDef> = {
+  variant: {
+    type: 'enum',
+    values: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
+    responsive: true,
+  },
+  weight: {
+    type: 'enum',
+    values: ['regular', 'bold'],
+    responsive: true,
+  },
+  ...childrenPropDefs,
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
diff --git a/canon-docs/src/components/PropsTable/PropsTable.tsx b/canon-docs/src/components/PropsTable/PropsTable.tsx
index f288bcd033..c10daf5082 100644
--- a/canon-docs/src/components/PropsTable/PropsTable.tsx
+++ b/canon-docs/src/components/PropsTable/PropsTable.tsx
@@ -50,6 +50,8 @@ export const PropsTable = <T extends Record<string, PropData>>({
                   style={{ display: 'flex', flexWrap: 'wrap', gap: '0.375rem' }}
                 >
                   {data[n].type === 'string' && <Chip>string</Chip>}
+                  {data[n].type === 'number' && <Chip>number</Chip>}
+                  {data[n].type === 'boolean' && <Chip>boolean</Chip>}
                   {data[n].type === 'enum' && enumValues}
                   {data[n].type === 'enum | string' && (
                     <>
diff --git a/canon-docs/src/utils/propDefs.ts b/canon-docs/src/utils/propDefs.ts
index e5257f7643..f087d6188f 100644
--- a/canon-docs/src/utils/propDefs.ts
+++ b/canon-docs/src/utils/propDefs.ts
@@ -3,7 +3,7 @@ import type { Breakpoint } from '@backstage/canon/src/types';
 const breakpoints = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as Breakpoint[];
 
 export type PropDef = {
-  type: 'string' | 'enum' | 'enum | string';
+  type: 'string' | 'enum' | 'enum | string' | 'number' | 'boolean';
   values?: string | string[];
   default?: string;
   required?: boolean;