---
title: Installation
description: Add @nkootstra/block-kit to a React 18 or 19 app, with its stylesheet and fonts.
sidebar:
  order: 1
seo:
  title: "Install the Slack Block Kit renderer"
---

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

1. **Install the package**

    ```package-install
    @nkootstra/block-kit
    ```

2. **Import the stylesheet**

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

    ```tsx main.tsx
    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.

3. **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:

    ```package-install
    @fontsource/lato @fontsource/roboto-mono
    ```

    ```tsx main.tsx
    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";
    ```

    :::tip
    Already serving Lato from a CDN or your own assets? Skip this step. The stylesheet asks for `Slack-Lato` first, then `Lato`, so any `@font-face` named `Lato` is picked up.
    :::

4. **Render a message**

    ```tsx App.tsx
    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>
      );
    }
    ```

<Preview
  payload={{
    blocks: [{ type: "section", text: { type: "mrkdwn", text: "*Hello* from Block Kit :wave:" } }],
  }}
/>

## Optional peer dependencies

| Package          | When you need it                                                                                                    |
| ---------------- | ------------------------------------------------------------------------------------------------------------------- |
| `@slack/web-api` | To resolve user, channel and usergroup names with [`@nkootstra/block-kit/web-api`](/guides/mentions-and-resolvers). |

## 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](/guides/mrkdwn).                                                        |
| `@nkootstra/block-kit/transport`  | Sends interactions to your app's request URL from the browser. See [Connecting your app](/guides/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.                                                                                 |

## Give your coding agent the docs

These docs run an [MCP](https://modelcontextprotocol.io) server at `https://docs.block-kit.dev/mcp`. It lets an agent search the docs and read any page as Markdown. To add it to Claude Code:

```sh
claude mcp add --transport http block-kit https://docs.block-kit.dev/mcp
```

Other agents take the same URL as a Streamable HTTP server. Agents that don't use MCP can read [`llms.txt`](/llms.txt), which lists every page's Markdown copy.

## Next steps

**[Quickstart](/quickstart)**

Build an interactive approval message.

**[Theming](/guides/theming)**

Dark mode and the CSS custom properties.