diff --git a/.eslintrc.js b/.eslintrc.js
index fd211bf936672..3d136069d31cb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -112,10 +112,6 @@ module.exports = {
                         element: 'Divider',
                         message: 'use <LemonDivider> instead',
                     },
-                    {
-                        element: 'Typography',
-                        message: 'use utility classes instead',
-                    },
                     {
                         element: 'Card',
                         message: 'use utility classes instead',
@@ -124,10 +120,6 @@ module.exports = {
                         element: 'Button',
                         message: 'use <LemonButton> instead',
                     },
-                    {
-                        element: 'Input.TextArea',
-                        message: 'use <LemonTextArea> instead',
-                    },
                     {
                         element: 'Input',
                         message: 'use <LemonInput> instead',
@@ -148,10 +140,6 @@ module.exports = {
                         element: 'a',
                         message: 'use <Link> instead',
                     },
-                    {
-                        element: 'ReactMarkdown',
-                        message: 'use <LemonMarkdown> instead',
-                    },
                 ],
             },
         ],
@@ -183,6 +171,18 @@ module.exports = {
                         element: 'MonacoEditor',
                         message: 'use <CodeEditor> instead',
                     },
+                    {
+                        element: 'Typography',
+                        message: 'use utility classes instead',
+                    },
+                    {
+                        element: 'Input.TextArea',
+                        message: 'use <LemonTextArea> instead',
+                    },
+                    {
+                        element: 'ReactMarkdown',
+                        message: 'use <LemonMarkdown> instead',
+                    },
                 ],
             },
         ],
