# Block Kit for React

> Render Slack Block Kit JSON in React, pixel-for-pixel the way Slack does.

## Docs

- [Introduction](https://docs.block-kit.dev/): Render Slack Block Kit JSON in React, pixel-for-pixel the way Slack does.
- [Installation](https://docs.block-kit.dev/installation): Add @nkootstra/block-kit to a React 19 app, with its stylesheet and fonts.
- [Quickstart](https://docs.block-kit.dev/quickstart): Render an approval message and answer its buttons the way your Slack app would.
- [Surfaces](https://docs.block-kit.dev/surfaces): Render blocks as a Slack message, a modal or a Home tab.

## Guides

- [Handling actions](https://docs.block-kit.dev/guides/interactivity): Respond to clicks, selects and inputs with onAction, read state.values, and update or delete the message they came from.
- [Modals](https://docs.block-kit.dev/guides/modals): Open, push and update modals from an action, validate and submit them, and react to response_action.
- [External data](https://docs.block-kit.dev/guides/external-data): Fill an external_select's options from your own data with onOptions and block_suggestion.
- [Connecting your app](https://docs.block-kit.dev/guides/connecting-your-app): Send real Slack interaction payloads from the browser to an existing Bolt app, signed the way Slack signs them.
- [Mentions and resolvers](https://docs.block-kit.dev/guides/mentions-and-resolvers): Resolve user, channel and usergroup ids to names, show unresolved mentions like Slack, and back it with the real Slack Web API.
- [Emoji](https://docs.block-kit.dev/guides/emoji): Standard, custom and skin-toned :shortcode: emoji, and the plain_text emoji flag.
- [Theming](https://docs.block-kit.dev/guides/theming): Light and dark mode, the --sbk-* CSS custom properties, fonts, and isolation from your app's global styles.
- [mrkdwn](https://docs.block-kit.dev/guides/mrkdwn): Slack's mrkdwn syntax, the parser and formatting helpers in @nkootstra/block-kit/mrkdwn, and the Mrkdwn and Text components.
- [Validation](https://docs.block-kit.dev/guides/validation): The checks Slack's client runs on a modal before view_submission fires, and how to trigger or override them.
- [Server rendering](https://docs.block-kit.dev/guides/server-rendering): Using @nkootstra/block-kit with SSR and React Server Components, and avoiding hydration mismatches.

## Blocks

- [Blocks overview](https://docs.block-kit.dev/blocks): What a block is, how block_id works, and every block type @nkootstra/block-kit renders.
- [Section](https://docs.block-kit.dev/blocks/section): A text block that can pair with fields or a single accessory element, and the block you'll reach for most often.
- [Header](https://docs.block-kit.dev/blocks/header): A bold, single-line title that breaks up a message or view into sections.
- [Divider](https://docs.block-kit.dev/blocks/divider): A simple horizontal rule for visually separating blocks.
- [Context](https://docs.block-kit.dev/blocks/context): A small row of muted text and images for metadata, like a byline or a timestamp.
- [Actions](https://docs.block-kit.dev/blocks/actions): A row of interactive elements, buttons, selects, date pickers, and more.
- [Input](https://docs.block-kit.dev/blocks/input): A labeled form field for a modal or App Home, the only way to collect input from a user.
- [Image](https://docs.block-kit.dev/blocks/image): A standalone image with an optional title row.
- [Rich text](https://docs.block-kit.dev/blocks/rich-text): Slack's structured formatted-text block, the same format its own composer produces.
- [Markdown](https://docs.block-kit.dev/blocks/markdown): A block of standard GitHub-flavored markdown, for text you didn't hand-assemble into rich text.
- [Table](https://docs.block-kit.dev/blocks/table): A plain grid of rich text cells, for small datasets with no sorting or paging.
- [Video](https://docs.block-kit.dev/blocks/video): A video preview with a thumbnail, title, and provider byline.
- [File](https://docs.block-kit.dev/blocks/file): A card referencing a file shared by a remote storage provider.
- [Context actions](https://docs.block-kit.dev/blocks/context-actions): A compact row of feedback and icon buttons, typically under an AI-generated message.
- [Card](https://docs.block-kit.dev/blocks/card): A bordered card with an icon, title, subtitle, hero image, body text, and actions.
- [Carousel](https://docs.block-kit.dev/blocks/carousel): A horizontally scrollable row of cards.
- [Container](https://docs.block-kit.dev/blocks/container): Groups blocks together with a shared border, an optional header, and a width limit.
- [Alert](https://docs.block-kit.dev/blocks/alert): An inline banner for a warning, error, info, or success message.
- [Callout](https://docs.block-kit.dev/blocks/callout): A tinted panel that groups other blocks together, for a highlighted tip or status.
- [Contact card](https://docs.block-kit.dev/blocks/contact-card): A person's name and avatar, resolved from a Slack user id.
- [Data table](https://docs.block-kit.dev/blocks/data-table): A sortable, paginated grid of rows and columns, for datasets larger than the plain table block handles.
- [Data visualization](https://docs.block-kit.dev/blocks/data-visualization): Bar, line, area, and pie charts for a series of labeled values.
- [Plan](https://docs.block-kit.dev/blocks/plan): A collapsible, step-by-step agent plan, with a status per task.
- [Task card](https://docs.block-kit.dev/blocks/task-card): A single collapsible task with a status, details, output, and sources.
- [Condition](https://docs.block-kit.dev/blocks/condition): Renders a different set of blocks depending on the client surface that's viewing them.

## Elements

- [Elements overview](https://docs.block-kit.dev/elements): What Block Kit elements are, where each one can live, and how they report interactions.
- [Button](https://docs.block-kit.dev/elements/button): A clickable button, Slack's most common interactive element.
- [Checkboxes](https://docs.block-kit.dev/elements/checkboxes): A group of options where any number can be selected at once.
- [Confirmation dialogs](https://docs.block-kit.dev/elements/confirmation-dialogs): Add an "are you sure?" step to any interactive element with the confirm composition object.
- [Date picker](https://docs.block-kit.dev/elements/date-picker): A calendar control for choosing a single date, rendered like Slack's datepicker.
- [Datetime picker](https://docs.block-kit.dev/elements/datetime-picker): A combined date and time control, rendered like Slack's datetimepicker.
- [Feedback buttons](https://docs.block-kit.dev/elements/feedback-buttons): Thumbs up / thumbs down feedback for an AI-generated message.
- [File input](https://docs.block-kit.dev/elements/file-input): A file picker for collecting uploads in a modal, up to a configurable file count and type list.
- [Icon button](https://docs.block-kit.dev/elements/icon-button): A compact, icon-only button for a context_actions row.
- [Image element](https://docs.block-kit.dev/elements/image-element): A small image used as a section accessory or context_actions decoration.
- [Overflow menu](https://docs.block-kit.dev/elements/overflow): A kebab (⋮) menu that opens a short list of actions or links.
- [Radio buttons](https://docs.block-kit.dev/elements/radio-buttons): A group of options where exactly one can be selected at a time.
- [Rich text input](https://docs.block-kit.dev/elements/rich-text-input): A formatted text field, with Slack's formatting toolbar, that reports a rich_text value.
- [Select menus](https://docs.block-kit.dev/elements/select-menus): Dropdowns for a fixed list, an external data source, or Slack's own directory of users, conversations, and channels.
- [Text inputs](https://docs.block-kit.dev/elements/text-inputs): Single-line and multi-line text fields, plus email, URL and number variants, for collecting free text in a modal or Home tab.
- [Time picker](https://docs.block-kit.dev/elements/time-picker): A dropdown list for choosing a time of day, rendered like Slack's timepicker.
- [Workflow button](https://docs.block-kit.dev/elements/workflow-button): A button that runs a Slack workflow's link trigger.

## Reference

- [BlockKitProvider](https://docs.block-kit.dev/reference/block-kit-provider): Every prop of the provider that connects rendered blocks to your app.
- [Components](https://docs.block-kit.dev/reference/components): Every component the package exports, and when to use each.
- [Hooks](https://docs.block-kit.dev/reference/hooks): Read the provider's state from your own components, and build custom surfaces.
- [Payloads](https://docs.block-kit.dev/reference/payloads): Build the interaction payloads Slack sends to your app's request URL.
- [Custom blocks](https://docs.block-kit.dev/reference/custom-blocks): Render your own block and element types, or replace a built-in one.

## Changelog

- [v0.1.1](https://docs.block-kit.dev/changelog/v0-1-1)
- [v0.1.0](https://docs.block-kit.dev/changelog/v0-1-0)

## RSS Feeds

- [Block Kit for React — Changelog](https://docs.block-kit.dev/changelog/rss.xml)

## Agent skills

- [block-kit-for-react](https://docs.block-kit.dev/.well-known/agent-skills/block-kit-for-react/SKILL.md): Read the Block Kit for React docs instead of answering from memory. Render Slack Block Kit JSON in React, pixel-for-pixel the way Slack does. Use when a task involves Block Kit for React: how it works, how to set it up or configure it, or its API.
- [block-kit](https://docs.block-kit.dev/.well-known/agent-skills/block-kit/SKILL.md): Render Slack Block Kit JSON in a React app with @nkootstra/block-kit, the way Slack shows it. Use when previewing Slack messages, modals or Home tabs in React, handling their button and input actions in the browser, or setting up the package's stylesheet, fonts, theming or server rendering.

## Agent resources

- [llms-full.txt](https://docs.block-kit.dev/llms-full.txt): The full Markdown of every page in one file.
- [Page Markdown](https://docs.block-kit.dev/index.md): Append `.md` to any page URL to fetch that page as raw Markdown.
- [JSON API](https://docs.block-kit.dev/api/docs/pages.json): Page index of the JSON docs API; each entry links the page's JSON and Markdown forms. Described by the OpenAPI document at https://docs.block-kit.dev/openapi.json.
- [MCP server](https://docs.block-kit.dev/mcp): Streamable HTTP Model Context Protocol server with search_docs, get_page, list_pages, and get_navigation tools, plus every page as a resource. Discovery document: https://docs.block-kit.dev/.well-known/mcp.json
- [Agent skills](https://docs.block-kit.dev/.well-known/agent-skills/index.json): Agent Skills discovery index of the skills this site publishes.
- [API catalog](https://docs.block-kit.dev/.well-known/api-catalog): RFC 9727 linkset of the APIs documented here.
- [AI catalog](https://docs.block-kit.dev/.well-known/ai-catalog.json): ARD manifest of the agent-facing resources on this site (MCP server, skills, APIs).
- [agent-readability.json](https://docs.block-kit.dev/agent-readability.json): Manifest of every agent-facing artifact on this site.
- [Sitemap](https://docs.block-kit.dev/sitemap.xml): Every indexable page URL with its last-modified date.