# Install components

> Install UpFork's components and landing pages into your React project with the shadcn CLI: your token, components.json, and the add command.

Components and landing pages built with React install with the [shadcn CLI](https://ui.shadcn.com/docs/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](https://upfork.dev/docs/plans)).

## Create a token

On [Account → CLI tokens](https://upfork.dev/account/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`:

```bash
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:

```json
{
  "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

```bash
npx shadcn@latest add @upfork/<name>
```

`<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](https://upfork.dev/docs/downloads).

When the CLI refuses an install, it prints why and what to do. [CLI messages](https://upfork.dev/docs/cli-messages) lists them all.

Page: https://upfork.dev/docs/install