UI Kit

Packages

Four npm packages — pick the layer that fits your app

Packages

sufwan-local-test ships four packages under @agg-build. Each builds on the one below it:

@agg-build/auth     → Auth UI + provider adapters
@agg-build/ui       → Pre-built React components (Liveline charts, orderbooks, pages)
@agg-build/hooks    → React hooks + providers (data fetching, WS, caching)
@agg-build/sdk      → Vanilla TypeScript client (REST + WebSocket + CandleBuilder)

Pick the highest layer you need. Lower layers are included as dependencies automatically.

PackageUse whenFramework
@agg-build/sdkFull control, or not using React (Node, React Native, vanilla JS)None
@agg-build/hooksReact app, you build your own UI, you pick your own chart libraryReact
@agg-build/uiYou want drop-in components that work out of the boxReact
@agg-build/authYou want the connect/sign-in UI with pluggable auth methodsReact

@agg-build/sdk

Framework-agnostic client for browsers, Node.js, and React Native. Zero peer dependencies and, as of v4, zero runtime dependencies.

REST client — createAggClient() handles auth headers, in-memory session state, and request helpers for the public REST API. Use refreshAccessToken() when you need to renew a user session. Tokens are never persisted to storage — see Token storage for what that means in React Native.

WebSocket client — AggWebSocket manages connection lifecycle, subscriptions, and live orderbook state for you.

CandleBuilder — Builds OHLCV candles from live orderbook and trade data so you can feed any chart library.

Market aggregation — mergeCandles() is a client-side volume-weighted merge of candle objects the caller already has. It is not a chart API parameter, and the API does not merge candles. mergeClosedCandles() is the same helper for arrays of closed candles the caller already has.

View on npm →


@agg-build/hooks

React hooks and providers on top of @agg-build/sdk. Powered by TanStack React Query for caching, deduplication, and background refetch.

The hooks are chart-library-agnostic — they return generic data types (LiveCandle[], OrderbookState, etc.) that you render however you want.

View on npm →


@agg-build/ui

Pre-built React components for charts, orderbooks, trading, and full page layouts. Styled with Tailwind CSS and fully themeable via CSS variables.

Components must be rendered inside <AggProvider>. They call hooks internally — no manual data fetching needed. Uses grouped entry points (@agg-build/ui/pages, @agg-build/ui/events, @agg-build/ui/primitives, etc.) for tree-shaking.

Browse the components docs for curated references, or open Storybook for the live component catalog and interactive states. Use Customize UI for brand tokens, custom fonts, labels, formatting, and layout slots.

View on npm →


@agg-build/auth

Optional auth package with a modular adapter pattern and the ConnectButton chooser UI.

Auth stays separate so partners only install the wallet or OAuth dependencies they actually use, while @agg-build/ui remains focused on market data and trading surfaces.

See the Connect Button reference for the live auth surface.

Built-in adapters

AdapterImportPeer dependency
SIWE (Ethereum)@agg-build/auth/siwewagmi
SIWS (Solana)@agg-build/auth/siws@solana/wallet-adapter-react, bs58
Google OAuth@agg-build/authNone
Twitter/X OAuth@agg-build/authNone
Apple Sign In@agg-build/authNone
Email magic link@agg-build/authNone

View on npm →


Versioning

All packages use linked versioning. When one changes, the rest are versioned in lockstep so compatible layers stay aligned.

See the Changelog for the full release history and per-version notes across all four packages.

Next steps

On this page