feat(site): tailwind demo variants for button, time, and slider references

Refs #840 https://claude.ai/code/session_01LUcwUd8E4Ekakp7NTFb6c5
2026-08-16 02:45:09 +00:00 · 2026-06-11 22:54:11 +00:00
parent 253beecbf9
commit 30292c326a
60 changed files with 1034 additions and 0 deletions
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,18 @@
+<video-player class="relative block">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-fullscreen-button
+            class="absolute right-2.5 bottom-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+        >
+            <span class="hidden in-data-fullscreen:inline">Exit Fullscreen</span>
+            <span class="hidden not-in-data-fullscreen:inline">Fullscreen</span>
+        </media-fullscreen-button>
+    </media-container>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/fullscreen-button';
@@ -0,0 +1,25 @@
+import { createPlayer, FullscreenButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <FullscreenButton
+          className="absolute right-2.5 bottom-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+          render={(props, state) => <button {...props}>{state.fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,18 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-mute-button
+            class="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+        >
+            <span class="hidden in-data-muted:inline">Unmute</span>
+            <span class="hidden not-in-data-muted:inline">Mute</span>
+        </media-mute-button>
+    </media-container>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/mute-button';
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './VolumeLevels.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./VolumeLevels.ts";
+</script>
@@ -0,0 +1,20 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-mute-button
+            class="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+        >
+            <span class="hidden in-data-[volume-level=off]:inline">Off</span>
+            <span class="hidden in-data-[volume-level=low]:inline">Low</span>
+            <span class="hidden in-data-[volume-level=medium]:inline">Medium</span>
+            <span class="hidden in-data-[volume-level=high]:inline">High</span>
+        </media-mute-button>
+    </media-container>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/mute-button';
@@ -0,0 +1,25 @@
+import { createPlayer, MuteButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <MuteButton
+          className="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+          render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,35 @@
+import { createPlayer, MuteButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function VolumeLevels() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <MuteButton
+          className="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+          render={(props, state) => (
+            <button {...props}>
+              {state.volumeLevel === 'off'
+                ? 'Off'
+                : state.volumeLevel === 'low'
+                  ? 'Low'
+                  : state.volumeLevel === 'medium'
+                    ? 'Medium'
+                    : 'High'}
+            </button>
+          )}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,18 @@
+<video-player class="relative block">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-pip-button
+            class="absolute right-2.5 bottom-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+        >
+            <span class="hidden in-data-pip:inline">Exit PiP</span>
+            <span class="hidden not-in-data-pip:inline">Enter PiP</span>
+        </media-pip-button>
+    </media-container>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/pip-button';
@@ -0,0 +1,25 @@
+import { createPlayer, PiPButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <PiPButton
+          className="absolute right-2.5 bottom-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+          render={(props, state) => <button {...props}>{state.pip ? 'Exit PiP' : 'Enter PiP'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,18 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+        ></video>
+        <media-play-button
+            class="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+        >
+            <span class="hidden in-data-paused:not-in-data-ended:inline">Play</span>
+            <span class="hidden not-in-data-paused:inline">Pause</span>
+            <span class="hidden in-data-ended:inline">Replay</span>
+        </media-play-button>
+    </media-container>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/play-button';
@@ -0,0 +1,26 @@
+import { createPlayer, PlayButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+        />
+        <PlayButton
+          className="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+          render={(props, state) => (
+            <button {...props}>{state.ended ? 'Replay' : state.paused ? 'Play' : 'Pause'}</button>
+          )}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,26 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <div class="absolute bottom-2.5 left-2.5 flex gap-2">
+            <media-seek-button
+                seconds="-5"
+                class="cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 whitespace-nowrap text-black backdrop-blur-[10px]"
+            >
+                <span class="hidden in-data-[direction=backward]:inline">&#9194; 5s</span>
+            </media-seek-button>
+            <media-seek-button
+                seconds="10"
+                class="cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 whitespace-nowrap text-black backdrop-blur-[10px]"
+            >
+                <span class="hidden in-data-[direction=forward]:inline">10s &#9193;</span>
+            </media-seek-button>
+        </div>
+    </media-container>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/seek-button';
@@ -0,0 +1,41 @@
+import { createPlayer, SeekButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <div className="absolute bottom-2.5 left-2.5 flex gap-2">
+          <SeekButton
+            seconds={-5}
+            className="cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 whitespace-nowrap text-black backdrop-blur-[10px]"
+            render={(props, state) => (
+              <button {...props}>
+                {state.direction === 'backward' ? '\u23EA' : '\u23E9'} {5}s
+              </button>
+            )}
+          />
+          <SeekButton
+            seconds={10}
+            className="cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 whitespace-nowrap text-black backdrop-blur-[10px]"
+            render={(props, state) => (
+              <button {...props}>
+                {10}s {state.direction === 'forward' ? '\u23E9' : '\u23EA'}
+              </button>
+            )}
+          />
+        </div>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './WithParts.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./WithParts.ts";
+</script>
@@ -0,0 +1,20 @@
+<video-player class="relative block">
+    <media-container class="relative block">
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-time-slider class="absolute inset-x-0 bottom-0 flex h-5 cursor-pointer items-center">
+            <media-slider-track class="absolute inset-x-0 h-1 rounded-full bg-white/30 transition-[height] duration-150 in-data-interactive:h-1.5">
+                <media-slider-buffer class="absolute top-0 left-0 h-full w-(--media-slider-buffer) rounded-full bg-white/40"></media-slider-buffer>
+                <media-slider-fill class="absolute top-0 left-0 h-full w-(--media-slider-fill) rounded-full bg-white in-data-dragging:w-(--media-slider-pointer)"></media-slider-fill>
+            </media-slider-track>
+            <media-slider-thumb class="absolute left-(--media-slider-fill) size-3.5 -translate-x-1/2 scale-0 rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.4)] transition-transform duration-150 in-data-interactive:scale-100 in-data-dragging:left-(--media-slider-pointer) in-data-dragging:scale-110"></media-slider-thumb>
+            <media-slider-value type="pointer" class="pointer-events-none absolute bottom-full left-(--media-slider-pointer) mb-1.5 -translate-x-1/2 rounded-sm bg-black/80 px-1.5 py-0.5 text-xs whitespace-nowrap text-white opacity-0 transition-opacity duration-150 in-data-pointing:opacity-100"></media-slider-value>
+        </media-time-slider>
+    </media-container>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time-slider';
@@ -0,0 +1,32 @@
+import { createPlayer, TimeSlider } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function WithParts() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <TimeSlider.Root className="absolute inset-x-0 bottom-0 flex h-5 cursor-pointer items-center">
+          <TimeSlider.Track className="absolute inset-x-0 h-1 rounded-full bg-white/30 transition-[height] duration-150 in-data-interactive:h-1.5">
+            <TimeSlider.Buffer className="absolute top-0 left-0 h-full w-(--media-slider-buffer) rounded-full bg-white/40" />
+            <TimeSlider.Fill className="absolute top-0 left-0 h-full w-(--media-slider-fill) rounded-full bg-white in-data-dragging:w-(--media-slider-pointer)" />
+          </TimeSlider.Track>
+          <TimeSlider.Thumb className="absolute left-(--media-slider-fill) size-3.5 -translate-x-1/2 scale-0 rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.4)] transition-transform duration-150 in-data-interactive:scale-100 in-data-dragging:left-(--media-slider-pointer) in-data-dragging:scale-110" />
+          <TimeSlider.Value
+            type="pointer"
+            className="pointer-events-none absolute bottom-full left-(--media-slider-pointer) mb-1.5 -translate-x-1/2 rounded-sm bg-black/80 px-1.5 py-0.5 text-xs whitespace-nowrap text-white opacity-0 transition-opacity duration-150 in-data-pointing:opacity-100"
+          />
+        </TimeSlider.Root>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './CurrentDuration.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./CurrentDuration.ts";
+</script>
@@ -0,0 +1,19 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-time-group
+            class="absolute bottom-2.5 left-2.5 flex items-center gap-1 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+        >
+            <media-time type="current"></media-time>
+            <media-time-separator></media-time-separator>
+            <media-time type="duration"></media-time>
+        </media-time-group>
+    </media-container>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './CurrentTime.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./CurrentTime.ts";
+</script>
@@ -0,0 +1,16 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-time
+            class="absolute bottom-2.5 left-2.5 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+            type="current"
+        ></media-time>
+    </media-container>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './CustomNegativeSign.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./CustomNegativeSign.ts";
+</script>
@@ -0,0 +1,17 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-time
+            class="absolute bottom-2.5 left-2.5 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+            type="remaining"
+            negative-sign="~"
+        ></media-time>
+    </media-container>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './CustomSeparator.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./CustomSeparator.ts";
+</script>
@@ -0,0 +1,19 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-time-group
+            class="absolute bottom-2.5 left-2.5 flex items-center gap-1 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+        >
+            <media-time type="current"></media-time>
+            <media-time-separator> of </media-time-separator>
+            <media-time type="duration"></media-time>
+        </media-time-group>
+    </media-container>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './Remaining.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./Remaining.ts";
+</script>
@@ -0,0 +1,16 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-time
+            class="absolute bottom-2.5 left-2.5 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+            type="remaining"
+        ></media-time>
+    </media-container>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
@@ -0,0 +1,26 @@
+import { createPlayer, Time } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function CurrentDuration() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Group className="absolute bottom-2.5 left-2.5 flex items-center gap-1 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]">
+          <Time.Value type="current" />
+          <Time.Separator />
+          <Time.Value type="duration" />
+        </Time.Group>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,25 @@
+import { createPlayer, Time } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function CurrentTime() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Value
+          type="current"
+          className="absolute bottom-2.5 left-2.5 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,26 @@
+import { createPlayer, Time } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function CustomNegativeSign() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Value
+          type="remaining"
+          negativeSign="~"
+          className="absolute bottom-2.5 left-2.5 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,26 @@
+import { createPlayer, Time } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function CustomSeparator() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Group className="absolute bottom-2.5 left-2.5 flex items-center gap-1 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]">
+          <Time.Value type="current" />
+          <Time.Separator> of </Time.Separator>
+          <Time.Value type="duration" />
+        </Time.Group>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,25 @@
+import { createPlayer, Time } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function Remaining() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Value
+          type="remaining"
+          className="absolute bottom-2.5 left-2.5 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './WithParts.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./WithParts.ts";
+</script>
@@ -0,0 +1,25 @@
+<video-player class="relative block">
+    <media-container class="relative block">
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-mute-button
+            class="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+        >
+            <span class="hidden in-data-muted:inline">Unmute</span>
+            <span class="hidden not-in-data-muted:inline">Mute</span>
+        </media-mute-button>
+        <media-volume-slider class="absolute right-2.5 bottom-2.5 flex h-5 w-25 cursor-pointer items-center">
+            <media-slider-track class="absolute inset-x-0 h-1 rounded-full bg-white/30 backdrop-blur-[10px] transition-[height] duration-150 in-data-interactive:h-1.5">
+                <media-slider-fill class="absolute top-0 left-0 h-full w-(--media-slider-fill) rounded-full bg-white"></media-slider-fill>
+            </media-slider-track>
+            <media-slider-thumb class="absolute left-(--media-slider-fill) size-3.5 -translate-x-1/2 scale-0 rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.4)] transition-transform duration-150 in-data-interactive:scale-100 in-data-dragging:scale-110"></media-slider-thumb>
+            <media-slider-value type="pointer" class="pointer-events-none absolute bottom-full left-(--media-slider-pointer) mb-1.5 -translate-x-1/2 rounded-sm bg-black/80 px-1.5 py-0.5 text-xs whitespace-nowrap text-white opacity-0 transition-opacity duration-150 in-data-pointing:opacity-100"></media-slider-value>
+        </media-volume-slider>
+    </media-container>
+</video-player>
@@ -0,0 +1,3 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/mute-button';
+import '@videojs/html/ui/volume-slider';
@@ -0,0 +1,35 @@
+import { createPlayer, MuteButton, VolumeSlider } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function WithParts() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <MuteButton
+          className="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+          render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
+        />
+        <VolumeSlider.Root className="absolute right-2.5 bottom-2.5 flex h-5 w-25 cursor-pointer items-center">
+          <VolumeSlider.Track className="absolute inset-x-0 h-1 rounded-full bg-white/30 backdrop-blur-[10px] transition-[height] duration-150 in-data-interactive:h-1.5">
+            <VolumeSlider.Fill className="absolute top-0 left-0 h-full w-(--media-slider-fill) rounded-full bg-white" />
+          </VolumeSlider.Track>
+          <VolumeSlider.Thumb className="absolute left-(--media-slider-fill) size-3.5 -translate-x-1/2 scale-0 rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.4)] transition-transform duration-150 in-data-interactive:scale-100 in-data-dragging:scale-110" />
+          <VolumeSlider.Value
+            type="pointer"
+            className="pointer-events-none absolute bottom-full left-(--media-slider-pointer) mb-1.5 -translate-x-1/2 rounded-sm bg-black/80 px-1.5 py-0.5 text-xs whitespace-nowrap text-white opacity-0 transition-opacity duration-150 in-data-pointing:opacity-100"
+          />
+        </VolumeSlider.Root>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/fullscreen-button/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/fullscreen-button/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/fullscreen-button/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/fullscreen-button/react/tailwind/BasicUsage.tsx?raw";

 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/fullscreen-button/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/fullscreen-button/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/fullscreen-button/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/fullscreen-button/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.ts?raw";

 ## Anatomy

@@ -100,6 +105,13 @@ Renders a `<button>` with an automatic `aria-label`: "Enter fullscreen" or "Exit
      <BasicUsageDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <BasicUsageDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -114,6 +126,14 @@ Renders a `<button>` with an automatic `aria-label`: "Enter fullscreen" or "Exit
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <ComponentReference component="FullscreenButton" />
@@ -14,23 +14,33 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/mute-button/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/mute-button/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/mute-button/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/mute-button/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/mute-button/react/tailwind/BasicUsage.tsx?raw";

 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/mute-button/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/mute-button/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/mute-button/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/mute-button/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/mute-button/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/mute-button/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/mute-button/html/tailwind/BasicUsage.ts?raw";

 {/* React demos — Volume Levels */}
 import VolumeLevelsDemoReact from "@/components/docs/demos/mute-button/react/css/VolumeLevels";
 import volumeLevelsReactTsx from "@/components/docs/demos/mute-button/react/css/VolumeLevels.tsx?raw";
 import volumeLevelsReactCss from "@/components/docs/demos/mute-button/react/css/VolumeLevels.css?raw";
+import VolumeLevelsDemoReactTailwind from "@/components/docs/demos/mute-button/react/tailwind/VolumeLevels";
+import volumeLevelsReactTailwindTsx from "@/components/docs/demos/mute-button/react/tailwind/VolumeLevels.tsx?raw";

 {/* HTML demos — Volume Levels */}
 import VolumeLevelsDemoHtml from "@/components/docs/demos/mute-button/html/css/VolumeLevels.astro";
 import volumeLevelsHtml from "@/components/docs/demos/mute-button/html/css/VolumeLevels.html?raw";
 import volumeLevelsHtmlCss from "@/components/docs/demos/mute-button/html/css/VolumeLevels.css?raw";
 import volumeLevelsHtmlTs from "@/components/docs/demos/mute-button/html/css/VolumeLevels.ts?raw";
+import VolumeLevelsDemoHtmlTailwind from "@/components/docs/demos/mute-button/html/tailwind/VolumeLevels.astro";
+import volumeLevelsTailwindHtml from "@/components/docs/demos/mute-button/html/tailwind/VolumeLevels.html?raw";
+import volumeLevelsTailwindHtmlTs from "@/components/docs/demos/mute-button/html/tailwind/VolumeLevels.ts?raw";

 ## Anatomy

@@ -107,6 +117,13 @@ Renders a `<button>` with an automatic `aria-label`: "Unmute" when muted, "Mute"
      <BasicUsageDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <BasicUsageDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -119,6 +136,14 @@ Renders a `<button>` with an automatic `aria-label`: "Unmute" when muted, "Mute"
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 ### Volume Levels
@@ -132,6 +157,13 @@ Renders a `<button>` with an automatic `aria-label`: "Unmute" when muted, "Mute"
      <VolumeLevelsDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: volumeLevelsReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <VolumeLevelsDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -144,6 +176,14 @@ Renders a `<button>` with an automatic `aria-label`: "Unmute" when muted, "Mute"
      <VolumeLevelsDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: volumeLevelsTailwindHtml, lang: "html" },
+      { title: "index.ts", code: volumeLevelsTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <VolumeLevelsDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <ComponentReference component="MuteButton" />
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/pip-button/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/pip-button/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/pip-button/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/pip-button/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/pip-button/react/tailwind/BasicUsage.tsx?raw";

 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/pip-button/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/pip-button/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/pip-button/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/pip-button/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/pip-button/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/pip-button/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/pip-button/html/tailwind/BasicUsage.ts?raw";

 ## Anatomy

@@ -98,6 +103,13 @@ Renders a `<button>` with an automatic `aria-label`: "Enter PiP" or "Exit PiP".
      <BasicUsageDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <BasicUsageDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -110,6 +122,14 @@ Renders a `<button>` with an automatic `aria-label`: "Enter PiP" or "Exit PiP".
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <ComponentReference component="PipButton" />
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/play-button/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/play-button/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/play-button/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/play-button/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/play-button/react/tailwind/BasicUsage.tsx?raw";

 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/play-button/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/play-button/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/play-button/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/play-button/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/play-button/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/play-button/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/play-button/html/tailwind/BasicUsage.ts?raw";

 ## Anatomy

@@ -104,6 +109,13 @@ Renders a `<button>` element with an automatic `aria-label` that updates based o
      <BasicUsageDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <BasicUsageDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -116,6 +128,14 @@ Renders a `<button>` element with an automatic `aria-label` that updates based o
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <ComponentReference component="PlayButton" />
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/seek-button/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/seek-button/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/seek-button/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/seek-button/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/seek-button/react/tailwind/BasicUsage.tsx?raw";

 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/seek-button/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/seek-button/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/seek-button/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/seek-button/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/seek-button/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/seek-button/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/seek-button/html/tailwind/BasicUsage.ts?raw";

 ## Anatomy

@@ -58,6 +63,13 @@ Renders a `<button>` with an automatic `aria-label` describing the action, e.g.
      <BasicUsageDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <BasicUsageDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -72,6 +84,14 @@ Renders a `<button>` with an automatic `aria-label` describing the action, e.g.
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <ComponentReference component="SeekButton" />
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import WithPartsDemoReact from "@/components/docs/demos/time-slider/react/css/WithParts";
 import withPartsReactTsx from "@/components/docs/demos/time-slider/react/css/WithParts.tsx?raw";
 import withPartsReactCss from "@/components/docs/demos/time-slider/react/css/WithParts.css?raw";
+import WithPartsDemoReactTailwind from "@/components/docs/demos/time-slider/react/tailwind/WithParts";
+import withPartsReactTailwindTsx from "@/components/docs/demos/time-slider/react/tailwind/WithParts.tsx?raw";

 {/* HTML demos */}
 import WithPartsDemoHtml from "@/components/docs/demos/time-slider/html/css/WithParts.astro";
 import withPartsHtml from "@/components/docs/demos/time-slider/html/css/WithParts.html?raw";
 import withPartsHtmlCss from "@/components/docs/demos/time-slider/html/css/WithParts.css?raw";
 import withPartsHtmlTs from "@/components/docs/demos/time-slider/html/css/WithParts.ts?raw";
+import WithPartsDemoHtmlTailwind from "@/components/docs/demos/time-slider/html/tailwind/WithParts.astro";
+import withPartsTailwindHtml from "@/components/docs/demos/time-slider/html/tailwind/WithParts.html?raw";
+import withPartsTailwindHtmlTs from "@/components/docs/demos/time-slider/html/tailwind/WithParts.ts?raw";

 ## Anatomy

@@ -105,6 +110,15 @@ Nest sub-components for full control over the slider's DOM structure. This examp
      <WithPartsDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "App.tsx", code: withPartsReactTailwindTsx, lang: "tsx" },
+      ]}
+    >
+      <WithPartsDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -119,6 +133,16 @@ Nest sub-components for full control over the slider's DOM structure. This examp
      <WithPartsDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "index.html", code: withPartsTailwindHtml, lang: "html" },
