CoherenceCheck

Check group with pass/warn/fail rows for displaying coherence audit results — group header, state icon circle, title, description with inline code support, and ghost Fix action.

States

CheckRow supports three semantic states. Each state renders a tinted icon circle — pass (green check), warn (amber warning), fail (red X).

Derivation — every layer traces upward

Every pillar governs something real

No dead pillars.

One sampled string drifts from voice

Try a plainspoken verb — "Compile" or "Publish".

One pairing fails on small text

Below 4.5:1 for body text. Bump tertiary one step.

Inline Code in Descriptions

Pass a React node with <code> elements to description for inline token references.

Accessibility — WCAG 2.1 AA

One pairing fails on small text

--text-tertiary on --surface-subtle is 3.9:1 — below 4.5:1 for body text.

Primary, text, and focus rings clear AA

Body 7.1:1 · large text 4.8:1 · non-text UI 3.4:1 — all above target.

Multiple Groups

Use multiple CheckGroup instances to organize checks into labelled sections.

Derivation — every layer traces upward

Every pillar governs something real

No dead pillars.

Voice derives from personality

Each trait is a consequence, not an assertion.

Voice & copy

One sampled string drifts from voice

Try a plainspoken verb — "Compile" or "Publish".

Installation

npx visor add coherence-check

This copies two files into your project:

components/ui/coherence-check/coherence-check.tsx — the component
components/ui/coherence-check/coherence-check.module.css — the styles

Usage

import { CheckGroup, CheckRow } from '@/components/ui/coherence-check/coherence-check';

<CheckGroup heading="Accessibility — WCAG 2.1 AA">
  <CheckRow
    state="fail"
    title="One pairing fails on small text"
    description={<><code>--text-tertiary</code> on <code>--surface-subtle</code> is 3.9:1</>}
    fixLabel="Suggest a fix"
    onFix={() => console.log('fix clicked')}
  />
  <CheckRow
    state="pass"
    title="Primary, text, and focus rings clear AA"
    description="All above target on both light and dark."
  />
</CheckGroup>

API Reference

CheckGroup

No props data available for “coherence-check”.

Prop	Type	Default	Description
`heading`	`string`	—	Group header label (rendered uppercase). Required.

Also accepts all standard <div> HTML attributes.

CheckRow

Prop	Type	Default	Description
`state`	`'pass' \| 'warn' \| 'fail'`	`'pass'`	Semantic state controlling the icon and tint color.
`title`	`string`	—	Check title / finding label. Required.
`description`	`React.ReactNode`	—	Supporting text. Accepts inline `<code>` elements.
`fixLabel`	`string`	—	Label for the ghost Fix action button. Omit to hide.
`onFix`	`() => void`	—	Callback invoked when the Fix button is clicked.

Also accepts all standard <div> HTML attributes.

Accessibility

The state icon circle is aria-hidden="true" — state is conveyed visually by color and icon; consider pairing with an aria-label on the containing region when used in a standalone audit flow.
The Fix action button has type="button" to prevent accidental form submission.
All interactive elements are keyboard-reachable and show focus rings via --focus-ring-width and --focus-ring-offset tokens.

CoherenceCheck

On this page