Uploadthing UI

Custom UI components for Uploadthing built on top of the Shadcn Registry. This project is for Next JS/React only. It's an opinionated way of handling uploadthing's client side state.

Technologies Used

• Tailwind CSS for rapid, responsive styling
• Shadcn for a beautiful, consistent UI
• Zustand for state management
• Lucide-react for iconography
• Cuid2 for generating unique IDs

Project Structure

This project structure will be used upon installation of the components. This is just for reference

│
├───api
│   └───uploadthing
│   |    └───core.ts  
│   |    └───route.ts  
└───components
│   └───uploadthing-ui
│   |    └─── ...
└───lib
│   └───uploadthing-ui-types.ts 
│   └───uploadthing-ui-utils.ts 
│   └───uploadthing.ts 
└───store 
│   └─── ...
│

Usage

Create a .env file in the root directory and add the following variables

UPLOADTHING_TOKEN=""

Steps to follow from uploadthing's documentation

• Create your first file router
• Create a Next.js API route using your file router
• The UploadThing Components are generated automatically (with the required changes) when installing from this registry

Showcase [1]

Workflow: Inside the uploadthing's admin dashboard

Installation

pnpm dlx shadcn@latest add https://uploadthing-ui.vercel.app/r/button-uploadthing.json

Add inside your layout.tsx

import { Toaster } from "@/components/ui/sonner";

<Toaster expand theme="system" gap={8} />

Add inside of a client component

import UTUIButtonUploadthing from "@/components/uploadthing-ui/button-uploadthing";

// add the fileRoute which you want to use
// ps. fileRoute isn't typesafe
<UTUIButtonUploadthing
  UTUIFunctionsProps={{
    fileRoute: "imageUploader",
    onBeforeUploadBegin: (files) => {
      // Your additional code here
      console.log(files);

      return files;
    },
    onUploadBegin: (fileName) => {
      // Your additional code here
      console.log(fileName);
    },
    onUploadProgress: (progress) => {
      // Your additional code here
      console.log(progress);
    },
    onClientUploadComplete: (res) => {
      // Your additional code here
      console.log(res);
    },
    onUploadError: (error) => {
      // Your additional code here
      console.log(error);
    },
  }}
/>

Showcase [2]

| Note: Isn't fully mobile responsive right now

Workflow: Inside storage drive applications

Installation

pnpm dlx shadcn@latest add https://uploadthing-ui.vercel.app/r/button-generic-drive.json

Add inside of a client component

import UTUIButtonGenericDrive from "@/components/uploadthing-ui/button-generic-drive";

// add the fileRoute which you want to use
// ps. fileRoute isn't typesafe
<UTUIButtonGenericDrive
  UTUIFunctionsProps={{
    fileRoute: "imageUploader",
    onBeforeUploadBegin: (files) => {
      // Your additional code here
      console.log(files);

      return files;
    },
    onUploadBegin: (fileName) => {
      // Your additional code here
      console.log(fileName);
    },
    onUploadProgress: (progress) => {
      // Your additional code here
      console.log(progress);
    },
    onClientUploadComplete: (res) => {
      // Your additional code here
      console.log(res);
    },
    onUploadError: (error) => {
      // Your additional code here
      console.log(error);
    },
  }}
/>

Installation of the Registry

Clone the repository:

git clone https://github.com/webdevkaleem/uploadthing-ui.git

Create a .env file in the root directory and add the following variables

UPLOADTHING_TOKEN=""

Install dependencies

pnpm install

Start the development server

pnpm run dev

Roadmap

• Expand component functionalities
• Enhance documentation and examples
• Integrate additional features and improvements

Shadcn Registry

Visit the shadcn documentation to view the full documentation.

Contributing

Contributions are welcome! Please open an issue or submit a PR to help improve the project.

License

MIT