# Block Kit for React

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

## Docs

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

## Guides

- [Handling actions](https://block-kit.kootstra.io/guides/interactivity): Respond to clicks, selects and inputs with onAction, read state.values, and update or delete the message they came from.
- [Modals](https://block-kit.kootstra.io/guides/modals): Open, push and update modals from an action, validate and submit them, and react to response_action.
- [External data](https://block-kit.kootstra.io/guides/external-data): Fill an external_select's options from your own data with onOptions and block_suggestion.
- [Connecting your app](https://block-kit.kootstra.io/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://block-kit.kootstra.io/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://block-kit.kootstra.io/guides/emoji): Standard, custom and skin-toned :shortcode: emoji, and the plain_text emoji flag.
- [Theming](https://block-kit.kootstra.io/guides/theming): Light and dark mode, the --sbk-* CSS custom properties, fonts, and isolation from your app's global styles.
- [mrkdwn](https://block-kit.kootstra.io/guides/mrkdwn): Slack's mrkdwn syntax, the parser and formatting helpers in @nkootstra/block-kit/mrkdwn, and the Mrkdwn and Text components.
- [Validation](https://block-kit.kootstra.io/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://block-kit.kootstra.io/guides/server-rendering): Using @nkootstra/block-kit with SSR and React Server Components, and avoiding hydration mismatches.

## Blocks

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

## Elements

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

## Reference

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

## Agent resources

- [llms-full.txt](https://block-kit.kootstra.io/llms-full.txt): The full Markdown of every page in one file.
- [Page Markdown](https://block-kit.kootstra.io/index.md): Append `.md` to any page URL to fetch that page as raw Markdown.
- [JSON API](https://block-kit.kootstra.io/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://block-kit.kootstra.io/openapi.json.
- [API catalog](https://block-kit.kootstra.io/.well-known/api-catalog): RFC 9727 linkset of the APIs documented here.
- [AI catalog](https://block-kit.kootstra.io/.well-known/ai-catalog.json): ARD manifest of the agent-facing resources on this site (MCP server, skills, APIs).
- [agent-readability.json](https://block-kit.kootstra.io/agent-readability.json): Manifest of every agent-facing artifact on this site.
- [Sitemap](https://block-kit.kootstra.io/sitemap.xml): Every indexable page URL with its last-modified date.