Components — djs-core

Components in djs-core are reusable interaction elements that can be used within command or context menu responses. Unlike interactions (commands and context menus), components are not standalone - they enhance interactions by providing interactive UI elements.

What are Components?

Components are interactive UI elements that allow users to interact with your bot through buttons, forms, and select menus. They’re created as reusable modules that can be imported and used across multiple commands or context menus.

Components help keep your code organized and DRY (Don’t Repeat Yourself) by allowing you to define interaction logic once and reuse it throughout your bot.

Components are perfect for creating reusable UI elements. For example, a “Confirm” button can be used across multiple commands without duplicating code. Just import it and use it wherever needed!

File-based routing

Buttons, modals, and select menus under src/components/ get a customId from their file path. Nested folders use dot notation — same idea as slash commands.

File path	`customId`
`src/components/buttons/confirm.ts`	`confirm`
`src/components/modals/feedback.ts`	`feedback`
`src/components/selects/string/pick-color.ts`	`string.pick-color`

You do not call .setCustomId() inside handler files. djs-core sets it when the component is loaded.

Pass per-use context with .withData<T>() on the component and .setData() when sending it in a reply.

Types of Components

Buttons

Interactive buttons that users can click to trigger actions. Buttons support custom styles, emojis, and can store custom data.

Learn more in the Buttons guide.

Modals

Form-like dialogs that collect text input from users. Modals can have up to 5 text input fields and are commonly opened from buttons.

Learn more in the Modals guide.

Modals must be opened from a button or other interaction - they cannot be sent directly in messages. Perfect for forms and data collection.

Select Menus

Dropdown menus for picking options. djs-core supports string, user, role, channel, and mentionable variants.

Learn more in the Select Menus guide.

When to Use Components

Components enhance your interactions by providing interactive UI elements. Here’s when to use each type:

Buttons: Use for simple actions, confirmations, navigation, or opening modals. Great for interactive responses.
Modals: Use for collecting structured text input from users. Perfect for forms, registration, or multi-field data entry.
String Select Menus: Use when you have a fixed list of text options. Great for settings, categories, or predefined choices.
User/Role/Channel/Mentionable Select Menus: Use when you need dynamic Discord element selection. Perfect for tagging, permissions, or server-specific selections.