Component Upload Guide

Uploading components to comp-hub takes just three steps: select folder, configure preview, and click publish.

Prerequisites

Before uploading, please ensure the component meets the following conditions:

1. Folder Format: Components must exist as folders, with the folder name being the component name
2. Entry File: An entry file is required — index.vue for Vue components, index.jsx / index.js / index.tsx for React components
3. Independently Runnable: Components should be self-contained, with dependencies imported via relative paths

Recommended directory structure:

MyComponent/           # Component name
├── index.vue         # Entry file (required)
├── README.md         # Component documentation (recommended)
├── comp.json         # Configuration file (auto-generated)
└── assets/           # Static resources (if any)
    └── logo.png

Upload Limits

The following limits apply when uploading components:

Limit	Description
Single File Size	Each file must not exceed 3MB. Compress large files (audio, video, high-res images) before uploading
Total Size	All component files combined must not exceed 10MB
File Count	Total number of files (including subdirectories) must not exceed 30

If you see a file size error during submission, check for oversized static assets and compress or remove them before retrying.

UI Framework Support

Component previews can run on Vue or React. All UI frameworks in either ecosystem can be used directly.

How the Framework Is Detected

You do not declare the framework anywhere. comp-hub detects it from the dependencies found in your component source:

• The component imports vue → treated as a Vue component
• The component imports react → treated as a React component
• A component that imports both vue and react → the framework cannot be determined, and the upload page cannot check or render it

Vue Components

For Vue components, add a main.js file in the component root directory and register the desired UI framework:

Vue 2

import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);

Vue 3

Note: Vue 3 does not export an app instance by default. Here, Vue.app is created internally by the tool and mounted on Vue. This differs from the official approach of calling createApp() yourself — simply use it directly.

import * as Vue from 'vue'
import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';

Vue.app.use(ArcoVue);

React Components

React components do not need a main.js file, and dependencies are not declared in comp.json — just import them in your component as usual:

import { Button, Card } from "antd";
import { LikeOutlined } from "@ant-design/icons";

export default function MyCard() {
  return <Card>Hello</Card>;
}

When you select the component folder on the upload page, comp-hub scans the import statements in your source files, resolves every dependency from your local project's node_modules, and pre-builds it for preview. This means:

• Every dependency used by the component must already be installed in the local project (npm install <pkg>); otherwise the preview reports a missing dependency
• Detected dependencies and their versions are listed in the Dependencies tab of the configuration area, where you can review them before publishing
• The entry file must have a default export; a component with only named exports fails with Component has no default export
• Both React 18 (react-dom/client) and React 17 (react-dom) are supported — the right rendering API is picked automatically

Naming Conventions

• Component names are unique within the same space (the public hub, or one team) and cannot duplicate existing names
• Only two formats are accepted: PascalCase (UserGrowthChart) or kebab-case (alipay-data-table)
• Not supported: underscores _, camelCase (myComponent), or names starting with a digit
• Prefix naming is recommended, e.g., company-business-domain-component-name: alipay-data-table

Duplicate Component Handling

The platform performs similarity detection on uploaded components. If judged as a duplicate component:

• Will not enter public lists such as "Recommended", "Popular", "Latest"
• Can only be viewed and managed in "My Components"
• Will appear in the recommended list of similar components
• Updates also do not enjoy recommendation weight

It is recommended to check if there are functionally similar components before uploading to avoid reinventing the wheel.

Upload Steps

1. Enter Upload Page

After starting comp-hub, click "Upload Component" in the left menu.

2. Select Component

• The left file tree displays the directory specified by dir in .comphub.json or .comphub.js
• Navigate to the component folder and select it
• Click "Select" to confirm

3. Configure Preview

The upload page is divided into upper and lower areas:

Upper Preview Area

• Real-time display of component rendering effects
• Supports refresh and background color switching

Lower Configuration Area

• Small Window Preview: Pick a file to render on the list page — by convention demo/index.vue (or the component entry itself)
• Full Screen Preview: Pick a file to render on the detail page — by convention demo/full.vue (recommended)
• Dependencies: Dependencies auto-detected from your source, with their local versions; review them here
• Remarks: Brief description of component function and applicable scenarios
• Additional Info: Detailed description, supports search keywords

Any file ending in .vue, .jsx, or .tsx inside the component folder can be selected as a preview file — the demo/ folder is a convention, not a requirement. For React components use .jsx / .tsx files.

4. Generate Configuration

Click the "Generate Configuration" button, and the system will automatically create a comp.json file containing:

{
  "__id__": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "name": "MyComponent",
  "version": "1.0.0"
}

comp.json contains exactly these three fields. The __id__ is filled in by the server after the first successful publish — do not edit it manually. Dependencies are detected from your source code, not from this file.

5. Publish Component

After confirming the configuration is correct, click the "Publish" button to complete the upload.

Minimal Example

Here is a simplest uploadable component:

<!-- MyButton/index.vue -->
<template>
  <button class="my-button" @click="handleClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    text: {
      type: String,
      default: 'Click Me'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
.my-button {
  padding: 8px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

Minimal React Example

// MyCard/index.jsx
import { Card } from "antd";

export default function MyCard({ title = "Hello" }) {
  return <Card>{title}</Card>;
}

antd must be installed in the local project; the default export is required.

Best Practices

• Write README: Detailed explanation of component usage, properties, events, and examples
• Provide Demo: Create a demo directory to showcase typical component usage
• Semantic Versioning: Follow the major.minor.patch specification
• Handle Dependencies: Third-party dependencies only need to be installed locally, no need to package into the component