alphaonedynamics CLI

A CLI to add beautiful, accessible React components and full application blocks to your project.

Usage

# Initialize in your project (sets up cn() helper & installs base packages)
npx alphaonedynamics@latest init

# Add a single component
npx alphaonedynamics@latest add button

# Add multiple components at once
npx alphaonedynamics@latest add accordion card dialog

# Add a full application block (also auto-installs all required UI components!)
npx alphaonedynamics@latest add block login
# or directly:
npx alphaonedynamics@latest block login
npx alphaonedynamics@latest add hero

# List all available components and blocks
npx alphaonedynamics@latest list

Available Blocks (11)

Production-ready composite UI blocks that include complete logic, forms, accessibility, and micro-animations. Adding a block automatically installs all required base UI components into src/components/ui/.

| Block | Description | Auto-Installs Components | |---|---|---| | login | SaaS login card with validation, social login, remember me, and loading states | button, card, checkbox, input, label, separator | | signup | Signup form with password strength meter, terms checkbox, and social signup | button, card, checkbox, input, label, progress, separator | | authentication | Full auth flow container (Login, Signup, Forgot Password, OTP, 2FA) | badge, button, card, checkbox, input, label, progress, separator | | hero | SaaS landing hero section with animated badges, CTAs, and CLI snippet preview | badge, button | | navbar | Responsive header with sticky blur, navigation menus, and mobile drawer | badge, button, separator | | footer | Multi-column footer with newsletter form, system status, and social links | badge, button, input, separator | | pricing | Tiered pricing table with monthly/annual billing toggle and feature matrix | badge, button, card, label, separator, switch | | dashboard | Analytics dashboard with collapsible sidebar, KPI cards, and data table | avatar, badge, button, card, input, progress, separator, table, tabs | | settings | User preferences panel with avatar upload, dark mode toggle, and forms | avatar, badge, button, card, input, label, separator, switch, textarea | | profile | User & organization profile with stats cards, activity feed, and projects tab | avatar, badge, button, card, separator, tabs | | contact | Support & contact page with validated inquiry form and office details | button, card, input, label, select, textarea |

Available Components (29)

| Component | Description | |---|---| | accordion | Vertically stacked collapsible sections | | alert | Callout for user attention | | alert-dialog | Confirmation modal dialog | | aspect-ratio | Container with a fixed aspect ratio | | avatar | User image with fallback | | badge | Status label / tag | | button | Primary interactive element | | card | Surface with header, content, footer | | checkbox | Toggle between checked/unchecked | | collapsible | Expandable/collapsible panel | | dialog | Modal window | | dropdown-menu | Dropdown context menu | | input | Form text field | | label | Accessible form label | | navigation-menu | Site navigation with sub-menus | | progress | Progress indicator | | radio-group | Single-selection radio buttons | | scroll-area | Custom scrollbar container | | select | Dropdown selection input | | separator | Horizontal or vertical divider | | sidebar | Animated collapsible sidebar | | skeleton | Loading placeholder | | slider | Range input | | sonner | Toast notifications | | switch | On/off toggle | | table | Responsive table | | tabs | Tabbed content panels | | textarea | Multiline text input | | tooltip | Hover/focus info popup |

Requirements

Your project needs:

• React ≥ 18
• TailwindCSS v4
• TypeScript (recommended)
• @ path alias configured (src → @/)

Setting up the @ alias (Vite)

// vite.config.ts
import path from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: { '@': path.resolve(__dirname, './src') },
  },
})

// tsconfig.json / tsconfig.app.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  }
}

What init does

1. Creates src/lib/utils.ts with the cn() helper
2. Creates src/components/ui/ directory
3. Installs base dependencies: clsx tailwind-merge class-variance-authority framer-motion lucide-react

What add does

1. Validates the component name against the registry
2. Resolves transitive dependencies (e.g. alert-dialog automatically adds button)
3. Prompts before overwriting existing files
4. Writes .tsx files to src/components/ui/ (or your custom path)
5. Installs required npm packages

Local Development

# From the repo root
cd cli
npm install
npm run build

# Test the CLI locally
node dist/index.js init
node dist/index.js add accordion button
node dist/index.js list

# Or link globally for npx-style testing
npm link
alphaonedynamics add card

Publishing to npm

1. Update package.json:

   • Set "name" to your actual package name
   • Bump "version" as needed

2. Build the CLI:

   npm run build

3. Publish:

   npm publish --access public

4. Users can then run:

   npx your-package-name@latest init
   npx your-package-name@latest add button

Tech Stack

• Commander — argument parsing
• Chalk — colored terminal output
• Ora — terminal spinners
• Prompts — interactive confirmation prompts
• fs-extra — enhanced file system operations