feat(clerk-js): Add cssLayerName option to experimental_createTheme

packages/clerk-js/src/core/clerk.ts

@@ -2727,9 +2727,33 @@ export class Clerk implements ClerkInterface {
   };
 
   #initOptions = (options?: ClerkOptions): ClerkOptions => {
+    let processedOptions = options ? { ...options } : {};
+
+    // Extract cssLayerName from baseTheme if present and move it to appearance level
+    if (
+      processedOptions.appearance &&
+      typeof processedOptions.appearance === 'object' &&
+      'baseTheme' in processedOptions.appearance
+    ) {
+      const appearance = processedOptions.appearance;
+      const { cssLayerName: cssLayerNameFromBaseTheme, ...baseThemeWithoutCssLayer } = appearance.baseTheme;
+
+      // Use existing cssLayerName at appearance level, or fall back to one from baseTheme
+      const finalCssLayerName = appearance.cssLayerName || cssLayerNameFromBaseTheme;
+
+      processedOptions = {
+        ...processedOptions,
+        appearance: {
+          ...appearance,
+          baseTheme: baseThemeWithoutCssLayer,
+          ...(finalCssLayerName && { cssLayerName: finalCssLayerName }),
+        },
+      };
+    }
+
     return {
       ...defaultOptions,
-      ...options,
+      ...processedOptions,
       allowedRedirectOrigins: createAllowedRedirectOrigins(
         options?.allowedRedirectOrigins,
         this.frontendApi,

packages/themes/src/createTheme.ts

@@ -13,5 +13,8 @@ interface CreateClerkThemeParams extends DeepPartial<Theme> {
 
 export const experimental_createTheme = (appearance: Appearance<CreateClerkThemeParams>): BaseTheme => {
   // Placeholder method that might hande more transformations in the future
-  return { ...appearance, __type: 'prebuilt_appearance' };
+  return {
+    ...appearance,
+    __type: 'prebuilt_appearance',
+  };
 };

packages/themes/src/themes/shadcn.ts

@@ -1,6 +1,7 @@
 import { experimental_createTheme } from '../createTheme';
 
 export const shadcn = experimental_createTheme({
+  cssLayerName: 'components',
   variables: {
     colorBackground: 'var(--card)',
     colorDanger: 'var(--destructive)',

packages/types/src/appearance.ts

@@ -806,7 +806,7 @@ export type Variables = {
 };
 
 export type BaseThemeTaggedType = { __type: 'prebuilt_appearance' };
-export type BaseTheme = BaseThemeTaggedType;
+export type BaseTheme = BaseThemeTaggedType & { cssLayerName?: string };
 
 export type Theme = {
   /**