Components
Overview

Components

All components are built on top of the foundation token layer. They never use hardcoded values — every visual property references a CSS custom property.

When asking Claude to create a new component, it will automatically read the token layer and follow the patterns established in the existing components.

Installing

npm install @mitek/ui

Usage

// Import styles once at your app entry point
import '@mitek/ui/styles';
 
// Then import individual components
import { Button, Badge } from '@mitek/ui';

Available components

ComponentStatusDescription
ButtonStablePrimary interactive action element
BadgeStableStatus label and count indicator

Component conventions

Every component in this library follows these rules:

  1. Token-only values — no hardcoded px, rem, or hex values
  2. forwardRef support — for imperative access when needed
  3. as prop — render as a different HTML element when appropriate
  4. className passthrough — for one-off overrides
  5. ARIA compliant — keyboard navigable and screen-reader friendly
  6. CSS Modules — scoped styles, no global leakage
ShadowsButton