HomeOnTour UI CLI

Add components from HomeOnTour UI to your project via CLI.

Usage

Initialize your project

npx homeontour-ui@latest init

This will:

• Install required dependencies
• Create the lib/utils.ts file
• Set up the components directory

Add components

npx homeontour-ui@latest add logo-svg

Add multiple components:

npx homeontour-ui@latest add logo-svg dev-mode-bar

Interactive selection:

npx homeontour-ui@latest add

Note: We recommend using npx instead of pnpm dlx because pnpm aggressively caches @latest and may not fetch the newest version. If you prefer pnpm, use: pnpm dlx --force homeontour-ui@latest add ...

Generate new components (for registry development)

When working on the registry itself, use the generate command:

# In the registry project directory
pnpm generate my-component

This creates:

• src/components/registry/my-component/index.tsx
• src/components/registry/my-component/metadata.ts (with usage blocks)
• src/components/registry/my-component/default.example.tsx
• Automatically updates metadata-registry.ts

Options

npx homeontour-ui@latest add logo-svg --yes
npx homeontour-ui@latest add logo-svg --overwrite

How it works

The CLI:

1. Fetches component code from the registry API
2. Installs required npm dependencies
3. Installs shadcn/ui dependencies (if needed)
4. Saves components to components/homeontour-ui/

Development

From Root Directory (Recommended)

Build the CLI:

pnpm build:cli

Test locally:

pnpm test:cli add logo-svg
pnpm test:cli init

From CLI Directory

cd cli
pnpm install
pnpm build
node dist/index.js add logo-svg

Publishing

From Root Directory (Recommended)

# For bug fixes (0.1.2 → 0.1.3)
pnpm publish:cli:patch

# For new features (0.1.2 → 0.2.0)
pnpm publish:cli:minor

# For breaking changes (0.1.2 → 1.0.0)
pnpm publish:cli:major

Publishing Workflow

1. Ensure you're logged in to npm:

   npm login

2. Make your changes to files in cli/src/
3. Build and test:

   pnpm build:cli
   pnpm test:cli add logo-svg

4. Publish with version bump:

   pnpm publish:cli:patch

   The script will automatically check if you're logged in before publishing.
5. Verify it's published:

   npm view homeontour-ui version

Version Types

• Patch - Bug fixes, documentation updates (0.0.X)
• Minor - New features, new components (0.X.0)
• Major - Breaking changes (X.0.0)

What Happens During Publish

1. Version is bumped in package.json
2. CLI is automatically built (prepublishOnly hook)
3. Package is uploaded to npm
4. Git tag is created

From CLI Directory (Alternative)

cd cli
pnpm publish:patch  # or publish:minor, publish:major

Troubleshooting

Authentication Error

If you see npm notice Access token expired or revoked:

npm login
# Follow the browser authentication flow
# Then try publishing again

Check Authentication

npm whoami
# Should display your npm username

License

MIT