> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Component

> Describes the coverage of YiDA custom component capabilities across editions and the overall development path. When official components cannot meet your needs, develop dedicated React components.

| Feature          | Free plan     | Basic edition | Professional edition | Dedicated edition |
| :--------------- | :------------ | :------------ | :------------------- | :---------------- |
| Custom component | Not supported | Not supported | Supported            | Supported         |

<Note>
  Developing custom components requires a certain development background. This feature is intended for developers, ISV service providers, and senior business experts.
</Note>

## Overview

### Introduction to Custom Components

The custom component feature lets customers build their own components, improving the fit between components and business needs while reducing development and maintenance costs and increasing component reusability.

### Use Cases

When standard YiDA components cannot meet the business needs of your app development, you can build a component tailored to your business scenario based on the practices or requirements of your industry. Custom components can be shared within the same organization, making it easy to reuse related components when you later develop apps of the same type.

### Component Composition

A component consists of a view and attributes. On the consumer side, you can change the attributes of a component to display different views.
The view can be further divided into a design view and a runtime view. In most cases, the design view and runtime view can be reused.

On the producer side, you must build the component's view and attributes separately.

## Import Custom Component Schema

In the examples section, we provide multiple [custom component examples](/yida/form/zas20t). To import the Schema from an example into your own custom component and use it in your business, follow the steps below:

### Step 1: Create a Custom Component

Follow [this document](/open/yida/guide/customComponent/start#step-1-create-a-custom-component) to create a custom component into which you will import the example Schema.

### Step 2: Open the YiDA Schema Workbench and Import the Schema

Enter the custom component designer, open the Schema workbench as described in [this document](/open/yida/guide/concept/debug#enable-schema-workbench-schema-importexport), copy the custom component's Schema into the Schema workbench, and click Import Schema.

### Step 3: Install and Use

The custom component is now ready. Next, follow [this document](/open/yida/guide/customComponent/start#step-3-install-the-custom-component) to install and use the custom component.

## Appendix

### Component Types

YiDA custom components come in two types: **Regular Component** and **Form Component**. The core differences are:

1. Regular components are typically used for display purposes and do not support data storage. Examples include the existing "Image & Text Display" and "Group" components.
2. Form components can submit data. Form components are more complex to develop than regular components and require additional metadata configuration.
3. Form components are not yet available. Stay tuned.

### Component Installation Types

YiDA offers the following [page types](/yida/intro/poq66i): regular form page, workflow form page, report page, DataV dashboard, custom page, and external link.
YiDA custom components currently support three of these: regular form page, workflow form page, and custom page.
After you select the corresponding page type during installation, the installed component appears in the matching page designer.

### Component Version Description

YiDA custom components have two version types: **Development Version** and **Official Version**.
On top of [semantic versioning](https://semver.org/lang/zh-CN/), we have added the following conventions.

1. 0.1.0 is the default development version. The development version stays in real-time sync with the component designer and is used for debugging.
2. 1.x.x is the official version released to production. It locks the features of the current version to ensure the component's stability in production. **Therefore, always install a released 1.x.x official version for production apps.**