diff --git a/generated/components.json b/generated/components.json
index 3a574ab4f45..0fc91b3543a 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -3443,7 +3443,7 @@
       "stories": [
         {
           "id": "components-relativetime--default",
-          "code": "(args) => {\n  const { date, ...rest } = args\n  return <RelativeTime {...rest} date={new Date(date)} />\n}"
+          "code": "() => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} />"
         }
       ],
       "props": [
diff --git a/src/RelativeTime/RelativeTime.features.stories.tsx b/src/RelativeTime/RelativeTime.features.stories.tsx
new file mode 100644
index 00000000000..e1ed5882922
--- /dev/null
+++ b/src/RelativeTime/RelativeTime.features.stories.tsx
@@ -0,0 +1,155 @@
+import RelativeTime from './RelativeTime'
+import React from 'react'
+import {Meta, Story} from '@storybook/react'
+
+const meta: Meta = {
+  title: 'Components/RelativeTime/Features',
+  component: RelativeTime,
+  parameters: {
+    layout: 'fullscreen',
+    controls: {
+      // StoryBook infers from type info of the component which includes CE Lifecycle,
+      // SX props, and methods we want to otherwise ignore
+      exclude: /^(getFormatted.*|datetime|sx|as|theme|forwardedAs|.*Callback|update)$/g,
+    },
+    // it's not possible to snapshot test relative time because the output keeps changing
+    chromatic: {disableSnapshot: true},
+  },
+  args: {
+    date: new Date('2020-01-01T00:00:00Z'),
+    second: '',
+    minute: '',
+    hour: '',
+    weekday: '',
+    day: 'numeric',
+    month: 'short',
+    year: '',
+    timeZoneName: '',
+  },
+  argTypes: {
+    hour: {
+      type: {
+        name: 'enum',
+        value: ['', 'numeric', '2-digit'],
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)',
+        },
+      },
+    },
+    minute: {
+      type: {
+        name: 'enum',
+        value: ['', 'numeric', '2-digit'],
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)',
+        },
+      },
+    },
+    second: {
+      type: {
+        name: 'enum',
+        value: ['', 'numeric', '2-digit'],
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)',
+        },
+      },
+    },
+    weekday: {
+      type: {
+        name: 'enum',
+        value: ['', 'short', 'long', 'narrow'],
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)',
+        },
+      },
+    },
+    day: {
+      type: {
+        name: 'enum',
+        value: ['', 'numeric', '2-digit'],
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)',
+        },
+      },
+    },
+    month: {
+      type: {
+        name: 'enum',
+        value: ['', 'numeric', '2-digit', 'long', 'short', 'narrow'],
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)',
+        },
+      },
+    },
+    year: {
+      type: {
+        name: 'enum',
+        value: ['', 'numeric', '2-digit'],
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)',
+        },
+      },
+    },
+    timeZoneName: {
+      type: {
+        name: 'enum',
+        value: ['', 'long', 'short', 'longOffset', 'shortOffset', 'longGeneric', 'shortGeneric'],
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)',
+        },
+      },
+    },
+    date: {
+      control: 'date',
+    },
+    format: {
+      control: 'string',
+    },
+  },
+}
+
+export const MicroFormat: Story = args => {
+  const {date, ...rest} = args
+  return <RelativeTime {...rest} date={new Date(date)} format="micro" />
+}
+MicroFormat.args = {tense: 'past'}
+MicroFormat.argTypes = {format: {control: false}}
+
+export const RecentTime: Story = args => {
+  const {...rest} = args
+  return <RelativeTime {...rest} date={new Date()} />
+}
+RecentTime.argTypes = {date: {control: false}}
+
+export const CountDownTimer: Story = args => {
+  const {...rest} = args
+  return <RelativeTime {...rest} />
+}
+CountDownTimer.args = {date: new Date('2038-01-19T03:14:08Z'), format: 'elapsed', day: '', month: ''}
+CountDownTimer.argTypes = {date: {control: false}, format: {control: false}}
+
+export default meta
diff --git a/src/RelativeTime/RelativeTime.stories.tsx b/src/RelativeTime/RelativeTime.stories.tsx
index 0a0be5b8eb2..f7952a48555 100644
--- a/src/RelativeTime/RelativeTime.stories.tsx
+++ b/src/RelativeTime/RelativeTime.stories.tsx
@@ -15,146 +15,130 @@ const meta: Meta = {
     // it's not possible to snapshot test relative time because the output keeps changing
     chromatic: {disableSnapshot: true},
   },
