Skip to content

Build

React library

This is a box of ready-made asking-parts for apps with agents. Pick the pattern that fits, put its pieces together, and make it look like your app.

@agentconsent/react provides accessible, headless React primitives for every pattern in this reference. It owns consent-flow behavior and semantics; you supply the product language, data, callbacks, and visual treatment.

@agentconsent/react is the reference implementation layer for this pattern language. Its headless primitives encode interaction and accessibility semantics while leaving data integration, product wording, and visual presentation to the consuming application.

Install

npm install @agentconsent/react

Use the ready skin first. Later, change the color knobs or make your own skin.

Import the default theme for usable styling immediately. Import only the tokens when you want to provide your own component styles.

The default stylesheet consumes the public token contract. Consumers can adopt it unchanged, override token values, or import only tokens and implement an entirely custom visual layer.

import "@agentconsent/react/theme.css";
// Or, for a fully custom visual layer:
import "@agentconsent/react/tokens.css";

Compose a pattern

Each pattern is made of named pieces. Put the pieces inside its Root. The Root keeps them working together.

Patterns use compound components. Render the named parts inside the matching Root, then connect the product-specific approval and refusal callbacks at the boundary.

Each pattern exposes a compound-component API. The Root supplies shared state and semantics, while named descendants provide stable structural and styling boundaries for an application's own data and event handlers.

import { ActionPreview } from "@agentconsent/react";

<ActionPreview.Root onApprove={sendEmail} onReject={cancel}>
  <ActionPreview.Header>
    <ActionPreview.Title>Send email?</ActionPreview.Title>
  </ActionPreview.Header>
  <ActionPreview.Fields>
    <ActionPreview.Field label="To">Dana</ActionPreview.Field>
    <ActionPreview.Field label="Subject">Project update</ActionPreview.Field>
  </ActionPreview.Fields>
  <ActionPreview.Actions>
    <ActionPreview.Approve>Send email</ActionPreview.Approve>
    <ActionPreview.Reject>Cancel</ActionPreview.Reject>
  </ActionPreview.Actions>
</ActionPreview.Root>

Choose the right primitive

Start with the pattern page. It tells you which box to use, what not to do, and shows it working.

Start from the pattern index. Each pattern page pairs its React primitive with the decision it supports, live behavior, accessibility expectations, anti-patterns, and source-level implementation details.

Select a primitive through the pattern taxonomy rather than by component name alone. Each pattern page establishes its applicability conditions, live reference behavior, accessibility contract, failure modes, and implementation context.

Security & provenance

Every box you install has a paper trail back to this code, built in the open, checked by machines for wrong colors and broken tabs, and a real person to tell if you find a hole.

Every published release is built and published from GitHub Actions using npm Trusted Publishing, with provenance that links the package back to the exact source commit and workflow run — verify it yourself with npm audit signatures. No install scripts run on install. Every component ships WCAG 2.2 AA accessible and is checked with axe in both unit and real-browser tests. Found a vulnerability? See SECURITY.md for private reporting.

Releases are built and published exclusively through GitHub Actions using npm Trusted Publishing; each package carries provenance attestation binding it to its source commit and build workflow, verifiable with npm audit signatures. The package defines no install scripts. Accessibility conformance (WCAG 2.2 AA) is enforced with axe-core across jsdom unit tests and real-browser Playwright tests. Vulnerability reports are handled under a private-disclosure policy — see SECURITY.md.

  • npm provenance — released via GitHub Actions with npm Trusted Publishing; verify with npm audit signatures.
  • WCAG 2.2 AA — axe-tested in unit and real-browser tests.
  • MIT licensed — read the security policy or verify provenance on npm.