+        { title: "index.ts", code: withPartsTailwindHtmlTs, lang: "ts" },
+      ]}
+    >
+      <WithPartsDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <ComponentReference component="TimeSlider" />
@@ -14,44 +14,69 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import CurrentTimeDemoReact from "@/components/docs/demos/time/react/css/CurrentTime";
 import currentTimeReactTsx from "@/components/docs/demos/time/react/css/CurrentTime.tsx?raw";
 import currentTimeReactCss from "@/components/docs/demos/time/react/css/CurrentTime.css?raw";
+import CurrentTimeDemoReactTailwind from "@/components/docs/demos/time/react/tailwind/CurrentTime";
+import currentTimeReactTailwindTsx from "@/components/docs/demos/time/react/tailwind/CurrentTime.tsx?raw";

 import CurrentDurationDemoReact from "@/components/docs/demos/time/react/css/CurrentDuration";
 import currentDurationReactTsx from "@/components/docs/demos/time/react/css/CurrentDuration.tsx?raw";
 import currentDurationReactCss from "@/components/docs/demos/time/react/css/CurrentDuration.css?raw";
+import CurrentDurationDemoReactTailwind from "@/components/docs/demos/time/react/tailwind/CurrentDuration";
+import currentDurationReactTailwindTsx from "@/components/docs/demos/time/react/tailwind/CurrentDuration.tsx?raw";

 import RemainingDemoReact from "@/components/docs/demos/time/react/css/Remaining";
 import remainingReactTsx from "@/components/docs/demos/time/react/css/Remaining.tsx?raw";
 import remainingReactCss from "@/components/docs/demos/time/react/css/Remaining.css?raw";
