Installation

This section provides an overview of the installation.

Setting up the requirements for uploadthing ui is straightforward. You can follow the following steps to get started.

Nextjs

To get started you can use create-t3-app to scaffold a new Nextjs project. You can follow the official guide or follow the steps below.

1

Scaffold a New Nextjs Project

npm create t3-app@latest
2

Access the Project Directory

After installation, navigate into the project directory to start setting up:

cd <project-directory>

Shadcn UI

To get started you can follow the official guide or follow the steps below.

1

Initialize Shadcn UI

npx shadcn@latest init

Uploadthing

To get started you can follow the official guide. Make sure to create a file router and a file route for your application.

Note about Uploadthing Components:

Add your uploadthing components inside lib/uploadthing.ts instead of utils/uploadthing.ts. Reference: Uploadthing Components

lib/uploadthing.ts
import { OurFileRouter } from "@/app/api/uploadthing/core";
import {
  generateReactHelpers,
  generateUploadButton,
  generateUploadDropzone,
} from "@uploadthing/react";

export const UploadButton = generateUploadButton<OurFileRouter>();
export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
export const { useUploadThing, uploadFiles, createUpload } =
  generateReactHelpers<OurFileRouter>();