Human.Tech Design System

A React component library and design system for Human.Tech products.

Features

• React Components — TypeScript-first React components with proper typing
• Design Tokens — Consistent spacing, colors, typography via CSS variables
• Storybook Documentation — Interactive component showcase
• CSS Modules — Scoped styles for each component

Components

• Button — Variants: primary, secondary, tertiary, text, outline, surface, link-gray, link-brand, danger
• Input — Text input field with labels, helpers, error states
• Dropdown/Select — Single select, searchable, and multiselect variants
• ContextMenu — Floating menu with optional icons
• BottomSheet — Slide-up modal
• Checkbox, Radio, Toggle — Form controls
• Chip — Tag/chip component with optional close button
• And more...

Installation

echo "@holonym-foundation:registry=https://npm.pkg.github.com" >> .npmrc

pnpm add @holonym-foundation/ui

Development

The repo uses pnpm only (pinned by packageManager; run corepack enable once).

pnpm install
pnpm storybook        # http://localhost:3000
pnpm lint             # typecheck, design-lint, story-copy-lint, token gates (the PR gate)
pnpm build
pnpm build-storybook

Contributing

design.md is the design-system contract: tokens, the icon set, the Storybook spine and rule ids. CLAUDE.md is the working guide. pnpm lint is the gate every pull request must pass; CI also runs both builds and the browser audits.

Usage

import { Button, Dropdown } from '@holonym-foundation/ui'

export function MyApp() {
  return (
    <>
      <Button variant="primary">Click me</Button>
      <Dropdown
        options={[
          { value: 'eth', label: 'Ethereum' },
          { value: 'poly', label: 'Polygon' },
        ]}
        onChange={(value) => console.log(value)}
        label="Select network"
      />
    </>
  )
}

Passport partner score integration

Use PassportScoreSurface when a host already owns score fetching, wallet signing, and its server-side Passport proxy. The component owns the Passport presentation only. A route can require a larger minimum; HTDS promotes it before rendering, without remounting the host's state.

import { PassportScoreSurface } from '@holonym-foundation/ui'
import '@holonym-foundation/ui/styles.css'

export function ShieldPassportScore({ score, loading, onVerify }) {
  return (
    <PassportScoreSurface
      environment="partner"
      presentation="pill"
      minimumPresentation="sidecar"
      skin="custom"
      taskId="shield-humanity-check"
      state={loading ? 'loading' : score >= 20 ? 'verified' : 'below'}
      score={score}
      threshold={20}
      addVerificationsCta={{ onClick: onVerify }}
    />
  )
}

Keep API credentials behind the host's same-origin backend proxy. Pass only controlled state and callbacks to the UI package. PassportScoreSurface supports pill, mini, and sidecar; use PassportApp for a full browser application rather than stretching an embed.

CSS Import

Components use CSS variables from design tokens. Import the CSS in your app:

import '@holonym-foundation/ui/styles.css'

License

MIT