Shadcn and UploadThing component

"use client";
import { UploadButton } from "@/lib/uploadthing";
import { toast } from "sonner";

export const StatementUploadForm = () => {
  return (
    <UploadButton
      endpoint="uploadStatement"
      appearance={{
        button:
          "bg-primary focus-within:ring-primary ut-uploading:bg-primary ut-readying:bg-primary ut-ready:bg-primary after:bg-primary w-full",
        container: "w-full",
      }}
      onClientUploadComplete={() => {
        toast.success("File Uploaded");
      }}
      onUploadError={(error: Error) => {
        toast.error("Error Uploading File", { description: error.message });
      }}
    />
  );
};


idk if this would help anybody but heres a quick copy and paste of my upload button for use with shadcn. I found tracking down all of the classnames for the button to be cumbersome so I imagine this could help someone.

Or maybe there is a better way and im just dumb lol
Was this page helpful?