diff --git a/src/components/shared/theme/theme-selector/theme-trigger.tsx b/src/components/shared/theme/theme-selector/theme-trigger.tsx
index c6deabe..4b34156 100644
--- a/src/components/shared/theme/theme-selector/theme-trigger.tsx
+++ b/src/components/shared/theme/theme-selector/theme-trigger.tsx
@@ -1,14 +1,16 @@
 "use client";
 
 import { ChevronsUpDown } from "lucide-react";
-import { ThemeColorPreview } from "../theme-color-preview";
+import * as React from "react";
 import { Button } from "@/components/ui/button";
 import type { ThemeData } from "@/lib/theme";
 import { extractThemeColors } from "@/lib/theme/utils";
 import { cn } from "@/lib/utils";
+import { ThemeColorPreview } from "../theme-color-preview";
 import { getDisplayName } from "./utils";
 
-interface ThemeTriggerProps {
+interface ThemeTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof Button> {
   active: ThemeData | null | undefined;
   currentMode: "light" | "dark";
   isLoading: boolean;
@@ -17,16 +19,16 @@ interface ThemeTriggerProps {
   open: boolean;
 }
 
-export function ThemeTrigger({
-  active,
-  currentMode,
-  isLoading,
-  label,
-  triggerClassName,
-  open,
-}: ThemeTriggerProps) {
+export const ThemeTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ThemeTriggerProps
+>(function ThemeTrigger(
+  { active, currentMode, isLoading, label, triggerClassName, open, ...props },
+  ref,
+) {
   return (
     <Button
+      ref={ref}
       variant="outline"
       role="combobox"
       aria-expanded={open}
@@ -36,6 +38,7 @@ export function ThemeTrigger({
         triggerClassName,
       )}
       title={label}
+      {...props}
     >
       <div className="hidden md:flex items-center gap-2 min-w-0">
         {isLoading ? (
@@ -95,4 +98,4 @@ export function ThemeTrigger({
       <ChevronsUpDown className="ml-2 h-4 w-4 md:h-3 md:w-3 shrink-0 opacity-50" />
     </Button>
   );
-}
+});