Go to Slack

Building blocks

The Block Kit UI framework is built with blocks and blocks are made of elements. Apps can mount blocks on surfaces and views, like messages and modals. Blocks can make your app's communication clearer and more visual while also giving you consistent opportunity to interact with and assist users.

Whether you're building for modals or for messages, the essential Block Kit building experience is the same. You app will be sculpting specially-structured JSON to express itself.

A complex message layout that uses blocks

Eager to see Block Kit in action?

Try Block Kit Builder

Getting started with blocks

We tricked you with this section header! There's no special setup needed to start using blocks. But just like when you open a new pack of generic, colorful, interlocking plastic bricks (😉), you might want to follow the instructions first.

Building blocks

{
  "type": "section",
  "text": {
    "type": "mrkdwn",
    "text": "A message *with some bold text* and _some italicized text_."
  }
}

View this example

The JSON here describes a simple text section block, and highlights the general structure of blocks - each contains a type to choose which of the different blocks to use, and then a series of fields that describe what is included in the block.

You can also see how the mrkdwn formatting that we've covered before can be included inside of the text objects in a block.

A stack of blocks

Blocks are stacked together within a JSON array in visual order, like this:

[
    {
        "type": "section",
        "text": {
            "type": "mrkdwn",
            "text": "Danny Torrence left the following review for your property:"
        }
    },
    {
        "type": "section",
        "block_id": "section567",
        "text": {
            "type": "mrkdwn",
            "text": "<https://example.com|Overlook Hotel> \n :star: \n Doors had too many axe holes, guest in room 237 was far too rowdy, whole place felt stuck in the 1920s."
        },
        "accessory": {
            "type": "image",
            "image_url": "https://is5-ssl.mzstatic.com/image/thumb/Purple3/v4/d3/72/5c/d3725c8f-c642-5d69-1904-aa36e4297885/source/256x256bb.jpg",
            "alt_text": "Haunted hotel image"
        }
    },
    {
        "type": "section",
        "block_id": "section789",
        "fields": [
            {
                "type": "mrkdwn",
                "text": "*Average Rating*\n1.0"
            }
        ]
    }
]

View this example

You can include up to 50 blocks in a message.

You'll use the array of blocks later on in this guide. First let's see how to pick out the blocks you want to add to the stack.

Choosing blocks

Slack provides a long list of blocks to choose from: some contain static content, some provide interactive components, and all can be stacked together to create the Empire State Building of messages.

After emptying that metaphorical box of blocks onto the floor, you could go ahead and start putting them together by editing the raw JSON. However, we have something to help you plan out the message masterpiece you want.

The builder tool is a visual prototyping sandbox that will let you pick and choose and from all available blocks, and stack them together in the way you want.

If you want to skip the builder, the layout blocks reference guide contains the specifications of every block, and the JSON fields required for each of them.


Sending blocks to surfaces

Want to use these blocks? You need to put them in a surface.

Our [messaging documentation](/messaging/composing/layouts(#sending_messages) covers sending blocks to messages using incoming webhooks, chat.postMessage, and a handful of other tricks.

To learn how to mount blocks to a modal, check out our modal surface docs.


Making things interactive

Blocks can be made to all kinds of things with buttons, input, and sequencing. Learn how to build interactive experiences for messages, modals, and more.


Reference

With so many fields, attributes, elements, foxes, and socks, you'll definitely want to consult our field guide references for everything blocks.