@selfxyz/euclid-web

Web UI component library for Self — pure React components with inline styles powered by shared design tokens.

Installation

npm install @selfxyz/euclid-web
# or
yarn add @selfxyz/euclid-web

Peer Dependencies

npm install react react-dom

Requires react >= 18.2.0 and react-dom >= 18.2.0.

Quick Start

import { Button, IDCard, HomeScreen, colors } from "@selfxyz/euclid-web";

function App() {
  return (
    <HomeScreen
      pointsCardProps={{ points: 1250 }}
      topNavigationPrimaryButton={{ icon: GearIcon }}
    />
  );
}

Architecture

@selfxyz/euclid-web is organized into three layers: theme tokens, components, and screens. Screens are full-page compositions built from the component primitives, which are all styled using shared design tokens from @selfxyz/euclid-core.

@selfxyz/euclid-core (design tokens)
        │
        ▼
@selfxyz/euclid-web
  ├── theme/       ← tokens re-exported + web font families
  ├── components/  ← UI primitives (buttons, cards, icons, …)
  └── screens/     ← full-page compositions

Screen & Component Dependency Graph

The diagram below shows every screen and the components it directly consumes.

graph TB
    subgraph Screens
        Home[HomeScreen]
        Points[PointsScreen]
        QR[QRViewfinderScreen]
        ProofReq[ProofRequestScreen]
        ProofReceipt[ProofRequestReceiptScreen]
        IDType[IDTypeScreen]
        IDData[IDDataScreen]
        Recovery[RecoveryPhraseScreen]
        Backup[BackupMethodPickerScreen]
        Country[CountryPickerScreen]
        Settings[SettingsViewScreen]
        ProofHist[ProofHistoryScreen]
        ComingSoon[ComingSoonScreen]
        Tour[TourScreen]
    end

    subgraph Components
        TopNav[TopNavigation]
        TopNavDlg[TopNavigationDialogue]
        Btn[Button]
        IDCardC[IDCard]
        SPC[SelfPointsCard]
        CCTA[ContentCardCTA]
        CCGrid[ContentCardGrid]
        EPT[EarnPointsTile]
        SegPick[SegmentedPicker]
        DTV[DetailedTableView]
        DTVC[DetailedTableViewCell]
        TV[TableView]
        TVC[TableViewCell]
        PR[ProofRequest]
        VF[ViewFinder]
        IDTypeC[IDTypeCard]
        IDC[IdentificationDetailsCard]
        RP[RecoveryPhrase]
        SF[SearchField]
        Dlg[Dialogue]
        PB[ProgressBar]
    end

    subgraph Icons
        XIc[XIcon]
        QCIc[QuestionCircleIcon]
        QCSIc[QuestionCircleStrokeIcon]
        PIc[PlusIcon]
        CpIc[CopyIcon]
        CDIc[CheckDiamondIcon]
        SLIc[ShieldLockIcon]
        LAIc[LeftArrowIcon]
        IDLIc[IDCardLogoIcon]
    end

    Home --> TopNav
    Home --> Btn
    Home --> IDCardC
    Home --> SPC
    Home --> CCTA
    Home --> CCGrid
    Home --> EPT

    Points --> TopNav
    Points --> SegPick
    Points --> SPC
    Points --> CCTA
    Points --> EPT
    Points --> DTV
    Points --> DTVC

    QR --> TopNavDlg
    QR --> Btn
    QR --> VF
    QR --> XIc
    QR --> QCIc
    QR --> PIc
    QR --> CpIc

    ProofReq --> TopNav
    ProofReq --> PR
    ProofReq --> Btn
    ProofReq --> XIc
    ProofReq --> CDIc

    ProofReceipt --> TopNavDlg
    ProofReceipt --> PR
    ProofReceipt --> XIc
    ProofReceipt --> SLIc

    IDType --> TopNavDlg
    IDType --> IDTypeC
    IDType --> LAIc
    IDType --> QCSIc
    IDType --> PIc
    IDType --> IDLIc

    IDData --> TopNavDlg
    IDData --> IDC
    IDData --> DTV
    IDData --> DTVC
    IDData --> Btn
    IDData --> LAIc
    IDData --> SLIc

    Recovery --> TopNavDlg
    Recovery --> RP
    Recovery --> Btn
    Recovery --> LAIc

    Backup --> TopNavDlg

    Country --> TopNavDlg
    Country --> SF
    Country --> TV
    Country --> TVC
    Country --> XIc
    Country --> QCSIc

    Settings --> TopNavDlg
    Settings --> CCTA
    Settings --> CCGrid
    Settings --> DTV
    Settings --> DTVC

    ProofHist --> TopNavDlg
    ProofHist --> DTV
    ProofHist --> DTVC
    ProofHist --> Btn

    ComingSoon --> TopNavDlg
    ComingSoon --> Btn
    ComingSoon --> LAIc
    ComingSoon --> QCSIc
    ComingSoon --> PIc
    ComingSoon --> IDLIc

    Tour --> Dlg
    Tour --> PB

    style Home fill:#1a1a2e,stroke:#6366f1,color:#fff
    style Points fill:#1a1a2e,stroke:#6366f1,color:#fff
    style QR fill:#1a1a2e,stroke:#6366f1,color:#fff
    style ProofReq fill:#1a1a2e,stroke:#6366f1,color:#fff
    style ProofReceipt fill:#1a1a2e,stroke:#6366f1,color:#fff
    style IDType fill:#1a1a2e,stroke:#6366f1,color:#fff
    style IDData fill:#1a1a2e,stroke:#6366f1,color:#fff
    style Recovery fill:#1a1a2e,stroke:#6366f1,color:#fff
    style Backup fill:#1a1a2e,stroke:#6366f1,color:#fff
    style Country fill:#1a1a2e,stroke:#6366f1,color:#fff
    style Settings fill:#1a1a2e,stroke:#6366f1,color:#fff
    style ProofHist fill:#1a1a2e,stroke:#6366f1,color:#fff
    style ComingSoon fill:#1a1a2e,stroke:#6366f1,color:#fff
    style Tour fill:#1a1a2e,stroke:#6366f1,color:#fff

