uploadcn / uploadcn

UploadCN 
 Production-ready file uploads, built for shadcn.
 Docs ·
 Examples ·
 Installation ·
 Contributing 
 If UploadCN saves you time, give it a ⭐ on GitHub . It helps other developers find it.
---
Composable upload primitives, hooks and complete upload experiences for
shadcn/ui: queues, concurrency, retries, chunked and resumable
uploads, presigned S3 and R2, validation, image cropping and compression, virus scanning,
OCR, offline recovery and accessible UI. You own the component source; the hard parts are
small, tested npm packages.
## Quick start
In a project set up with the shadcn CLI:
 [code] 
No setup step: UploadCN is listed in the official
shadcn registry directory, so the CLI knows the
`@uploadcn` namespace and installs every component in your project's style.
 [code] 
Then choose where files go (S3, R2, Cloudinary, local disk, your own API, or browser
only). See the installation guide.
## What you get
- **58 blocks, 30 of them animated.** Dropzones, avatar and gallery uploads, document
 checklists, identity verification, chat attachments, CSV import, a camera capture, and
 playful animated uploads. Browse them on the examples page.
- **Your design system.** Every item compiles for all 8 shadcn styles (Vega, Nova, Maia,
 Lyra, Mira, Luma, Sera, Rhea), works on Radix, Base UI and React Aria, and converts its
 icons to your icon library (Lucide, Tabler, Hugeicons, Phosphor, Remix Icon) on install.
- **Any storage.** Direct-to-bucket uploads to S3 and R2 with a small signing route,
 Cloudinary, local disk, any custom upload function, or browser-only for forms.
- **Built for real traffic.** Concurrency limits, retries with backoff, multipart and
 resumable uploads, pause and resume, offline recovery, server-side scan and processing
 states.
- **Accessible and typed.** Keyboard and screen reader support, automated axe checks, and
 TypeScript from the engine to the route.
- **Works with AI tools.** Standard shadcn registry, so the shadcn MCP server, `llms.txt`
 and every coding agent can find and install components.
## Packages
| Layer | Package | Delivery |
| --------------------------- | ------------------------------------------ | ----------------------------------------- |
| Styled components & blocks | `apps/docs/registry` | shadcn registry, copied into your project |
| Hooks & headless primitives | `@uploadcn/react` | npm |
| Upload engine & adapters | `@uploadcn/core` | npm |
| Upload route, scan, OCR | `@uploadcn/server` | npm |
The registry components install the npm packages they need, so most projects never
install them by hand.
## Repository
 [code] 
## Development
Requires Node.js 20.9 or later and pnpm 10.
 [code] 
| Script | |
| -------------------------------------- | ------------------------------------------------------------------------------- |
| `pnpm build` | Build the packages, the registry and the docs |
| `pnpm test` | Unit, integration and registry suites (Vitest) |
| `pnpm lint` / `pnpm typecheck` | Across all w