Sparks UI

A component installation CLI. Sparks UI allows you to easily add pre-built components to your project.

Installation

# Install globally
npm install -g sparks-ui

# Or use with npx
npx sparks-ui <command>

Usage

Initialize a project

npx sparks-ui init

This will guide you through setting up your project with Sparks UI. You'll be asked about your preferred:

• Components directory
• Utils directory
• Framework (React, Vue, etc.)
• Styling method (Tailwind, CSS, etc.)
• TypeScript usage

Add a component

npx sparks-ui add <component-id>

or

npx sparks-ui add https://sparks-dev-api-547bb48bc25a.herokuapp.com/components/button

This will fetch the component from the registry and install it into your project.

List available components

npx sparks-ui list

To filter by category:

npx sparks-ui list --category ui

Component Registry

Components are hosted at https://sparks-dev-api-547bb48bc25a.herokuapp.com/components. Each component has:

• Metadata (JSON)
• Source files
• Documentation
• Usage examples

Creating Your Own Components

You can create your own components and host them on your own registry. The component metadata format is:

{
  "id": "component-id",
  "name": "Component Name",
  "version": "1.0.0",
  "description": "Component description",
  "author": "Your Name",
  "documentation": "URL to documentation",
  "category": "ui",
  "dependencies": {
    "npm": {
      "package-name": "^version"
    }
  },
  "files": [
    {
      "path": "components/component-id/file.tsx",
      "url": "URL to file content"
    },
    {
      "path": "utils/utils.ts",
      "url": "URL to utility file"
    }
  ],
  "usage": "Example usage code",
  "postInstall": "Post-installation instructions"
}

Development

Project Structure

/src
  /cli             - CLI commands and entry point
  /core            - Core functionality
  /mock-registry   - Mock registry server for testing
  /templates
    /components    - Component templates
    /utils         - Utility files
    /metadata      - Component metadata

Building

npm run build

Testing

# Start the mock registry server
npm run mock-server

# In another terminal
npm run dev init
npm run dev add button

License

MIT