0
# Block Kit Framework
1

2
Block Kit is Slack's UI framework for building rich, interactive interfaces. This module provides TypeScript definitions for all Block Kit components including blocks, elements, and composition objects.
3

4
## Capabilities
5

6
### Block Types
7

8
Core block components that serve as containers for content and interactive elements.
9

10
```typescript { .api }
11
/**
12
 * Base interface for all blocks
13
 */
14
interface Block {
15
  type: string;
16
  block_id?: string;
17
}
18

19
/**
20
 * Union of all known block types
21
 */
22
type KnownBlock = ActionsBlock | ContextBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | MarkdownBlock | RichTextBlock | SectionBlock | VideoBlock;
23

24
/**
25
 * Helper union including generic Block interface
26
 */
27
type AnyBlock = KnownBlock | Block;
28
```
29

30
### Section Block
31

32
The most commonly used block for displaying text content with optional accessories.
33

34
```typescript { .api }
35
interface SectionBlock extends Block {
36
  type: 'section';
37
  text?: TextObject;
38
  fields?: TextObject[];
39
  accessory?: SectionBlockAccessory;
40
  expand?: boolean;
41
}
42

43
type SectionBlockAccessory = Button | Checkboxes | Datepicker | ImageElement | MultiSelect | Overflow | RadioButtons | Select | Timepicker | WorkflowButton;
44
```
45

46
**Usage Example:**
47

48
```typescript
49
import { SectionBlock, PlainTextElement } from "@slack/types";
50

51
const section: SectionBlock = {
52
  type: "section",
53
  text: {
54
    type: "plain_text",
55
    text: "Choose your preferred meeting time:",
56
    emoji: true
57
  },
58
  accessory: {
59
    type: "timepicker",
60
    action_id: "time_select",
61
    initial_time: "14:00"
62
  }
63
};
64
```
65

66
### Actions Block
67

68
Container for interactive elements like buttons and select menus.
69

70
```typescript { .api }
71
interface ActionsBlock extends Block {
72
  type: 'actions';
73
  elements: ActionsBlockElement[];
74
}
75

76
type ActionsBlockElement = Button | Checkboxes | Datepicker | DateTimepicker | MultiSelect | Overflow | RadioButtons | Select | Timepicker | WorkflowButton | RichTextInput;
77
```
78

79
### Input Block
80

81
Form input block for collecting user data in modals and App Home.
82

83
```typescript { .api }
84
interface InputBlock extends Block {
85
  type: 'input';
86
  label: PlainTextElement;
87
  hint?: PlainTextElement;
88
  optional?: boolean;
89
  element: InputBlockElement;
90
  dispatch_action?: boolean;
91
}
92

93
type InputBlockElement = Checkboxes | Datepicker | DateTimepicker | EmailInput | FileInput | MultiSelect | NumberInput | PlainTextInput | RadioButtons | RichTextInput | Select | Timepicker | URLInput;
94
```
95

96
### Header Block
97

98
Large, bold text for section headers.
99

100
```typescript { .api }
101
interface HeaderBlock extends Block {
102
  type: 'header';
103
  text: PlainTextElement;
104
}
105
```
106

107
### Divider Block
108

109
Visual separator element.
110

111
```typescript { .api }
112
interface DividerBlock extends Block {
113
  type: 'divider';
114
}
115
```
116

117
### Image Block
118

119
Display images with optional titles.
120

121
```typescript { .api }
122
type ImageBlock = {
123
  type: 'image';
124
  alt_text: string;
125
  title?: PlainTextElement;
126
} & Block & (UrlImageObject | SlackFileImageObject);
127
```
128

129
### Context Block
130

131
Contextual information with images and text.
132

133
```typescript { .api }
134
interface ContextBlock extends Block {
135
  type: 'context';
136
  elements: ContextBlockElement[];
137
}
138

139
type ContextBlockElement = ImageElement | TextObject;
140
```
141

142
### Rich Text Block
143

144
WYSIWYG rich text content with formatting and interactive elements.
145

146
```typescript { .api }
147
interface RichTextBlock extends Block {
148
  type: 'rich_text';
149
  elements: RichTextBlockElement[];
150
}
151

152
type RichTextBlockElement = RichTextSection | RichTextList | RichTextQuote | RichTextPreformatted;
153
```
154

155
### Video Block
156

157
Embedded video player with thumbnail and metadata.
158

159
```typescript { .api }
160
interface VideoBlock extends Block {
161
  type: 'video';
162
  video_url: string;
163
  thumbnail_url: string;
164
  alt_text: string;
165
  title: PlainTextElement;
166
  title_url?: string;
167
  author_name?: string;
168
  provider_name?: string;
169
  provider_icon_url?: string;
170
  description?: PlainTextElement;
171
}
172
```
173

