Radii Component

About

Most component bugs are design omissions. The loading state was never designed. The error state is an afterthought that copies the success layout. The disabled style looks identical to the default. The focus ring was forgotten. The animation plays backwards. Radii Component reviews any UI component against the standards in Radii's component library: complete anatomy, all required variants, every interactive state, correct motion design, and the accessibility requirements for each component type. The result is an executable checklist you can close item by item.

What it does

• Checks for complete state coverage: default, hover, active, focus-visible, disabled, loading, error, success — flags missing or visually identical states
• For every missing state, generates copy-paste JSX ready to add: loading button with width lock, error input with aria-invalid, empty state, disabled with aria-disabled
• Verifies anatomy completeness: label, container, icon slot, helper text, validation message, loading indicator position
• Reviews variant completeness: primary, secondary, ghost/outline, destructive, icon-only
• Audits motion design with exact CSS fixes: missing prefers-reduced-motion is flagged as Critical with the override code block
• Flags missing ARIA attributes with exact values to add: aria-label, aria-busy, aria-invalid, aria-live, role="alert"

Give it

• 1.A component file (Button, Input, Modal, Dropdown, Tooltip, etc.)
• 2.Optional: specify the component type if it's not obvious from the code
• 3.Optional: pass multiple component files for cross-component consistency review

Example output

**Button Component Review**

States:
  ✓ Default  ✓ Hover  ✓ Active
  ✗ Focus-visible — no :focus-visible style found (WCAG 2.4.11 failure)
  ✓ Disabled
  ✗ Loading — no loading prop or spinner state

Variants:
  ✓ Primary  ✓ Secondary
  ✗ Ghost/outline missing
  ✗ Destructive/danger missing

Motion:
  ✓ Hover transition (150ms ease)
  ✗ No press animation — add scale(0.97) on :active at 80ms
  ✗ No entrance animation on loading state

Anatomy:
  ✓ Label  ✓ Container
  ✗ Icon slot — not implemented
  ✗ Loading state position — spinner would overlap label; reserve right-side slot

Accessibility:
  ✗ aria-disabled missing when disabled prop true (use alongside disabled attr)
  ✗ Keyboard: Enter triggers click but Space does not (both required for buttons)

→ radii.cloud/terms/button-design, radii.cloud/terms/focus-visible, radii.cloud/terms/loading-state