+import RemainingDemoReactTailwind from "@/components/docs/demos/time/react/tailwind/Remaining";
+import remainingReactTailwindTsx from "@/components/docs/demos/time/react/tailwind/Remaining.tsx?raw";

 import CustomSeparatorDemoReact from "@/components/docs/demos/time/react/css/CustomSeparator";
 import customSeparatorReactTsx from "@/components/docs/demos/time/react/css/CustomSeparator.tsx?raw";
 import customSeparatorReactCss from "@/components/docs/demos/time/react/css/CustomSeparator.css?raw";
+import CustomSeparatorDemoReactTailwind from "@/components/docs/demos/time/react/tailwind/CustomSeparator";
+import customSeparatorReactTailwindTsx from "@/components/docs/demos/time/react/tailwind/CustomSeparator.tsx?raw";

 import CustomNegativeSignDemoReact from "@/components/docs/demos/time/react/css/CustomNegativeSign";
 import customNegativeSignReactTsx from "@/components/docs/demos/time/react/css/CustomNegativeSign.tsx?raw";
 import customNegativeSignReactCss from "@/components/docs/demos/time/react/css/CustomNegativeSign.css?raw";
+import CustomNegativeSignDemoReactTailwind from "@/components/docs/demos/time/react/tailwind/CustomNegativeSign";
+import customNegativeSignReactTailwindTsx from "@/components/docs/demos/time/react/tailwind/CustomNegativeSign.tsx?raw";

 {/* HTML demos */}
 import CurrentTimeDemoHtml from "@/components/docs/demos/time/html/css/CurrentTime.astro";
 import currentTimeHtml from "@/components/docs/demos/time/html/css/CurrentTime.html?raw";
 import currentTimeHtmlCss from "@/components/docs/demos/time/html/css/CurrentTime.css?raw";
 import currentTimeHtmlTs from "@/components/docs/demos/time/html/css/CurrentTime.ts?raw";
