Install components

Components and landing pages built with React install with the shadcn CLI, into your own project, where the code is yours to change. Every install uses your UpFork token, free products included. You set a project up once; after that, each install is one command.

What you need

• A React project with Tailwind CSS that the shadcn CLI can install into. If it has no components.json yet, run npx shadcn@latest init in it first.
• An UpFork account. It's free.
• For a paid product, the account that bought it. For a product that comes with a plan, an account on that plan or a later one (Plans and limits).

Create a token

On Account → CLI tokens, name a token after the computer or project it's for, and create it. Copy it straight away: it's shown only once.

• A token starts with upf_ and is 47 characters long.
• You can have up to 10. Delete one you no longer use, and it stops working at once.
• A token only installs. It can't sign anyone in to your account.

Put it in .env.local

In the root of your project, add the token to .env.local:

UPFORK_TOKEN=upf_...

Keep it out of Git: anyone with your token can install what you bought.

Add UpFork to components.json

Add UpFork's registry to your project's components.json, beside what's already there:

{
  "registries": {
    "@upfork": {
      "url": "https://upfork.dev/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${UPFORK_TOKEN}"
      }
    }
  }
}

The CLI fills in ${UPFORK_TOKEN} from your environment when it asks UpFork for a product.

Install

<name> is the last part of the product's address: for https://upfork.dev/products/crowdwall, it's crowdwall. Every product page shows its own command, ready to copy.

The CLI writes the product's files where shadcn puts them (components/, lib/, hooks/), installs the npm packages and shadcn/ui components it needs, and adds any styles it brings to your global stylesheet.

Once UpFork is in your components.json, npx shadcn@latest search @upfork lists what's in its registry from the command line. Looking needs no token.

Tailwind CSS 4 and 3

UpFork's components are written for Tailwind CSS 4: each time its developer saves one, UpFork installs it with the real shadcn CLI into a Tailwind CSS 4 project to check it. A component with styles of its own also brings them as Tailwind CSS 3 settings, which the CLI writes into a Tailwind CSS 3 project's tailwind.config.

What doesn't install with the CLI

• Plain HTML, CSS and JS: some landing pages and components are a page with its stylesheets and scripts, not a React component. Download them, or copy their code, from their page.
• Full-stack projects, apps, desktop software and scripts are downloads: see Templates and downloads.

When the CLI refuses an install, it prints why and what to do. CLI messages lists them all.