@humain/ui

Reusable React components, design tokens, and Web Component wrappers for building consistent product interfaces.

Install

npm install @humain/ui lucide-react

Import the stylesheet once in your application entry point, then import the components you need:

import '@humain/ui/styles.css';
import { Button, ThemeProvider } from '@humain/ui';

export function App() {
  return (
    <ThemeProvider>
      <Button>Continue</Button>
    </ThemeProvider>
  );
}

The package also provides @humain/ui/tokens.css for tokens only and @humain/ui/one.css for HUMAIN One styling.

Web Components

Web Component wrappers are available for applications that do not use React:

import '@humain/ui/wc/hf-button.js';
import '@humain/ui/styles.css';

<hf-button>Continue</hf-button>

HUMAIN UI skills

Install the React skill interactively:

npx @humain/ui@latest skill

Choose project (recommended) to add skills to the current project or global to install for your user. Both choices prompt for one or more explicit agent IDs, then delegate only those agents with the pinned installer in non-interactive mode. Install the Web Component skill, or both skills, with:

npx @humain/ui@latest skill --web-components
npx @humain/ui@latest skill --all

For non-interactive environments, provide a scope, one or more agents, and --yes:

npx @humain/ui@latest skill --project --agent codex --yes

Repeat --agent to target additional supported coding agents.