Screens

| Screen | Description | |--------|-------------| | HomeScreen | Main dashboard with ID card, points, content cards, and earn tiles | | PointsScreen | Points balance, history, and earning opportunities | | QRViewfinderScreen | Camera viewfinder for scanning QR codes | | ProofRequestScreen | Displays incoming proof requests from apps | | ProofRequestReceiptScreen | Confirmation receipt after proof submission | | IDTypeScreen | Document type selection (passport, ID card, driver's license, etc.) | | IDDataScreen | Detailed view of identity document data fields | | RecoveryPhraseScreen | Displays and manages recovery phrase backup | | BackupMethodPickerScreen | Selection of backup method options | | CountryPickerScreen | Searchable country selection with flag icons | | SettingsViewScreen | App settings with menu sections and content cards | | ProofHistoryScreen | History of past proof verifications | | ComingSoonScreen | Placeholder for upcoming features | | TourScreen | Onboarding walkthrough dialogue flow |

Components

Layout & Navigation

| Component | Description | |-----------|-------------| | TopNavigation | Top bar with title and action buttons (4 variants) | | TopNavigationDialogue | Navigation bar for dialogue/modal contexts | | TabBar | Bottom tab bar (home, points, explore) | | ProgressBar | Step progress indicator with header | | ExpandableBottomLayout | Expandable bottom sheet container |

Actions & Input

| Component | Description | |-----------|-------------| | Button | Primary action button (10+ variants including icon, label, mega, stacked) | | ProofButton | Hold-to-verify button with states (waiting, preparing, ready, verifying) | | SearchField | Text input with search styling and dismiss action | | SegmentedPicker | Segmented control for value selection | | ToggleSwitch | On/off toggle with optional accessibility label | | Stepper | Increment/decrement numeric control |

Cards & Content

| Component | Description | |-----------|-------------| | IDCard | Identity document card (passport, ID card, driver's license + state variants) | | ExposedIDCard | Expanded identity card showing detailed fields | | SelfPointsCard | Points balance display with details | | TileCard | Linked image tile with title | | EarnPointsTile | Points earning opportunity card | | ContentCardCTA | Call-to-action content card (4 variants) | | ContentCardGrid | Grid layout of action buttons | | IDTypeCard | Document type selection card | | IdentificationDetailsCard | Summary card for ID document details | | CircuitProgressCard | ZK circuit generation progress display | | Badge | Status badge (success, warning, error, info, neutral) |

Tables & Lists

| Component | Description | |-----------|-------------| | TableView | Simple list container | | TableViewCell | Row within a TableView | | DetailedTableView | Enhanced list with title and scroll control | | DetailedTableViewCell | Rich row with multiple content variants |

Modals & Overlays

| Component | Description | |-----------|-------------| | Dialogue | Full-screen dialogue (simple, with-cta, proof-generation) | | DialogueText | Styled text content for dialogues | | BackupEnabledModal | Backup confirmation modal | | CTAModal | Call-to-action modal overlay | | ViewFinder | Camera viewfinder frame with optional blur | | BlurView | Blurred background overlay |

Identity & Security

| Component | Description | |-----------|-------------| | RecoveryPhrase | Recovery phrase display (hidden, revealed, copied states) | | SecretPhraseClip | Individual phrase word chip | | NovaPin | PIN entry display | | ProofRequest | Proof request details (default, loading, receipt) | | ProofGeneration | Step-by-step proof generation progress |

Information Display

| Component | Description | |-----------|-------------| | InfoBox | Generic information container with footer | | BackupInfoBox | Backup-specific info box | | PointsInfoBox | Points-specific info box | | Tips | List of tip items | | EmptyState | Placeholder for empty data states | | UninstallNotice | App uninstall information notice | | StatusState | Status indicator with variants |

Typography

| Component | Description | |-----------|-------------| | Title | Page title (default 28px, large 38px) | | Description | Body description text | | BodyText | Standard body copy | | Caption | Small caption text | | SubHeader | Section subheader |

Icons

95+ SVG icon components covering navigation, status, documents, security, actions, and more. All icons accept size and color props.

import { LockIcon, ShieldLockIcon, CheckCircleIcon } from "@selfxyz/euclid-web";

<LockIcon size={24} color="#6366f1" />

Theme Tokens

Design tokens are re-exported from @selfxyz/euclid-core for consistent styling:

import { colors, spacing, borderRadius, fontSize, fontWeight, typography } from "@selfxyz/euclid-web";

// Colors
colors.blue[500]   // Primary blue
colors.slate[900]  // Dark text

// Spacing
spacing.sm   // 8px
spacing.md   // 16px
spacing.lg   // 24px

// Typography (web-specific)
fontFamily.primary  // "DIN OT"

Development

# Build
yarn workspace @selfxyz/euclid-web build

# Watch mode
yarn workspace @selfxyz/euclid-web dev

# Type check
yarn workspace @selfxyz/euclid-web type-check

# Storybook (from repo root)
yarn storybook

License

Business Source License 1.1