v20.0.2 · 34 components · MCP-compatible

Linktree components,
one prompt away

Production-ready React components from Linktree's design system. Works with Claude, Cursor, and VS Code.

Built from Linktree's visual identity

Typography, color, and spacing — built in so every component stays on-brand

Linktree mobile product experience — clean interface with featured articles and creator content LinkSans — Linktree's custom variable typeface showcased on a lime background Linktree web experience — bold editorial design with vibrant imagery and crisp typography

Get started

Set up in under a minute with any AI assistant

1
Add @arbor to your components.json

Drop this snippet into your project's components.json to enable short install commands like @arbor/button.

{
  "registries": {
    "@arbor": "https://arbor.linktr.ee/r/{name}.json"
  }
}
2
Install a component

Run it yourself:

npx shadcn@latest add @arbor/button

Or ask your AI assistant:

"Add the @arbor/button component"

Requires an MCP-aware assistant. Drop this into .mcp.json at your project root:

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["-y", "shadcn@latest", "mcp"]
    }
  }
}

Components

Browse the full library — types, tokens, and accessibility built in

Button · 2

Form · 9

File Upload

Dropzone surface for selecting files to upload. A dashed drop target with a cloud-upload glyph, click and keyboard activation, drag-and-drop, plus error and disabled states. Use it as the upload trigger; compose selected-file lists and progress above it.

Radio

Single-select controls built on Radix UI — the canonical Radio (control) and RadioItem (control + label + description), plus RadioButton selectable surfaces (compact, pill, squircle, card).

One-Time Password Field

Segmented one-time-password (OTP) input built on input-otp. Per-slot boxes with auto-advance, paste distribution, a blinking caret, and one-time-code autofill. Composes with Field for label, error state, and message.

Overlay · 8

Alert Dialog

Binary-confirmation modal (Cancel/Delete, Cancel/OK, Leave/Stay). Enforces two-button footer with no close button. Built on @radix-ui/react-alert-dialog.

Menu

A floating panel of contextual actions opened from a trigger. Built on Radix UI with leading/trailing icon slots, an optional description line, section headings, checkbox and radio items, submenus, keyboard-shortcut hints, and a destructive variant. Supersedes DropdownMenu.

Navigation · 2

Data Display · 1

Badge · 2

Indicator Badge

Communicates presence, activity state, or a count. Renders as a dot for binary states (active/online/error) or a count bubble for notification quantities, with a custom-color escape hatch for off-system use.

Layout · 4

Button Group

Layout container that pairs exactly two related action buttons (e.g. Cancel / Save) with shared sizing and an equal-width, auto-width, or stacked layout. Place the primary action last in a row, or first (top) when stacked; caps at two to reduce cognitive load.

Feedback · 3

Typography · 1

Icons · 2