diff --git a/frontend/__snapshots__/components-html-elements-display--example-elements.png b/frontend/__snapshots__/components-html-elements-display--example-elements.png
new file mode 100644
index 0000000000000..1d9e85138f5bc
Binary files /dev/null and b/frontend/__snapshots__/components-html-elements-display--example-elements.png differ
diff --git a/frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx b/frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx
index 75c1afc9de71f..e6790f8446a6b 100644
--- a/frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx
+++ b/frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx
@@ -70,6 +70,7 @@ export const Template: Story = () => {
                     textTile={makeTextTile('showing handles')}
                 />
             </div>
+            {/* eslint-disable-next-line react/forbid-dom-props */}
             <div className={'w-full'} style={{ height: '200px' }}>
                 <h5>Large Card</h5>
                 <TextCard
diff --git a/frontend/src/lib/components/CompactList/CompactList.stories.tsx b/frontend/src/lib/components/CompactList/CompactList.stories.tsx
index aabe5bddcfcea..dfce25599a81f 100644
--- a/frontend/src/lib/components/CompactList/CompactList.stories.tsx
+++ b/frontend/src/lib/components/CompactList/CompactList.stories.tsx
@@ -21,6 +21,7 @@ export default meta
 export function CompactList_({ loading }: { loading: boolean }): JSX.Element {
     return (
         <div className="flex">
+            {/* eslint-disable-next-line react/forbid-dom-props */}
             <div style={{ width: 350 }}>
                 <CompactList
                     loading={loading}
@@ -43,6 +44,7 @@ export function CompactList_({ loading }: { loading: boolean }): JSX.Element {
                     )}
                 />
             </div>
+            {/* eslint-disable-next-line react/forbid-dom-props */}
             <div style={{ width: 350, marginLeft: 30 }}>
                 <CompactList
                     loading={loading}
diff --git a/frontend/src/lib/components/CopyToClipboard.tsx b/frontend/src/lib/components/CopyToClipboard.tsx
index 218e14899c3ce..e1525cee04b23 100644
--- a/frontend/src/lib/components/CopyToClipboard.tsx
+++ b/frontend/src/lib/components/CopyToClipboard.tsx
@@ -35,6 +35,7 @@ export function CopyToClipboardInline({
     const content = (
         <span
             className={isValueSensitive ? 'ph-no-capture' : ''}
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 position: 'relative',
                 overflow: 'hidden',
diff --git a/frontend/src/lib/components/EditableField/EditableField.tsx b/frontend/src/lib/components/EditableField/EditableField.tsx
index f30517c7e08d1..40e61b3e57d08 100644
--- a/frontend/src/lib/components/EditableField/EditableField.tsx
+++ b/frontend/src/lib/components/EditableField/EditableField.tsx
@@ -110,6 +110,7 @@ export function EditableField({
                 className
             )}
             data-attr={dataAttr}
+            // eslint-disable-next-line react/forbid-dom-props
             style={style}
         >
             <Tooltip
diff --git a/frontend/src/lib/components/Fade/Fade.tsx b/frontend/src/lib/components/Fade/Fade.tsx
index 33ab73b73e68e..d611ead1591a0 100644
--- a/frontend/src/lib/components/Fade/Fade.tsx
+++ b/frontend/src/lib/components/Fade/Fade.tsx
@@ -30,6 +30,7 @@ export function Fade({
     return shouldRender ? (
         <div
             className={`fade-component-container${className ? ` ${className}` : ''}`}
+            // eslint-disable-next-line react/forbid-dom-props
             style={{ animation: `${visible ? 'fadeComponentFadeIn' : 'fadeComponentFadeOut'} 0.3s`, ...style }}
             onAnimationEnd={onAnimationEnd}
             {...props}
diff --git a/frontend/src/lib/components/HTMLElementsDisplay/HTMLElementsDisplay.stories.tsx b/frontend/src/lib/components/HTMLElementsDisplay/HTMLElementsDisplay.stories.tsx
index 818aaac65abfd..7a234ce903e49 100644
--- a/frontend/src/lib/components/HTMLElementsDisplay/HTMLElementsDisplay.stories.tsx
+++ b/frontend/src/lib/components/HTMLElementsDisplay/HTMLElementsDisplay.stories.tsx
@@ -12,7 +12,7 @@ export function EmptyDisplay(): JSX.Element {
     return <HTMLElementsDisplay elements={[] as ElementType[]} />
 }
 
-export const elementsExample = [
+export const EXAMPLE_ELEMENTS = [
     {
         text: 'Insights',
         tag_name: 'span',
@@ -176,15 +176,15 @@ export const elementsExample = [
 ] as ElementType[]
 
 export function ReadOnlyDisplay(): JSX.Element {
-    return <HTMLElementsDisplay elements={elementsExample} />
+    return <HTMLElementsDisplay elements={EXAMPLE_ELEMENTS} />
 }
 
 export function WithoutCentralHghlightDisplay(): JSX.Element {
-    return <HTMLElementsDisplay elements={elementsExample} highlight={false} />
+    return <HTMLElementsDisplay elements={EXAMPLE_ELEMENTS} highlight={false} />
 }
 
 export function EditableDisplay(): JSX.Element {
-    return <HTMLElementsDisplay elements={elementsExample} highlight={false} editable={true} />
+    return <HTMLElementsDisplay elements={EXAMPLE_ELEMENTS} highlight={false} editable={true} />
 }
 
 export function EditableDisplayWithPreselection(): JSX.Element {
@@ -195,7 +195,7 @@ export function EditableDisplayWithPreselection(): JSX.Element {
             </h4>
             <HTMLElementsDisplay
                 startingSelector={'div div.SideBar .LemonButton__content span.text-default'}
-                elements={elementsExample}
+                elements={EXAMPLE_ELEMENTS}
                 highlight={false}
                 editable={true}
             />
@@ -204,5 +204,5 @@ export function EditableDisplayWithPreselection(): JSX.Element {
 }
 
 export function WithUniquenessCheck(): JSX.Element {
-    return <HTMLElementsDisplay elements={elementsExample} highlight={false} editable={true} checkUniqueness={true} />
+    return <HTMLElementsDisplay elements={EXAMPLE_ELEMENTS} highlight={false} editable={true} checkUniqueness={true} />
 }
diff --git a/frontend/src/lib/components/HTMLElementsDisplay/preselectWithCSS.test.ts b/frontend/src/lib/components/HTMLElementsDisplay/preselectWithCSS.test.ts
index 43afcd8b49d7c..5d65b1587a0d1 100644
--- a/frontend/src/lib/components/HTMLElementsDisplay/preselectWithCSS.test.ts
+++ b/frontend/src/lib/components/HTMLElementsDisplay/preselectWithCSS.test.ts
@@ -5,7 +5,7 @@ import {
     preselect,
     parsedSelectorToSelectorString,
 } from 'lib/components/HTMLElementsDisplay/preselectWithCSS'
-import { elementsExample } from 'lib/components/HTMLElementsDisplay/HTMLElementsDisplay.stories'
+import { EXAMPLE_ELEMENTS } from 'lib/components/HTMLElementsDisplay/HTMLElementsDisplay.stories'
 import { elementsChain } from 'lib/components/HTMLElementsDisplay/htmlElementsDisplayLogic'
 
 const elements = [
@@ -382,7 +382,7 @@ describe('can preselect selectors for editing', () => {
     test('fixing the storybook example', () => {
         const selector = 'div div.SideBar .LemonButton__content span.text-default'
 
-        expect(preselect(elementsChain(elementsExample), selector)).toEqual({
+        expect(preselect(elementsChain(EXAMPLE_ELEMENTS), selector)).toEqual({
             '0': {
                 tag: 'div',
             },
diff --git a/frontend/src/lib/components/InsightLabel/index.tsx b/frontend/src/lib/components/InsightLabel/index.tsx
index ad705b1926573..2392f77a423c6 100644
--- a/frontend/src/lib/components/InsightLabel/index.tsx
+++ b/frontend/src/lib/components/InsightLabel/index.tsx
@@ -121,6 +121,7 @@ export function InsightLabel({
                 {!(hasMultipleSeries && !breakdownValue) && !hideIcon && (
                     <div
                         className="color-icon"
+                        // eslint-disable-next-line react/forbid-dom-props
                         style={{
                             background: seriesColor,
                             boxShadow: `0px 0px 0px 1px ${hexToRGBA(seriesColor, 0.5)}`,
@@ -171,6 +172,7 @@ export function InsightLabel({
                             {pillValues.map((pill) => (
                                 <Tooltip title={pill} key={pill}>
                                     <Tag className="tag-pill" closable={false}>
+                                        {/* eslint-disable-next-line react/forbid-dom-props */}
                                         <span className="truncate" style={{ maxWidth: pillMaxWidth }}>
                                             {pillMidEllipsis ? midEllipsis(String(pill), 50) : pill}
                                         </span>
diff --git a/frontend/src/lib/components/PageHeader.tsx b/frontend/src/lib/components/PageHeader.tsx
index 01f281b18e0d3..ac309adc8d1e5 100644
--- a/frontend/src/lib/components/PageHeader.tsx
+++ b/frontend/src/lib/components/PageHeader.tsx
@@ -25,6 +25,7 @@ export function PageHeader({
 }: PageHeaderProps): JSX.Element {
     return (
         <>
+            {/* eslint-disable-next-line react/forbid-dom-props */}
             <div className="page-title-row flex justify-between" style={style}>
                 <div className="min-w-0">
                     {notebookProps ? (
diff --git a/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.tsx b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.tsx
index df3215e2831b4..90d8258c1cf30 100644
--- a/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.tsx
+++ b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.tsx
@@ -15,6 +15,7 @@ export interface LemonMarkdownProps {
 export function LemonMarkdown({ children, lowKeyHeadings = false, className }: LemonMarkdownProps): JSX.Element {
     return (
         <div className={clsx('LemonMarkdown', className)}>
+            {/* eslint-disable-next-line react/forbid-elements */}
             <ReactMarkdown
                 renderers={{
                     link: ({ href, children }) => (