developit · developit · Feb 3, 2026 · Feb 3, 2026 · Feb 3, 2026 · Feb 3, 2026
diff --git a/demo/src/nav.tsx b/demo/src/nav.tsx
@@ -8,6 +8,7 @@ import {
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
+  Button,
 } from 'pui';
 
 export function Nav({
@@ -17,6 +18,19 @@ export function Nav({
   return (
     <NavigationMenu class={className ?? 'home-nav'}>
       {left}
+      <input
+        id="pui-theme-default"
+        class="theme-input"
+        type="radio"
+        name="pui-theme"
+        defaultChecked
+      />
+      <input
+        id="pui-theme-glass"
+        class="theme-input"
+        type="radio"
+        name="pui-theme"
+      />
       <NavigationMenuList>
         <NavigationMenuItem>
           <NavigationMenuLink href="/">Home</NavigationMenuLink>
@@ -50,6 +64,52 @@ export function Nav({
             </DropdownMenuContent>
           </DropdownMenu>
         </NavigationMenuItem>
+        <NavigationMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button
+                variant="ghost"
+                size="icon"
+                class="theme-trigger"
+                aria-label="Theme options"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  role="img"
+                  aria-hidden="true"
+                  focusable="false"
+                >
+                  <path
+                    d="M12 3.5c-5.3 0-9.5 3.8-9.5 8.6 0 4.1 3.1 7.4 7.5 8.2 1.2.2 2.4-.3 3.1-1.3l.7-1c.4-.6 1.1-.9 1.8-.9h1.2c3 0 5.4-2.1 5.4-4.7C22.2 7.3 17.5 3.5 12 3.5Zm-4.1 8.6a1.4 1.4 0 1 1 2.8 0 1.4 1.4 0 0 1-2.8 0Zm3-4.3a1.4 1.4 0 1 1 2.8 0 1.4 1.4 0 0 1-2.8 0Zm3.6 5.9a1.4 1.4 0 1 1 2.8 0 1.4 1.4 0 0 1-2.8 0Zm.7-4.8a1.2 1.2 0 1 1 2.4 0 1.2 1.2 0 0 1-2.4 0Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent class="theme-menu" to="left">
+              <label
+                class="theme-menu-item"
+                data-theme="default"
+                htmlFor="pui-theme-default"
+                onPointerDown={(event) => event.stopPropagation()}
+                onClick={(event) => event.stopPropagation()}
+              >
+                Default
+                <span class="theme-menu-indicator" aria-hidden="true" />
+              </label>
+              <label
+                class="theme-menu-item"
+                data-theme="glass"
+                htmlFor="pui-theme-glass"
+                onPointerDown={(event) => event.stopPropagation()}
+                onClick={(event) => event.stopPropagation()}
+              >
+                Glass
+                <span class="theme-menu-indicator" aria-hidden="true" />
+              </label>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </NavigationMenuItem>
       </NavigationMenuList>
     </NavigationMenu>
   );

diff --git a/demo/src/style.css b/demo/src/style.css
@@ -5,12 +5,13 @@ html,
 body {
   margin: 0;
   padding: 0;
-  background: hsl(var(--p-background));
+  background: var(--p-theme-bg, hsl(var(--p-background)));
   color: hsl(var(--p-foreground));
   font-family: system-ui, sans-serif;
   scroll-behavior: smooth;
   scroll-padding-top: 4rem;
   overflow-x: clip;
+  background-attachment: fixed;
 }
 
 /* .home,
@@ -140,6 +141,223 @@ pre.code-block {
   z-index: 500;
   overflow: visible;
 }
+
+.theme-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+}
+
+.theme-trigger {
+  color: hsl(var(--p-foreground));
+}
+
+.theme-trigger svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.theme-menu {
+  min-width: 12rem;
+  padding: 0.35rem;
+}
+
+.theme-menu-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border-radius: calc(var(--p-radius) - 2px);
+  background: hsl(var(--p-card));
+  color: hsl(var(--p-card-foreground));
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 150ms ease, border-color 150ms ease,
+    box-shadow 150ms ease;
+  -webkit-backdrop-filter: var(--p-glass-backdrop);
+  backdrop-filter: var(--p-glass-backdrop);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
+}
+
+.theme-menu-indicator {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 999px;
+  border: 1px solid hsl(var(--p-border));
+  background: hsl(var(--p-muted));
+  box-shadow: inset 0 0 0 2px hsl(var(--p-card));
+  opacity: 0.5;
+  transition: opacity 150ms ease, transform 150ms ease, background-color 150ms ease;
+}
+
+:root:has(#pui-theme-default:checked)
+  .theme-menu-item[data-theme="default"],
+:root:has(#pui-theme-glass:checked) .theme-menu-item[data-theme="glass"] {
+  background: hsl(var(--p-primary) / 0.18);
+  box-shadow: 0 8px 24px hsl(var(--p-primary) / 0.25);
+}
+
+:root:has(#pui-theme-default:checked)
+  .theme-menu-item[data-theme="default"]
+  .theme-menu-indicator,
+:root:has(#pui-theme-glass:checked)
+  .theme-menu-item[data-theme="glass"]
+  .theme-menu-indicator {
+  opacity: 1;
+  transform: scale(1.1);
+  background: hsl(var(--p-primary));
+}
+
+:root:has(#pui-theme-glass:checked) body {
+  background: var(--p-theme-bg);
+}
+
+:root:has(#pui-theme-glass:checked) .home-nav {
+  background: hsl(var(--p-background));
+  border-bottom: 1px solid hsl(var(--p-border));
+  box-shadow: 0 12px 30px hsl(0 0% 0% / 0.08),
+    inset 0 1px 0 hsl(0 0% 100% / 0.2);
+}
+
+:root:has(#pui-theme-glass:checked) .hero-text h1 {
+  background: linear-gradient(135deg, #0f0f10, #2a2a2f, #6b6b72);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+:root:has(#pui-theme-glass:checked) [p="card"] {
+  border-color: hsl(var(--p-border));
+  box-shadow: 0 20px 60px hsl(0 0% 0% / 0.12),
+    inset 0 1px 0 hsl(0 0% 100% / 0.5);
+}
+
+:root:has(#pui-theme-glass:checked) [p="popover-content"],
+:root:has(#pui-theme-glass:checked) [p="dropdown-content"],
+:root:has(#pui-theme-glass:checked) [p="context-menu"],
+:root:has(#pui-theme-glass:checked) [p="combobox-list"] {
+  border-color: hsl(var(--p-border));
+  box-shadow: 0 16px 40px hsl(0 0% 0% / 0.16),
+    inset 0 1px 0 hsl(0 0% 100% / 0.45);
+}
+
+:root:has(#pui-theme-glass:checked) [p="button"] {
+  border-color: hsl(0 0% 35% / 0.35);
+  background-image: linear-gradient(
+      140deg,
+      hsl(0 0% 18% / 0.95),
+      hsl(0 0% 28% / 0.9)
+    );
+  color: hsl(var(--p-primary-foreground));
+  box-shadow: 0 14px 30px hsl(0 0% 0% / 0.2),
+    inset 0 1px 0 hsl(0 0% 100% / 0.35);
+}
+
+:root:has(#pui-theme-glass:checked) [p="button"]:hover {
+  filter: brightness(1.03);
+  transform: translateY(-1px);
+}
+
+:root:has(#pui-theme-glass:checked) [p="button"][variant="outline"] {
+  background-image: linear-gradient(
+    140deg,
+    hsl(var(--p-card) / 0.75),
+    hsl(var(--p-card) / 0.55)
+  );
+  border-color: hsl(var(--p-border));
+  color: hsl(var(--p-foreground));
+  box-shadow: 0 10px 24px hsl(0 0% 0% / 0.08);
+}
+
+:root:has(#pui-theme-glass:checked) [p="button"][variant="ghost"] {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+:root:has(#pui-theme-glass:checked) [p="button"][variant="secondary"] {
+  background-image: linear-gradient(
+    140deg,
+    hsl(0 0% 20% / 0.85),
+    hsl(0 0% 35% / 0.8)
+  );
+  border-color: hsl(0 0% 35% / 0.3);
+  color: hsl(var(--p-primary-foreground));
+}
+
+:root:has(#pui-theme-glass:checked) [p="input"],
+:root:has(#pui-theme-glass:checked) [p="textarea"],
+:root:has(#pui-theme-glass:checked) [p="select"] {
+  background: hsl(var(--p-card) / 0.7);
+  border-color: hsl(var(--p-border));
+  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.5);
+}
+
+:root:has(#pui-theme-glass:checked) [p="input"]:focus-visible,
+:root:has(#pui-theme-glass:checked) [p="textarea"]:focus-visible,
+:root:has(#pui-theme-glass:checked) [p="select"]:focus-visible {
+  box-shadow: 0 0 0 4px hsl(var(--p-ring) / 0.25),
+    inset 0 1px 0 hsl(0 0% 100% / 0.6);
+}
+
+:root:has(#pui-theme-glass:checked) [p="badge"] {
+  background: hsl(var(--p-card) / 0.7);
+  color: hsl(var(--p-foreground));
+  border-color: hsl(var(--p-border));
+}
+
+:root:has(#pui-theme-glass:checked) [p="alert"] {
+  background: hsl(var(--p-card) / 0.7);
+  border-color: hsl(var(--p-border));
+  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.5);
+}
+
+:root:has(#pui-theme-glass:checked) [p="progress"] {
+  background: hsl(var(--p-muted) / 0.5);
+}
+
+:root:has(#pui-theme-glass:checked) [p="progress"]::-webkit-progress-value {
+  background: linear-gradient(90deg, hsl(var(--p-foreground)), hsl(0 0% 60%));
+}
+
+:root:has(#pui-theme-glass:checked) [p="progress"]::-moz-progress-bar {
+  background: linear-gradient(90deg, hsl(var(--p-foreground)), hsl(0 0% 60%));
+}
+
+:root:has(#pui-theme-glass:checked) [p="slider"]::-webkit-slider-thumb {
+  background: hsl(var(--p-foreground));
+  box-shadow: 0 6px 16px hsl(0 0% 0% / 0.2);
+}
+
+:root:has(#pui-theme-glass:checked) [p="slider"]::-moz-range-thumb {
+  background: hsl(var(--p-foreground));
+  box-shadow: 0 6px 16px hsl(0 0% 0% / 0.2);
+}
+
+:root:has(#pui-theme-glass:checked) [p="switch"] {
+  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.5);
+}
+
+:root:has(#pui-theme-glass:checked) [p="switch"]:checked {
+  box-shadow: 0 8px 20px hsl(0 0% 0% / 0.2);
+}
+
+:root:has(#pui-theme-glass:checked) [p="table"] th,
+:root:has(#pui-theme-glass:checked) [p="table"] td {
+  border-color: hsl(var(--p-border));
+}
+
+:root:has(#pui-theme-glass:checked) [p="table"] tr:hover td {
+  background: hsl(var(--p-muted) / 0.4);
+}
 body .home-nav + * {
   margin-top: 4rem;
 }

diff --git a/src/components/card/style.css b/src/components/card/style.css
@@ -5,6 +5,8 @@
   border: 1px solid hsl(var(--p-border));
   background-color: hsl(var(--p-card));
   color: hsl(var(--p-card-foreground));
+  -webkit-backdrop-filter: var(--p-glass-backdrop);
+  backdrop-filter: var(--p-glass-backdrop);
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 
   /* Default padding */

diff --git a/src/components/dialog/style.css b/src/components/dialog/style.css
@@ -3,7 +3,10 @@
 [p="dialog-content"] {
   border: none;
   border-radius: var(--p-radius);
-  background-color: hsl(var(--p-background));
+  background-color: hsl(var(--p-surface));
+  color: hsl(var(--p-surface-foreground));
+  -webkit-backdrop-filter: var(--p-glass-backdrop);
+  backdrop-filter: var(--p-glass-backdrop);
   padding: 0;
   max-width: 32rem;
   box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
@@ -19,8 +22,10 @@
   display: flex;
 }
 [p="dialog-content"]::backdrop {
-  background-color: rgb(0 0 0 / 0.8);
-  animation: dialog-overlay-show 300ms  var(--p-ease);
+  background-color: hsl(var(--p-overlay));
+  -webkit-backdrop-filter: blur(var(--p-overlay-blur));
+  backdrop-filter: blur(var(--p-overlay-blur));
+  animation: dialog-overlay-show 300ms var(--p-ease);
   /* backdrop-filter: blur(1px); */
 }
 

diff --git a/src/components/drawer/style.css b/src/components/drawer/style.css
@@ -11,12 +11,17 @@
   top: auto;
   bottom: 0;
   left: 0;
-  background-color: hsl(var(--p-background));
+  background-color: hsl(var(--p-surface));
+  color: hsl(var(--p-surface-foreground));
+  -webkit-backdrop-filter: var(--p-glass-backdrop);
+  backdrop-filter: var(--p-glass-backdrop);
   animation: drawer-show 300ms var(--p-ease);
 }
 
 [p="drawer-content"]::backdrop {
-  background-color: rgb(0 0 0 / 0.8);
+  background-color: hsl(var(--p-overlay));
+  -webkit-backdrop-filter: blur(var(--p-overlay-blur));
+  backdrop-filter: blur(var(--p-overlay-blur));
   animation: dialog-overlay-show 300ms var(--p-ease);
 }
 

diff --git a/src/components/hover-card/style.css b/src/components/hover-card/style.css
@@ -16,6 +16,8 @@
   color: hsl(var(--p-popover-foreground));
   border-radius: var(--p-radius);
   border: 1px solid hsl(var(--p-border));
+  -webkit-backdrop-filter: var(--p-glass-backdrop);
+  backdrop-filter: var(--p-glass-backdrop);
   padding: 0.5rem;
   margin-top: 0.25rem;
   box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);

diff --git a/src/components/popover/style.css b/src/components/popover/style.css
@@ -22,6 +22,8 @@
   color: hsl(var(--p-popover-foreground));
   border-radius: var(--p-radius);
   border: 1px solid hsl(var(--p-border));
+  -webkit-backdrop-filter: var(--p-glass-backdrop);
+  backdrop-filter: var(--p-glass-backdrop);
   padding: 0;
   /* padding: 0.5rem; */
   margin: 0.25rem 0 0;