Block Kit

A clean and consistent UI framework for Slack apps

Customize the order and appearance of information and guide users through your app's capabilities by composing, updating, sequencing, and stacking blocks — reusable components that work almost everywhere in Slack.

Block basics

Building blocks

Blocks are visual components that can be stacked and arranged to create app layouts.

Read our guide to learn how you can construct stacks of blocks and add them to your app's surfaces.

Interactivity in blocks

Use special components to inject an app with interactivity.

Read our overview to get a quick taster of the interactive components available, and pointers on how to integrate interactivity into your app.

Build and prototype visually

Shuffle and stack blocks to quickly prototype layouts in Slack. When you're ready, we'll provide the payload so all you have to do is copy and paste it into your app's code.

Design layouts with Block Kit Builder. Or save time designing your app by starting with one of our templates.

Reference guides: Blocks

Actions

A block that is used to hold multiple interactive elements.

Context

Used for contextual info, which can include both images and text.

Divider

A content divider used to visually separate pieces of info inside of a message.

File

Used with remote files to display info about the attached files.

Header

A larger-sized text block used as a header.

Image

A simple image block, designed to make those cat photos really pop.

Input

A block that collects information from users in a multitude of ways.

Section

Display text or combine text with interactive elements and images.

Video

A block that displays an embedded video player.

Reference guides: Block elements

Button

A button that can be a trigger for anything from opening a simple link to starting a complex workflow.

Checkboxes

A checkbox group that allows a user to choose multiple items from a list of possible options.

Date picker

An element which lets users easily select a date from a calendar style UI.

Image

An element to insert an image as part of a larger block of content.

Multi-select menu

A multi-select menu allows a user to select multiple items from a list of options.

Overflow menu

A cross between a button and a select menu - a button that shows a list of options when clicked.

Plain-text input

Creates a single or multi-line field where a user can enter freeform text data.

Radio button group

A radio button group that allows a user to choose one item from a list of possible options.

Select menus

Creates a drop down menu with a list of options for a user to choose.

Reference guides: Composition objects

Text

Defines text for many different blocks and elements.

Confirmation dialog

Provides a dialog that adds a confirmation step to interactive elements.

Option

Represents a single item in a number of item selection elements.

Option group

Used to group option objects in select menus.

Conversation filters

Provides a way to filter the list of options in conversation selector menus.

Related reference guides

block_actions payloads

A block actions payload is received when a user interacts with a Block Kit interactive component.

Defining views

Views are used to define modals and Home tabs layouts, using blocks as the visual components.

Upgrading from dialogs to modals

Learn how to replace legacy dialogs with Block Kit enriched modals.