IP Design System

https://ui.integrated-projects.com
Admin
A comprehensive design system and component library built with React, TypeScript, and Tailwind CSS,...
Tokens:1,886
Snippets:22
Trust Score:7.9
Update:9 months ago
Show doc for...
Tokens:
Raw
### Initialize IP UI Library with CLI

Source: https://ui.integrated-projects.com/index

Initializes the IP UI Library in your project using the integrated-projects CLI. This command installs the library, configures Tailwind CSS, and adds necessary design tokens to your project.

```bash
npx @integrated-projects/cli init
```

--------------------------------

### Verify npm Registry Configuration

Source: https://ui.integrated-projects.com/index

Checks if the npm registry is correctly configured for GitHub Packages. This command should output the correct registry URL if the setup is successful, helping to diagnose package not found errors.

```bash
npm config get @integrated-projects:registry
```

--------------------------------

### Update IP UI Library

Source: https://ui.integrated-projects.com/index

Commands to manage the version of the @integrated-projects/ui library. Includes checking the current version, updating to the latest version, or installing a specific version.

```bash
# Check current version
npm list @integrated-projects/ui

# Update to latest version
npm update @integrated-projects/ui

# Or install a specific version
npm install @integrated-projects/ui@latest
```

--------------------------------

### Troubleshoot npm 401 Unauthorized Error

Source: https://ui.integrated-projects.com/index

Provides a solution for the 'npm install fails with 401 Unauthorized' error, which typically indicates an issue with GitHub token authentication. It suggests re-running the npm config set command with a valid token.

```bash
npm config set //npm.pkg.github.com/:_authToken YOUR_TOKEN_HERE
```

--------------------------------

### Configure npm for GitHub Packages Authentication

Source: https://ui.integrated-projects.com/index

Configures npm to use GitHub Packages as a registry and authenticate using a Personal Access Token. This is essential for installing private packages from GitHub. It can be done via command line or by manually editing the .npmrc file.

```bash
npm config set @integrated-projects:registry https://npm.pkg.github.com
npm config set //npm.pkg.github.com/:_authToken YOUR_TOKEN_HERE
```

```bash
@integrated-projects:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=ghp_YOUR_TOKEN_HERE
```

--------------------------------

### Example of Blocked and Allowed Code with Guardrails

Source: https://ui.integrated-projects.com/index

Demonstrates code snippets that are blocked or allowed by the IP Design System's guardrails. It shows how raw Tailwind classes and hex colors are flagged, while design system component classes and props are permitted.

```tsx
// ❌ BLOCKED - Raw Tailwind classes
<p className="text-sm text-gray-500">Hello</p>
<div className="bg-red-500">Error</div>

// ❌ BLOCKED - Hex colors
<div style={{ color: '#ff0000' }}>Red text</div>

// ❌ WARNED - Native elements
<button onClick={handleClick}>Click me</button>

// ✅ ALLOWED - Design system classes
<p className="ip-body-2 text-muted-foreground">Hello</p>
<div className="bg-destructive">Error</div>
<Button onClick={handleClick}>Click me</Button>
```

--------------------------------

### Set Up Design System Guardrails with CLI

Source: https://ui.integrated-projects.com/index

Enforces design system consistency by setting up ESLint rules, Husky pre-commit hooks, and Prettier configuration. This prevents the use of raw Tailwind classes and hex colors, ensuring adherence to the design system.

```bash
npx @integrated-projects/cli guardrails
```

--------------------------------

### Configure Vercel Deployment for Private GitHub Packages

Source: https://ui.integrated-projects.com/index

Instructions for configuring Vercel deployments to use private GitHub packages. This involves creating a GitHub Personal Access Token, setting it as an environment variable in Vercel, and configuring the project's .npmrc file.

```bash
@integrated-projects:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
```

--------------------------------

### Verify npm Authentication with GitHub Packages

Source: https://ui.integrated-projects.com/index

Verifies that npm is correctly authenticated with GitHub Packages by checking the currently logged-in user for the specified registry. This command should return your GitHub username if the authentication is successful.

```bash
npm whoami --registry=https://npm.pkg.github.com
```

--------------------------------

### Add AI Integration for Design System Components

Source: https://ui.integrated-projects.com/index

Integrates AI assistants, such as Claude Code, with the IP Design System. This command makes the AI aware of all available components, improving its ability to generate code that adheres to the design system.

```bash
npx @integrated-projects/cli add mcp
```
Tokens:
Raw