A powerful and extremely fast CLI tool to instantly download and manage custom UI components and icons for your frontend projects.

Instead of bundling thousands of heavy icons in an npm package, this CLI dynamically fetches precisely the components and icons you need on-demand. It supports outputting raw SVGs, or converting them into ready-to-use, perfectly formatted Next.js (React) or Nuxt.js (Vue) components!

• Zero Bundle Bloat: Only download the components and icons you actually use in your project.
• Lightning Fast: Powered by a static registry hosted on GitHub's raw CDN (no rate limits for users!).
• Framework Native: Automatically wraps SVGs into .tsx (React) or .vue (Nuxt) components if desired.
• Perfect Code Formatting: Integrates a smart XML formatter that precisely aligns tags, preserving nested CSS (@keyframes) and attributes for lint-free output.
• Configurable & Persistent: Automatically remembers your preferred directory and format via a tiny configuration file.

You don't even need to install it! You can run it directly using npx. The CLI supports multiple convenient aliases (prefixes), so you can use any of the following interchangeably:

• npx pphat
• npx pphatdev
• npx @pphatdev/registry

Run the init command to set up your preferences. It will interactively ask you which types of resources you want to manage (components, icons, or both) and what formats you prefer.

npx pphat init

Here is an example of the interactive initialization process:

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

? Which directory you want to use for icons? (required must select one) › svg, nextjs, nuxtjs
? Where do you store icon of svg ? › assets/icons
? Where do you store icon of nextjs ? › components/icons
? Where do you store icon of nuxtjs ? › components/icons

? Which directory you want to use for components? (required must select one) › nextjs, nuxtjs
? Where do you store component of nextjs ? › components/ui
? Where do you store component of nuxtjs ? › components/ui

Success! Configuration saved to pphatdev.json.

This generates a perfectly structured pphatdev.json file in the root of your project:

{
  "name": "My configuration",
  "icons": {
    "svg": { "dir": "assets/icons", "use": true },
    "nextjs": { "dir": "components/icons", "use": true },
    "nuxtjs": { "dir": "components/icons", "use": true }
  },
  "components": {
    "nextjs": { "dir": "components/ui", "use": true },
    "nuxtjs": { "dir": "components/ui", "use": true }
  }
}

To browse the available icons or components in the registry, you can use the list (or ls) command:

npx pphat list icons
npx pphat ls components

It displays items in pages of 10, letting you use the arrow keys to browse!

To download a component or icon (e.g., React, Vue, GitHub, etc.), use the add command:

npx pphat add react

It will automatically download and format it into the respective directory based on your pphatdev.json preferences.

If you want to download an item in a specific format just once, you can pass the -f or --format flag:

# Download as raw SVG
npx pphat add react -f svg

# Download as Next.js React component
npx pphat add react -f nextjs

# Download as Nuxt.js Vue component
npx pphat add react -f nuxtjs

If you plan to use it frequently across many projects, you can install it globally:

npm install -g @pphatdev/registry

Then use the short commands:

pphat init
pphat add github

If you are looking to update the icon registry itself, follow these steps.

The icons are hosted on a GitHub repository and parsed into a lightweight registry/index.json. To rebuild the registry locally:

1. Generate a GitHub Personal Access Token.
2. Run the build script with the token in your environment (to avoid GitHub API rate limits):

# Linux / macOS
GITHUB_TOKEN="your_token" npm run build:registry

# Windows (PowerShell)
$env:GITHUB_TOKEN="your_token"; npm run build:registry

Note: There is an automated GitHub Actions workflow included that runs automatically whenever a new GitHub Release is published, ensuring the registry stays perfectly up to date!