resend · gabrielmfern · Nov 7, 2025 · Nov 6, 2025 · Nov 7, 2025
diff --git a/.changeset/proud-dingos-refuse.md b/.changeset/proud-dingos-refuse.md
@@ -0,0 +1,5 @@
+---
+"@react-email/preview-server": patch
+---
+
+ui improvements
diff --git a/packages/preview-server/src/app/preview/[...slug]/preview.tsx b/packages/preview-server/src/app/preview/[...slug]/preview.tsx
@@ -98,6 +98,10 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
       <Topbar emailTitle={emailTitle}>
         {activeView === 'preview' ? (
           <>
+            <EmulatedDarkModeToggle
+              enabled={isDarkModeEnabled}
+              onChange={(enabled) => handleDarkModeChange(enabled)}
+            />
             <ViewSizeControls
               setViewHeight={(height) => {
                 setHeight(height);
@@ -116,10 +120,6 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
               minWidth={minWidth}
               minHeight={minHeight}
             />
-            <EmulatedDarkModeToggle
-              enabled={isDarkModeEnabled}
-              onChange={(enabled) => handleDarkModeChange(enabled)}
-            />
           </>
         ) : null}
         <ActiveViewToggleGroup

diff --git a/packages/preview-server/src/components/icons/icon-moon.tsx b/packages/preview-server/src/components/icons/icon-moon.tsx
@@ -4,8 +4,11 @@ import { IconBase } from './icon-base';
 export const IconMoon = ({ ...props }: IconProps) => (
   <IconBase {...props}>
     <path
-      fill="currentColor"
-      d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3zm3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
     />
   </IconBase>
 );

diff --git a/packages/preview-server/src/components/icons/icon-sun.tsx b/packages/preview-server/src/components/icons/icon-sun.tsx
@@ -3,9 +3,70 @@ import { IconBase } from './icon-base';
 
 export const IconSun = ({ ...props }: IconProps) => (
   <IconBase {...props}>
+    <circle
+      cx="12"
+      cy="12"
+      r="4"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 2v2"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 20v2"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m4.93 4.93 1.41 1.41"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m17.66 17.66 1.41 1.41"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M2 12h2"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M20 12h2"
+    />
+    <path
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m6.34 17.66-1.41 1.41"
+    />
     <path
-      fill="currentColor"
-      d="m3.55 19.09l1.41 1.41l1.8-1.79l-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71l1.8 1.79l1.41-1.41l-1.79-1.8M20.45 5l-1.41-1.4l-1.8 1.79l1.42 1.42M13 1h-2v3h2M6.76 5.39L4.96 3.6L3.55 5l1.79 1.81zM1 13h3v-2H1m12 9h-2v3h2"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m19.07 4.93-1.41 1.41"
     />
   </IconBase>
 );

diff --git a/packages/preview-server/src/components/topbar/active-view-toggle-group.tsx b/packages/preview-server/src/components/topbar/active-view-toggle-group.tsx
@@ -18,7 +18,7 @@ export const ActiveViewToggleGroup = ({
   return (
     <ToggleGroup.Root
       aria-label="View mode"
-      className="inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
+      className="lg:absolute lg:left-1/2 lg:-translate-x-1/2 inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
       onValueChange={(value) => {
         if (value) setActiveView(value);
       }}
@@ -32,8 +32,8 @@ export const ActiveViewToggleGroup = ({
               className={cn(
                 'w-9 flex items-center py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
                 {
-                  'text-slate-11': activeView !== 'desktop',
-                  'text-slate-12': activeView === 'desktop',
+                  'text-slate-11': activeView !== 'preview',
+                  'text-slate-12': activeView === 'preview',
                 },
               )}
             >

diff --git a/packages/preview-server/src/components/topbar/emulated-dark-mode-toggle.tsx b/packages/preview-server/src/components/topbar/emulated-dark-mode-toggle.tsx
@@ -1,6 +1,7 @@
 import * as Toggle from '@radix-ui/react-toggle';
 import { cn } from '../../utils';
 import { IconMoon } from '../icons/icon-moon';
+import { IconSun } from '../icons/icon-sun';
 import { Tooltip } from '../tooltip';
 
 interface EmulatedDarkModeToggleProps {
@@ -19,12 +20,33 @@ export const EmulatedDarkModeToggle = ({
           value="dark"
           className={cn(
             'relative w-9 h-9 flex items-center justify-center border border-slate-6 text-sm rounded-lg transition duration-200 ease-in-out',
-            'text-slate-11 hover:text-slate-12 aria-pressed:text-slate-12 aria-pressed:bg-slate-4',
+            'text-slate-11 hover:text-slate-12 aria-pressed:bg-slate-4',
           )}
           pressed={enabled}
           onPressedChange={() => onChange(!enabled)}
         >
-          <IconMoon />
+          <div className="relative w-5 h-5">
+            <div
+              className={cn(
+                'absolute inset-0 flex items-center justify-center transition-all duration-300 ease-in-out',
+                enabled
+                  ? 'opacity-0 scale-50 rotate-90'
+                  : 'opacity-100 scale-100 rotate-0',
+              )}
+            >
+              <IconMoon />
+            </div>
+            <div
+              className={cn(
+                'absolute inset-0 flex items-center justify-center transition-all duration-300 ease-in-out',
+                enabled
+                  ? 'opacity-100 scale-100 rotate-0'
+                  : 'opacity-0 scale-50 -rotate-90',
+              )}
+            >
+              <IconSun />
+            </div>
+          </div>
         </Toggle.Root>
       </Tooltip.Trigger>
       <Tooltip.Content>

diff --git a/packages/preview-server/src/components/topbar/view-size-controls.tsx b/packages/preview-server/src/components/topbar/view-size-controls.tsx
@@ -88,9 +88,7 @@ export const ViewSizeControls = ({
               className={cn(
                 'relative flex items-center justify-center w-9 transition-colors hover:text-slate-12',
                 {
-                  'bg-slate-4':
-                    viewWidth === preset.dimensions.width &&
-                    viewHeight === preset.dimensions.height,
+                  'bg-slate-4': viewWidth === preset.dimensions.width,
                 },
               )}
               type="button"