Components

AGG 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 AGG 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.

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 AGG 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

A higher-touch trading component for buy and sell flows.

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.