Pittaya UI

A CLI for adding components to your project.

Usage

Use the init command to initialize dependencies for a new project.

The init command installs dependencies, adds the cn util, configures tailwind.config.js, and CSS variables for the project.

npx pittaya init

add

Use the add command to add components to your project.

The add command adds a component to your project and installs all required dependencies.

 npx pittaya add [component]

Example

npx pittaya add orbit-images

You can also run the command without any arguments to view a list of all available components:

npx pittaya add

diff

Use the diff command to check for component updates.

The diff command compares your installed components with the registry and shows which ones have updates available.

npx pittaya diff [component]

Example

# Check specific components
npx pittaya diff button orbit-images

# Check all installed components
npx pittaya diff --all

# Interactive mode
npx pittaya diff

update

Use the update command to update components to the latest version.

The update command updates your installed components to match the registry version.

npx pittaya update [component]

Example

# Update specific component
npx pittaya update button

# Update all components
npx pittaya update --all --yes

# Force update (even if no changes detected)
npx pittaya update button --force

list

Use the list command to view all available and installed components.

The list command shows all components from the registry organized by category with installation status.

npx pittaya list

Example

# List all components
npx pittaya list

# List only installed components
npx pittaya list --installed

# List only available components
npx pittaya list --available

# JSON output for programmatic use
npx pittaya list --json

debug

Use the debug command to diagnose component installation issues.

The debug command helps identify why a component is not being detected as installed, showing expected file paths and actual file locations.

npx pittaya debug --component [component]

Example

# Debug general project setup
npx pittaya debug

# Debug specific component
npx pittaya debug --component installation-section

What it shows:

• Project structure detection (src/ vs root)
• Resolved alias paths
• Expected file locations
• Actual file existence
• Installation status
• Similar files found (helps identify naming mismatches)

Common issues it helps diagnose:

• File name mismatches (e.g., InstallationSection.tsx vs installation-section.tsx)
• Wrong directory structure (e.g., missing src/ folder)
• Incorrect components.json aliases
• Components installed in unexpected locations

Documentation

Visit https://pittaya-ui.vercel.app to view the documentation.

Additional Resources

• Roadmap - 🗺️ Future plans and completed features
• Changelog - Version history and changes
• Contributing Guide - How to contribute
• ADRs - Architectural decisions

Contributors

License

Licensed under the MIT license.