ChangelogGitHub

Getting started

react-blockkit renders Slack Block Kit JSON as React components, styled to match Slack. Pass it a payload object, a block array, or a JSON string.

Install

pnpm add react-blockkit

React 18.2+ and 19 are supported as peer dependencies. Import the precompiled stylesheet once, near the root of your application:

import "react-blockkit/styles.css";

The stylesheet ships compiled, so no StyleX plugin or build configuration is required. If your app loads a global CSS reset (Tailwind preflight, normalize), import react-blockkit/styles.css after it so the renderer's rules win the cascade.

First render

import { BlockKit, type BlockKitData } from "react-blockkit";

const data = {
  blocks: [
    {
      type: "section",
      text: {
        type: "mrkdwn",
        text: "A message with *bold text* and <https://slack.com|a link>.",
      },
    },
  ],
} satisfies BlockKitData;

export function Preview() {
  return <BlockKit data={data} />;
}
A message with bold text and a link.
View payload JSON
{
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "A message with *bold text* and <https://slack.com|a link>."
      }
    }
  ]
}

Server rendering

Server-side rendering and static generation need no browser globals; the few browser-only behaviors (chart width measurement, reading checkbox state) are guarded and run after hydration. In a React Server Components framework, mount <BlockKit /> from a module marked "use client", because the renderer uses React context for resolvers and action handling.

Next