React Components

The indigiarmor-react package provides React components that match the browser extension's warning overlay design — scan result alerts, risk score bars, signal breakdowns, and more. For a complete integration walkthrough, see the Next.js Integration Guide.

Installation

npm

npm install indigiarmor indigiarmor-react

yarn

yarn add indigiarmor indigiarmor-react

pnpm

pnpm add indigiarmor indigiarmor-react

Quick Start

Scan a prompt with the SDK, then pass the result to the WarningOverlay.

TypeScript

import { IndigiArmor } from 'indigiarmor';
import { WarningOverlay } from 'indigiarmor-react';

const ia = new IndigiArmor('ia_sk_your_key_here');

function ChatGuard({ prompt }: { prompt: string }) {
  const [scanResult, setScanResult] = useState<ScanResult | null>(null);

  const handleSend = async () => {
    const result = await ia.scan(prompt);
    if (result.tier !== 'green') {
      setScanResult(result);
      return;
    }
    // safe — send to LLM
  };

  if (scanResult) {
    return (
      <WarningOverlay
        scanResult={scanResult}
        onEditPrompt={() => setScanResult(null)}
        onAutoRedact={() => { /* use scanResult.sanitized_prompt */ }}
        onSendAnyway={() => { /* send original prompt */ }}
        onDismiss={() => setScanResult(null)}
      />
    );
  }

  return <button onClick={handleSend}>Send</button>;
}

Components

Component	Description
`WarningOverlay`	Main scan result alert — matches the browser extension overlay
`TierBadge`	Status badge — BLOCKED, FLAGGED, or PASSED
`RiskScoreBar`	Animated progress bar showing risk score (0–100)
`SignalGroup`	Groups detected signals by domain
`DomainPill`	Small inline tag for a detection domain
`CollapsibleDetails`	Expandable container for signal details

WarningOverlay

The main scan result alert — identical to the browser extension's overlay. Handles both red (blocked) and yellow (flagged) tiers with the appropriate styling, action buttons, and IndigiArmor branding.

TypeScript

import { WarningOverlay } from 'indigiarmor-react';

<WarningOverlay
  scanResult={result}
  onEditPrompt={() => { /* let user edit */ }}
  onAutoRedact={() => { /* use result.sanitized_prompt */ }}
  onSendAnyway={() => { /* send original prompt */ }}
  onDismiss={() => { /* close overlay */ }}
/>

Prop	Type	Default	Description
`scanResult`	ScanResult	required	Scan result from the SDK
`onEditPrompt`	() => void	required	Called when user clicks "Edit Prompt"
`onAutoRedact`	() => void	required	Called when user clicks "Auto-Redact" (shown if sanitized_prompt exists)
`onSendAnyway`	() => void	required	Called when user clicks "Send Anyway"
`onDismiss`	() => void	—	Called when user clicks the X close button
`className`	string	—	Additional CSS classes

TierBadge

Displays a colored status badge — BLOCKED (red), FLAGGED (yellow), or PASSED (green).

TypeScript

import { TierBadge } from 'indigiarmor-react';

<TierBadge tier="red" />
<TierBadge tier="yellow" />
<TierBadge tier="green" />

RiskScoreBar

Animated progress bar visualizing a risk score from 0 to 100.

TypeScript

import { RiskScoreBar } from 'indigiarmor-react';

<RiskScoreBar score={result.risk_score} tier={result.tier} />

SignalGroup

Groups detected signals by domain (PII, Injection, Education, Cultural, Re-identification, Custom).

TypeScript

import { SignalGroup } from 'indigiarmor-react';

<SignalGroup signals={result.signals} />

DomainPill

Small inline tag for displaying a detection domain.

TypeScript

import { DomainPill } from 'indigiarmor-react';

<DomainPill domain="pii" />
<DomainPill domain="injection" />

CollapsibleDetails

Expandable container — use it to wrap signal details or any content that should be hidden by default.

TypeScript

import { CollapsibleDetails, SignalGroup } from 'indigiarmor-react';

<CollapsibleDetails signalCount={result.signals.length} defaultCollapsed>
  <SignalGroup signals={result.signals} />
</CollapsibleDetails>

Styling

Components use Tailwind CSS classes with a dark theme matching the browser extension. They work out of the box if your project uses Tailwind. For non-Tailwind projects, you can override styles via the className prop on each component.

TypeScript Types

All component prop types and SDK types are re-exported for convenience:

TypeScript

import type {
  ScanResult,
  Signal,
  Tier,
  WarningOverlayProps,
  TierBadgeProps,
  RiskScoreBarProps,
  SignalGroupProps,
  DomainPillProps,
  CollapsibleDetailsProps,
} from 'indigiarmor-react';