@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

The skill installer requires Node.js 22.20.0 or newer. This requirement is separate from the component library's runtime support.

Install the React skill interactively:

npx @humain/ui@latest skill

The pinned [email protected] installer runs its native interactive wizard for agent selection, installation scope, and confirmation. Choose Project (recommended) to add skills to the current project or Global to install for your user. Use arrow keys to navigate, Space to toggle agents, and Enter to confirm; type to search. Review the selected agents and destinations before installing. Agent auto-detection may skip selection when only one agent is detected. No agent IDs need to be typed into wrapper prompts.

Install the Web Component skill, or both skills, through the same wizard:

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. Fully specified scope and agents preserve the targeted installation behavior, including the completion summary. Delegated interactive flows rely on native installer output instead; cancellation does not print a wrapper success message.

Partial interactive flags

• skill --global delegates agent selection and confirmation to the native wizard with global scope selected.
• skill --agent codex delegates scope selection and confirmation to the native wizard.
• skill --project without an explicit --agent now fails before installation. The pinned installer has --global but no add --project flag, so the wrapper cannot safely enforce project scope while leaving agent selection interactive. Run npx @humain/ui@latest skill and choose Project in the wizard, or use npx @humain/ui@latest skill --project --agent codex.

The same partial-flag rules apply with --all or --web-components. Non-TTY usage still requires --yes, an explicit scope, and at least one --agent. The same safeguards apply inside coding-agent environments, even with a TTY: inherited agent markers can otherwise bypass the native installer's confirmation and overwrite existing skill directories.