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

Holds multiple interactive elements.

Context

Provides contextual info, which can include both images and text.

Divider

Visually separates pieces of info inside of a message.

File

Displays info about remote files.

Header

Displays a larger-sized text block.

Image

Displays an image.

Input

Collects information from users via block elements.

Rich text

A block for formatted, structured text

Section

Displays text, possibly alongside block elements.

Video

Displays an embedded video player.

Reference guides: Block elements

Button

Allows users a direct path to performing basic actions.

Checkboxes

Allows users to choose multiple items from a list of options.

Date picker

Allows users to select a date from a calendar style UI.

Datetime picker

Allows users to select both a date and a time of day.

Email input

Allows user to enter an email into a single-line field.

File input

Allows user to upload files.

Image

Displays an image as part of a larger block of content.

Multi-select menu

Allows users to select multiple items from a list of options.

Number input

Allows user to enter a number into a single-line field.

Overflow menu

Allows users to press a button to view a list of options.

Plain-text input

Allows users to enter freeform text data into a single-line or multi-line field.

Radio buttons

Allows users to choose one item from a list of possible options.

Select menu

Allows users to choose an option from a drop down menu.

Time picker

Allows users to enter numerical data into a single-line field.

URL input

Allows user to enter a URL into a single-line field.

Workflow button

Allows users to run a link trigger with customizable inputs.

Reference guides: Composition objects

Confirmation dialog object

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

Conversations filter object

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

Dispatch action configuration object

Defines when a plain-text input element will return a block_actions interaction payload.

Option object

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

Option group object

Used to group option objects in select menus.

Text object

Defines text for many different blocks and elements.

Trigger object

Defines an object containing trigger information.

Workflow object

Defines an object containing workflow information.

Slack file object

Defines an object containing Slack file information to be used in an image block or image element.

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.