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 init2. List Available Components
Browse available UI components in the registry:
❯
npx pphat list components3. 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 modalHyphenated grammar
❯
npx pphat add-component button card modal❯
npx pphat add-comp button card modalCommand 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 nuxtjsRemoving 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 cardRestrict to a Specific Format or Directory
❯
npx pphat remove component button -f nextjs -d src/components/ui❯
npx pphat remove-comp modal -f nuxtjs