diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4d6f3b0b..a3a9946e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -397,9 +397,15 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.17
         version: 4.1.18(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
+      '@videojs/html':
+        specifier: workspace:*
+        version: link:../packages/html
       '@videojs/html-preview':
         specifier: workspace:*
         version: link:../packages/__tech-preview__/html
+      '@videojs/react':
+        specifier: workspace:*
+        version: link:../packages/react
       '@videojs/react-preview':
         specifier: workspace:*
         version: link:../packages/__tech-preview__/react
diff --git a/site/CLAUDE.md b/site/CLAUDE.md
index f55d7aaf..06b98ed0 100644
--- a/site/CLAUDE.md
+++ b/site/CLAUDE.md
@@ -141,7 +141,9 @@ This limits the classnames Tailwind must generate.
 site/
 ├── src/
 │   ├── components/          # Astro + React components
-│   │   └── docs/api-reference/  # API reference Astro components
+│   │   └── docs/
+│   │       ├── api-reference/   # API reference Astro components
+│   │       └── demos/           # Interactive component demos (see below)
 │   ├── content/             # Content collections (blog/, docs/, authors.json)
 │   ├── layouts/             # Page layouts (Base, Blog, Docs, Markdown)
 │   ├── pages/               # Route pages (file-based routing)
@@ -168,6 +170,104 @@ site/
 └── vitest.config.ts         # Test configuration
 ```
 
+## Interactive Demos
+
+Reference pages include live, interactive demos for each component. Demos are framework-specific (React, HTML) and style-specific (CSS).
+
+### Directory Structure
+
+```
+src/components/docs/demos/
+├── Demo.astro              # Shared shell (live preview + tabbed source code)
+├── HtmlDemo.astro          # Renders raw HTML via set:html
+└── {component}/{framework}/{style}/
+    ├── BasicUsage.tsx      # React: component (+ .css)
+    ├── BasicUsage.astro    # HTML: Astro wrapper (renders HTML + bundles script)
+    ├── BasicUsage.html     # HTML: markup + <style>, no <script>
+    └── BasicUsage.ts       # HTML: side-effect imports for custom element registration
+```
+
+### CSS Scoping with BEM
+
+Demos use BEM class names for scoping. Block = `{component}-{variant}`, element = `__{part}`:
+
+```
+.play-button-basic              /* block */
+.play-button-basic__button      /* element */
+```
+
+React `.css` and HTML `<style>` blocks for the same demo should use identical BEM names.
+
+### React Demos
+
+A `.tsx` component + `.css` file. Rendered as an Astro island via `client:idle`, displayed as source via `?raw`:
+
+```mdx
+import BasicUsageDemo from "@/components/docs/demos/play-button/react/css/BasicUsage";
+import basicUsageTsx from "@/components/docs/demos/play-button/react/css/BasicUsage.tsx?raw";
+import basicUsageCss from "@/components/docs/demos/play-button/react/css/BasicUsage.css?raw";
+
+<Demo files={[
+  { title: "App.tsx", code: basicUsageTsx, lang: "tsx" },
+  { title: "App.css", code: basicUsageCss, lang: "css" },
+]}>
+  <BasicUsageDemo client:idle />
+</Demo>
+```
+
+### HTML Demos
+
+Three files per demo: `.html` (markup + style), `.ts` (custom element registration), and `.astro` (wrapper that ties them together). The `.astro` wrapper is needed because only Astro `<script>` tags go through Vite's bundling pipeline — MDX `<script>` tags compile as JSX and aren't bundled.
+
+**`.astro` wrapper** (renders HTML + bundles the `.ts` script):
+```astro
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+<HtmlDemo html={html} />
+<script>
+  import './BasicUsage.ts';
+</script>
+```
+
+**MDX usage:**
+```mdx
+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 basicUsageHtmlTs from "@/components/docs/demos/play-button/html/css/BasicUsage.ts?raw";
+
+<Demo files={[
+  { title: "index.html", code: basicUsageHtml, lang: "html" },
+  { title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
+]}>
+  <BasicUsageDemoHtml />
+</Demo>
+```
+
+### State Reflection in HTML Demos
+
+HTML custom elements expose state via `data-*` attributes. Use CSS to toggle labels:
+
+```html
+<media-play-button class="play-button-basic__button">
+  <span class="show-when-paused">Play</span>
+  <span class="show-when-playing">Pause</span>
+</media-play-button>
+```
+```css
+.play-button-basic__button .show-when-paused { display: none; }
+.play-button-basic__button .show-when-playing { display: none; }
+.play-button-basic__button[data-paused] .show-when-paused { display: inline; }
+.play-button-basic__button:not([data-paused]) .show-when-playing { display: inline; }
+```
+
+The React equivalent uses the `render` prop: `render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}`.
+
+### Video Attributes
+
+All demo videos use `autoplay muted playsinline loop` (React: `autoPlay muted playsInline loop`).
+
 ## Multi-Framework Documentation Architecture
 
 ### Framework/Style Combinations
diff --git a/site/astro.config.mjs b/site/astro.config.mjs
index a5919487..e04a91bc 100644
--- a/site/astro.config.mjs
+++ b/site/astro.config.mjs
@@ -74,7 +74,7 @@ export default defineConfig({
   vite: {
     plugins: [tailwindcss()],
     optimizeDeps: {
-      exclude: ['@videojs/react-preview'],
+      exclude: ['@videojs/react-preview', '@videojs/react', '@videojs/html'],
     },
     resolve: {
       dedupe: ['react', 'react-dom'],
diff --git a/site/package.json b/site/package.json
index fbf25b6a..2c269e81 100644
--- a/site/package.json
+++ b/site/package.json
@@ -27,7 +27,9 @@
     "@pagefind/default-ui": "^1.4.0",
     "@sentry/astro": "^10.32.1",
     "@tailwindcss/vite": "^4.1.17",
+    "@videojs/html": "workspace:*",
     "@videojs/html-preview": "workspace:*",
+    "@videojs/react": "workspace:*",
     "@videojs/react-preview": "workspace:*",
     "astro": "^5.14.4",
     "clsx": "^2.1.1",
diff --git a/site/src/components/docs/demos/Demo.astro b/site/src/components/docs/demos/Demo.astro
new file mode 100644
index 00000000..9d3cc57b
--- /dev/null
+++ b/site/src/components/docs/demos/Demo.astro
@@ -0,0 +1,38 @@
+---
+import type { BundledLanguage } from 'shiki';
+
+import ServerCode from '@/components/Code/ServerCode.astro';
+import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
+
+interface FileTab {
+  title: string;
+  code: string;
+  lang: BundledLanguage;
+}
+
+interface Props {
+  files: FileTab[];
+}
+
+const { files } = Astro.props;
+---
+
+<div class="my-6 w-full max-w-3xl mx-auto flex flex-col rounded-lg overflow-hidden border border-light-40 dark:border-dark-80">
+  <div class="relative z-20 p-6 bg-light-80 dark:bg-dark-100">
+    <slot />
+  </div>
+  <TabsRoot client:idle maxWidth={false} className="my-0 rounded-none border-0 border-t border-light-40 dark:border-dark-80">
+    <TabsList client:idle label="Demo source code">
+      {files.map((file, i) => (
+        <Tab client:idle value={file.title} initial={i === 0}>
+          {file.title}
+        </Tab>
+      ))}
+    </TabsList>
+    {files.map((file, i) => (
+      <TabsPanel client:idle value={file.title} initial={i === 0}>
+        <ServerCode code={file.code} lang={file.lang} />
+      </TabsPanel>
+    ))}
+  </TabsRoot>
+</div>
diff --git a/site/src/components/docs/demos/HtmlDemo.astro b/site/src/components/docs/demos/HtmlDemo.astro
new file mode 100644
index 00000000..35321ce6
--- /dev/null
+++ b/site/src/components/docs/demos/HtmlDemo.astro
@@ -0,0 +1,8 @@
+---
+interface Props {
+  html: string;
+}
+const { html } = Astro.props;
+---
+
+<Fragment set:html={html} />
diff --git a/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.astro b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.astro
new file mode 100644
index 00000000..6ac802df
--- /dev/null
+++ b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.astro
@@ -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>
diff --git a/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html
new file mode 100644
index 00000000..5b78d111
--- /dev/null
+++ b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html
@@ -0,0 +1,41 @@
+<style>
+  .fullscreen-button-basic {
+    display: block;
+    position: relative;
+  }
+
+  .fullscreen-button-basic video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .fullscreen-button-basic__button {
+    height: 50px;
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    padding-inline: 12px;
+    background-color: black;
+    color: white;
+    cursor: pointer;
+  }
+
+  .fullscreen-button-basic__button .show-when-fullscreen { display: none; }
+  .fullscreen-button-basic__button .show-when-not-fullscreen { display: none; }
+  .fullscreen-button-basic__button[data-fullscreen] .show-when-fullscreen { display: inline; }
+  .fullscreen-button-basic__button:not([data-fullscreen]) .show-when-not-fullscreen { display: inline; }
+</style>
+
+<video-player class="fullscreen-button-basic">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-fullscreen-button class="fullscreen-button-basic__button">
+    <span class="show-when-fullscreen">Exit Fullscreen</span>
+    <span class="show-when-not-fullscreen">Fullscreen</span>
+  </media-fullscreen-button>
+</video-player>
diff --git a/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.ts b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.ts
new file mode 100644
index 00000000..8bd9b818
--- /dev/null
+++ b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/fullscreen-button';
diff --git a/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.css b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.css
new file mode 100644
index 00000000..4e2bfa70
--- /dev/null
+++ b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.css
@@ -0,0 +1,19 @@
+.fullscreen-button-basic {
+  position: relative;
+}
+
+.fullscreen-button-basic video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.fullscreen-button-basic__button {
+  height: 50px;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  padding-inline: 12px;
+  background-color: black;
+  color: white;
+  cursor: pointer;
+}
diff --git a/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx
new file mode 100644
index 00000000..3e22c055
--- /dev/null
+++ b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx
@@ -0,0 +1,25 @@
+import { createPlayer, FullscreenButton, features, Video } from '@videojs/react';
+
+import './BasicUsage.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="fullscreen-button-basic">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <FullscreenButton
+          className="fullscreen-button-basic__button"
+          render={(props, state) => <button {...props}>{state.fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/mute-button/html/css/BasicUsage.astro b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.astro
new file mode 100644
index 00000000..6ac802df
--- /dev/null
+++ b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.astro
@@ -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>
diff --git a/site/src/components/docs/demos/mute-button/html/css/BasicUsage.html b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.html
new file mode 100644
index 00000000..c4f91808
--- /dev/null
+++ b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.html
@@ -0,0 +1,40 @@
+<style>
+  .mute-button-basic {
+    position: relative;
+  }
+
+  .mute-button-basic video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .mute-button-basic__button {
+    height: 50px;
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    padding-inline: 12px;
+    background-color: black;
+    color: white;
+    cursor: pointer;
+  }
+
+  .mute-button-basic__button .show-when-muted { display: none; }
+  .mute-button-basic__button .show-when-unmuted { display: none; }
+  .mute-button-basic__button[data-muted] .show-when-muted { display: inline; }
+  .mute-button-basic__button:not([data-muted]) .show-when-unmuted { display: inline; }
+</style>
+
+<video-player class="mute-button-basic">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-mute-button class="mute-button-basic__button">
+    <span class="show-when-muted">Unmute</span>
+    <span class="show-when-unmuted">Mute</span>
+  </media-mute-button>
+</video-player>
diff --git a/site/src/components/docs/demos/mute-button/html/css/BasicUsage.ts b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.ts
new file mode 100644
index 00000000..5c81c0a9
--- /dev/null
+++ b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/mute-button';
diff --git a/site/src/components/docs/demos/mute-button/react/css/BasicUsage.css b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.css
new file mode 100644
index 00000000..6fac9655
--- /dev/null
+++ b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.css
@@ -0,0 +1,19 @@
+.mute-button-basic {
+  position: relative;
+}
+
+.mute-button-basic video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.mute-button-basic__button {
+  height: 50px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  padding-inline: 12px;
+  background-color: black;
+  color: white;
+  cursor: pointer;
+}
diff --git a/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx
new file mode 100644
index 00000000..cdd3150e
--- /dev/null
+++ b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx
@@ -0,0 +1,25 @@
+import { createPlayer, features, MuteButton, Video } from '@videojs/react';
+
+import './BasicUsage.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="mute-button-basic">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <MuteButton
+          className="mute-button-basic__button"
+          render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/play-button/html/css/BasicUsage.astro b/site/src/components/docs/demos/play-button/html/css/BasicUsage.astro
new file mode 100644
index 00000000..6ac802df
--- /dev/null
+++ b/site/src/components/docs/demos/play-button/html/css/BasicUsage.astro
@@ -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>
diff --git a/site/src/components/docs/demos/play-button/html/css/BasicUsage.html b/site/src/components/docs/demos/play-button/html/css/BasicUsage.html
new file mode 100644
index 00000000..240cdc5e
--- /dev/null
+++ b/site/src/components/docs/demos/play-button/html/css/BasicUsage.html
@@ -0,0 +1,40 @@
+<style>
+  .play-button-basic {
+    position: relative;
+  }
+
+  .play-button-basic video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .play-button-basic__button {
+    height: 50px;
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    padding-inline: 12px;
+    background-color: black;
+    color: white;
+    cursor: pointer;
+  }
+
+  .play-button-basic__button .show-when-paused { display: none; }
+  .play-button-basic__button .show-when-playing { display: none; }
+  .play-button-basic__button[data-paused] .show-when-paused { display: inline; }
+  .play-button-basic__button:not([data-paused]) .show-when-playing { display: inline; }
+</style>
+
+<video-player class="play-button-basic">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-play-button class="play-button-basic__button">
+    <span class="show-when-paused">Play</span>
+    <span class="show-when-playing">Pause</span>
+  </media-play-button>
+</video-player>
diff --git a/site/src/components/docs/demos/play-button/html/css/BasicUsage.ts b/site/src/components/docs/demos/play-button/html/css/BasicUsage.ts
new file mode 100644
index 00000000..6c7c5cd8
--- /dev/null
+++ b/site/src/components/docs/demos/play-button/html/css/BasicUsage.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/play-button';
diff --git a/site/src/components/docs/demos/play-button/react/css/BasicUsage.css b/site/src/components/docs/demos/play-button/react/css/BasicUsage.css
new file mode 100644
index 00000000..3cd77b42
--- /dev/null
+++ b/site/src/components/docs/demos/play-button/react/css/BasicUsage.css
@@ -0,0 +1,19 @@
+.play-button-basic {
+  position: relative;
+}
+
+.play-button-basic video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.play-button-basic__button {
+  height: 50px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  padding-inline: 12px;
+  background-color: black;
+  color: white;
+  cursor: pointer;
+}
diff --git a/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx
new file mode 100644
index 00000000..0b70faa8
--- /dev/null
+++ b/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx
@@ -0,0 +1,25 @@
+import { createPlayer, features, PlayButton, Video } from '@videojs/react';
+
+import './BasicUsage.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="play-button-basic">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <PlayButton
+          className="play-button-basic__button"
+          render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/time/html/css/CurrentDuration.astro b/site/src/components/docs/demos/time/html/css/CurrentDuration.astro
new file mode 100644
index 00000000..bc11338d
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/CurrentDuration.astro
@@ -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>
diff --git a/site/src/components/docs/demos/time/html/css/CurrentDuration.html b/site/src/components/docs/demos/time/html/css/CurrentDuration.html
new file mode 100644
index 00000000..2861903e
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/CurrentDuration.html
@@ -0,0 +1,29 @@
+<style>
+  .time-current-duration {
+    position: relative;
+  }
+
+  .time-current-duration video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .time-current-duration__group {
+    font-variant-numeric: tabular-nums;
+  }
+</style>
+
+<video-player class="time-current-duration">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-time-group class="time-current-duration__group">
+    <media-time type="current"></media-time>
+    <media-time-separator></media-time-separator>
+    <media-time type="duration"></media-time>
+  </media-time-group>
+</video-player>
diff --git a/site/src/components/docs/demos/time/html/css/CurrentDuration.ts b/site/src/components/docs/demos/time/html/css/CurrentDuration.ts
new file mode 100644
index 00000000..8555624a
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/CurrentDuration.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
diff --git a/site/src/components/docs/demos/time/html/css/CurrentTime.astro b/site/src/components/docs/demos/time/html/css/CurrentTime.astro
new file mode 100644
index 00000000..ea664651
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/CurrentTime.astro
@@ -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>
diff --git a/site/src/components/docs/demos/time/html/css/CurrentTime.html b/site/src/components/docs/demos/time/html/css/CurrentTime.html
new file mode 100644
index 00000000..43f4883b
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/CurrentTime.html
@@ -0,0 +1,25 @@
+<style>
+  .time-current-time {
+    position: relative;
+  }
+
+  .time-current-time video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .time-current-time__value {
+    font-variant-numeric: tabular-nums;
+  }
+</style>
+
+<video-player class="time-current-time">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-time class="time-current-time__value" type="current"></media-time>
+</video-player>
diff --git a/site/src/components/docs/demos/time/html/css/CurrentTime.ts b/site/src/components/docs/demos/time/html/css/CurrentTime.ts
new file mode 100644
index 00000000..8555624a
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/CurrentTime.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
diff --git a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.astro b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.astro
new file mode 100644
index 00000000..011f1703
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.astro
@@ -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>
diff --git a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html
new file mode 100644
index 00000000..5cd69ce3
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html
@@ -0,0 +1,25 @@
+<style>
+  .time-custom-negative-sign {
+    position: relative;
+  }
+
+  .time-custom-negative-sign video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .time-custom-negative-sign__value {
+    font-variant-numeric: tabular-nums;
+  }
+</style>
+
+<video-player class="time-custom-negative-sign">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-time class="time-custom-negative-sign__value" type="remaining" negative-sign="&#x2212;"></media-time>
+</video-player>
diff --git a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.ts b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.ts
new file mode 100644
index 00000000..8555624a
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
diff --git a/site/src/components/docs/demos/time/html/css/CustomSeparator.astro b/site/src/components/docs/demos/time/html/css/CustomSeparator.astro
new file mode 100644
index 00000000..aaa95e1d
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/CustomSeparator.astro
@@ -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>
diff --git a/site/src/components/docs/demos/time/html/css/CustomSeparator.html b/site/src/components/docs/demos/time/html/css/CustomSeparator.html
new file mode 100644
index 00000000..aae4e520
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/CustomSeparator.html
@@ -0,0 +1,29 @@
+<style>
+  .time-custom-separator {
+    position: relative;
+  }
+
+  .time-custom-separator video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .time-custom-separator__group {
+    font-variant-numeric: tabular-nums;
+  }
+</style>
+
+<video-player class="time-custom-separator">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-time-group class="time-custom-separator__group">
+    <media-time type="current"></media-time>
+    <media-time-separator> of </media-time-separator>
+    <media-time type="duration"></media-time>
+  </media-time-group>
+</video-player>
diff --git a/site/src/components/docs/demos/time/html/css/CustomSeparator.ts b/site/src/components/docs/demos/time/html/css/CustomSeparator.ts
new file mode 100644
index 00000000..8555624a
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/CustomSeparator.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
diff --git a/site/src/components/docs/demos/time/html/css/Remaining.astro b/site/src/components/docs/demos/time/html/css/Remaining.astro
new file mode 100644
index 00000000..9ab3123a
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/Remaining.astro
@@ -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>
diff --git a/site/src/components/docs/demos/time/html/css/Remaining.html b/site/src/components/docs/demos/time/html/css/Remaining.html
new file mode 100644
index 00000000..bed6dfa9
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/Remaining.html
@@ -0,0 +1,25 @@
+<style>
+  .time-remaining {
+    position: relative;
+  }
+
+  .time-remaining video {
+    width: 100%;
+    border-radius: 0.5rem;
+  }
+
+  .time-remaining__value {
+    font-variant-numeric: tabular-nums;
+  }
+</style>
+
+<video-player class="time-remaining">
+  <video
+    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    autoplay
+    muted
+    playsinline
+    loop
+  ></video>
+  <media-time class="time-remaining__value" type="remaining"></media-time>
+</video-player>
diff --git a/site/src/components/docs/demos/time/html/css/Remaining.ts b/site/src/components/docs/demos/time/html/css/Remaining.ts
new file mode 100644
index 00000000..8555624a
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/css/Remaining.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
diff --git a/site/src/components/docs/demos/time/react/css/CurrentDuration.css b/site/src/components/docs/demos/time/react/css/CurrentDuration.css
new file mode 100644
index 00000000..d9645a91
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/css/CurrentDuration.css
@@ -0,0 +1,12 @@
+.time-current-duration {
+  position: relative;
+}
+
+.time-current-duration video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.time-current-duration__group {
+  font-variant-numeric: tabular-nums;
+}
diff --git a/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx b/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx
new file mode 100644
index 00000000..ea1557e0
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx
@@ -0,0 +1,26 @@
+import { createPlayer, features, Time, Video } from '@videojs/react';
+
+import './CurrentDuration.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function CurrentDuration() {
+  return (
+    <Player.Provider>
+      <Player.Container className="time-current-duration">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Group className="time-current-duration__group">
+          <Time.Value type="current" />
+          <Time.Separator />
+          <Time.Value type="duration" />
+        </Time.Group>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/time/react/css/CurrentTime.css b/site/src/components/docs/demos/time/react/css/CurrentTime.css
new file mode 100644
index 00000000..df1f212c
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/css/CurrentTime.css
@@ -0,0 +1,12 @@
+.time-current-time {
+  position: relative;
+}
+
+.time-current-time video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.time-current-time__value {
+  font-variant-numeric: tabular-nums;
+}
diff --git a/site/src/components/docs/demos/time/react/css/CurrentTime.tsx b/site/src/components/docs/demos/time/react/css/CurrentTime.tsx
new file mode 100644
index 00000000..25c990d8
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/css/CurrentTime.tsx
@@ -0,0 +1,22 @@
+import { createPlayer, features, Time, Video } from '@videojs/react';
+
+import './CurrentTime.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function CurrentTime() {
+  return (
+    <Player.Provider>
+      <Player.Container className="time-current-time">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Value type="current" className="time-current-time__value" />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css
new file mode 100644
index 00000000..4b03bb51
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css
@@ -0,0 +1,12 @@
+.time-custom-negative-sign {
+  position: relative;
+}
+
+.time-custom-negative-sign video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.time-custom-negative-sign__value {
+  font-variant-numeric: tabular-nums;
+}
diff --git a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx
new file mode 100644
index 00000000..1e18b79f
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx
@@ -0,0 +1,22 @@
+import { createPlayer, features, Time, Video } from '@videojs/react';
+
+import './CustomNegativeSign.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function CustomNegativeSign() {
+  return (
+    <Player.Provider>
+      <Player.Container className="time-custom-negative-sign">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Value type="remaining" negativeSign={'\u2212'} className="time-custom-negative-sign__value" />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/time/react/css/CustomSeparator.css b/site/src/components/docs/demos/time/react/css/CustomSeparator.css
new file mode 100644
index 00000000..71e1bbcb
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/css/CustomSeparator.css
@@ -0,0 +1,12 @@
+.time-custom-separator {
+  position: relative;
+}
+
+.time-custom-separator video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.time-custom-separator__group {
+  font-variant-numeric: tabular-nums;
+}
diff --git a/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx b/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx
new file mode 100644
index 00000000..524ac64a
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx
@@ -0,0 +1,26 @@
+import { createPlayer, features, Time, Video } from '@videojs/react';
+
+import './CustomSeparator.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function CustomSeparator() {
+  return (
+    <Player.Provider>
+      <Player.Container className="time-custom-separator">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Group className="time-custom-separator__group">
+          <Time.Value type="current" />
+          <Time.Separator> of </Time.Separator>
+          <Time.Value type="duration" />
+        </Time.Group>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/time/react/css/Remaining.css b/site/src/components/docs/demos/time/react/css/Remaining.css
new file mode 100644
index 00000000..91b11592
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/css/Remaining.css
@@ -0,0 +1,12 @@
+.time-remaining {
+  position: relative;
+}
+
+.time-remaining video {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.time-remaining__value {
+  font-variant-numeric: tabular-nums;
+}
diff --git a/site/src/components/docs/demos/time/react/css/Remaining.tsx b/site/src/components/docs/demos/time/react/css/Remaining.tsx
new file mode 100644
index 00000000..8389c16b
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/css/Remaining.tsx
@@ -0,0 +1,22 @@
+import { createPlayer, features, Time, Video } from '@videojs/react';
+
+import './Remaining.css';
+
+const Player = createPlayer({ features: [...features.video] });
+
+export default function Remaining() {
+  return (
+    <Player.Provider>
+      <Player.Container className="time-remaining">
+        <Video
+          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Value type="remaining" className="time-remaining__value" />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/content/docs/reference/fullscreen-button.mdx b/site/src/content/docs/reference/fullscreen-button.mdx
index 1455f8e4..ab0c2f5b 100644
--- a/site/src/content/docs/reference/fullscreen-button.mdx
+++ b/site/src/content/docs/reference/fullscreen-button.mdx
@@ -7,6 +7,18 @@ description: A button component for entering and exiting fullscreen mode
 
 import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
 import FrameworkCase from "@/components/docs/FrameworkCase.astro";
+import StyleCase from "@/components/docs/StyleCase.astro";
+import Demo from "@/components/docs/demos/Demo.astro";
+
+{/* React demos */}
+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";
+
+{/* 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 basicUsageHtmlTs from "@/components/docs/demos/fullscreen-button/html/css/BasicUsage.ts?raw";
 
 ## Anatomy
 
@@ -22,4 +34,30 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro";
 ```
 </FrameworkCase>
 
+## Examples
+
+### Basic Usage
+
+<FrameworkCase frameworks={["react"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
+      { title: "App.css", code: basicUsageReactCss, lang: "css" },
+    ]}>
+      <BasicUsageDemoReact client:idle />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
+<FrameworkCase frameworks={["html"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtml />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
 <ApiReference component="FullscreenButton" />
diff --git a/site/src/content/docs/reference/mute-button.mdx b/site/src/content/docs/reference/mute-button.mdx
index 82b41062..6a9a9e52 100644
--- a/site/src/content/docs/reference/mute-button.mdx
+++ b/site/src/content/docs/reference/mute-button.mdx
@@ -7,6 +7,18 @@ description: A button component for muting and unmuting audio playback
 
 import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
 import FrameworkCase from "@/components/docs/FrameworkCase.astro";
+import StyleCase from "@/components/docs/StyleCase.astro";
+import Demo from "@/components/docs/demos/Demo.astro";
+
+{/* React demos */}
+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";
+
+{/* 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 basicUsageHtmlTs from "@/components/docs/demos/mute-button/html/css/BasicUsage.ts?raw";
 
 ## Anatomy
 
@@ -22,4 +34,30 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro";
 ```
 </FrameworkCase>
 
+## Examples
+
+### Basic Usage
+
+<FrameworkCase frameworks={["react"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
+      { title: "App.css", code: basicUsageReactCss, lang: "css" },
+    ]}>
+      <BasicUsageDemoReact client:idle />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
+<FrameworkCase frameworks={["html"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtml />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
 <ApiReference component="MuteButton" />
diff --git a/site/src/content/docs/reference/play-button.mdx b/site/src/content/docs/reference/play-button.mdx
index e39f4b8c..747afe4a 100644
--- a/site/src/content/docs/reference/play-button.mdx
+++ b/site/src/content/docs/reference/play-button.mdx
@@ -7,6 +7,18 @@ description: A button component for playing and pausing media playback
 
 import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
 import FrameworkCase from "@/components/docs/FrameworkCase.astro";
+import StyleCase from "@/components/docs/StyleCase.astro";
+import Demo from "@/components/docs/demos/Demo.astro";
+
+{/* React demos */}
+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";
+
+{/* 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 basicUsageHtmlTs from "@/components/docs/demos/play-button/html/css/BasicUsage.ts?raw";
 
 ## Anatomy
 
@@ -22,4 +34,30 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro";
 ```
 </FrameworkCase>
 
+## Examples
+
+### Basic Usage
+
+<FrameworkCase frameworks={["react"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
+      { title: "App.css", code: basicUsageReactCss, lang: "css" },
+    ]}>
+      <BasicUsageDemoReact client:idle />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
+<FrameworkCase frameworks={["html"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtml />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
 <ApiReference component="PlayButton" />
diff --git a/site/src/content/docs/reference/time.mdx b/site/src/content/docs/reference/time.mdx
index 03b1b170..86f20f41 100644
--- a/site/src/content/docs/reference/time.mdx
+++ b/site/src/content/docs/reference/time.mdx
@@ -7,6 +7,46 @@ description: Components for displaying and composing media time information
 
 import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
 import FrameworkCase from "@/components/docs/FrameworkCase.astro";
+import StyleCase from "@/components/docs/StyleCase.astro";
+import Demo from "@/components/docs/demos/Demo.astro";
+
+{/* React demos */}
+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 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 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 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 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";
+
+{/* 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 currentTimeHtmlTs from "@/components/docs/demos/time/html/css/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 currentDurationHtmlTs from "@/components/docs/demos/time/html/css/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 remainingHtmlTs from "@/components/docs/demos/time/html/css/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 customSeparatorHtmlTs from "@/components/docs/demos/time/html/css/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 customNegativeSignHtmlTs from "@/components/docs/demos/time/html/css/CustomNegativeSign.ts?raw";
 
 ## Anatomy
 
@@ -30,4 +70,126 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro";
 ```
 </FrameworkCase>
 
+## Examples
+
+### Current Time
+
+<FrameworkCase frameworks={["react"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "App.tsx", code: currentTimeReactTsx, lang: "tsx" },
+      { title: "App.css", code: currentTimeReactCss, lang: "css" },
+    ]}>
+      <CurrentTimeDemoReact client:idle />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
+<FrameworkCase frameworks={["html"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "index.html", code: currentTimeHtml, lang: "html" },
+      { title: "index.ts", code: currentTimeHtmlTs, lang: "ts" },
+    ]}>
+      <CurrentTimeDemoHtml />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
+### Current / Duration
+
+<FrameworkCase frameworks={["react"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "App.tsx", code: currentDurationReactTsx, lang: "tsx" },
+      { title: "App.css", code: currentDurationReactCss, lang: "css" },
+    ]}>
+      <CurrentDurationDemoReact client:idle />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
+<FrameworkCase frameworks={["html"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "index.html", code: currentDurationHtml, lang: "html" },
+      { title: "index.ts", code: currentDurationHtmlTs, lang: "ts" },
+    ]}>
+      <CurrentDurationDemoHtml />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
+### Remaining
+
+<FrameworkCase frameworks={["react"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "App.tsx", code: remainingReactTsx, lang: "tsx" },
+      { title: "App.css", code: remainingReactCss, lang: "css" },
+    ]}>
+      <RemainingDemoReact client:idle />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
+<FrameworkCase frameworks={["html"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "index.html", code: remainingHtml, lang: "html" },
+      { title: "index.ts", code: remainingHtmlTs, lang: "ts" },
+    ]}>
+      <RemainingDemoHtml />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
+### Custom Separator
+
+<FrameworkCase frameworks={["react"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "App.tsx", code: customSeparatorReactTsx, lang: "tsx" },
+      { title: "App.css", code: customSeparatorReactCss, lang: "css" },
+    ]}>
+      <CustomSeparatorDemoReact client:idle />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
+<FrameworkCase frameworks={["html"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "index.html", code: customSeparatorHtml, lang: "html" },
+      { title: "index.ts", code: customSeparatorHtmlTs, lang: "ts" },
+    ]}>
+      <CustomSeparatorDemoHtml />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
+### Custom Negative Sign
+
+<FrameworkCase frameworks={["react"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "App.tsx", code: customNegativeSignReactTsx, lang: "tsx" },
+      { title: "App.css", code: customNegativeSignReactCss, lang: "css" },
+    ]}>
+      <CustomNegativeSignDemoReact client:idle />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
+<FrameworkCase frameworks={["html"]}>
+  <StyleCase styles={["css"]}>
+    <Demo files={[
+      { title: "index.html", code: customNegativeSignHtml, lang: "html" },
+      { title: "index.ts", code: customNegativeSignHtmlTs, lang: "ts" },
+    ]}>
+      <CustomNegativeSignDemoHtml />
+    </Demo>
+  </StyleCase>
+</FrameworkCase>
+
 <ApiReference component="Time" />