Add UploadKit to your existing app in under 60 seconds.
uploadkit is the CLI for installing UploadKit into
projects you already have. Point it at a Next.js, SvelteKit, Remix (React
Router 7), or Vite + React repo and it wires up everything you need — route
handler, provider, env vars, and dependencies — backed by a backup-and-restore
pipeline so you can roll back at any time.
Starting a brand-new project? Use
create-uploadkit-appinstead. This CLI is for existing codebases.
npx uploadkit init
That's it. Answer the prompts and you'll have:
@uploadkitdev/* packages installed (pinned to the latest published versions)UploadKitProvider mounted in your root layout.env.local (or .env) scaffolded with the keys you need.uploadkit-backup/<timestamp>/Run it again and it prints already configured — fully idempotent.
| Framework | Route handler | Provider mount |
|---|---|---|
| Next.js App Router | app/api/uploadkit/[...uploadkit]/route.ts | app/layout.tsx wraps <body> children |
| SvelteKit | src/routes/api/uploadkit/[...uploadkit]/+server.ts | Typed client in src/lib/uploadkit.ts (no React provider) |
| Remix / React Router 7 | app/routes/api.uploadkit.$.tsx | app/root.tsx wraps children |
| Vite + React | (no server) | src/main.tsx or src/App.tsx — prints a BYOS warning |
Next.js Pages Router, Vue, Nuxt, Angular, and Astro are not supported in 0.1.x — the CLI will refuse with a clear message instead of making a mess.
npx uploadkit add dropzone
npx uploadkit add button
npx uploadkit add modal
npx uploadkit add gallery
npx uploadkit add queue
npx uploadkit add progress
Each component inserts into a page of your choice, bounded by
// uploadkit:start / // uploadkit:end markers. Re-running add on an
existing component is a no-op.
Available today (0.1.0):
| Alias | SDK component |
|---|---|
dropzone | UploadDropzone |
button | UploadButton |
modal | UploadModal |
gallery | UploadGalleryGrid |
queue | FileList |
progress | UploadProgressBar |
addis React-only. SvelteKit components will ship alongside SDK Svelte variants in a future release.
Every file the CLI touches is copied to .uploadkit-backup/<ISO-timestamp>/
with a manifest.json. To undo an init (or any add):
npx uploadkit restore
You'll be prompted to pick a backup timestamp, then the CLI replays the
manifest in reverse: restores modified files, deletes files the CLI created,
rewinds .env.local entries it added.
uploadkit init [--yes] [--skip-install]
uploadkit add <component> [--target <path>] [--yes]
uploadkit restore [--timestamp <iso>]
uploadkit --version
uploadkit --help
| Flag | Applies to | Description |
|---|---|---|
--yes / -y | init, add | Accept all defaults, non-interactive. Useful in CI. |
--skip-install | init | Don't run the package manager after wiring — you'll install yourself. |
--target <path> | add | Explicit page/route to insert the component into. |
--timestamp <iso> | restore | Jump straight to a specific backup (skips the picker). |
package.json at the CWD (monorepo-aware installs are not
supported in 0.1.x — run from the package root)"Framework not detected" — the CLI reads package.json deps first, then
framework config files. If you've customized the build (webpack, rspack,
esbuild-alone), detection may bail. Open an issue with your package.json.
"Already configured" — init found uploadkit:start markers in a target
file. Either you're already set up, or you previously ran init and the
markers survived. Run uploadkit restore to roll back, or edit the files by
hand.
Presigned uploads on Vite — Vite has no server, so uploads use
BYOS + presigned URLs. The CLI warns you at init time; point
UPLOADKIT_UPLOAD_URL at your own endpoint.
MIT © Drumst0ck
FAQs
Install UploadKit into an existing project — init, add, restore.
The npm package uploadkit receives a total of 4 weekly downloads. As such, uploadkit popularity was classified as not popular.
We found that uploadkit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Company News
Open source maintainers are under more pressure than ever. We're raising our open source program from the Team plan to the Business plan, free.
Security News
The supply chain control that delays freshly published gems now covers lockfile generation and gem vendoring in Ruby projects.
Security News
During a UK cyber test, a Mythos 5 agent used sockpuppets, social engineering, and prompt injection to try to get a maintainer to merge malware.