+import CurrentTimeDemoHtmlTailwind from "@/components/docs/demos/time/html/tailwind/CurrentTime.astro";
+import currentTimeTailwindHtml from "@/components/docs/demos/time/html/tailwind/CurrentTime.html?raw";
+import currentTimeTailwindHtmlTs from "@/components/docs/demos/time/html/tailwind/CurrentTime.ts?raw";
 import CurrentDurationDemoHtml from "@/components/docs/demos/time/html/css/CurrentDuration.astro";
 import currentDurationHtml from "@/components/docs/demos/time/html/css/CurrentDuration.html?raw";
 import currentDurationHtmlCss from "@/components/docs/demos/time/html/css/CurrentDuration.css?raw";
 import currentDurationHtmlTs from "@/components/docs/demos/time/html/css/CurrentDuration.ts?raw";
+import CurrentDurationDemoHtmlTailwind from "@/components/docs/demos/time/html/tailwind/CurrentDuration.astro";
+import currentDurationTailwindHtml from "@/components/docs/demos/time/html/tailwind/CurrentDuration.html?raw";
+import currentDurationTailwindHtmlTs from "@/components/docs/demos/time/html/tailwind/CurrentDuration.ts?raw";
 import RemainingDemoHtml from "@/components/docs/demos/time/html/css/Remaining.astro";
 import remainingHtml from "@/components/docs/demos/time/html/css/Remaining.html?raw";
 import remainingHtmlCss from "@/components/docs/demos/time/html/css/Remaining.css?raw";
 import remainingHtmlTs from "@/components/docs/demos/time/html/css/Remaining.ts?raw";
