@pankaj.koree/pkui

A Command Line Interface (CLI) tool and component registry for quickly adding high-quality, pre-configured React UI components to your project. Built with Tailwind CSS support, this CLI automates setup and file management, letting you focus on development.

🚀 Features

• Quick Setup: Initialize your project with the required folder structure and Tailwind CSS configuration.
• Component Addition: Easily add individual components (e.g., Button, Card) in either TypeScript or JavaScript format.
• Dependency Management: Automatically provides necessary utilities (like the internal cva styling helper) via package imports.
• Batch Addition: Add all components from the registry at once.

📦 Installation

To use the CLI, install the package in your project:

npm install @pankaj.koree/pkui
# or
yarn add @pankaj.koree/pkui

⚙️ Usage

The main command to run the CLI is npx @pankaj.koree/pkui (or the alias pk-ui).

1. Initialize Your Project (Recommended First Step)

This command sets up the necessary environment, including any required files or basic folder structures, in your current working directory.

npx @pankaj.koree/pkui init

Command	Description
init	Initializes the project, setting up basic configurations and folder structure.

---

2. Add an Individual Component

Use the add command followed by the component name and the desired language flag (--ts or --js).

Command	Description	Example
add <component> --ts	Adds the component in TypeScript format (e.g., Button.tsx).	npx pankaj/pkui add button --ts
add <component> --js	Adds the component in JavaScript format (e.g., Button.jsx).	npx @pankaj.koree/pkui add button --js

The component will typically be placed in the components/ui/ folder within your project.

---

3. Add All Components

Use the add-all command to automatically copy every component currently available in the registry.

Command	Description	Example
add-all --ts	Adds all components in TypeScript format.	npx @pankaj.koree/pkui add-all --ts
add-all --js	Adds all components in JavaScript format.	npx @pankaj.koree/pkui add-all --js

---

4. Update a Component

If a component already exists in your local project, you can use the update command to overwrite it with the latest version from the registry.

Command	Description	Example
update <component> --ts	Updates an existing component to the latest TypeScript version.	npx @pankaj.koree/pkui update button --ts

💡 How Components Work

The components copied by this CLI use the styling utility cva. This utility is provided by the @pankaj.koree/pkui package itself and is automatically imported in the copied files:

// Copied Button.tsx file
import { cva } from "pankaj/pkui/helpers/cva.js";
// ...

By keeping @pankaj.koree/pkui installed, your components will always have access to the necessary helper functions.

🤝 Contribution

If you find a bug or have an idea for a new component, please open an issue or submit a pull request!

---

Created by Pankaj Koree.