originkit

Add Originkit components to your React / Next.js project from the command line — like shadcn, backed by the Originkit registry.

The clean Next.js + Tailwind source lands in your repo, its npm packages are installed for you, and nothing from Originkit stays in your dependency tree at runtime.

# Pick your package manager — no global install needed
pnpm dlx originkit@latest add globe
npx originkit@latest add globe
yarn dlx originkit@latest add globe
bunx --bun originkit@latest add globe

# Catalogue preset or saved instance (omit for the default style)
npx originkit@latest add globe --dark
npx originkit@latest add fade-text --my-layout

That single command signs you in through your browser (or uses your API key), writes the component, and installs what it needs. No config file required first.

Contents

• Requirements
• Installation
• Quick start
• Commands
• Configuration
• Authentication
• Environment variables
• How it works
• Troubleshooting
• License

Requirements

• Node.js 18 or newer
• A React or Next.js project (npm, pnpm, yarn, or bun — detected from your lockfile)

Installation

Run it on demand, or install globally for a shorter command:

pnpm dlx originkit@latest <command>   # no install
npx originkit@latest <command>
yarn dlx originkit@latest <command>
bunx --bun originkit@latest <command>

npm install -g originkit              # then: originkit <command>

Quick start

originkit login              # sign in with your browser (once per machine)
originkit search hover       # find a component
originkit add fade-text      # default style + install deps
originkit add fade-text --dark   # catalogue preset (or --<instance>)

originkit init is optional. It writes a committable components.json when you want to pin the install directory, import alias, or TypeScript preference; without it, add uses the defaults below.

Commands

| Command | Description | | --- | --- | | originkit add <name...> | Fetch component/section source, write the files, install npm dependencies. Optional --<preset> / --<instance> selects a style. | | originkit remove <name...> | Delete previously added component files. Leaves npm dependencies in place. | | originkit list | List every component in the registry. | | originkit search <query> | Search the registry by name, description, category, or tag. | | originkit init | Write components.json in the current project. | | originkit login | Sign in through your browser (OAuth 2.1 + PKCE — no API key needed). | | originkit logout | Revoke and clear the stored session. An ORIGINKIT_API_KEY or project key keeps working — see Authentication. | | originkit whoami | Show which credential and account would be used. Costs no quota. |

Every command accepts --cwd <dir> to run against another directory. originkit --help and originkit -v behave as expected.

add

