Installation

Set up shadcn/uiCopy Anchor Link

Skip this if your project already has a components.json.

npx shadcn@latest init

Register the @uploadcn namespaceCopy Anchor Link

This adds UploadCN to the registries in your components.json, so you can install items by name.

npx shadcn@latest registry add @uploadcn=https://uploadcn.dev/r/{style}/{name}.json

Add a componentCopy Anchor Link

npx shadcn@latest add @uploadcn/file-upload

The CLI copies components/ui/upload.tsx and components/file-upload.tsx into your project and installs @uploadcn/react and @uploadcn/core.

Choose where files goCopy Anchor Link

Every component uploads through an adapter. Pick the one for your storage; you can change it later without touching a single component.

npx shadcn@latest add @uploadcn/upload-route

S3_BUCKET=my-uploads
S3_REGION=us-east-1
S3_ACCESS_KEY_ID=…
S3_SECRET_ACCESS_KEY=…

const adapter = s3Adapter({ endpoint: "/api/upload" })

Configure it onceCopy Anchor Link

Add the config wrapper and put it in your root layout. Every UploadCN component below it uses that adapter.

npx shadcn@latest add @uploadcn/upload-config

import { UploadConfig } from "@/components/upload-config"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <UploadConfig>{children}</UploadConfig>
      </body>
    </html>
  )
}

Edit the adapter in components/upload-config.tsx. A component's own adapter prop still wins, so one page can upload somewhere else.

Use itCopy Anchor Link

import { FileUpload } from "@/components/file-upload"

export default function Page() {
  return <FileUpload accept="image/*" maxSize={10_000_000} maxFiles={5} />
}