Blocks overview
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.
section block.Layout & text
Section
Text with an optional accessory element, or up to 10 side-by-side fields.
Header
A single line of large, bold plain text.
Divider
A horizontal rule that separates blocks.
Context
Small, muted text and images for metadata.
Context actions
A context row with interactive controls, like feedback buttons.
Rich text
Slack’s structured rich text: lists, quotes, code, styled spans, and more.
Markdown
Raw markdown rendered with Slack’s mrkdwn-compatible parser.
Media
Image
A single full-width image, with an optional title.
Video
An embedded, playable video with a thumbnail and description.
File
A Slack file attachment, shown as a preview card.
Input
Actions
A row of up to 25 interactive elements, like buttons and selects.
Input
A labeled form field for modals and App Home, with optional hint text.
Data
Table
A simple grid of rows and columns.
Data table
A sortable, paginated table for larger datasets.
Data visualization
Bar, line, area, and pie charts.
Agents & AI
Callout
A highlighted banner for a status or a tip.
Alert
An inline warning, error, info, or success message.
Contact card
A person or team’s contact details, laid out as a card.
Plan
A step-by-step agent plan with status per step.
Task card
A single task with status, assignee, and actions.
Containers
Container
Groups blocks together with a shared border and background.
Card
A bordered card with a header, image, body, and actions.
Carousel
A horizontally scrollable row of cards.
Condition
Renders different blocks depending on the client surface.
Fallback canary
What renders when a block type isn’t recognized.