> For the complete documentation index, see [llms.txt](https://docs.qore.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.qore.dev/component/custom-component.md).

# Custom Component

With this custom component, it allows editors to add script code with output components that can be used in the app editor. You can follow these steps to create a custom component.

This provides a starter template for building custom qore app compoent using Rollup and TypeScript.

### Setup a new project

To use this package, run the following command in your terminal:

```
npm init qore-app-component [component name]
```

This will create a new directory with the specified package name and install all necessary dependencies.

### Development

Start edit your component in `src/[componentName].tsx`, all qore apps api are available via props with more api added viw import from `@qorebase/app-component` package. If you're using third party package, make sure the package supports schema script module, if not, that package will be bundled by rollup.

### Usage

To build the package, run the following command:

```
npm run build
```

This will compile the TypeScript code and bundle the source and commonjs packages with Rollup.

### Publish

To publish the package, run the following command to bump the version:

```
npm version [major|minor|patch|prerelease]
```

This will bump the version in `package.json` and `package-lock.json` and create a new commit and tag.

Then, run the following command to publish the package:

```
npm publish
```

###