174
### File Block
175

176
Display remote files in messages.
177

178
```typescript { .api }
179
interface FileBlock extends Block {
180
  type: 'file';
181
  source: string;
182
  external_id: string;
183
}
184
```
185

186
### Markdown Block
187

188
AI-friendly markdown content rendering.
189

190
```typescript { .api }
191
interface MarkdownBlock extends Block {
192
  type: 'markdown';
193
  text: string;
194
}
195
```
196

197
## Composition Objects
198

199
### Text Objects
200

201
```typescript { .api }
202
type TextObject = PlainTextElement | MrkdwnElement;
203

204
interface PlainTextElement {
205
  type: 'plain_text';
206
  text: string;
207
  emoji?: boolean;
208
}
209

210
interface MrkdwnElement {
211
  type: 'mrkdwn';
212
  text: string;
213
  verbatim?: boolean;
214
}
215
```
216

217
### Options and Option Groups
218

219
```typescript { .api }
220
type Option = MrkdwnOption | PlainTextOption;
221

222
interface PlainTextOption {
223
  text: PlainTextElement;
224
  value?: string;
225
  url?: string;
226
  description?: PlainTextElement;
227
}
228

229
interface MrkdwnOption {
230
  text: MrkdwnElement;
231
  value?: string;
232
  url?: string;
233
  description?: PlainTextElement;
234
}
235

236
interface OptionGroup {
237
  label: PlainTextElement;
238
  options: Option[];
239
}
240
```
241

242
### Confirmation Dialog
243

244
```typescript { .api }
245
interface ConfirmationDialog {
246
  title?: PlainTextElement;
247
  text: PlainTextElement | MrkdwnElement;
248
  confirm?: PlainTextElement;
249
  deny?: PlainTextElement;
250
  style?: ColorScheme;
251
}
252

253
// Deprecated alias
254
interface Confirm extends ConfirmationDialog {}
255
```
256

257
### Dispatch Action Configuration
258

259
```typescript { .api }
260
interface DispatchActionConfig {
261
  trigger_actions_on?: ('on_enter_pressed' | 'on_character_entered')[];
262
}
263
```
264

265
### Image Objects
266

267
```typescript { .api }
268
interface UrlImageObject {
269
  image_url: string;
270
}
271

272
interface SlackFileImageObject {
273
  slack_file: SlackFile;
274
}
275

276
type SlackFile = SlackFileViaUrl | SlackFileViaId;
277

278
interface SlackFileViaUrl {
279
  url: string;
280
}
281

282
interface SlackFileViaId {
283
  id: string;
284
}
285
```
286

287
### Conversation Filter
288

289
```typescript { .api }
290
type ConversationFilter = 
291
  | (BaseConversationFilter & Required<Pick<BaseConversationFilter, 'include'>>)
292
  | (BaseConversationFilter & Required<Pick<BaseConversationFilter, 'exclude_bot_users'>>)
293
  | (BaseConversationFilter & Required<Pick<BaseConversationFilter, 'exclude_external_shared_channels'>>);
294

295
interface BaseConversationFilter {
296
  include?: [ConversationType, ...ConversationType[]];
297
  exclude_external_shared_channels?: boolean;
298
  exclude_bot_users?: boolean;
299
}
300
```
301

302
## Extension Mixins
303

304
Reusable interface mixins for common block and element behaviors:
305

306
```typescript { .api }
307
interface Actionable {
308
  type: string;
309
  action_id?: string;
310
}
311

312
interface Confirmable {
313
  confirm?: ConfirmationDialog;
314
}
315

316
interface Dispatchable {
317
  dispatch_action_config?: DispatchActionConfig;
318
}
319

320
interface Focusable {
321
  focus_on_load?: boolean;
322
}
323

324
interface MaxItemsSelectable {
325
  max_selected_items?: number;
326
}
327

328
interface Placeholdable {
329
  placeholder?: PlainTextElement;
330
}
331

332
interface URLRespondable {
333
  response_url_enabled?: boolean;
334
}
335

336
interface RichTextBorderable {
337
  border?: 0 | 1;
338
}
339

340
interface RichTextStyleable {
341
  style?: {
342
    bold?: boolean;
343
    code?: boolean;
344
    italic?: boolean;
345
    strike?: boolean;
346
  };
347
}
348
```
349

350
## Utility Types
351

352
```typescript { .api }
353
type ColorScheme = 'primary' | 'danger';
354
type ConversationType = 'im' | 'mpim' | 'private' | 'public';
355
```