> ## Documentation Index
> Fetch the complete documentation index at: https://docs.agg.market/llms.txt
> Use this file to discover all available pages before exploring further.

# Components Overview

> Pre-built UI components for prediction market data

# 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`.

<Info>
  Start with the [Setup Guide](/api/setup) before dropping components into your app. Most UI and
  auth components expect a configured `AggProvider`, and auth flows also need `AggAuthProvider`.
  Use [Customize UI](/components/customization) when you are ready to brand colors, fonts, copy,
  formatting, and layout slots.
</Info>

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

<CardGroup cols={2}>
  <Card title="Open Storybook" href="https://storybook.agg.market" icon="book-open">
    Browse the live component catalog, controls, and interaction states.
  </Card>

  <Card title="Customize UI" href="/components/customization" icon="paintbrush">
    Theme AGG with CSS variables, `next/font`, labels, formatting, and slots.
  </Card>

  <Card title="Connect Button" href="/components/auth/connect-button" icon="key">
    Wallet, OAuth, and email auth surface.
  </Card>

  <Card title="Event List" href="/components/events/event-list" icon="table-cells-large">
    Market discovery grids and event browsing.
  </Card>

  <Card title="Market Details" href="/components/events/market-details" icon="chart-line">
    Live charts, orderbooks, and venue detail cards.
  </Card>

  <Card title="Place Order" href="/components/trading/place-order" icon="arrow-trend-up">
    Buy and sell trading surface.
  </Card>

  <Card title="Settlement" href="/components/trading/settlement" icon="scale-balanced">
    Resolution and venue comparison surface.
  </Card>

  <Card title="Home Page" href="/components/pages/home-page" icon="house">
    Market discovery landing layout.
  </Card>

  <Card title="Event Market Page" href="/components/pages/event-market-page" icon="layer-group">
    Full event page with charting and trading.
  </Card>
</CardGroup>

## ConnectButton

```tsx theme={null}
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](/components/auth/connect-button) for the live Storybook-backed
surface.

## PlaceOrder

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

```tsx theme={null}
import { PlaceOrder } from "@agg-build/ui/trading";

<PlaceOrder {...viewModel} />
```

See the [Place Order reference](/components/trading/place-order) for interactive Storybook-backed
previews and state exploration, or open [Storybook](https://storybook.agg.market) to browse the
wider component catalog directly.