HomeOnTour Logo6UI

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

Quick Start

HomeOnTour UI is built on top of shadcn/ui. Simply add a component and shadcn/ui will be set up automatically:

pnpm dlx homeontour-ui@latest add logo-svg

On first use, this will automatically:

  • Run pnpm dlx shadcn@latest init to set up shadcn/ui
  • Create components.json with shadcn/ui configuration
  • Install required dependencies (class-variance-authority, clsx, tailwind-merge, lucide-react)
  • Create the lib/utils.ts file with the cn helper
  • Add the component to your project

Manual Setup (Alternative)

If you prefer to set up shadcn/ui manually before adding components:

1. Initialize shadcn/ui
Set up shadcn/ui in your project (this installs dependencies and creates utilities)
pnpm dlx shadcn@latest init
2. Install Additional Dependencies (if needed)
shadcn/ui init installs most dependencies, but you may need these for some components
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.