Installation

How to install dependencies and structure your uploadthingui folders.

Information:

These dependencies will be installed automatically when you install a component; however, you'll need to add the relevant files in their allocated locations where required.

Uploadthing

The project on top of which these upload components are built. You can follow this official guide for Next.js App Router to get started.

For ease of use, 3 new utility files will be created inside your /lib folder automatically: (uploadthing.ts, uploadthingui-types.ts, and uploadthingui-utils.ts)

After following the guide, ensure you have your:

  • route.ts and core.ts inside your /api/uploadthing directory.

Zustand

Used as the main state management solution. It's robust and enables efficient and predictable development experience. Click here to learn more.

For organizational purposes, a new /stores folder will be created which will hold relevant store files as different components might require slightly differently structured store files.

For most upload components, a single store file will be used.


Lucide React

Used for beautiful open-source vector icons. Very easy to use. Click here to learn more.


Cuid2

Used for unique ID generation for files. It's secure, collision-resistant, and optimized for horizontal scaling and performance. Click here to learn more.