+import RemainingDemoHtmlTailwind from "@/components/docs/demos/time/html/tailwind/Remaining.astro";
+import remainingTailwindHtml from "@/components/docs/demos/time/html/tailwind/Remaining.html?raw";
+import remainingTailwindHtmlTs from "@/components/docs/demos/time/html/tailwind/Remaining.ts?raw";
 import CustomSeparatorDemoHtml from "@/components/docs/demos/time/html/css/CustomSeparator.astro";
 import customSeparatorHtml from "@/components/docs/demos/time/html/css/CustomSeparator.html?raw";
 import customSeparatorHtmlCss from "@/components/docs/demos/time/html/css/CustomSeparator.css?raw";
 import customSeparatorHtmlTs from "@/components/docs/demos/time/html/css/CustomSeparator.ts?raw";
+import CustomSeparatorDemoHtmlTailwind from "@/components/docs/demos/time/html/tailwind/CustomSeparator.astro";
+import customSeparatorTailwindHtml from "@/components/docs/demos/time/html/tailwind/CustomSeparator.html?raw";
+import customSeparatorTailwindHtmlTs from "@/components/docs/demos/time/html/tailwind/CustomSeparator.ts?raw";
 import CustomNegativeSignDemoHtml from "@/components/docs/demos/time/html/css/CustomNegativeSign.astro";
 import customNegativeSignHtml from "@/components/docs/demos/time/html/css/CustomNegativeSign.html?raw";
 import customNegativeSignHtmlCss from "@/components/docs/demos/time/html/css/CustomNegativeSign.css?raw";
 import customNegativeSignHtmlTs from "@/components/docs/demos/time/html/css/CustomNegativeSign.ts?raw";
