Selling a component on UpFork

You need a developer account: apply to sell, prove your GitHub account or your website is yours, and we review your work. Then set your wallet address in the developer panel.

A component on UpFork is one of these:

• React with Tailwind CSS, written the way shadcn/ui components are: Tailwind 4, or Tailwind 3 with its tailwind.config. Buyers install it with the shadcn CLI, into their own project, where it’s theirs to change.
• Plain HTML, CSS and JavaScript: a page with its stylesheets, scripts and pictures. Buyers download it.

In the developer panel, start a new product and drop your project’s folder on it: the folder itself, a ZIP of it (GitHub’s “Download ZIP” works), or loose files. It’s read in your browser; node_modules and build output are never opened. The title, summary and description come from your package.json and README, and the categories are suggested from its words.

Before anything changes you see what goes where, and what’s left out and why:

• Your code keeps its folders: components/, hooks/, lib/, app/. Imports that cross a moved folder are rewritten, and shadcn/ui’s own components become dependencies the CLI installs.
• Demos come from demos/, examples/, *.demo.tsx or app/demo/; a component with none gets one made from its page. Files only your demos use stay out of what buyers install.
• A registry/ folder, as shadcn registries keep theirs, is used instead of the rest of the project.

Up to 100 files. Change anything afterwards in the editor, which saves with Ctrl S.

What your component needs in a buyer’s global stylesheet comes from yours: its own :root and .dark variables, @theme variables and keyframes, @utility, @property. What every shadcn project has already (Tailwind’s import, shadcn’s colors) is left out. The shadcn CLI merges the rest into the buyer’s stylesheet.

Rules that would restyle a buyer’s whole site (body, *), @import and @plugin are refused, each at its line, with what to do instead. A stylesheet your component imports itself goes with it as it is.

On Tailwind CSS 3? Your tailwind.config is read, never run: its theme.extend (colors, fonts, font sizes, radii, shadows, animations, keyframes…) becomes Tailwind 4 theme variables, bare HSL colors become whole ones, and buyers still on Tailwind 3 get a config of their own. A value only running the config would give (a function, a plugin) is named at its line.

Keep them where your project has them: in public/, or beside the code that imports them. They come in with the code that uses them, are scanned and stored by UpFork, and the code that goes out points at UpFork’s copies, so the component works right after it’s installed. Buyers can host them themselves too.

Limits: pictures 10 MB, fonts 5 MB, videos 40 MB, sounds 20 MB.

Every save builds a live preview of your demos: your component running, not a picture of it, on its card in the catalog and on its page. Most are built in under a minute. If something stops the build, each problem is shown at its file and line.

• Set each demo’s layout: centered (a component in the middle), full width (a section across the page) or full page; its background and padding; and the font the preview is set in.
• Pick the theme your previews open in: the visitor’s own, always dark or always light.
• A preview may take up to three minutes to build, packages included: keep them few and small.

Every save of a component is also installed the way a buyer installs it: the real shadcn CLI adds it to a fresh Next.js project, its packages are installed, and TypeScript checks the project as next build would. A missing export, a wrong import or a type error comes back at its line, before any buyer meets it. Publishing waits for a clean check.

Try the install yourself under the preview: a private link, good for a day, with the command for npm, pnpm, yarn and bun. It installs your code as last saved into a project of yours.

The Publish step lists what’s left: a built preview, a clean install check, a price (or free), a license, and the details buyers read. Then it’s on sale. New code you save later is built and checked the same way.

Members add UpFork to their project once (their own CLI token, from their account), then install with one command:

npx shadcn@latest add @upfork/your-component

Your files land in their project, your Styles in their stylesheet, the packages you use are installed, and the CLI tells them where the pictures load from. Plain HTML components, and anything that isn’t a component, are downloads.

Stuck on something the editor doesn’t explain? Write to support@upfork.dev with your product’s name.