otpflow

A shadcn-style CLI for adding customizable OTP input components directly into your React projects.

Instead of installing a component as a dependency, otpflow copies the source component into your project, allowing full customization and control.

✨ Features

• 📦 Add OTP components directly to your project
• ⚡ No runtime dependencies
• 🧩 Fully customizable source code
• 🎨 Works with Tailwind CSS
• 🧠 Simple CLI workflow
• 🪶 Lightweight

📦 Usage

Run the CLI with npx:

npx otpflow add otp-input

This command will copy the OTP component into your project.

Result:

components/
  otp-input.tsx

You can now modify the component however you like.

📂 Example Project Structure

After running the CLI:

your-project
 ├ components
 │   └ otp-input.tsx
 ├ app
 ├ package.json

🚀 Example Usage

"use client"

import OtpInput from "@/components/otp-input"

export default function Page() {
  return (
    <div className="flex justify-center items-center h-screen">
      <OtpInput length={6} />
    </div>
  )
}

⚙️ Available Commands

Add a component

npx otpflow add otp-input

Copies the component into your project.

📋 Available Components

| Component | Description | | --------- | ----------------------------------------------------------------- | | otp-input | OTP verification input with keyboard navigation and paste support |

⌨️ OTP Input Features

• Auto focus next input
• Backspace navigation
• Numeric validation
• Paste full OTP support
• Clean UI layout
• Lightweight implementation

🧠 Why otpflow?

Most UI component libraries require installing packages and managing dependencies.

otpflow uses a different approach:

1. Copy the component source code into your project
2. Modify it however you want
3. No external dependencies

This approach is inspired by tools like shadcn/ui.

📦 Installation (Optional)

You can install the CLI globally:

npm install -g otpflow

Then run:

otpflow add otp-input

🛠 Development

Clone the repository:

git clone https://github.com/yourusername/otpflow

Install dependencies:

npm install

Link the CLI locally:

npm link

Now you can test it:

otpflow add otp-input

📄 License

MIT

👨‍💻 Author

Created by Someswar Gorai

Open-source contributions and feedback are welcome.