Primus UI CLI

CLI tool for adding Primus UI components to your project, inspired by shadcn/ui.

Installation

npx primus-ui init

Usage

Initialize Primus UI

npx primus-ui init

Non-interactive (CI/defaults):

npx primus-ui init --yes

This will:

• Create primus.json configuration
• Set up component directories
• Install required dependencies
• Create utility files

Add Components

npx primus-ui add login
npx primus-ui add checkout-form
npx primus-ui add credit-card

List Available Components

npx primus-ui list

How It Works

Unlike traditional npm packages, Primus CLI copies the source code directly into your project:

1. Run npx primus-ui add login
2. Component source code is copied to src/components/ui/primus-login.tsx
3. You now own the code and can modify it freely

Benefits

• Full Control - Edit components directly
• No Black Box - See exactly how components work
• AI-Friendly - LLMs can read and understand your code
• Customizable - Modify to fit your needs
• Transparent - No hidden dependencies

Example

# Initialize
npx primus-ui init

# Add login component
npx primus-ui add login

# Use in your app
import { PrimusLogin } from '@/components/ui/primus-login';

function LoginPage() {
  return <PrimusLogin allowSocial />;
}

Configuration

The primus.json file stores your configuration:

{
  "framework": "vite",
  "componentsPath": "src/components/ui",
  "tailwind": true,
  "typescript": true,
  "aliases": {
    "components": "@/src/components/ui",
    "utils": "@/lib/utils"
  }
}

Available Components

Authentication

• login - Login form with social auth
• register - Registration form
• forgot-password - Password reset request
• user-profile - User profile display

Core & Admin

• notification-center - Notification bell with dropdown
• feature-toggle - Feature flag panel
• stats-card - Stats card with change indicator
• data-table - Sortable, paginated data table

Payments

• checkout-form - Payment form
• subscription-manager - Subscription plan selector

Banking

• account-card - Account summary card
• transaction-list - Transaction history
• transfer-form - Money transfer form
• kyc-wizard - Identity verification wizard
• loan-calculator - Loan calculator
• credit-card - Credit card visual
• aml-dashboard - AML alerts dashboard

Insurance

• policy-card - Policy summary
• claim-form - Claim submission wizard
• claim-tracker - Claim status tracker
• quote-wizard - Quote wizard
• premium-calculator - Premium calculator

Logging

• log-viewer - Log viewer

Security

• secret-scanner - Secret scanner

Storage

• file-uploader - File uploader

Development

cd packages/cli
npm install
npm run build
npm link

Then test:

primus-ui list