> ## Documentation Index
> Fetch the complete documentation index at: https://docs.linktr.ee/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Build custom LinkApps for Linktree in minutes

Build interactive LinkApps for Linktree profiles.

## What you need

* **Node.js 18** or newer ([download here](https://nodejs.org/))
* **A text editor** ([VS Code](https://code.visualstudio.com/) is free and works great)
* **A Linktree account** ([sign up free](https://linktr.ee/register))

<Tip>
  Not sure if you have Node.js? Open your terminal and type `node --version`. If
  you see a number like `v18.0.0` or higher, you're good to go!
</Tip>

## Quick start

Run these 3 commands to create and preview your first LinkApp:

<CodeGroup>
  ```bash npm theme={"system"}
  npx @linktr.ee/create-linkapp my-app
  cd my-app
  npm run dev
  ```

  ```bash pnpm theme={"system"}
  pnpm create @linktr.ee/linkapp my-app
  cd my-app
  pnpm dev
  ```

  ```bash yarn theme={"system"}
  yarn create @linktr.ee/linkapp my-app
  cd my-app
  yarn dev
  ```

  ```bash bun theme={"system"}
  bunx @linktr.ee/create-linkapp my-app
  cd my-app
  bun dev
  ```
</CodeGroup>

Your browser opens automatically to preview your app.

## What are LinkApps?

LinkApps appear on Linktree profiles. Instead of a link that takes people away, they can interact right on your Linktree page.

**Examples:**

* Video players (YouTube, Vimeo, TikTok)
* Product showcases with prices
* FAQ sections
* Contact forms
* Social media feeds

**The difference:**

* Normal link → Click → Leave Linktree
* LinkApp → Click → Stay and interact

## Create your first LinkApp

Run this command to start:

```bash theme={"system"}
npx @linktr.ee/create-linkapp
```

You'll answer 3 quick questions:

```txt theme={"system"}
? Project name › my-app
? Initialize git repository? › Yes
? Install dependencies? › Yes
```

**What these mean:**

* **Project name** - Your app's folder name (like `my-video-player`)
* **Git repository** - Version control (say Yes)
* **Install dependencies** - Download required files (say Yes)

After a minute, you'll see:

```
✔ Created project at /path/to/my-app
✔ Installed dependencies

Success! Created my-app

Get started:
  cd my-app
  npm run dev
```

<Note>
  **New to terminal?** No problem!

  * **Mac**: Press `Cmd + Space`, type "Terminal", hit Enter
  * **Windows**: Press `Win + R`, type "cmd", hit Enter

  Then copy-paste the commands above.
</Note>

## Your project files

Your new project includes:

* **`app/expanded.tsx`** - Your main app layout (start editing here!)
* **`linkapp.config.ts`** - Your app's name and settings
* **`components/`** - For reusable UI components
* **`app/featured.tsx`** - Optional hero layout

## Preview your app

Start the preview:

<CodeGroup>
  ```bash npm theme={"system"}
  cd my-app
  npm run dev
  ```

  ```bash pnpm theme={"system"}
  cd my-app
  pnpm dev
  ```

  ```bash yarn theme={"system"}
  cd my-app
  yarn dev
  ```

  ```bash bun theme={"system"}
  cd my-app
  bun dev
  ```
</CodeGroup>

Your browser opens showing your app inside a fake Linktree profile. You can:

* Test light/dark themes
* See how it looks on different layouts
* Edit code and see changes instantly

<Tip>
  Leave this running! Every time you save your code, the preview updates
  automatically.
</Tip>

## Edit your app

Open `app/expanded.tsx` in your editor and change the text:

```tsx app/expanded.tsx theme={"system"}
import type { AppProps } from "@linktr.ee/linkapp";

export default function ClassicLayout({ __linkUrl, theme }: AppProps) {
  return (
    <div>
      <h2>👋 Hello!</h2>
      <p>This is my custom LinkApp!</p>
      <a href={__linkUrl}>Visit my website →</a>
    </div>
  );
}
```

Save the file and watch your preview update instantly!

<Note>**What's happening:** - `__linkUrl` - The URL they'll click to</Note>

## Deploy to Linktree

### Step 1: Log in

<CodeGroup>
  ```bash npm theme={"system"}
  npx @linktr.ee/linkapp login
  ```

  ```bash pnpm theme={"system"}
  pnpm @linktr.ee/linkapp login
  ```

  ```bash yarn theme={"system"}
  yarn @linktr.ee/linkapp login
  ```

  ```bash bun theme={"system"}
  bunx @linktr.ee/linkapp login
  ```
</CodeGroup>

A browser window opens. Log in with your Linktree account.

<Tip>You only do this once. Your login is saved.</Tip>

### Step 2: Deploy

<CodeGroup>
  ```bash npm theme={"system"}
  npm run deploy
  ```

  ```bash pnpm theme={"system"}
  pnpm deploy
  ```

  ```bash yarn theme={"system"}
  yarn deploy
  ```

  ```bash bun theme={"system"}
  bun deploy
  ```
</CodeGroup>

This builds your app and uploads it to Linktree. You'll get a test link:

```
✔ Deployed successfully!

  Test link: https://linktr.ee/admin?action=create-link&linkType=my-app
```

Click the test link to add your app to your Linktree profile!

<Warning>
  Your app starts as a **DRAFT**. Only you can see it. To make it public for all
  Linktree users, contact Linktree for approval.
</Warning>

## Add pre-built components

Want buttons, forms, or other UI elements? Add them instantly:

<CodeGroup>
  ```bash npm theme={"system"}
  npx @linktr.ee/linkapp add button
  ```

  ```bash pnpm theme={"system"}
  pnpm @linktr.ee/linkapp add button
  ```

  ```bash yarn theme={"system"}
  yarn @linktr.ee/linkapp add button
  ```

  ```bash bun theme={"system"}
  bunx @linktr.ee/linkapp add button
  ```
</CodeGroup>

Then use it in your code:

```tsx theme={"system"}
import { Button } from "@/components/ui/button";

export default function MyApp() {
  return <Button>Click me!</Button>;
}
```

**Available:** `button`, `switch` (more coming soon!)

## Next steps

<CardGroup cols={2}>
  <Card title="Layouts" icon="layer-group" href="/essentials/layouts">
    Classic vs featured layouts
  </Card>

  <Card title="Configuration" icon="gear" href="/essentials/configuration">
    Configure your app settings
  </Card>

  <Card title="CLI Commands" icon="square-terminal" href="/cli/dev">
    All available commands
  </Card>

  <Card title="Components" icon="puzzle-piece" href="/components/overview">
    Browse UI components
  </Card>
</CardGroup>

## Common issues

**Preview won't open?**

* Make sure Node.js 18+ is installed
* Check nothing else is using port 3001

**Changes not showing?**

* Save your file in the editor
* Check the terminal for errors

**Deploy failed?**

* Run `npm run build` first to check for errors
* Make sure you ran `npx @linktr.ee/linkapp login`

**Need help?**

* [Full documentation](https://docs.linktr.ee/create-link-app)
* Contact Linktree developer support