diff --git a/components/CodeBlock.tsx b/components/CodeBlock.tsx
index 1271df1e6..c1a334f61 100644
--- a/components/CodeBlock.tsx
+++ b/components/CodeBlock.tsx
@@ -5,7 +5,7 @@ import { Box, Flex, IconButton, ScrollArea, Theme } from '@radix-ui/themes';
 import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';
 import { classNames } from '@utils/classNames';
 import styles from './CodeBlock.module.css';
-import copy from 'copy-to-clipboard';
+import { copy } from '../utils/clipboard';
 
 import refractor from 'refractor/core';
 import js from 'refractor/lang/javascript';
@@ -166,7 +166,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
           const value = event.currentTarget
             .closest(`[data-code-block-content]`)
             .querySelector('code').textContent;
-          copy(value);
+          await copy(value);
           setHasCopied(true);
         }}
         color="gray"
diff --git a/components/CustomSwatch.tsx b/components/CustomSwatch.tsx
index 65588938b..85576a909 100644
--- a/components/CustomSwatch.tsx
+++ b/components/CustomSwatch.tsx
@@ -20,7 +20,7 @@ import styles from './CustomSwatch.module.css';
 import { classNames } from '@utils/classNames';
 import { useTheme } from 'next-themes';
 import { Cross2Icon, InfoCircledIcon } from '@radix-ui/react-icons';
-import copy from 'copy-to-clipboard';
+import { copy } from '../utils/clipboard';
 
 const brightColors = ['amber', 'yellow', 'lime', 'mint', 'sky'];
 
@@ -289,7 +289,7 @@ const CopyButton = ({ onClick, ...props }: React.ComponentPropsWithoutRef<typeof
         ref={ref}
         size="2"
         style={{ userSelect: 'auto' }}
-        onClick={async (event) => {
+        onClick={(event) => {
           onClick?.(event);
           const originalDefaultPrevented = event.defaultPrevented;
 
@@ -304,7 +304,7 @@ const CopyButton = ({ onClick, ...props }: React.ComponentPropsWithoutRef<typeof
             });
 
             if (!originalDefaultPrevented) {
-              copy(text);
+              void copy(text);
             }
           }
         }}
diff --git a/components/Swatch.tsx b/components/Swatch.tsx
index 72ff263ae..41b3fa842 100644
--- a/components/Swatch.tsx
+++ b/components/Swatch.tsx
@@ -21,7 +21,7 @@ import { classNames } from '@utils/classNames';
 import * as Colors from '@radix-ui/colors';
 import { useTheme } from 'next-themes';
 import { Cross2Icon, InfoCircledIcon } from '@radix-ui/react-icons';
-import copy from 'copy-to-clipboard';
+import { copy } from '../utils/clipboard';
 
 const brightColors = ['amber', 'yellow', 'lime', 'mint', 'sky'];
 
@@ -418,7 +418,7 @@ const CopyButton = ({ onClick, ...props }: React.ComponentPropsWithoutRef<typeof
         ref={ref}
         size="2"
         style={{ userSelect: 'auto' }}
-        onClick={async (event) => {
+        onClick={(event) => {
           onClick?.(event);
           const originalDefaultPrevented = event.defaultPrevented;
 
@@ -433,7 +433,7 @@ const CopyButton = ({ onClick, ...props }: React.ComponentPropsWithoutRef<typeof
             });
 
             if (!originalDefaultPrevented) {
-              copy(text);
+              void copy(text);
             }
           }
         }}
diff --git a/package.json b/package.json
index 5c8fd7db6..2164272c0 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,6 @@
     "bezier-easing": "^2.1.0",
     "codesandbox": "^2.2.3",
     "colorjs.io": "0.5.2",
-    "copy-to-clipboard": "^3.3.1",
     "esbuild": "0.19.5",
     "eslint-config-next": "^14.2.3",
     "glob": "^7.1.6",
diff --git a/pages/colors/custom.tsx b/pages/colors/custom.tsx
index 06dea7fc8..cba7a549b 100644
--- a/pages/colors/custom.tsx
+++ b/pages/colors/custom.tsx
@@ -73,7 +73,7 @@ import { useLayoutEffect } from '../../utils/use-layout-effect';
 import { useIsHydrated } from '../../utils/use-is-hydrated';
 import { useTheme } from 'next-themes';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
-import copy from 'copy-to-clipboard';
+import { copy } from '../../utils/clipboard';
 import { CustomSwatch } from '@components/CustomSwatch';
 import { ColorUsageRange } from '@components/ColorUsageRange';
 import { ColorStepLabel } from '@components/ColorStepLabel';
@@ -290,7 +290,7 @@ export default function Page() {
 
                         <DropdownMenu.SubContent>
                           <DropdownMenu.Item
-                            onSelect={() => {
+                            onSelect={async () => {
                               const css = getColorScaleCss({
                                 isDarkMode: resolvedTheme === 'dark',
                                 name: getColorName(accentValue),
@@ -303,7 +303,7 @@ export default function Page() {
                                 surfaceWideGamut: result.accentSurfaceWideGamut,
                               });
 
-                              copy(css);
+                              await copy(css);
                               setCopiedMessage('accents');
                             }}
                           >
diff --git a/utils/clipboard.ts b/utils/clipboard.ts
new file mode 100644
index 000000000..c20e3b26e
--- /dev/null
+++ b/utils/clipboard.ts
@@ -0,0 +1,12 @@
+import { canUseDOM } from './can-use-dom';
+
+export async function copy(text: string) {
+  if (!canUseDOM) {
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (error) {
+    console.error('Copying text is only allowed in a secure context');
+  }
+}
diff --git a/utils/useClipboard.ts b/utils/useClipboard.ts
deleted file mode 100644
index ed087bea7..000000000
--- a/utils/useClipboard.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-import copy from 'copy-to-clipboard';
-
-/**
- * React hook to copy content to clipboard
- *
- * @param text the text or value to copy
- * @param timeout delay (in ms) to switch back to initial state once copied.
- */
-export function useClipboard(text: string, timeout = 1500) {
-  const [hasCopied, setHasCopied] = useState(false);
-
-  const onCopy = useCallback(() => {
-    const didCopy = copy(text);
-    setHasCopied(didCopy);
-  }, [text]);
-
-  useEffect(() => {
-    if (hasCopied) {
-      const id = setTimeout(() => {
-        setHasCopied(false);
-      }, timeout);
-
-      return () => clearTimeout(id);
-    }
-  }, [timeout, hasCopied]);
-
-  return { value: text, onCopy, hasCopied };
-}
diff --git a/yarn.lock b/yarn.lock
index 0646caf0c..14a3e7e5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2199,13 +2199,6 @@ copy-concurrently@^1.0.0:
     rimraf "^2.5.4"
     run-queue "^1.0.0"
 
-copy-to-clipboard@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
-  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
-  dependencies:
-    toggle-selection "^1.0.6"
-
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -6732,11 +6725,6 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-toggle-selection@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
-  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
-
 toml@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/toml/-/toml-3.0.0.tgz#342160f1af1904ec9d204d03a5d61222d762c5ee"