Use UploadCN from the shadcn CLI, the shadcn MCP server, and any coding agent.
UploadCN is a standard shadcn registry. Everything
that works with other registries, the CLI, search, the MCP server, --diff, works here.
Namespace
npx shadcn@latest registry add @uploadcn=https://uploadcn.dev/r/{style}/{name}.jsonThen install by name:
npx shadcn@latest add @uploadcn/file-upload @uploadcn/upload-config| URL | What it serves |
|---|---|
/r/registry.json | The index of every item (used by search and MCP) |
/r/{name}.json | An item, compiled for the default style (Nova) |
/r/{style}/{name}.json | An item for your style, e.g. /r/base-lyra/upload.json |
Browse from the CLI
npx shadcn@latest search @uploadcn --query imagenpx shadcn@latest view @uploadcn/product-media-uploadview prints the files an item will add before you install it. After an update,
npx shadcn@latest add @uploadcn/upload --diff shows what changed against your copy.
MCP server
The shadcn MCP server reads UploadCN's registry index, so your assistant can find, explain and install components.
Add the namespace
Run the registry add command above so @uploadcn is in components.json.
Install the MCP server
npx shadcn@latest mcp init --client claudeAsk
- “Show me the components in the @uploadcn registry”
- “Add an image upload with crop from @uploadcn”
- “Build a KYC page with @uploadcn/identity-verification that uploads to Cloudinary”
llms.txt
Agents that don't use MCP can read /llms.txt: what UploadCN is, how to set
up the registry, every component with its install command, and the docs index.
/llms-full.txt has the full documentation in one file, and every docs
page is available as Markdown from the Copy Markdown button.
Quality bar
Every item in the registry:
- passes
shadcn registry validateand the registry-directory rules (flat structure, no inline content inregistry.json); - declares exactly the npm packages and registry items it imports;
- is compiled for all 8 styles with no style classes left over;
- passes
@shadcn/linttheme checks; - renders, uploads and passes an accessibility scan in automated tests;
- installs and type-checks in fresh Radix, Base UI and React Aria projects.
shadcn registry directory
To list UploadCN in the registry directory, add
this entry to apps/v4/registry/directory.json in
shadcn-ui/ui, run pnpm validate:registries, and open
a pull request:
{
"name": "@uploadcn",
"homepage": "https://uploadcn.dev",
"url": "https://uploadcn.dev/r/{style}/{name}.json",
"description": "Production-ready file uploads: dropzones, queues, resumable S3 and R2 uploads, and 58 blocks for every style.",
"author": "Hanzala",
"logo": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='6.5' fill='var(--foreground)'/><g fill='none' stroke='var(--background)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' transform='translate(-0.75 0)'><path d='M7 9v4a5 5 0 0 0 10 0V6'/><path d='m14 9 3-3 3 3'/></g></svg>"
}