Download & Use

This page explains how to reference and run a component correctly once it is in your local project.

Two entry points for downloading

From the component market

1. Find the target component in the list.
2. Click "Download" on the card.
3. In the file picker, navigate to your project's component directory (for example src/components).
4. Click "Select Folder" to confirm.

From the preview page

1. Open the component detail page.
2. Click "Download" in the bottom right corner.
3. Choose where to save it.

Once the download finishes, the component appears as a folder inside the directory you chose.

Directory structure after download

MyComponent/
├── index.vue          # Entry file (extension differs per framework)
├── README.md          # Usage documentation
├── comp.json          # Component metadata generated by the platform
├── demo/              # Preview examples (if the author provided them)
│   ├── index.vue
│   └── full.vue
└── assets/            # Resources shipped with the component (if any)

comp.json contains only three fields — __id__, name and version — and identifies the component. Do not put dependencies in it; dependencies are determined by the import statements in the source.

Reference it in your project

Vue 3

<template>
  <MyComponent title="Example" :data="rows" />
</template>

<script setup>
import MyComponent from "@/components/MyComponent/index.vue";
</script>

Vue 2

import MyComponent from "@/components/MyComponent/index.vue";

export default {
  components: { MyComponent }
};

React

import MyComponent from "@/components/MyComponent/index.jsx";

export default function Demo() {
  return <MyComponent title="Example" />;
}

The component entry must have a default export. With named exports only, both preview and import fail.

Install dependencies

Third-party packages used by a component are not bundled with it, so install them in your project:

npm install echarts

The version does not have to match the author's exactly — the platform performs dependency matching during preview; once downloaded, running uses your project's version. You can find the dependency list in the README or in the dependency area of the preview page.

FAQ

The component does not render

Check in order: whether the framework matches (Vue 2 / Vue 3 / React), whether the dependencies are installed, and what the first console error says. Most cases are a missing dependency or a version that crossed a major release.

Styles conflict with the project

Components should use scoped styles. If you really need to override internal styles, use :deep() instead of writing global selectors.

comp.json is missing after download

That means you downloaded an old artifact or dropped the file while copying manually. Download again; a missing comp.json prevents the component from being identified during later updates.

I want to modify the component and publish it

See Update & Versioning.

Next steps

• Want to write a component yourself: Component Spec
• Want to send your improved version back to the platform: Upload & Publish