Components

Every component the package exports, and when to use each.

Surfaces

These draw Slack’s chrome around your blocks. Most apps only need these. See Surfaces for examples.

Component	Props	Renders
`<Message>`	`blocks`, `text`, `app`, `ts`, `timeZone`, `message`, `channelId`, `isEphemeral`	A message in a channel
`<Modal>`	`view`, `icon`	A modal
`<HomeTab>`	`view`	The App Home tab
`<View>`	`view`, `icon`	`<Modal>` or `<HomeTab>`, picked by `view.type`

Building blocks

These render parts of a surface. Reach for them when you build your own layout around blocks, or a custom block.

PropType

<Blocks blocks />?{ blocks: AnyBlock[] }

A list of blocks with Slack's spacing between them, and no surface around them. Wrap it in an element with the `sbk-root` class for the base font and colours.

Type{ blocks: AnyBlock[] }

<Block block index />?{ block: Json; index: number }

One block. Without a `block_id`, the block gets `block-<index>`. An unknown `type` renders a placeholder.

Type{ block: Json; index: number }

<Element element blockId />?{ element: Json; blockId: string }

One element (a button, a select, an image) inside the block with `blockId`.

Type{ element: Json; blockId: string }

<Mrkdwn text />?{ text: string; verbatim?: boolean; emojiSize?: number }

Slack's mrkdwn: bold, italics, links, mentions, dates, emoji and code. Bare URLs become links unless `verbatim` is set, like Slack's `verbatim` flag.

Type{ text: string; verbatim?: boolean; emojiSize?: number }

<Text text />?{ text: TextObject; emojiSize?: number }

A `plain_text` or `mrkdwn` text object.

Type{ text: TextObject; emojiSize?: number }

<UserMention id name />?{ id: string; name?: string }

An `@name` mention that opens a profile card on click, filled from `resolvers.userProfile`.

Type{ id: string; name?: string }

<Tooltip label>?{ label: ReactNode; placement?: "top" | "bottom"; children: ReactElement }

Slack's dark tooltip, shown on hover and focus of its single child. Flips to the other side when there's no room.

Type{ label: ReactNode; placement?: "top" | "bottom"; children: ReactElement }

Provider and scope

Export	What it’s for
`<BlockKitProvider>`	Handlers, input state, resolvers and theme. See BlockKitProvider.
`<SurfaceScope>`	Ties elements below it to one message or view, for a surface you build yourself. See Hooks.

Registries

Export	What it’s for
`blockComponents`	Maps a block `type` to the component that renders it.
`elementComponents`	Maps an element `type` to the component that renders it.

Add to them to render your own types: see Custom blocks.

Validation

Export	What it’s for
`validateView(blocks, state)`	Checks a modal’s `input` blocks the way Slack does before submitting. Returns errors keyed by `block_id`; empty when valid.
`VALIDATION_MESSAGES`	The messages it uses.

See Validation.