diff --git a/.changeset/remove-basespinner.md b/.changeset/remove-basespinner.md
new file mode 100644
index 0000000000..5b4a325b4e
--- /dev/null
+++ b/.changeset/remove-basespinner.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": major
+---
+`<pf-spinner>`: Removed `BaseSpinner` class. Reimplement (recommended) or extend `PfSpinner`.
diff --git a/elements/package.json b/elements/package.json
index 0cd47fe88f..f5039179b9 100644
--- a/elements/package.json
+++ b/elements/package.json
@@ -42,7 +42,6 @@
     "./pf-progress-stepper/pf-progress-step.js": "./pf-progress-stepper/pf-progress-step.js",
     "./pf-progress-stepper/pf-progress-stepper.js": "./pf-progress-stepper/pf-progress-stepper.js",
     "./pf-progress/pf-progress.js": "./pf-progress/pf-progress.js",
-    "./pf-spinner/BaseSpinner.js": "./pf-spinner/BaseSpinner.js",
     "./pf-spinner/pf-spinner.js": "./pf-spinner/pf-spinner.js",
     "./pf-switch/BaseSwitch.js": "./pf-switch/BaseSwitch.js",
     "./pf-switch/pf-switch.js": "./pf-switch/pf-switch.js",
diff --git a/elements/pf-spinner/BaseSpinner.css b/elements/pf-spinner/BaseSpinner.css
deleted file mode 100644
index ef5b8cde05..0000000000
--- a/elements/pf-spinner/BaseSpinner.css
+++ /dev/null
@@ -1,20 +0,0 @@
-:host {
-  display: inline-block;
-  width: min-content;
-  min-height: 0;
-  aspect-ratio: 1 / 1;
-}
-
-svg {
-  overflow: hidden;
-}
-
-circle {
-  width: 100%;
-  height: 100%;
-  transform-origin: 50% 50%;
-  stroke-linecap: round;
-  stroke-dasharray: 283;
-  stroke-dashoffset: 280;
-}
-
diff --git a/elements/pf-spinner/BaseSpinner.ts b/elements/pf-spinner/BaseSpinner.ts
deleted file mode 100644
index 5cbb3c3b9c..0000000000
--- a/elements/pf-spinner/BaseSpinner.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { LitElement, html } from 'lit';
-import { property } from 'lit/decorators/property.js';
-
-import styles from './BaseSpinner.css';
-
-export type SpinnerSize = (
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xl'
-);
-
-/**
- * Base spinner class
- *
- * @cssprop {<length>} --pf-c-spinner--diameter                      {@default `3.375rem`}
- * @cssprop {<length>} --pf-c-spinner--Width                         {@default `3.375rem`}
- * @cssprop {<length>} --pf-c-spinner--Height                        {@default `3.375rem`}
- * @cssprop {<color>}  --pf-c-spinner--Color                         {@default `#06c`}
- * @cssprop {<length>} --pf-c-spinner--m-sm--diameter                {@default `0.625rem`}
- * @cssprop {<length>} --pf-c-spinner--m-md--diameter                {@default `1.125rem`}
- * @cssprop {<length>} --pf-c-spinner--m-lg--diameter                {@default `1.5rem`}
- * @cssprop {<length>} --pf-c-spinner--m-xl--diameter                {@default `3.375rem`}
- * @cssprop {<time>}   --pf-c-spinner--AnimationDuration             {@default `1.4s`}
- * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction       {@default `linear`}
- * @cssprop {<number>} --pf-c-spinner--stroke-width                  {@default `10`}
- * @cssprop {<color>}  --pf-c-spinner__path--Stroke                  {@default `#06c`}
- * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth             {@default `10`}
- * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}
- */
-
-export abstract class BaseSpinner extends LitElement {
-  static readonly styles = [styles];
-
-  /** Preset sizes for the spinner */
-  @property({ reflect: true }) size: SpinnerSize = 'xl';
-
-  /** Custom diameter of spinner set as CSS variable */
-  @property({ reflect: true }) diameter?: `${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}`;
-
-  override render() {
-    return html`
-      <svg role="progressbar" viewBox="0 0 100 100">
-        <circle cx="50" cy="50" r="45" fill="none" />
-      </svg>
-    `;
-  }
-}
diff --git a/elements/pf-spinner/pf-spinner.css b/elements/pf-spinner/pf-spinner.css
index 0394c1ca05..94eb582847 100644
--- a/elements/pf-spinner/pf-spinner.css
+++ b/elements/pf-spinner/pf-spinner.css
@@ -1,12 +1,16 @@
-[hidden] {
-  display: none !important;
+:host {
+  display: inline-block;
+  width: min-content;
+  min-height: 0;
+  aspect-ratio: 1 / 1;
 }
 
-div {
-  display: contents;
+[hidden] {
+  display: none !important;
 }
 
 svg {
+  overflow: hidden;
   width: var(--pf-c-spinner--Width,
     var(--pf-c-spinner--diameter,
       var(--pf-global--icon--FontSize--xl, 3.375rem)));
@@ -19,35 +23,41 @@ svg {
     var(--pf-c-spinner--AnimationTimingFunction, linear) infinite;
 }
 
-:host([size="sm"]) div {
+circle {
+  width: 100%;
+  height: 100%;
+  transform-origin: 50% 50%;
+  stroke-linecap: round;
+  stroke-dasharray: 283;
+  stroke-dashoffset: 280;
+  stroke: var(--pf-c-spinner--Color, var(--pf-global--primary-color--100, #06c));
+  stroke-width: var(--pf-c-spinner--stroke-width, 10);
+  animation:
+    pf-c-spinner-animation-dash
+    var(--pf-c-spinner--AnimationDuration, 1.4s)
+    var(--pf-c-spinner__path--AnimationTimingFunction, ease-in-out) infinite;
+}
+
+:host([size="sm"]) svg {
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter,
     var(--pf-global--icon--FontSize--sm, 0.625rem));
 }
 
-:host([size="md"]) div {
+:host([size="md"]) svg {
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter,
     var(--pf-global--icon--FontSize--md, 1.125rem));
 }
 
-:host([size="lg"]) div {
+:host([size="lg"]) svg {
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter,
     var(--pf-global--icon--FontSize--lg, 1.5rem));
 }
 
-:host([size="xl"]) div {
+:host([size="xl"]) svg {
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter,
     var(--pf-global--icon--FontSize--xl, 3.375rem));
 }
 
-circle {
-  stroke: var(--pf-c-spinner--Color, var(--pf-global--primary-color--100, #06c));
-  stroke-width: var(--pf-c-spinner--stroke-width, 10);
-  animation:
-    pf-c-spinner-animation-dash
-    var(--pf-c-spinner--AnimationDuration, 1.4s)
-    var(--pf-c-spinner__path--AnimationTimingFunction, ease-in-out) infinite;
-}
-
 @keyframes pf-c-spinner-animation-rotate {
   0% {
     transform: rotate(0deg);
diff --git a/elements/pf-spinner/pf-spinner.ts b/elements/pf-spinner/pf-spinner.ts
index f7fad2170d..a6576bcc22 100644
--- a/elements/pf-spinner/pf-spinner.ts
+++ b/elements/pf-spinner/pf-spinner.ts
@@ -1,8 +1,8 @@
-import { html } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { property } from 'lit/decorators/property.js';
 
-import { BaseSpinner } from './BaseSpinner.js';
 import styles from './pf-spinner.css';
 
 /**
@@ -26,10 +26,23 @@ import styles from './pf-spinner.css';
  */
 
 @customElement('pf-spinner')
-export class PfSpinner extends BaseSpinner {
-  static readonly styles = [...BaseSpinner.styles, styles];
-  render() {
-    return html`<div style=${styleMap({ '--pf-c-spinner--diameter': this.diameter })}>${super.render()}</div>`;
+export class PfSpinner extends LitElement {
+  static readonly styles = [styles];
+
+  /** Preset sizes for the spinner */
+  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'xl';
+
+  /** Custom diameter of spinner set as CSS variable */
+  @property({ reflect: true }) diameter?: `${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}`;
+
+  override render() {
+    return html`
+      <svg role="progressbar"
+           viewBox="0 0 100 100"
+           style="${styleMap({ '--pf-c-spinner--diameter': this.diameter })}">
+        <circle cx="50" cy="50" r="45" fill="none" />
+      </svg>
+    `;
   }
 }