unkeyed · perkinsjr · Jul 10, 2025 · Jun 26, 2025 · Jun 30, 2025 · Jul 8, 2025
@@ -4,12 +4,11 @@ import {
   creditsSchema,
 } from "@/app/(app)/apis/[apiId]/_components/create-key/create-key.schema";
 import type { ActionComponentProps } from "@/components/logs/table-action.popover";
-import { toast } from "@/components/ui/toaster";
 import { usePersistedForm } from "@/hooks/use-persisted-form";
 import { trpc } from "@/lib/trpc/client";
 import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, DialogContainer } from "@unkey/ui";
+import { Button, DialogContainer, toast } from "@unkey/ui";
 import { useEffect } from "react";
 import { FormProvider } from "react-hook-form";
 import { useEditCredits } from "../hooks/use-edit-credits";

@@ -1,6 +1,6 @@
 "use client";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 import { useMemo } from "react";
 
 // No need to fetch more than 10 items, because combobox allows seeing 6 items at a time so even if users scroll 10 items are more than enough.

@@ -1,6 +1,6 @@
 "use client";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 import { useMemo } from "react";
 
 // No need to fetch more than 10 items, because combobox allows seeing 6 items at a time so even if users scroll 10 items are more than enough.

@@ -1,5 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 
 export const useDeleteKey = (onSuccess?: () => void) => {
   const trpcUtils = trpc.useUtils();

@@ -1,6 +1,5 @@
-import { toast } from "@/components/ui/toaster";
-
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 
 export const useEditCredits = (onSuccess?: () => void) => {
   const trpcUtils = trpc.useUtils();

@@ -1,5 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 
 export const useEditExpiration = (onSuccess?: () => void) => {
   const trpcUtils = trpc.useUtils();

@@ -1,7 +1,7 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import type { TRPCClientErrorLike } from "@trpc/client";
 import type { TRPCErrorShape } from "@trpc/server/rpc";
+import { toast } from "@unkey/ui";
 
 const handleKeyOwnerUpdateError = (err: TRPCClientErrorLike<TRPCErrorShape>) => {
   if (err.data?.code === "NOT_FOUND") {

@@ -1,6 +1,6 @@
 import { UNNAMED_KEY } from "@/app/(app)/apis/[apiId]/_components/create-key/create-key.constants";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 
 export const useEditKeyName = (onSuccess: () => void) => {
   const trpcUtils = trpc.useUtils();

@@ -1,5 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 
 export const useEditMetadata = (onSuccess?: () => void) => {
   const trpcUtils = trpc.useUtils();

@@ -1,5 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 import { formatDuration, intervalToDuration } from "date-fns";
 
 export const useEditRatelimits = (onSuccess?: () => void) => {

@@ -1,5 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 
 export const useUpdateKeyRbac = (
   onSuccess: (data: {

@@ -1,7 +1,7 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import type { TRPCClientErrorLike } from "@trpc/client";
 import type { TRPCErrorShape } from "@trpc/server/rpc";
+import { toast } from "@unkey/ui";
 
 const handleKeyUpdateError = (err: TRPCClientErrorLike<TRPCErrorShape>) => {
   const errorMessage = err.message || "";

@@ -1,6 +1,5 @@
 import { MAX_KEYS_FETCH_LIMIT } from "@/app/(app)/authorization/roles/components/upsert-role/components/assign-key/hooks/use-fetch-keys";
 import { type MenuItem, TableActionPopover } from "@/components/logs/table-action.popover";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
 import {
@@ -16,6 +15,7 @@ import {
   Tag,
   Trash,
 } from "@unkey/icons";
+import { toast } from "@unkey/ui";
 import { DeleteKey } from "./components/delete-key";
 import { UpdateKeyStatus } from "./components/disable-key";
 import { EditCredits } from "./components/edit-credits";

@@ -1,8 +1,7 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
 import { cn } from "@/lib/utils";
-import { InfoTooltip } from "@unkey/ui";
+import { InfoTooltip, toast } from "@unkey/ui";
 import { StatusBadge } from "./components/status-badge";
 import { useKeyStatus } from "./use-key-status";
 

@@ -1,6 +1,6 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "@unkey/ui";
 import type { z } from "zod";
 
 const createInvalidationHelper = () => {

@@ -2,11 +2,10 @@
 
 import { revalidate } from "@/app/actions";
 import { NavbarActionButton } from "@/components/navigation/action-button";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Plus } from "@unkey/icons";
-import { Button, FormInput } from "@unkey/ui";
+import { Button, FormInput, toast } from "@unkey/ui";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
 import type React from "react";

@@ -1,4 +1,5 @@
-import { Button, CopyButton } from "@unkey/ui";
+"use client";
+import { Button, CopyButton, toast } from "@unkey/ui";
 import { useRef } from "react";
 
 type CopyableIDButtonProps = {
@@ -51,6 +52,9 @@ export const CopyableIDButton = ({ value, className = "" }: CopyableIDButtonProp
     } else {
       // Programmatically click the CopyButton if text isn't selected
       copyButtonRef.current?.click();
+      toast.success("Copied to clipboard", {
+        description: value,
+      });
     }
   };
 
@@ -72,6 +76,13 @@ export const CopyableIDButton = ({ value, className = "" }: CopyableIDButtonProp
           variant="ghost"
           value={value}
           ref={copyButtonRef}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            toast.success("Copied to clipboard", {
+              description: value,
+            });
+          }}
           className="pointer-events-none flex-shrink-0"
         />
       </div>

@@ -1,9 +1,9 @@
 "use client";
 import { useTheme } from "next-themes";
-import type * as React from "react";
+import type { ComponentProps } from "react";
 import { Toaster as Sonner, toast } from "sonner";
 
-type ToasterProps = React.ComponentProps<typeof Sonner>;
+type ToasterProps = ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme } = useTheme();