---
title: "Rocket Chat Apps-Engine UI Guide"
slug: "apps-engine-user-interface"
description: "Explore the Apps-Engine UI in Rocket Chat. Build secure, user-friendly extensions to enhance collaboration."
updated: 2025-07-22T14:06:09Z
published: 2025-07-22T14:06:09Z
canonical: "developer.rocket.chat/apps-engine-user-interface"
---

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

# Apps-Engine User Interface

Along with using slash commands and handling events, another way to extend an app's functionality is to add user interactions, such as buttons or menus, to perform some action. In this section, we will look at each UI component and examples demonstrating how to use them for your apps.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Building blocks.svg)

**Building blocks**

Apps-Engine’s [UIKit](https://rocketchat.github.io/Rocket.Chat.Apps-engine/modules/uikit.html) consists of visual blocks used to create layouts. Explore the available blocks and how you can incorporate them into your apps. The components adhere to the Rocket.Chat design specifications, so your app does not break the UX continuity for users.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Interactions in blocks.svg)

**Interactions in blocks**

The visual components can be displayed based on [user or system interactions](/v1/docs/ui-examples). Learn how to handle interactions for optimal user experience. Most interactions can also be responsive to mobile devices, without additional coding.

---

Explore the following guides to learn about the blocks.

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Surfaces.svg) **Surfaces**

[**Messages**](/v1/docs/surfaces#messages)

Send messages, other elements, and interactive blocks.

[**Contextual bars**](/v1/docs/surfaces#contextual-bars)

Sidebars display contextual information and interactions.

[**Modals**](/v1/docs/surfaces#modals)

Pop-up windows display notifications or interactions.

---

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Blocks.svg) **Blocks**

[**Section**](/v1/docs/blocks#section)

Display text and other components.

[**Divider**](/v1/docs/blocks#divider)

Visually separate components with a horizontal line.

[**Image**](/v1/docs/blocks#image)

Display images.

[**Actions**](/v1/docs/blocks#actions)

Use interactive elements such as buttons, checkboxes, and more.

[**Context**](/v1/docs/blocks#context)

Display contextual information and other blocks.

[**Input**](/v1/docs/blocks#input)

Get information from users with input blocks.

[**Preview**](/v1/docs/blocks#preview)

Share short notices with users in rooms.

[**Callout**](/v1/docs/blocks#callout)

Draw attention to important information.

[**Tab navigation**](/v1/docs/blocks#tab-navigation)

Display different information in the same space using tabs.

[**Conditional block**](/v1/docs/blocks#conditional-block)

Display blocks based on the client used.

---

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Block elements.svg) **Block elements**

[**Button**](/v1/docs/block-elements#button)

Direct the user to take certain actions.

[**Image**](/v1/docs/block-elements#image)

Display images as part of a block.

[**Overflow menu**](/v1/docs/block-elements#overflow-menu)

Display a button that users can click to view a list of options.

[**Plain text input**](/v1/docs/block-elements#plain-text-input)

Allow users to enter text information.

[**Static select menu**](/v1/docs/block-elements#static-select-menu)

Allow users to select an option from a drop-down menu.

[**Radio button**](/v1/docs/block-elements#radio-button)

Allow users to select one option from a list.

---

![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Objects.svg) **Objects**

[**Text object**](/v1/docs/objects#text-object)

Define the text to be displayed.

[**Options object**](/v1/docs/objects#options-object)

Indicates one option in a list of selection options for menus.