+import CustomNegativeSignDemoHtmlTailwind from "@/components/docs/demos/time/html/tailwind/CustomNegativeSign.astro";
+import customNegativeSignTailwindHtml from "@/components/docs/demos/time/html/tailwind/CustomNegativeSign.html?raw";
+import customNegativeSignTailwindHtmlTs from "@/components/docs/demos/time/html/tailwind/CustomNegativeSign.ts?raw";

 ## Anatomy

@@ -124,6 +149,13 @@ No `aria-live` region is used — time updates too frequently and might overwhel
      <CurrentTimeDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: currentTimeReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <CurrentTimeDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -136,6 +168,14 @@ No `aria-live` region is used — time updates too frequently and might overwhel
      <CurrentTimeDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: currentTimeTailwindHtml, lang: "html" },
+      { title: "index.ts", code: currentTimeTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <CurrentTimeDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 ### Current / Duration
@@ -149,6 +189,13 @@ No `aria-live` region is used — time updates too frequently and might overwhel
      <CurrentDurationDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: currentDurationReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <CurrentDurationDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -161,6 +208,14 @@ No `aria-live` region is used — time updates too frequently and might overwhel
      <CurrentDurationDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: currentDurationTailwindHtml, lang: "html" },
+      { title: "index.ts", code: currentDurationTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <CurrentDurationDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 ### Remaining
@@ -174,6 +229,13 @@ No `aria-live` region is used — time updates too frequently and might overwhel
      <RemainingDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: remainingReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <RemainingDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -186,6 +248,14 @@ No `aria-live` region is used — time updates too frequently and might overwhel
      <RemainingDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: remainingTailwindHtml, lang: "html" },
