UI SDK Overview

@alviere/ui is a component library for onboarding and payment flows. It provides ready-made form and flow components that handle validation, API integration, and event dispatch — so your team can embed complete Alviere workflows without building the underlying logic from scratch.

What's included

@alviere/ui ships two delivery formats from the same package:

• Web Components — framework-agnostic custom elements (e.g. <alviere-create-account>) that work in any HTML context or bundler
• Svelte components — typed Svelte exports for teams using Svelte

Both formats expose the same props and dispatch the same standardized events.

Architecture

Your frontend app
       │
       ▼
 @alviere/ui                    ← this package
  ├── Flow components           (MultiStepFlow)
  ├── Form components           (CreateAccount, AddBankAccount, …)
  ├── Input components          (TextInput, PhoneInput, …)
  └── Element components        (Button, Badge, Modal, …)
       │
       ▼
 @alviere/core                  ← peer dependency
  ├── Service layer
  ├── Auth & encryption
  └── Validation
       │
       ▼
  Alcore middleware              ← Alviere backend gateway
       │
       ▼
  Alviere Hive APIs

UI components never call Alviere APIs directly — all requests pass through @alviere/core, which handles authentication, request encryption, and routing via the Alcore middleware.

Relationship to @alviere/core

@alviere/ui is built on top of @alviere/core. The Core SDK handles all the data layer: JWT management, API calls, request encryption, validation, and error handling. The UI package adds rendering and user interaction on top.

If you want the logic layer without the prebuilt UI components — to build your own components or integrate into an existing design system — use @alviere/core directly.

Component categories

Authentication model

All form and flow components require a JWT from the Sierra API v3. Authentication is backend-to-backend — your server authenticates and returns the JWT, public certificate, and certificate ID to the browser. These values are passed directly as component props.

Next steps