Compkit

Compkit is an AI-powered platform for generating, sharing, and installing custom UI component libraries — no GitHub, no npm registry, no manual setup.

Generate beautiful, themeable components with AI, publish them instantly, and let anyone install them with a single command.

---

Features

• AI Component Generation — Describe what you want, AI builds it
• Instant Publishing — Share your component library with a unique ID
• One-Command Install — Install any library with npx compkit install <id>
• Tailwind CSS Powered — Fully customizable styling
• TypeScript Support — Type-safe components out of the box

---

How It Works

1. Generate Components

Use the Compkit Generator to create components with AI:

# Describe your component
"A modern pricing card with gradient border, icon, title, price, and CTA button"

AI generates the component code, preview, and exports.

2. Publish Your Library

Once you're happy with your components:

• Click "Publish Library"
• Get a unique library ID (e.g. awesome-ui-kit-a7f3)

3. Install Anywhere

You can install your library instantly:

npx compkit install awesome-ui-kit-a7f3

This will:

• Download all components to /src/components/ui
• Install required dependencies
• Set up Tailwind config
• Ready to use!

---

Tech Stack

Frontend:

• React + TypeScript
• Vite
• Tailwind CSS
• Shadcn/UI components
• React Live (live preview)

Backend:

• Node.js + Express
• OpenRouter API (AI generation)
• Supabase (PostgreSQL + Auth)

CLI:

• npx compkit — Install published libraries
• Automatically configures projects

---

Installation

Use the Generator (Web)

Visit compkit.dev to generate and publish components.

Install a Library (CLI)

npx compkit install <library-id>

Example:

npx compkit install modern-buttons-x9k2

---

Example Workflow

1. Generate a button component:

   Prompt: "Gradient button with icon and loading state"
   

2. Publish your library:

   Library ID: gradient-buttons-j4d8
   

3. Install in your project:

   npx compkit install gradient-buttons-j4d8

4. Use in your code:

   import { GradientButton } from "@/components/ui/gradient-button"
   
   export default function App() {
     return <GradientButton>Click me</GradientButton>
   }

---

Development

Prerequisites

• Node.js 18+
• pnpm 8+

Setup

# Clone the repo
git clone https://github.com/oskaripessinen/compkit.git
cd compkit

# Install dependencies (monorepo)
pnpm install

# Set up environment variables
cp apps/backend/.env.example apps/backend/.env
cp apps/frontend/.env.example apps/frontend/.env
# Edit .env files with your API keys

# Run both frontend and backend concurrently
pnpm dev

# Or run them separately:

# Run frontend (Vite)
pnpm --filter frontend dev

# Run backend (Express)
pnpm --filter backend dev

Project Structure

compkit/
├── apps/
│   ├── frontend/     # React + Vite app
│   └── backend/      # Express API
├── packages/
│   └── types/        # Shared TypeScript types
└── pnpm-workspace.yaml

---

Roadmap

• User authentication (Supabase)
• AI component generation (OpenRouter)
• Component preview (React Live)
• Library publishing with unique IDs
• CLI for installing libraries (npx compkit install <id>)
• Library management dashboard
• Component versioning
• Community library showcase

---

License

MIT