@praxys/ui

CLI for scaffolding Praxys UI components into your React project.

Install

No global install needed — use npx:

npx @praxys/ui init

Or install globally:

npm i -g @praxys/ui

Setup

npx @praxys/ui init

This will:

1. Detect your package manager (npm, pnpm, yarn, bun)
2. Install core dependencies (clsx, tailwind-merge, framer-motion)
3. Create lib/utils.ts with the cn() helper
4. Write praxys.config.json for directory defaults

Adding Components

# Interactive picker — browse and select from categories
npx @praxys/ui add

# Add by name
npx @praxys/ui add animated-button

# Add multiple at once
npx @praxys/ui add accordion alert badge tooltip

# Add all 139 components
npx @praxys/ui add all

# Add and install dependencies
npx @praxys/ui add floating-menu --install-deps

Browsing Components

# List all components (grouped by category)
npx @praxys/ui list

# Filter by category
npx @praxys/ui list --category buttons

# Show only new components
npx @praxys/ui list --new

# Search by name or description
npx @praxys/ui list --search modal

# Show only installed components
npx @praxys/ui list --installed

# Component details
npx @praxys/ui info animated-button

Output:

  Animated Button
  Category: buttons
  Dependencies: framer-motion, clsx, tailwind-merge
  A button with a shiny border sweep and text reveal effect.
  Docs: https://ui.praxys.xyz/components/animated-button

Inspecting & Comparing

# View source with syntax highlighting
npx @praxys/ui view switch

# Compare local file with latest version
npx @praxys/ui diff accordion

Managing Components

# Remove a component
npx @praxys/ui remove alert
npx @praxys/ui rm alert --yes    # skip confirmation

# Update all installed components
npx @praxys/ui update

# Update a specific component
npx @praxys/ui update accordion

# Check for updates without writing
npx @praxys/ui update --check

Diagnostics

# Check project setup
npx @praxys/ui doctor

  ✓ praxys.config.json found
  ✓ Components directory exists (components/ui)
  ✓ Utils file exists (lib/utils.ts)
  ✓ Package manager: pnpm
  ✓ clsx installed (^2.1.1)
  ✓ tailwind-merge installed (^2.6.0)
  ✓ framer-motion installed (^12.0.0)
  ✓ 12/139 components installed

  All checks passed!

# Installed vs available breakdown
npx @praxys/ui stats

  Category        Installed   Available
  ────────────────────────────────────────
  buttons            5/17     █████░░░░░░░░░░░░
  cards              3/10     ███░░░░░░░
  text               2/8      ██░░░░░░
  navigation         2/18     ██░░░░░░░░░░░░░░░░
  visual             0/12     ░░░░░░░░░░░░
  media              0/6      ░░░░░░
  ────────────────────────────────────────
  Total             12/139

  Coverage: 17% of components installed

Commands Reference

| Command | Alias | Description | |---------|-------|-------------| | init | i | Initialize project — deps, utils, config | | add [components...] | | Add components (interactive picker if no args) | | list | ls | List components with filters | | info <component> | | Show component metadata | | view <component> | | View source with syntax highlighting | | diff <component> | | Compare local vs remote | | remove <component> | rm | Remove a component file | | update [component] | | Update installed components | | doctor | | Check project health | | stats | | Installed vs available dashboard |

Global Options

| Flag | Commands | Description | |------|----------|-------------| | -d, --dir <path> | add, list, diff, remove, update, stats | Override component directory | | -y, --yes | add, remove | Skip confirmation prompts | | --install-deps | add | Install component dependencies | | -c, --category <cat> | list | Filter by category | | -n, --new | list | Show only new components | | -s, --search <query> | list | Search by name/description | | --installed | list | Show only installed components | | --check | update | Dry-run — report changes only |

Config File

After init, a praxys.config.json is created:

{
  "componentsDir": "components/ui",
  "utilsDir": "lib"
}

All commands read this file for directory defaults. You can override per-command with --dir.

Components

139 components across 6 categories:

• Buttons (24) — Animated Button, Checkbox, Color Picker, Date Picker, File Upload, OTP Input, Rating, Slider, Switch, and more
• Cards (19) — Data Table, Glow Border Card, Spotlight Card, Stats Card, Timeline, and more
• Text (20) — Flip Text, Morphing Text, Typewriter Text, 3D Displacement Text, and more
• Navigation (25) — Accordion, Command Menu, Glass Dock, Combobox, Autocomplete, Floating Menu, and more
• Visual (40) — Liquid Ocean, Gradient Mesh, Parallax Scroll, Toast Notification, and more
• Media (10) — Animated Hero, Interactive Book, Image Comparison, and more

Browse all components at ui.praxys.xyz/components.

License

MIT