Block Kit for React

@nkootstra/block-kit renders Slack Block Kit JSON in React, pixel-for-pixel the way Slack does. Pass it the blocks your app sends to chat.postMessage or views.open and it draws the message, modal or Home tab, with working buttons, menus, date pickers and inputs.

Documentation: https://docs.block-kit.dev

To try it without installing anything, paste your JSON into the Block Kit playground: it renders the message, modal or Home tab with this package and shows the payload each click sends. No Slack sign-in.

Install

The package needs React 18 or later.

bun add @nkootstra/block-kit @fontsource/lato @fontsource/roboto-mono

Import the stylesheet and fonts once, near the root of your app, then render a message:

import "@nkootstra/block-kit/styles.css";
import "@fontsource/lato/400.css";
import "@fontsource/lato/700.css";
import { BlockKitProvider, Message } from "@nkootstra/block-kit";

export function App() {
  return (
    <BlockKitProvider>
      <Message
        blocks={[
          { type: "section", text: { type: "mrkdwn", text: "*Hello* from Block Kit :wave:" } },
        ]}
      />
    </BlockKitProvider>
  );
}

The installation guide lists the remaining font weights and the entry points, and the quickstart wires up an interactive approval message.

Entry points

| Import | What it contains | | --------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | @nkootstra/block-kit | Components, the provider, hooks and payload builders | | @nkootstra/block-kit/styles.css | The stylesheet | | @nkootstra/block-kit/mrkdwn | The mrkdwn parser, without React | | @nkootstra/block-kit/transport | Browser-safe: sends interactions to your app, and resolver lookups to your server | | @nkootstra/block-kit/server | Server only, development tooling: signs and relays interactions, and answers resolver lookups with the bot token | | @nkootstra/block-kit/web-api | User, channel, usergroup and profile resolvers backed by the Slack Web API |

License

MIT