@feedinbox/cli

CLI tool for installing FeedInbox components into your React project. Components are copied directly to your project for full customization control.

🚀 Quick Start

# Install components
npx @feedinbox/cli add react-vanilla

📦 Installation

No installation required! Use with npx:

npx @feedinbox/cli --help

🎨 Available Templates

react-vanilla

React components with vanilla CSS styling

npx @feedinbox/cli add react-vanilla

react-tailwind

React components with Tailwind CSS utilities

npx @feedinbox/cli add react-tailwind

react-shadcn

React components using shadcn/ui library

npx @feedinbox/cli add react-shadcn

📋 Commands

add [type]

Install component templates to your project

npx @feedinbox/cli add react-vanilla

# Options
npx @feedinbox/cli add react-vanilla --dir src/components/ui --force

Options:

• --dir <directory> - Installation directory (default: src/components/feedinbox)
• --force - Overwrite existing files
• --yes - Skip confirmation prompts

list

Show available component types

npx @feedinbox/cli list

init

Initialize FeedInbox configuration

npx @feedinbox/cli init

Creates feedinbox.config.json with your API key and settings.

📁 What Gets Installed

When you run npx @feedinbox/cli add react-vanilla, it creates:

src/components/feedinbox/
├── FeedbackWidget.tsx      ← Feedback collection widget
├── NewsletterWidget.tsx    ← Newsletter subscription widget
├── ContactWidget.tsx       ← Contact form widget
├── index.ts                ← Export file
├── styles/                 ← CSS files (vanilla only)
│   ├── index.css
│   ├── feedback-widget.css
│   ├── newsletter-widget.css
│   └── contact-widget.css
└── README.md               ← Usage instructions

🔧 Usage After Installation

1. Install the SDK (if not already installed):

npm install @feedinbox/sdk

2. Import and use components:

import { FeedbackWidget } from './components/feedinbox';
// For vanilla CSS:
import './components/feedinbox/styles/index.css';

function App() {
  return (
    <FeedbackWidget
      apiKey="fb_your_api_key"
      onSuccess={(response) => console.log(response)}
    />
  );
}

🎯 Requirements

• Node.js: 16 or higher
• React project: The CLI detects React projects automatically
• TypeScript: Recommended (components are written in TypeScript)

🔍 Project Validation

The CLI automatically validates your project:

• ✅ Checks for package.json
• ✅ Detects React dependencies
• ✅ Warns about missing TypeScript

⚙️ Configuration

feedinbox.config.json

Optional configuration file created by npx @feedinbox/cli init:

{
  "apiKey": "fb_your_api_key",
  "apiUrl": "https://api.feedinbox.com",
  "workspaceId": "your-workspace-id"
}

⚠️ Security Note: Add feedinbox.config.json to your .gitignore

🎨 Component Customization

Since components are copied to your project, you have full control:

// Modify the component file directly
export const FeedbackWidget: React.FC<Props> = ({ ...props }) => {
  // Add your custom logic here
  const [customState, setCustomState] = useState();
  
  // Your modifications...
};

📚 Examples

Next.js Integration

# In your Next.js project
npx @feedinbox/cli add react-vanilla

# Then use in your components
'use client';
import { FeedbackWidget } from '@/components/feedinbox';

Vite Project

# In your Vite project
npx @feedinbox/cli add react-tailwind

# Import in your app
import { FeedbackWidget } from './components/feedinbox';

Custom Directory

# Install to custom location
npx @feedinbox/cli add react-shadcn --dir src/ui/feedinbox

🐛 Troubleshooting

"No package.json found"

# Make sure you're in a Node.js project
npm init -y

"React not detected"

# Install React if missing
npm install react react-dom

"Directory already exists"

# Use --force to overwrite
npx @feedinbox/cli add react-vanilla --force

🔗 Related Packages

• @feedinbox/sdk - Core TypeScript SDK

📄 License

MIT © FeedInbox