pphat.me logoRegistry
Docs/components/basics

Component Basics

Download, integrate, and remove custom UI components from the registry using @pphatdev/registry.


Quick Start

1. Initialize Project

Make sure your project is initialized with component support enabled:

npx pphat init

2. List Available Components

Browse available UI components in the registry:

npx pphat list components

3. Add Components

Since v1.4.0 the CLI accepts two equivalent grammars. Pick whichever reads best in your workflow:

Subcommand grammar

npx pphat add component button card modal

Hyphenated grammar

npx pphat add-component button card modal
npx pphat add-comp button card modal

Command Overrides

Override default component output settings using -f (--format) or -d (--dir):

npx pphat add component button -f nextjs -d src/components/ui
npx pphat add-component card -f nuxtjs

Removing Components

Use remove component (or the hyphenated remove-component / remove-comp) to delete previously downloaded components. Removal mirrors add's path resolution, so it only touches files an equivalent add would have written. Missing files are treated as "already gone" — no error, exit 0.

Remove from Every Enabled Format

npx pphat remove component button card
npx pphat remove-component button card

Restrict to a Specific Format or Directory

npx pphat remove component button -f nextjs -d src/components/ui
npx pphat remove-comp modal -f nuxtjs