Installation

Add @nkootstra/block-kit to a React 19 app, with its stylesheet and fonts.

The package needs React 19 or later. It works with any bundler that can import CSS: Vite, Next.js, Remix, Astro and the like.

Install the package

npm install @nkootstra/block-kit

pnpm add @nkootstra/block-kit

yarn add @nkootstra/block-kit

bun add @nkootstra/block-kit

nub add @nkootstra/block-kit

aube add @nkootstra/block-kit

Import the stylesheet

Import the styles once, near the root of your app:

import "@nkootstra/block-kit/styles.css";

The stylesheet only styles elements inside the components it ships, and rolls them back to the browser’s defaults first. Global styles in your app, such as Tailwind’s preflight, don’t change how blocks render.

Load the fonts

Slack sets text in Lato and code in Roboto Mono. Slack’s own font files aren’t redistributable, so install the open-source builds from Fontsource:

npm install @fontsource/lato @fontsource/roboto-mono

pnpm add @fontsource/lato @fontsource/roboto-mono

yarn add @fontsource/lato @fontsource/roboto-mono

bun add @fontsource/lato @fontsource/roboto-mono

nub add @fontsource/lato @fontsource/roboto-mono

aube add @fontsource/lato @fontsource/roboto-mono

import "@fontsource/lato/400.css";
import "@fontsource/lato/400-italic.css";
import "@fontsource/lato/700.css";
import "@fontsource/lato/900.css";
import "@fontsource/roboto-mono/400.css";

Render a message

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>
  );
}

Your AppAPP12:00 PM

Hello from Block Kit

Optional peer dependencies

Package	When you need it
`@slack/web-api`	To resolve user, channel and usergroup names with `@nkootstra/block-kit/web-api`.

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. See mrkdwn.
`@nkootstra/block-kit/transport`	Sends interactions to your app’s request URL from the browser. See Connecting your app.
`@nkootstra/block-kit/server`	Signs and relays interactions to your app from your server.
`@nkootstra/block-kit/web-api`	Resolvers backed by the Slack Web API.

Next steps

Quickstart

Build an interactive approval message.

Theming

Dark mode and the CSS custom properties.