-  args: {
-    date: new Date('2020-01-01T00:00:00Z'),
-    second: '',
-    minute: '',
-    hour: '',
-    weekday: '',
-    day: 'numeric',
-    month: 'short',
-    year: '',
-    timeZoneName: '',
-  },
-  argTypes: {
-    hour: {
-      type: {
-        name: 'enum',
-        value: ['', 'numeric', '2-digit'],
-      },
-      control: {
-        type: 'select',
-        labels: {
-          '': '(None)',
-        },
-      },
+}
+
+export const Default: Story = () => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} />
+
+export const Playground: Story = args => {
+  const {date, ...rest} = args
+  return <RelativeTime {...rest} date={new Date(date)} />
+}
+
+Playground.args = {
+  date: new Date('2020-01-01T00:00:00Z'),
+  second: '',
+  minute: '',
+  hour: '',
+  weekday: '',
+  day: 'numeric',
+  month: 'short',
+  year: '',
+  timeZoneName: '',
+}
+
+Playground.argTypes = {
+  hour: {
+    type: {
+      name: 'enum',
+      value: ['', 'numeric', '2-digit'],
     },
-    minute: {
-      type: {
-        name: 'enum',
-        value: ['', 'numeric', '2-digit'],
-      },
-      control: {
-        type: 'select',
-        labels: {
-          '': '(None)',
-        },
+    control: {
+      type: 'select',
+      labels: {
+        '': '(None)',
       },
     },
-    second: {
-      type: {
-        name: 'enum',
-        value: ['', 'numeric', '2-digit'],
-      },
-      control: {
-        type: 'select',
-        labels: {
-          '': '(None)',
-        },
-      },
+  },
+  minute: {
+    type: {
+      name: 'enum',
+      value: ['', 'numeric', '2-digit'],
     },
-    weekday: {
-      type: {
-        name: 'enum',
-        value: ['', 'short', 'long', 'narrow'],
-      },
-      control: {
-        type: 'select',
-        labels: {
-          '': '(None)',
-        },
+    control: {
+      type: 'select',
+      labels: {
+        '': '(None)',
       },
     },
-    day: {
-      type: {
-        name: 'enum',
-        value: ['', 'numeric', '2-digit'],
-      },
-      control: {
-        type: 'select',
-        labels: {
-          '': '(None)',
-        },
-      },
+  },
+  second: {
+    type: {
+      name: 'enum',
+      value: ['', 'numeric', '2-digit'],
     },
-    month: {
-      type: {
-        name: 'enum',
-        value: ['', 'numeric', '2-digit', 'long', 'short', 'narrow'],
-      },
-      control: {
-        type: 'select',
-        labels: {
-          '': '(None)',
-        },
+    control: {
+      type: 'select',
+      labels: {
+        '': '(None)',
       },
     },
-    year: {
-      type: {
-        name: 'enum',
-        value: ['', 'numeric', '2-digit'],
+  },
+  weekday: {
+    type: {
+      name: 'enum',
+      value: ['', 'short', 'long', 'narrow'],
+    },
+    control: {
+      type: 'select',
+      labels: {
+        '': '(None)',
       },
-      control: {
-        type: 'select',
-        labels: {
-          '': '(None)',
-        },
+    },
+  },
+  day: {
+    type: {
+      name: 'enum',
+      value: ['', 'numeric', '2-digit'],
+    },
+    control: {
+      type: 'select',
+      labels: {
+        '': '(None)',
       },
     },
-    timeZoneName: {
-      type: {
-        name: 'enum',
-        value: ['', 'long', 'short', 'longOffset', 'shortOffset', 'longGeneric', 'shortGeneric'],
+  },
+  month: {
+    type: {
+      name: 'enum',
+      value: ['', 'numeric', '2-digit', 'long', 'short', 'narrow'],
+    },
+    control: {
+      type: 'select',
+      labels: {
+        '': '(None)',
       },
-      control: {
-        type: 'select',
-        labels: {
-          '': '(None)',
-        },
+    },
+  },
+  year: {
+    type: {
+      name: 'enum',
+      value: ['', 'numeric', '2-digit'],
+    },
+    control: {
+      type: 'select',
+      labels: {
+        '': '(None)',
       },
     },
-    date: {
-      control: 'date',
+  },
+  timeZoneName: {
+    type: {
+      name: 'enum',
+      value: ['', 'long', 'short', 'longOffset', 'shortOffset', 'longGeneric', 'shortGeneric'],
     },
-    format: {
-      control: 'string',
+    control: {
+      type: 'select',
+      labels: {
+        '': '(None)',
+      },
     },
   },
+  date: {
+    control: 'date',
+  },
+  format: {
+    control: 'string',
+  },
 }
 
-export const Default: Story = args => {
-  const {date, ...rest} = args
-  return <RelativeTime {...rest} date={new Date(date)} />
-}
-
-export const MicroFormat: Story = args => {
-  const {date, ...rest} = args
-  return <RelativeTime {...rest} date={new Date(date)} format="micro" />
-}
-MicroFormat.args = {tense: 'past'}
-MicroFormat.argTypes = {format: {control: false}}
-
-export const RecentTime: Story = args => {
-  const {...rest} = args
-  return <RelativeTime {...rest} date={new Date()} />
-}
-RecentTime.argTypes = {date: {control: false}}
-
-export const CountDownTimer: Story = args => {
-  const {...rest} = args
-  return <RelativeTime {...rest} />
-}
-CountDownTimer.args = {date: new Date('2038-01-19T03:14:08Z'), format: 'elapsed', day: '', month: ''}
-CountDownTimer.argTypes = {date: {control: false}, format: {control: false}}
-
 export default meta
diff --git a/src/__tests__/storybook.test.tsx b/src/__tests__/storybook.test.tsx
index affa6f57142..8b84116b4d8 100644
--- a/src/__tests__/storybook.test.tsx
+++ b/src/__tests__/storybook.test.tsx
@@ -33,6 +33,7 @@ const allowlist = [
   'ProgressBar',
   'Radio',
   'RadioGroup',
+  'RelativeTime',
   'Select',
   'SegmentedControl',
   'Spinner',