Harukit Ui

A modern CLI tool that makes it effortless to add beautiful, accessible, and customizable UI components to your projects. Instead of locking you into a library, it copies components directly into your codebase, giving you complete freedom to modify, style, and maintain them as your own.

Table of Contents

• Quick Start
• Getting Started
• Available Components
• CLI Commands
• Project Structure
• Configuration
• Using Components
• Package Manager Support
• Migration from shadcn/ui
• Troubleshooting
• Support

Quick Start

1. Initialize Harukit

# Using npm
npx harukit@latest init

# Using pnpm
pnpm dlx harukit@latest init

# Using yarn
yarn harukit@latest init

# Using bun
bunx --bun harukit@latest init

2. Add Components

# Add a single component
npx harukit@latest add button

# Add multiple components
npx harukit@latest add button card input

Getting Started

Step 1: Create a new project (if you don't have one)

# Create a new Next.js project
npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" --yes
cd my-app

Step 2: Initialize Harukit

# Choose your package manager
npx harukit@latest init    # npm
pnpm dlx harukit@latest init  # pnpm
yarn harukit@latest init      # yarn
bunx --bun harukit@latest init  # bun

Note: Harukit will automatically detect your package manager (npm, yarn, pnpm, or bun) and install all required dependencies for you. You do not need to run a separate install command.

Step 3: Add your first component

npx harukit@latest add button

Step 4: Use the component

import { Button } from "@/components/button"

export default function Page() {
  return (
    <div className="p-8">
      <Button>Hello Harukit!</Button>
    </div>
  )
}

Available Components

CLI Commands

init

Initialize Harukit in your project.

npx harukit@latest init [options]

Options:

• -y, --yes - Skip prompts and use defaults
• --typescript - Use TypeScript
• --tailwind - Use Tailwind CSS
• --eslint - Use ESLint
• --src-dir - Use src directory
• --import-alias <alias> - Import alias for components

Examples:

# Interactive setup
npx harukit@latest init

# Skip prompts with defaults
npx harukit@latest init --yes

# Custom configuration
npx harukit@latest init --typescript --tailwind --src-dir

Note: All required dependencies are installed automatically using your detected package manager (npm, yarn, pnpm, or bun). You do not need to run a separate install command.

add

Add components to your project.

npx harukit@latest add <components...> [options]

Options:

• -y, --yes - Skip prompts and use defaults
• --overwrite - Overwrite existing components

Examples:

# Add single component
npx harukit@latest add button

# Add multiple components
npx harukit@latest add button card input

# Overwrite existing components
npx harukit@latest add button --overwrite

Note: Component dependencies are automatically installed using your detected package manager. For example, adding the button component will automatically install @radix-ui/react-slot and class-variance-authority.

remove

Remove components from your project.

npx harukit@latest remove <components...>

Examples:

# Remove single component
npx harukit@latest remove button

# Remove multiple components
npx harukit@latest remove button card

list

List all available components.

npx harukit@latest list

update

Check for updates and show update instructions.

npx harukit@latest update

info

Show information about Harukit or specific components.

npx harukit@latest info [component]

Examples:

# Show general information
npx harukit@latest info

# Show specific component information
npx harukit@latest info button

Project Structure

After initialization, your project will have this structure:

your-project/
├── harukit.json          # Configuration file
├── components/           # Your UI components
│   ├── button.tsx
│   ├── card.tsx
│   └── ...
├── lib/
│   └── utils.ts         # Utility functions
└── app/
    └── globals.css      # Global styles with CSS variables

Configuration

The harukit.json file contains your project configuration:

{
  "$schema": "https://harukit.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Using Components

Button Component

import { Button } from "@/components/button"

export default function MyPage() {
  return (
    <div>
      <Button>Default Button</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Outline</Button>
      <Button size="sm">Small</Button>
    </div>
  )
}

Card Component

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/card"

export default function MyCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here</p>
      </CardContent>
    </Card>
  )
}

Accordion Component

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/accordion"

export default function MyAccordion() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Package Manager Support

Harukit automatically detects your package manager and installs dependencies accordingly. The detection follows this priority:

1. CLI Package Manager: Detects the package manager used to run the CLI (npx → npm, yarn → yarn, etc.)
2. Project Lock Files: Falls back to the package manager indicated by lock files in your project
3. System Preference: Uses bun if available, otherwise defaults to npm

Supported Package Managers

npm

# Initialize (automatically uses npm for dependencies)
npx harukit@latest init

# Add components
npx harukit@latest add button card

pnpm

# Initialize (automatically uses pnpm for dependencies)
pnpm dlx harukit@latest init

# Add components
pnpm dlx harukit@latest add button card

yarn

# Initialize (automatically uses yarn for dependencies)
yarn harukit@latest init

# Add components
yarn harukit@latest add button card

bun

# Initialize (automatically uses bun for dependencies)
bunx --bun harukit@latest init

# Add components
bunx --bun harukit@latest add button card

Migration from shadcn/ui

If you're migrating from shadcn/ui, the process is straightforward:

1. Initialize Harukit: npx harukit@latest init
2. Add the same components: npx harukit@latest add button card input
3. Update your imports from @/components/ui/button to @/components/button

The component APIs are compatible, so your existing code should work with minimal changes.

Troubleshooting

Common Issues

"Component not found"

• Make sure you're using the latest version: npx harukit@latest
• Check available components: npx harukit@latest list

"Import error"

• Ensure the component was added successfully
• Check that the import path matches your configuration

"Styling issues"

• Verify Tailwind CSS is properly configured
• Check that CSS variables are defined in your global styles

"Package manager detection failed"

• Make sure you have a package.json file in your project root
• Ensure you're using a supported package manager (npm, yarn, pnpm, or bun)
• The CLI will automatically detect your package manager and install dependencies

"Dependencies not installed"

• Harukit automatically installs all required dependencies during initialization
• If installation fails, try running the init command again
• Check that your package manager is working correctly

Support

• Documentation: https://harukit.com
• GitHub: https://github.com/Hareesh108/harukit-ui
• Issues: https://github.com/Hareesh108/harukit-ui/issues

License

MIT © Hareesh Bhittam