Building with Block Kit

The Block Kit UI framework is built with blocks. Apps can add blocks to surfaces like the Home tab, messages and modals.

Blocks are visual components that can be stacked and arranged to create app layouts. Block Kit can make your app's communication clearer while also giving you consistent opportunity to interact with and assist users.

Whether you're composing layouts for modals, messages, or tabs, the essential Block Kit building experience is the same β€” your app will be sculpting specially-structured JSON to express itself.

Eager to see Block Kit in action? Take a peek in Block Kit Builder.

Read on to learn how you can construct the stacks of blocks that app surfaces love to consume.


Where to use blocks

Blocks are used within all app surfaces β€” Home tabs, messages and modals can all be designed using blocks.

Each of them uses a blocks array that you prepare by stacking individual blocks together β€” read on to find out more.

Goto our app surfaces section to learn more about using these different surfaces, and how to add blocks to your app's Home tab, messages, and modals.

Some blocks can only be used in particular app surfaces. Read the Block Kit reference guides to check if a block is compatible with your app's surfaces.


Building blocks

There's no special setup needed to start using blocks in app surfaces. However just as when you open a pack of generic, colorful, interlocking plastic bricks, you should read the instructions first.

Defining a single block

Each block is represented in our APIs as a JSON object. Here's an example of a simple section block:

{
  "type": "section",
  "text": {
    "type": "mrkdwn",
    "text": "New Paid Time Off request from <example.com|Fred Enriquez>\n\n<https://example.com|View request>"
  }
}

Preview

Every block contains a type field β€”Β specifying which of the available blocks to use β€” along with other fields that describe the content of the block.

Block Kit Builder is a visual prototyping sandbox that will let you choose from, configure, and preview all the available blocks.

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

Stacking multiple blocks

Individual blocks can be stacked together to create complex visual layouts.

When you've chosen each of the blocks you want in your layout, simply place each of them in an array, in visual order, like this:

[
	{
		"type": "header",
		"text": {
			"type": "plain_text",
			"text": "New request"
		}
	},
	{
		"type": "section",
		"fields": [
			{
				"type": "mrkdwn",
				"text": "*Type:*\nPaid Time Off"
			},
			{
				"type": "mrkdwn",
				"text": "*Created by:*\n<example.com|Fred Enriquez>"
			}
		]
	},
	{
		"type": "section",
		"fields": [
			{
				"type": "mrkdwn",
				"text": "*When:*\nAug 10 - Aug 13"
			}
		]
	},
	{
		"type": "section",
		"text": {
			"type": "mrkdwn",
			"text": "<https://example.com|View request>"
		}
	}
]

Preview

Block Kit Builder will allow you to drag, drop, and rearrange blocks to design and preview Block Kit layouts.

Alternatively you can use the block reference guide to manually generate a complete blocks array, like the one shown above.

Your newly created array of blocks can be used with a range of different app surfaces.


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.

Was this page helpful?