({ key: f.key, name: f.name }))}
+ />,
+ nextOffset,
+ ] as const;
+};
+
+export default async function HomePage() {
+ const { files: uploadedFiles } = await utapi.listFiles({
+ offset: 0,
+ limit: PAGE_SIZE,
+ });
+
+ return (
+
+
+
+
+ Uploaded files
+ View the uploaded files here
+
+
+
+ ({
+ key: f.key,
+ name: f.name,
+ }))}
+ />
+
+
+
+
+ );
+}
diff --git a/playground/src/app/gallery/rhf.tsx b/playground/src/app/gallery/rhf.tsx
new file mode 100644
index 0000000000..2921d8feaa
--- /dev/null
+++ b/playground/src/app/gallery/rhf.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { z } from "zod";
+
+import { FileUploader } from "~/components/file-uploader";
+import { Button } from "~/components/ui/button";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+ useForm,
+} from "~/components/ui/form";
+import { fileWithStateValidator } from "~/utils";
+
+export function ReactHookFormDemo() {
+ const form = useForm({
+ schema: z.object({
+ images: fileWithStateValidator.array(),
+ }),
+ defaultValues: {
+ images: [],
+ },
+ mode: "onChange",
+ });
+
+ const router = useRouter();
+ const onSubmit = form.handleSubmit((data) => {
+ toast(
+
+ {JSON.stringify(data, null, 4)}
+ ,
+ );
+ form.reset();
+ router.refresh();
+ });
+
+ return (
+
+
+ );
+}
diff --git a/playground/src/app/globals.css b/playground/src/app/globals.css
new file mode 100644
index 0000000000..60ada06638
--- /dev/null
+++ b/playground/src/app/globals.css
@@ -0,0 +1,178 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 240 10% 3.9%;
+
+ --card: 0 0% 100%;
+ --card-foreground: 240 10% 3.9%;
+
+ --popover: 0 0% 100%;
+ --popover-foreground: 240 10% 3.9%;
+
+ --primary: 240 5.9% 10%;
+ --primary-foreground: 0 0% 98%;
+
+ --secondary: 240 4.8% 95.9%;
+ --secondary-foreground: 240 5.9% 10%;
+
+ --muted: 240 4.8% 95.9%;
+ --muted-foreground: 240 3.8% 46.1%;
+
+ --accent: 240 4.8% 95.9%;
+ --accent-foreground: 240 5.9% 10%;
+
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+
+ --border: 240 5.9% 90%;
+ --input: 240 5.9% 90%;
+ --ring: 240 10% 3.9%;
+
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 240 10% 3.9%;
+ --foreground: 0 0% 98%;
+
+ --card: 240 10% 3.9%;
+ --card-foreground: 0 0% 98%;
+
+ --popover: 240 10% 3.9%;
+ --popover-foreground: 0 0% 98%;
+
+ --primary: 0 0% 98%;
+ --primary-foreground: 240 5.9% 10%;
+
+ --secondary: 240 3.7% 15.9%;
+ --secondary-foreground: 0 0% 98%;
+
+ --muted: 240 3.7% 15.9%;
+ --muted-foreground: 240 5% 64.9%;
+
+ --accent: 240 3.7% 15.9%;
+ --accent-foreground: 0 0% 98%;
+
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 0% 98%;
+
+ --border: 240 3.7% 15.9%;
+ --input: 240 3.7% 15.9%;
+ --ring: 240 4.9% 83.9%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
+
+@media (max-width: 640px) {
+ .container {
+ @apply px-4;
+ }
+}
+
+/**
+ * Spinner from Geist: https://vercel.com/geist/spinner
+ */
+.spinner_spinner__fqUfx,
+.spinner_wrapper__zbFtL {
+ height: var(--spinner-size, 20px);
+ width: var(--spinner-size, 20px);
+}
+
+.spinner_spinner__fqUfx {
+ position: relative;
+ top: 50%;
+ left: 50%;
+}
+
+.spinner_bar__VysK5 {
+ animation: spinner_spin__7lZMA 1.2s linear infinite;
+ background: var(--spinner-color, var(--muted-foreground));
+ border-radius: var(--radius);
+ height: 8%;
+ left: -10%;
+ position: absolute;
+ top: -3.9%;
+ width: 24%;
+}
+
+.spinner_bar__VysK5:first-child {
+ animation-delay: -1.2s;
+ transform: rotate(0.0001deg) translate(146%);
+}
+
+.spinner_bar__VysK5:nth-child(2) {
+ animation-delay: -1.1s;
+ transform: rotate(30deg) translate(146%);
+}
+
+.spinner_bar__VysK5:nth-child(3) {
+ animation-delay: -1s;
+ transform: rotate(60deg) translate(146%);
+}
+
+.spinner_bar__VysK5:nth-child(4) {
+ animation-delay: -0.9s;
+ transform: rotate(90deg) translate(146%);
+}
+
+.spinner_bar__VysK5:nth-child(5) {
+ animation-delay: -0.8s;
+ transform: rotate(120deg) translate(146%);
+}
+
+.spinner_bar__VysK5:nth-child(6) {
+ animation-delay: -0.7s;
+ transform: rotate(150deg) translate(146%);
+}
+
+.spinner_bar__VysK5:nth-child(7) {
+ animation-delay: -0.6s;
+ transform: rotate(180deg) translate(146%);
+}
+
+.spinner_bar__VysK5:nth-child(8) {
+ animation-delay: -0.5s;
+ transform: rotate(210deg) translate(146%);
+}
+
+.spinner_bar__VysK5:nth-child(9) {
+ animation-delay: -0.4s;
+ transform: rotate(240deg) translate(146%);
+}
+
+.spinner_bar__VysK5:nth-child(10) {
+ animation-delay: -0.3s;
+ transform: rotate(270deg) translate(146%);
+}
+
+.spinner_bar__VysK5:nth-child(11) {
+ animation-delay: -0.2s;
+ transform: rotate(300deg) translate(146%);
+}
+
+.spinner_bar__VysK5:nth-child(12) {
+ animation-delay: -0.1s;
+ transform: rotate(330deg) translate(146%);
+}
+
+@keyframes spinner_spin__7lZMA {
+ 0% {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0.15;
+ }
+}
diff --git a/playground/src/app/layout.tsx b/playground/src/app/layout.tsx
new file mode 100644
index 0000000000..6318c813c1
--- /dev/null
+++ b/playground/src/app/layout.tsx
@@ -0,0 +1,48 @@
+import { Inter } from "next/font/google";
+
+import "./globals.css";
+
+import Link from "next/link";
+import { Toaster } from "sonner";
+import { twMerge } from "tailwind-merge";
+
+import { NextSSRPlugin } from "@uploadthing/react/next-ssr-plugin";
+import { extractRouterConfig } from "uploadthing/server";
+
+import { buttonVariants } from "~/components/ui/button";
+import { uploadRouter } from "~/uploadthing/server";
+
+const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+
+
+
+ {children}
+
+
+
+ );
+}
diff --git a/playground/src/app/page.tsx b/playground/src/app/page.tsx
new file mode 100644
index 0000000000..4f6643484f
--- /dev/null
+++ b/playground/src/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Home() {
+ return Select a demo
;
+}
diff --git a/playground/src/app/rhf-builtin/page.tsx b/playground/src/app/rhf-builtin/page.tsx
new file mode 100644
index 0000000000..e77cb6b8e9
--- /dev/null
+++ b/playground/src/app/rhf-builtin/page.tsx
@@ -0,0 +1,5 @@
+import { SimpleRHFDemo } from "./rhf";
+
+export default function DemoPage() {
+ return ;
+}
diff --git a/playground/src/app/rhf-builtin/rhf.tsx b/playground/src/app/rhf-builtin/rhf.tsx
new file mode 100644
index 0000000000..5bfbb587aa
--- /dev/null
+++ b/playground/src/app/rhf-builtin/rhf.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { toast } from "sonner";
+import { z } from "zod";
+
+import { Button } from "~/components/ui/button";
+import {
+ Form,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+ useForm,
+} from "~/components/ui/form";
+import { UploadDropzone } from "~/uploadthing/client";
+import { fileWithStateValidator } from "~/utils";
+
+/**
+ * A demo using RHF with built-in components from UT
+ */
+export const SimpleRHFDemo = () => {
+ const form = useForm({
+ schema: z.object({
+ images: fileWithStateValidator.array(),
+ }),
+ defaultValues: {
+ images: [],
+ },
+ mode: "onChange",
+ });
+
+ const onSubmit = form.handleSubmit((data) => {
+ toast(
+
+ {JSON.stringify(data, null, 4)}
+ ,
+ );
+ form.reset();
+ });
+
+ return (
+
+
+
+
+ Form: {JSON.stringify(form.watch(), null, 4)}
+
+
+ Errors: {JSON.stringify(form.formState.errors, null, 4)}
+
+
+
+
+
+
+
+
+
+ Drag {`'n'`} drop files here, or click to select files
+
+
+ You can upload: {Object.keys(routeConfig ?? {}).join(", ")}
+
+
+
+
+ {JSON.stringify(data, null, 4)}
+ ,
+ );
+ form.reset();
+ });
+
+ return (
+
+
+
+
+ Form: {JSON.stringify(form.watch(), null, 4)}
+
+
+ formstate: {JSON.stringify(form.formState, null, 4)}
+
+
+
+
+
+ {title}
+ {description ? {description} : null}
+
+
+ );
+};
+
+export const FilePreview = ({
+ file,
+}: {
+ file: { key: string; name: string };
+}) => {
+ const [errored, setErrored] = React.useState(false);
+
+ const ext = file.name.split(".")!.pop()!;
+ if (errored || !["png", "jpg", "jpeg", "gif"].includes(ext)) {
+ const Icon = ImageIcon; // TODO: Dynamic icon
+
+ return (
+
+
+ {file.name}
+ {errored && Failed to load file}
+
+ );
+ }
+
+ return (
+
+ {
+ setErrored(true);
+ toast.error(`Failed to load file ${file.name}`);
+ }}
+ />
+
+ );
+};
diff --git a/playground/src/components/file-uploader.tsx b/playground/src/components/file-uploader.tsx
new file mode 100644
index 0000000000..1a446f65c2
--- /dev/null
+++ b/playground/src/components/file-uploader.tsx
@@ -0,0 +1,194 @@
+import "client-only";
+
+import * as React from "react";
+import Image from "next/image";
+import { Cross2Icon, UploadIcon } from "@radix-ui/react-icons";
+import { twMerge } from "tailwind-merge";
+
+import { useDropzone } from "@uploadthing/react";
+import { bytesToFileSize } from "uploadthing/client";
+import { FileWithState } from "uploadthing/types";
+
+import { Button } from "~/components/ui/button";
+import { Progress } from "~/components/ui/progress";
+import { useUploadThing } from "~/uploadthing/client";
+import { LoadingSpinner } from "./ui/loading";
+
+interface FileUploaderProps extends React.HTMLAttributes {
+ files: FileWithState[];
+ onFilesChange: (files: FileWithState[]) => void;
+}
+
+export function FileUploader({
+ files,
+ onFilesChange,
+ className,
+ ...dropzoneProps
+}: FileUploaderProps) {
+ const [progresses, setProgresses] = React.useState(new Map());
+ const { routeConfig, startUpload } = useUploadThing("imageUploader", {
+ files,
+ onFilesChange,
+ skipPolling: true,
+ onUploadError: (e) => console.error(e),
+ onUploadProgress: (_, e) => {
+ if (!e) return;
+ setProgresses((p) => new Map(p).set(e?.file, e?.progress));
+ },
+ });
+
+ const onDrop = React.useCallback(
+ (acceptedFiles: FileWithState[]) => {
+ const newFiles = acceptedFiles.map((file) =>
+ Object.assign(file, {
+ preview: URL.createObjectURL(file),
+ }),
+ );
+
+ const updatedFiles = files ? [...files, ...newFiles] : newFiles;
+ onFilesChange(updatedFiles);
+ void startUpload(updatedFiles);
+ },
+ [files],
+ );
+
+ const { getRootProps, getInputProps, isDragActive } = useDropzone({
+ onDrop,
+ routeConfig,
+ });
+
+ // Revoke preview url when component unmounts
+ React.useEffect(() => {
+ return () => {
+ if (!files) return;
+ files.forEach((file) => {
+ if (isFileWithPreview(file)) {
+ URL.revokeObjectURL(file.preview);
+ }
+ });
+ };
+ }, []);
+
+ return (
+
+
+
+ {isDragActive ? (
+
+
+
+
+
+ Drop the files here
+
+
+ ) : (
+
+
+
+
+
+
+ Drag {`'n'`} drop files here, or click to select files
+
+
You can upload
+
+
+ )}
+
+
+ {files?.length ? (
+
+ {files?.map((file, index) => (
+ {
+ if (!files) return;
+ const newFiles = files.filter((_, i) => i !== index);
+ onFilesChange?.(newFiles);
+ }}
+ progress={progresses.get(file.name)}
+ />
+ ))}
+
+ ) : null}
+
+
+ {isFileWithPreview(file) ? (
+
+ ) : null}
+
+
+
+
+ {file.name}
+
+
+ {bytesToFileSize(file.size)}
+
+
+ {file.status === "uploading" && (
+
+ {progress < 100 ? : null}
+ {progress}%
+
+ )}
+
+
+
+
+ {file.status === "pending" && (
+
+ )}
+
+ {children}
+ {elements}
+
+
+ {currentOffset.current === null && (
+ No more files
+ )}
+ {loading && }
+
+
+ );
+};
+
+export { LoadMore };
diff --git a/playground/src/components/ui/button.tsx b/playground/src/components/ui/button.tsx
new file mode 100644
index 0000000000..3865f6830b
--- /dev/null
+++ b/playground/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { twMerge } from "tailwind-merge";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-10 rounded-md px-8",
+ icon: "size-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean;
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+ return (
+
+ );
+ },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/playground/src/components/ui/card.tsx b/playground/src/components/ui/card.tsx
new file mode 100644
index 0000000000..03de6dc9f1
--- /dev/null
+++ b/playground/src/components/ui/card.tsx
@@ -0,0 +1,82 @@
+import * as React from "react";
+import { twMerge } from "tailwind-merge";
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardDescription,
+ CardContent,
+};
diff --git a/playground/src/components/ui/form.tsx b/playground/src/components/ui/form.tsx
new file mode 100644
index 0000000000..ed68e4c3bc
--- /dev/null
+++ b/playground/src/components/ui/form.tsx
@@ -0,0 +1,197 @@
+import * as React from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+ Controller,
+ FormProvider,
+ useFormContext,
+ useForm as useFormHook,
+ UseFormProps,
+ type ControllerProps,
+ type FieldPath,
+ type FieldValues,
+} from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+import { ZodType } from "zod";
+
+import { Label } from "~/components/ui/label";
+
+export const useForm = (
+ props: Omit, "resolver"> & {
+ schema: TSchema;
+ },
+) => {
+ const form = useFormHook({
+ ...props,
+ resolver: zodResolver(props.schema, undefined),
+ });
+
+ return form;
+};
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
+> = {
+ name: TName;
+};
+
+const FormFieldContext = React.createContext(
+ {} as FormFieldContextValue,
+);
+
+const FormField = <
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
+>({
+ ...props
+}: ControllerProps) => {
+ return (
+
+
+
+ );
+};
+
+const useFormField = () => {
+ const fieldContext = React.useContext(FormFieldContext);
+ const itemContext = React.useContext(FormItemContext);
+ const { getFieldState, formState } = useFormContext();
+
+ const fieldState = getFieldState(fieldContext.name, formState);
+
+ if (!fieldContext) {
+ throw new Error("useFormField should be used within ");
+ }
+
+ const { id } = itemContext;
+
+ return {
+ id,
+ name: fieldContext.name,
+ formItemId: `${id}-form-item`,
+ formDescriptionId: `${id}-form-item-description`,
+ formMessageId: `${id}-form-item-message`,
+ ...fieldState,
+ };
+};
+
+type FormItemContextValue = {
+ id: string;
+};
+
+const FormItemContext = React.createContext(
+ {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const id = React.useId();
+
+ return (
+
+
+
+ );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
+ const { error, formItemId } = useFormField();
+
+ return (
+
+ );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ ...props }, ref) => {
+ const { error, formItemId, formDescriptionId, formMessageId } =
+ useFormField();
+
+ return (
+
+ );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const { formDescriptionId } = useFormField();
+
+ return (
+
+ );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, children, ...props }, ref) => {
+ const { error, formMessageId } = useFormField();
+ const body = error ? String(error?.message) : children;
+
+ if (!body) {
+ return null;
+ }
+
+ return (
+
+ {body}
+
+ );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+ useFormField,
+ Form,
+ FormItem,
+ FormLabel,
+ FormControl,
+ FormDescription,
+ FormMessage,
+ FormField,
+};
diff --git a/playground/src/components/ui/input.tsx b/playground/src/components/ui/input.tsx
new file mode 100644
index 0000000000..a5af6a227f
--- /dev/null
+++ b/playground/src/components/ui/input.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { twMerge } from "tailwind-merge";
+
+export interface InputProps
+ extends React.InputHTMLAttributes {}
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ );
+ },
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/playground/src/components/ui/label.tsx b/playground/src/components/ui/label.tsx
new file mode 100644
index 0000000000..a152146d40
--- /dev/null
+++ b/playground/src/components/ui/label.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { twMerge } from "tailwind-merge";
+
+const labelVariants = cva(
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/playground/src/components/ui/loading.tsx b/playground/src/components/ui/loading.tsx
new file mode 100644
index 0000000000..089fd13718
--- /dev/null
+++ b/playground/src/components/ui/loading.tsx
@@ -0,0 +1,73 @@
+import type { ComponentProps } from "react";
+import { twMerge } from "tailwind-merge";
+
+export function LoadingDots(props: ComponentProps<"svg">) {
+ return (
+
+ );
+}
+
+export function LoadingSpinner(
+ props: ComponentProps<"div"> & { size?: number },
+) {
+ const { size = 30 } = props;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+