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

# Component

You can create new components in app/component

## `Decorator`

<table><thead><tr><th>parameter</th><th>type</th><th data-type="checkbox">required</th></tr></thead><tbody><tr><td>id</td><td>string</td><td>true</td></tr><tr><td>type</td><td><a href="#decorator">ComponentType</a></td><td>true</td></tr></tbody></table>

```typescript
type ComponentType = "modal" | "button" | "select" | "text-input";
```

## `Template`

```typescript
import { Client } from "discord.js";
import { Component, Automatic } from "engine";

@Component("my_select_menu", "select")
export default class MySelectMenuComponent {
	public static async callback(client: Client, interaction: Automatic<"select">) {
		const selectedValue = interaction.values[0];
		await interaction.reply(`You selected ${selectedValue}!`);
	}
}
```

## `Automatic types`

{% hint style="info" %}
You can use `Automatic<T>` instead of `any`
{% endhint %}

```typescript
interaction: Automatic<"select"> // all types from ComponentType are available
```

Is the same with

```typescript
interaction: StringSelectMenuInteraction
```