HomeOnTour LogoUI

Installation

How to install and configure HomeOnTour UI in your project

Requirements

Before you begin, make sure you have:

  • Node.js 18+ installed
  • A React project (Next.js, Vite, Create React App, etc.)
  • Tailwind CSS configured in your project

Initialize

Run the init command to setup your project:

pnpm dlx homeontour-ui@latest init

This will:

  • Install required dependencies
  • Create the lib/utils.ts file with the cn helper
  • Create the components/homeontour-ui directory

Manual Setup

1. Install Dependencies
Install the required packages
pnpm add class-variance-authority clsx tailwind-merge lucide-react
2. Add cn Utility
Create lib/utils.ts with the cn helper function
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
3. Configure Path Aliases
Update your tsconfig.json to include path aliases
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

That's it!

You're now ready to add components to your project. Check out the CLI documentation to learn how to add components.