> For the complete documentation index, see [llms.txt](https://docs.lowcoder.cloud/lowcoder-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/opensource-contribution/develop-ui-components-for-apps.md).

# Develop UI components for Apps

With Lowcoder plugins, you can develop customized components that are consistent with native components for your specific scenarios.

## Initialization

Execute the following `yarn start` file:

```bash
# Project initiation
yarn create lowcoder-plugin my-plugin

# Go to the project root
cd my-plugin

# Start the development environment
yarn start
```

## Component development environment

After executing `yarn start`, the browser is automatically opened and you enter the component development environment.

## Plugin configurations

In `Lowcoder` field in `package.json` file, you need to define the component properties. For example, the following is the explanation of several fields:

* `comps` defines UI components contained in the plugin. For each component, the key name of the object is the unique identity, and the value is metadata.
* `comps[someCompKey].name` defines the component name shown in the **Insert** tab.
* `comps[someCompKey].icon` defines the component icon shown on the canvas. Use a relative path to where `package.json` file is located.
* `comps[someCompKey].layoutInfo` defines the component layout:
  * w: width of the component. Counted by the number of grid cells (range: 1 - 24).
  * h: height of the component. Counted by the number of grid cells (range: >= 1).

```bash
  "Lowcoder": {
    "description": "",
    "comps": {
      "hello_world": {
        "name": "Hello World",
        "icon": "./icons/hello_world.png",
        "layoutInfo": {
          "w": 12,
          "h": 5
        }
      },
      "counter": {
        "name": "Counter",
        "icon": "./icons/hello_world.png"
      }
    }
  }
```

## Export components

To export all the components, use `src/index.ts`, for example:

```bash
import HelloWorldComp from "./HelloWorldComp";

export default {
  hello_world: HelloWorldComp,
};
```

The default exported object `key` needs to be consistent with the `key` configured in `comps` in `package.json` file.

## Publish plugins

When you finish developing and testing the plugin, you can publish it into the npm registry. Login in to the npm registry locally, and then execute the following command:

```
yarn build --publish
```

If you do not specify the parameter `--publish`, the `tar` file will be saved in the root folder.

## Import plugins

In the Lowcoder app, click **Insert** > **Extensions** > **Add npm plugin** in the right pane. 

Input your npm package's URL or name, and then you can use your customized components.

```bash
my-plugin

# or

https://www.npmjs.com/package/my-plugin
```

## Code demo

For code demo, refer to Lowcoder Github.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/opensource-contribution/develop-ui-components-for-apps.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.