ahrowe-ui

A React UI component library with theming, form validation, and a full component suite.

Install

npm install @ahrowe/ui

Usage

import '@ahrowe/ui/style.css';

function App() {
  return (
    <ThemeProvider>
      App content here
    </ThemeProvider>
  );
}

Claude Code Integration

Add one line to your project's CLAUDE.md and Claude will have full awareness of all components, props, and usage patterns:

@node_modules/@ahrowe/ui/docs/CLAUDE.md

Claude will know:

• All available components and when to use each one
• Full prop APIs with TypeScript types
• ThemeProvider setup and CSS variable system
• FormValidator integration for form components
• Slot customisation (classNames / styles props)

MCP Server (advanced)

For richer integration — component search, dynamic docs — add the MCP server to your .claude/settings.json:

{
  "mcpServers": {
    "ahrowe-ui": {
      "command": "npx",
      "args": ["ahrowe-ui-mcp"]
    }
  }
}

This gives Claude three tools: list_components, get_component_docs, and search_components.

Components

| Component | Description | |-----------|-------------| | Accordion | Collapsible sections | | ActionButtons | Submit / Cancel button pair | | ActionIcon | Icon-only button | | BodyEnd | Portal renderer to #bodyEnd | | Button | Primary action button with loading state | | Card + CardHeader + CardMedia + CardContent + CardActions | Surface container | | Checkbox | Boolean toggle input | | Chip + ChipContainer | Compact tag / filter token | | ColorPicker | Hex colour selector | | ConfirmModal | Destructive action confirmation dialog | | Dropdown | Single-value select | | EmptyState | Placeholder for empty lists / search results | | Fab | Floating action button with speed dial | | FloatingMenu | Contextual popover | | Icon | Built-in SVG icons | | IconLoading + SpinnerLoading | Loading indicators | | IdleManager | User inactivity detection | | InfiniteBlock | Infinite scroll container | | Input | Floating-label text input (text, email, password, phone, search…) | | InteractableDiv | Accessible clickable container | | KanbanBoard + KanbanColumn | Drag-and-drop kanban board | | Modal | Full overlay dialog | | NumberInput | Formatted numeric input | | OptionPicker | Segmented single-choice control | | Overscroll | Mobile-style collapsing header on scroll | | ProgressBar | Single or stacked progress bar | | Ripple | Material ink ripple effect | | RoomDrawer | Interactive floor-plan canvas | | ScrollbarProvider | Custom scrollbar styling wrapper | | SearchInput | Debounced search field with optional result count | | Stepper | Step progress indicator | | TenorPicker | GIF picker backed by the Tenor API | | Textarea | Multiline text input | | ThemeProvider + useTheme | Theme context and CSS variables | | Tooltip | Info / error / details tooltip | | Wizard | Animated multi-step container |

Services

| Export | Description | |--------|-------------| | FormValidator | Per-field validation state | | FormValidatorGroup | Group of validators | | Validators | Built-in validator functions | | useFormValidator | Hook for FormValidator | | useFormValidatorGroup | Hook for FormValidatorGroup | | mapLocale, setLocale, getLocale | Localisation helpers |