---
title: Blocks overview
description: What a block is, how block_id works, and every block type @nkootstra/block-kit renders.
---

A block is one visual unit of a Slack surface: a message, modal, or App Home. Slack composes a
`blocks` array of these JSON objects, and `@nkootstra/block-kit` renders that same array as React,
pixel-for-pixel like Slack.

Every block accepts an optional `block_id`: a string up to 255 characters that identifies the
block. Slack auto-generates one if you omit it, but you should set your own when an interactive
element inside the block needs a stable id to key off in `onAction` handlers, or when you're
updating a specific block later with `chat.update`. `block_id` must be unique within a `blocks`
array.

<Preview
  payload={{
    blocks: [
      {
        type: "section",
        block_id: "welcome",
        text: { type: "mrkdwn", text: "Hello, *Ada*. This is a `section` block." },
      },
      { type: "divider" },
      {
        type: "context",
        block_id: "meta",
        elements: [{ type: "mrkdwn", text: "Posted by <@U0ADA>" }],
      },
    ],
  }}
/>

## Layout & text

**[Section](/blocks/section)**

Text with an optional accessory element, or up to 10 side-by-side fields.

**[Header](/blocks/header)**

A single line of large, bold plain text.

**[Divider](/blocks/divider)**

A horizontal rule that separates blocks.

**[Context](/blocks/context)**

Small, muted text and images for metadata.

**[Context actions](/blocks/context-actions)**

A context row with interactive controls, like feedback buttons.

**[Rich text](/blocks/rich-text)**

Slack's structured rich text: lists, quotes, code, styled spans, and more.

**[Markdown](/blocks/markdown)**

Raw markdown rendered with Slack's mrkdwn-compatible parser.

## Media

**[Image](/blocks/image)**

A single full-width image, with an optional title.

**[Video](/blocks/video)**

An embedded, playable video with a thumbnail and description.

**[File](/blocks/file)**

A Slack file attachment, shown as a preview card.

## Input

**[Actions](/blocks/actions)**

A row of up to 25 interactive elements, like buttons and selects.

**[Input](/blocks/input)**

A labeled form field for modals and App Home, with optional hint text.

## Data

**[Table](/blocks/table)**

A simple grid of rows and columns.

**[Data table](/blocks/data-table)**

A sortable, paginated table for larger datasets.

**[Data visualization](/blocks/data-visualization)**

Bar, line, area, and pie charts.

## Agents & AI

**[Callout](/blocks/callout)**

A highlighted banner for a status or a tip.

**[Alert](/blocks/alert)**

An inline warning, error, info, or success message.

**[Contact card](/blocks/contact-card)**

A person or team's contact details, laid out as a card.

**[Plan](/blocks/plan)**

A step-by-step agent plan with status per step.

**[Task card](/blocks/task-card)**

A single task with status, assignee, and actions.

## Containers

**[Container](/blocks/container)**

Groups blocks together with a shared border and background.

**[Card](/blocks/card)**

A bordered card with a header, image, body, and actions.

**[Carousel](/blocks/carousel)**

A horizontally scrollable row of cards.

**[Condition](/blocks/condition)**

Renders different blocks depending on the client surface.

**[Fallback canary](/blocks/fallback-canary)**

What renders when a block type isn't recognized.