pphat.me logoRegistry
Docs/installation

Installation & Quick Start

A quick start guide to using the @pphatdev/registry CLI.


Usage via npx (Recommended)

You don't need to install anything. Run the CLI directly using npx:

npx pphat init

The CLI supports multiple convenient aliases (prefixes), so you can use any of the following interchangeably:

npx pphat <command>
npx pphatdev <command>
npx @pphatdev/registry <command>

Global Installation (Optional)

If you plan to use the CLI frequently across many projects, install it globally on your machine:

npm install -g @pphatdev/registry

Then use the short commands anywhere:

pphat init

Step-by-Step Workflow

1. Initialize your project

Run the init command to set up your preferences. It interactively prompts you for configuration and writes a pphatdev.json file at the root of your project:

npx pphat init

Example interactive setup:

? What is name of config ? › Default configuration
? What do you want to use ? (required must select one) › Icons

? Which directory you want to use ? (required must select one) › Nextjs format (.tsx)
? Where do you store icon of nextjs ? › components/icons

Success! Configuration saved to pphatdev.json.

2. View & Manage Configuration

View or update your stored configuration anytime using the config command:

npx pphat config

Or fetch / set specific keys:

npx pphat config get
npx pphat config get icons.nextjs.dir
npx pphat config set icons.nextjs.use true

3. Discover Items in the Registry

Browse available icons or components using the list (or ls) command with pagination:

npx pphat list icons
npx pphat ls components

4. Add Icons or Components

Download icons or components directly into your project:

npx pphat add-icon react vue github
npx pphat add-component button card modal

Custom target directory or format

Override your default configuration on the fly using -d (--dir) or -f (--format):

npx pphat add-icon react vue -d src/assets/icons
npx pphat add-component button -f nextjs -d src/components/ui