npm package: @igrec-j/components
Description: igrec-j React component library
Latest version: 0.2.10
Deprecated: Package deprecated. Moved to plan-net/design-system.

# @igrec-j/components

React + TypeScript component library built on a Figma design system. Ships with machine-readable registry and Claude instructions for AI-assisted UI development.

## Install

```bash
npm install @igrec-j/components lucide-react
```

Import the stylesheet once at your app root:

```tsx
import '@igrec-j/components/dist/components.css';
```

## Usage

```tsx
import { Button, Icon, Badge } from '@igrec-j/components';

<Button variant="primary" label="Save" />
<Icon name="check" size={16} />
<Badge category="neutral" emphasis="subtle" label="Draft" />
```

## Claude Plug-and-Play Prompt

Paste this into Claude to get fully correct component usage from the start:

```
I'm building a React app using the @igrec-j/components design system.

Before writing any component code:
1. Run: npm install @igrec-j/components lucide-react
2. Read: node_modules/@igrec-j/components/figma-component-registry.json
3. Read: node_modules/@igrec-j/components/CLAUDE_INSTRUCTIONS.md
4. Follow all instructions in CLAUDE_INSTRUCTIONS.md exactly.

Now build: [describe your UI here]
```

Claude will read the registry and instructions before writing any code, ensuring correct props, variants, and icon usage every time.

## Components

| Component | Description |
|-----------|-------------|
| `Avatar` | User avatar with size and type variants |
| `Badge` | Status and category labels |
| `Button` | Primary, secondary, ghost, danger variants |
| `ButtonLink` | Button styled as a link |
| `CardFolder` | Folder card with item list |
| `CardInsight` | Data insight card |
| `Chat` | Chat message thread |
| `Chip` | Selectable filter chip |
| `FieldForm` | Form field with label and validation |
| `FocusRing` | Keyboard focus indicator |
| `Header` | Section and page headers |
| `Icon` | Lucide icon wrapper (see Icons section) |
| `ListItem` | List row item |
| `Logo` | Brand logo |
| `Message` | Inline message / alert |
| `NavBar` | Side navigation bar |
| `NavItem` | Single navigation item |
| `Profile` | User profile display |
| `Search` | Search input |
| `Springboard` | App launcher grid |
| `StatusDot` | Status indicator dot |
| `Stud` | Compact label with colour coding |
| `Table` | Data table with pagination |
| `TablePagination` | Standalone pagination control |
| `Tabs` | Tab navigation |
| `TopBar` | App top bar |

## Icons

The library ships 93 icons via `lucide-react`. Two usage patterns:

**1. Standalone icon rendering** — use the `<Icon>` component with a string name:

```tsx
import { Icon } from '@igrec-j/components';

<Icon name="house" size={16} />
<Icon name="check" size={16} label="Completed" />
```

**2. DS component icon props** — import the Lucide component class directly:

```tsx
import { NavItem } from '@igrec-j/components';
import { House } from 'lucide-react';

<NavItem icon={House} label="Home" />
```

All valid icon names and their Lucide imports are listed in `figma-component-registry.json → Icon.figma.iconMap`.

## Peer Dependencies

```json
{
  "lucide-react": ">=0.400.0",
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0"
}
```

## License

MIT