feat(clerk-js): add theme/preset selector and tailwind toggle to sandbox

.changeset/cyan-taxis-float.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/sandbox/app.ts

@@ -1,5 +1,6 @@
 import { PageMocking, type MockScenario } from '@clerk/msw';
 import * as l from '../../localizations';
+import { dark, neobrutalism, shadcn, shadesOfPurple } from '../../ui/src/themes';
 import type { Clerk as ClerkType } from '../';
 import * as scenarios from './scenarios';
 
@@ -313,6 +314,84 @@ function otherOptions() {
   return { updateOtherOptions };
 }
 
+const themes: Record<string, unknown> = {
+  dark,
+  shadesOfPurple,
+  neobrutalism,
+  shadcn,
+};
+
+function themeSelector() {
+  assertClerkIsLoaded(Clerk);
+
+  const themeSelect = document.getElementById('themeSelect') as HTMLSelectElement;
+
+  const savedTheme = sessionStorage.getItem('baseTheme') ?? '';
+  themeSelect.value = savedTheme;
+
+  const updateTheme = () => {
+    const themeName = themeSelect.value;
+    sessionStorage.setItem('baseTheme', themeName);
+
+    const currentAppearance = Clerk.__internal_getOption('appearance') ?? {};
+    void Clerk.__internal_updateProps({
+      appearance: {
+        ...currentAppearance,
+        theme: themeName ? themes[themeName] : undefined,
+      },
+    });
+  };
+
+  themeSelect.addEventListener('change', updateTheme);
+
+  return { updateTheme };
+}
+
+type Preset = { elements: Record<string, any>; options?: Record<string, any>; variables?: Record<string, any> };
+
+function presetToAppearance(preset: Preset | undefined) {
+  if (!preset) return {};
+  return {
+    elements: preset.elements,
+    ...(preset.options ? { options: preset.options } : {}),
+    ...(preset.variables ? { variables: preset.variables } : {}),
+  };
+}
+
+const presets: Record<string, Preset> = {};
+
+function presetSelector() {
+  assertClerkIsLoaded(Clerk);
+
+  const presetSelect = document.getElementById('presetSelect') as HTMLSelectElement;
+
+  // Populate dropdown from presets map
+  for (const name of Object.keys(presets)) {
+    presetSelect.add(new Option(name, name));
+  }
+
+  const savedPreset = sessionStorage.getItem('preset') ?? '';
+  presetSelect.value = savedPreset;
+
+  const updatePreset = () => {
+    const presetName = presetSelect.value;
+    sessionStorage.setItem('preset', presetName);
+
+    const currentAppearance = Clerk.__internal_getOption('appearance') ?? {};
+    void Clerk.__internal_updateProps({
+      appearance: {
+        ...currentAppearance,
+        elements: {},
+        ...presetToAppearance(presetName ? presets[presetName] : undefined),
+      },
+    });
+  };
+
+  presetSelect.addEventListener('change', updatePreset);
+
+  return { updatePreset };
+}
+
 const urlParams = new URL(window.location.href).searchParams;
 for (const [component, encodedProps] of urlParams.entries()) {
   if (AVAILABLE_COMPONENTS.includes(component as AvailableComponent)) {
@@ -328,6 +407,8 @@ void (async () => {
   assertClerkIsLoaded(Clerk);
   fillLocalizationSelect();
   const { updateVariables } = appearanceVariableOptions();
+  const { updateTheme } = themeSelector();
+  const { updatePreset } = presetSelector();
   const { updateOtherOptions } = otherOptions();
 
   const sidebars = document.querySelectorAll('[data-sidebar]');
@@ -452,14 +533,29 @@ void (async () => {
       await mocking.initialize(route, { scenario });
     }
 
+    const initialThemeName = sessionStorage.getItem('baseTheme') ?? '';
+    const initialTheme = initialThemeName ? themes[initialThemeName] : undefined;
+    const initialPresetName = sessionStorage.getItem('preset') ?? '';
+    const initialPreset = initialPresetName ? presets[initialPresetName] : undefined;
+
     await Clerk.load({
       ...(componentControls.clerk.getProps() ?? {}),
       signInUrl: '/sign-in',
       signUpUrl: '/sign-up',
       ui: { ClerkUI: window.__internal_ClerkUICtor },
+      appearance: {
+        ...(initialTheme ? { theme: initialTheme } : {}),
+        ...presetToAppearance(initialPreset),
+      },
     });
     renderCurrentRoute();
-    updateVariables();
+    updateTheme();
+    updatePreset();
+    // Only apply sandbox variable overrides when using the default theme.
+    // Prebuilt themes (raw, dark, etc.) define their own variables.
+    if (!initialTheme) {
+      updateVariables();
+    }
     updateOtherOptions();
   } else {
     console.error(`Unknown route: "${route}".`);

packages/clerk-js/sandbox/template.html

@@ -7,7 +7,31 @@
       name="viewport"
       content="width=device-width,initial-scale=1"
     />
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <script>
+      if (localStorage.getItem('clerk-js-sandbox-tailwind') !== 'off') {
+        document.write('<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"><\/script>');
+      } else {
+        document.documentElement.setAttribute('data-no-tailwind', '');
+        document.write(
+          '<style>' +
+            'html[data-no-tailwind] { height: 100% }' +
+            'html[data-no-tailwind] body { display: flex; min-height: 100%; margin: 0; font-family: system-ui, sans-serif; background: #f9fafb }' +
+            'html[data-no-tailwind] [data-sidebar] { position: fixed; top: 0; bottom: 0; width: 18rem; overflow-y: auto; background: #fff; border: 1px solid #eee; padding: 0.5rem; font-size: 13px }' +
+            'html[data-no-tailwind] body > [data-sidebar]:nth-child(1) { left: 0 }' +
+            'html[data-no-tailwind] body > [data-sidebar]:nth-child(2) { right: 0 }' +
+            'html[data-no-tailwind] body:has([data-sidebar]:not(.hidden)) { padding: 0 18rem }' +
+            'html[data-no-tailwind] main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem }' +
+            'html[data-no-tailwind] main > div { width: 100% }' +
+            'html[data-no-tailwind] fieldset { margin-top: 1rem }' +
+            'html[data-no-tailwind] legend { font-size: 14px; font-weight: 500 }' +
+            'html[data-no-tailwind] [data-sidebar] label { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-top: 1px solid #f3f4f6 }' +
+            'html[data-no-tailwind] nav ul { list-style: none; padding: 0 }' +
+            'html[data-no-tailwind] nav a { display: block; padding: 0.3rem 0.5rem; text-decoration: none; color: inherit; font-size: 14px }' +
+            'html[data-no-tailwind] nav a:hover { background: #f9fafb }' +
+            '<\/style>',
+        );
+      }
+    </script>
   </head>
   <body class="flex min-h-full flex-col overflow-x-hidden bg-gray-50 lg:has-[*[data-sidebar]:not(.hidden)]:px-72">
     <div
@@ -338,6 +362,58 @@
           />
         </label>
       </fieldset>
+      <fieldset>
+        <div class="mb-2 mt-4 flex items-center justify-between">
+          <legend class="block text-sm">Theme</legend>
+        </div>
+        <label class="flex items-center justify-between border-t border-gray-100 py-2">
+          <span class="font-mono text-xs">baseTheme</span>
+          <select
+            id="themeSelect"
+            class="text-sm"
+          >
+            <option value="">default</option>
+            <option value="dark">dark</option>
+            <option value="shadesOfPurple">shadesOfPurple</option>
+            <option value="neobrutalism">neobrutalism</option>
+            <option value="shadcn">shadcn</option>
+          </select>
+        </label>
+        <label class="flex items-center justify-between border-t border-gray-100 py-2">
+          <span class="font-mono text-xs">preset</span>
+          <select
+            id="presetSelect"
+            class="text-sm"
+          >
+            <option value="">none</option>
+          </select>
+        </label>
+      </fieldset>
+      <fieldset>
+        <div class="mb-2 mt-4 flex items-center justify-between">
+          <legend class="block text-sm">Page</legend>
+        </div>
+        <label
+          class="flex items-center justify-between border-t border-gray-100 py-2"
+          style="font-size: 12px; font-family: monospace"
+        >
+          <span>Tailwind CSS</span>
+          <input
+            type="checkbox"
+            id="tailwindToggle"
+          />
+        </label>
+        <script>
+          (function () {
+            var cb = document.getElementById('tailwindToggle');
+            cb.checked = localStorage.getItem('clerk-js-sandbox-tailwind') !== 'off';
+            cb.addEventListener('change', function () {
+              localStorage.setItem('clerk-js-sandbox-tailwind', cb.checked ? 'on' : 'off');
+              location.reload();
+            });
+          })();
+        </script>
+      </fieldset>
       <fieldset>
         <div class="mb-2 mt-4 flex items-center justify-between">
           <legend class="block text-sm">Other options</legend>