| Flag | Description | | --- | --- | | --<preset> / --<instance> | Apply a catalogue preset or your saved style instance (e.g. --dark). Omit for the default. Pass only one. Legacy --preset <name> still works. | | --prompt | Mark this add as an AI Prompt install (analytics channel: Prompt). Still a live delivery that consumes quota. Website AI Prompt text embeds this flag automatically. | | --auth <key> | Use an API key instead of your signed-in session. | | --no-deps | Write files only; skip the package-manager install. | | --dry-run | Print what would be written and installed, then stop. | | -o, --overwrite | Replace files that already exist (they're skipped by default). | | --path <dir> | Override the components directory for this run. |

The site Get this component → CLI panel copies the matching command for the style you selected (add <slug> for the default, add <slug> --<key> otherwise).

remove

| Flag | Description | | --- | --- | | --dry-run | Print what would be deleted, then stop. | | --path <dir> | Override the components directory for this run. |

Files are never deleted beyond the ones you name. When a removed component was the only thing importing a sibling, that sibling is reported so you can decide — it may still be used by your own app code.

list / search

| Flag | Description | | --- | --- | | --category <name> | list only — filter by category. | | --kind <kind> | list only — filter by component, section, or template. | | --json | Print raw JSON instead of a table. |

init

| Flag | Description | | --- | --- | | -y, --yes | Accept all defaults without prompting. |

Configuration

components.json sits at your project root and is safe to commit — it never holds credentials.

{
  "$schema": "https://www.originkit.dev/schema/components.json",
  "baseUrl": "https://mcp.originkit.dev",
  "componentsDir": "src/components/originkit",
  "alias": "@/components/originkit",
  "typescript": true,
  "stack": "nextjs",
  "styling": "tailwind"
}

| Field | Description | Default | | --- | --- | --- | | baseUrl | Registry API origin. | https://mcp.originkit.dev | | componentsDir | Root for Originkit files. Sections go here; UI components go in …/ui/. | components/originkit, or src/components/originkit when the project has a src/ directory | | alias | Import alias root delivered source is rewritten to. Match your tsconfig.json paths. Sections: @/components/originkit/<slug>; components: @/components/originkit/ui/<slug>. | @/components/originkit | | typescript | Write .tsx (false → .jsx). | true | | stack | Target framework for the delivered source. | nextjs | | styling | Styling flavour for the delivered source. | tailwind |

Authentication

The first add offers to sign you in through your browser — the same Originkit sign-in used by the Claude and ChatGPT connectors. The session is stored in ~/.originkit/auth.json and refreshed automatically, so this is a one-time step per machine.

An API key works anywhere a session does. Create one at Originkit → Profile → API Keys. Credentials are resolved in this order:

1. --auth <key>
2. Signed-in session (originkit login)
3. ORIGINKIT_API_KEY environment variable
4. .originkit file in the project (written by init, added to .gitignore automatically)

originkit logout revokes and clears only the session (2) — it cannot unset an environment variable or delete a file it doesn't own. When ORIGINKIT_API_KEY or a project .originkit is present, later commands keep working with that key: logout says so explicitly, and add reports which credential it used.

Fetching component source counts against your daily and weekly delivery quota, which is shared across website Code / Framer copies and live MCP / CLI fetches. Components: 10/day and 30/week. Sections: 10/day with no weekly cap. Each successful add is one unit, however many files its tree delivers.

Copying a CLI command, MCP prompt, or AI prompt from the website does not consume quota — only the live registry delivery does.

Continuous integration

ORIGINKIT_API_KEY=${{ secrets.ORIGINKIT_API_KEY }} \
  npx originkit@latest add hero --no-deps

Outside a TTY, add never prompts for sign-in — it fails with the exact options instead, so a missing credential surfaces as a clear build error rather than a hang. Use init --yes if you need a config file generated non-interactively.

How it works

The CLI is a thin client over the Originkit registry API (https://mcp.originkit.dev/v1).

1. add requests the drop-in Next.js / React source for a component.
2. Files are written under componentsDir, with the registry's canonical import alias rewritten to the alias from your components.json.
3. npm dependencies are collected across everything delivered and installed once, using the package manager detected from your lockfile.

Delivery is tree-aware: when a registry item composes other registry components, the server resolves the whole dependency tree — deduplicated, cycle-guarded, with one aggregated dependency list — and the CLI writes every file in a single step. Composed sections and templates aren't published in the catalogue yet; the delivery path is ready for them.

Troubleshooting

Commands still work after originkit logout. A credential further down the precedence list is taking over — almost always ORIGINKIT_API_KEY in your shell. logout names it, whoami shows which one is active, and unsetting it (then opening a new shell) signs you out completely.

Module not found: @/components/originkit/… after add. Your alias doesn't match the path mapping in tsconfig.json. Set both to the same value (or re-run originkit init).

Sign-in doesn't open a browser. Set ORIGINKIT_NO_BROWSER=1 to print the URL instead — useful over SSH and in containers.

"Daily limit reached" / weekly limit. Delivery quota is shared across website Code/Framer copies and live MCP/CLI fetches (IST). Components: 10/day + 30/week. Sections: 10/day, no weekly cap. Copying a command or prompt from the site does not count — only a successful registry fetch does. Limits reset on the next IST day / Monday (weekly is components only).

Environment variables

| Variable | Description | | --- | --- | | ORIGINKIT_API_KEY | API key used when no --auth flag or signed-in session is present. | | ORIGINKIT_NO_BROWSER | Set to 1 to print the sign-in URL instead of launching a browser. |

License

MIT