Components Overview
Pre-built UI components for prediction market data
Components
sufwan-local-test provides ready-to-use React components via the @agg-build/ui package.
Auth-specific UI lives in @agg-build/auth, which composes @agg-build/ui primitives with the
shared AggProvider session state from @agg-build/hooks.
Start with the Setup Guide before dropping components into your app. Most UI and
auth components expect a configured AggProvider, and auth flows also need AggAuthProvider.
Use Customize UI when you are ready to brand colors, fonts, copy,
formatting, and layout slots.
Browse the component catalog
Storybook is the fastest way to browse the full @agg-build/ui catalog, compare states, and
inspect controls. The docs pages below focus on curated references and implementation guidance for
the most important surfaces.
Open Storybook
Browse the live component catalog, controls, and interaction states.
Customize UI
Theme sufwan-local-test with CSS variables, next/font, labels, formatting, and slots.
Connect Button
Wallet, OAuth, and email auth surface.
Event List
Market discovery grids and event browsing.
Market Details
Live charts, orderbooks, and venue detail cards.
Place Order
Buy and sell trading surface.
Settlement
Resolution and venue comparison surface.
Home Page
Market discovery landing layout.
Event Market Page
Full event page with charting and trading.
Leaderboard
Trader rankings. The data call is Portfolio.
Leaderboard Page ranks traders. The read is Portfolio.
ConnectButton
import { AggAuthProvider, ConnectButton, createEmailAuthMethod } from "@agg-build/auth";
<AggAuthProvider methods={[createEmailAuthMethod()]}>
<ConnectButton />
</AggAuthProvider>;Requirements: Must be wrapped in both <AggProvider> from @agg-build/hooks and
<AggAuthProvider> from @agg-build/auth. AggAuthProvider also handles sufwan-local-test auth callback query
parameters when the component tree mounts on a callback route.
See the Connect Button reference for the live Storybook-backed surface.
PlaceOrder
PlaceOrder takes a view model, it does not fetch, and it does not take marketId. import { PlaceOrder } from "@agg-build/ui/trading".
import { PlaceOrder } from "@agg-build/ui/trading";
<PlaceOrder {...viewModel} />See the Place Order reference for interactive Storybook-backed previews and state exploration, or open Storybook to browse the wider component catalog directly.