+      { title: "index.ts", code: remainingTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <RemainingDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 ### Custom Separator
@@ -199,6 +269,13 @@ No `aria-live` region is used — time updates too frequently and might overwhel
      <CustomSeparatorDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: customSeparatorReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <CustomSeparatorDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -211,6 +288,14 @@ No `aria-live` region is used — time updates too frequently and might overwhel
      <CustomSeparatorDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: customSeparatorTailwindHtml, lang: "html" },
+      { title: "index.ts", code: customSeparatorTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <CustomSeparatorDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 ### Custom Negative Sign
@@ -224,6 +309,13 @@ No `aria-live` region is used — time updates too frequently and might overwhel
      <CustomNegativeSignDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: customNegativeSignReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <CustomNegativeSignDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -236,6 +328,14 @@ No `aria-live` region is used — time updates too frequently and might overwhel
      <CustomNegativeSignDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: customNegativeSignTailwindHtml, lang: "html" },
+      { title: "index.ts", code: customNegativeSignTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <CustomNegativeSignDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <ComponentReference component="Time" />
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import WithPartsDemoReact from "@/components/docs/demos/volume-slider/react/css/WithParts";
 import withPartsReactTsx from "@/components/docs/demos/volume-slider/react/css/WithParts.tsx?raw";
 import withPartsReactCss from "@/components/docs/demos/volume-slider/react/css/WithParts.css?raw";
+import WithPartsDemoReactTailwind from "@/components/docs/demos/volume-slider/react/tailwind/WithParts";
+import withPartsReactTailwindTsx from "@/components/docs/demos/volume-slider/react/tailwind/WithParts.tsx?raw";

 {/* HTML demos */}
 import WithPartsDemoHtml from "@/components/docs/demos/volume-slider/html/css/WithParts.astro";
 import withPartsHtml from "@/components/docs/demos/volume-slider/html/css/WithParts.html?raw";
 import withPartsHtmlCss from "@/components/docs/demos/volume-slider/html/css/WithParts.css?raw";
 import withPartsHtmlTs from "@/components/docs/demos/volume-slider/html/css/WithParts.ts?raw";
+import WithPartsDemoHtmlTailwind from "@/components/docs/demos/volume-slider/html/tailwind/WithParts.astro";
+import withPartsTailwindHtml from "@/components/docs/demos/volume-slider/html/tailwind/WithParts.html?raw";
+import withPartsTailwindHtmlTs from "@/components/docs/demos/volume-slider/html/tailwind/WithParts.ts?raw";

 ## Anatomy

@@ -89,6 +94,15 @@ Nest sub-components for full control over the slider's DOM structure. This examp
      <WithPartsDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "App.tsx", code: withPartsReactTailwindTsx, lang: "tsx" },
+      ]}
+    >
+      <WithPartsDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -103,6 +117,16 @@ Nest sub-components for full control over the slider's DOM structure. This examp
      <WithPartsDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "index.html", code: withPartsTailwindHtml, lang: "html" },
+        { title: "index.ts", code: withPartsTailwindHtmlTs, lang: "ts" },
+      ]}
+    >
+      <WithPartsDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <ComponentReference component="VolumeSlider" />