diff --git a/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-transcript-shadow.scss b/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-transcript-shadow.scss
new file mode 100644
index 000000000..769714c22
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-transcript-shadow.scss
@@ -0,0 +1,3 @@
+:host(:not([hidden])) {
+  display: block;
+}
diff --git a/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-transcript.scss b/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-transcript.scss
new file mode 100644
index 000000000..769714c22
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-transcript.scss
@@ -0,0 +1,3 @@
+:host(:not([hidden])) {
+  display: block;
+}
diff --git a/packages/cxl-ui/src/components/cxl-jw-player/cxl-jw-player-transcript/index.js b/packages/cxl-ui/src/components/cxl-jw-player/cxl-jw-player-transcript/index.js
new file mode 100644
index 000000000..5bbd17f44
--- /dev/null
+++ b/packages/cxl-ui/src/components/cxl-jw-player/cxl-jw-player-transcript/index.js
@@ -0,0 +1,21 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import style from '../../../styles/cxl-jw-player/cxl-jw-player-transcript-css';
+import shadowStyle from '../../../styles/cxl-jw-player/cxl-jw-player-transcript-shadow-css';
+
+@customElement('cxl-jw-player-transcript')
+export class CXLJWPlayerTranscriptElement extends LitElement {
+  static get styles() {
+    return [shadowStyle];
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  async __setup() {
+    await super.__setup();
+
+    this.__addStyle(style);
+  }
+}