npm.io
0.3.0 • Published yesterdayCLI

@ahrowe/ui

Licence
MIT
Version
0.3.0
Deps
10
Size
1.9 MB
Vulns
0
Weekly
0
SummaryDependencyVersions

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
Avatar + AvatarGroup User/entity image with initials/icon fallback and status dot, stackable
Badge Count or status indicator, standalone or overlaid on another element
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
KlipyPicker GIF picker backed by the Klipy API
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
Skeleton Content-shaped loading placeholder (text/circle/rectangular)
Stepper Step progress indicator
Switch Sliding boolean toggle
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

Keywords

reactuicomponentstypescriptthemingcss-modules