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

# Overview

> Reference for configuring Orderbook.Root with detailed explanations of all available settings and their interactions.

The `Orderbook.Root` component serves as the context provider for all orderbook-related components in `@krono/kit`. It wraps the core `@krono/core` functionality and provides React hooks and components with access to orderbook data, asset pairs, and playback features.

## Basic Setup

The minimal configuration requires only a trading pair symbol:

```tsx theme={null}
import { Orderbook } from '@krono/kit'

export const App = () => {
  return (
    <Orderbook.Root config={{ symbol: 'BTC/USD' }}>
      {/* Your components */}
    </Orderbook.Root>
  )
}
```

## Configuration Structure

The `config` prop accepts an object with orderbook settings and optional asset pairs configuration:

```tsx theme={null}
import { Orderbook } from '@krono/kit'

export const App = () => {
  return (
    <Orderbook.Root
      config={{
        // Core orderbook settings
        symbol: 'BTC/USD',
        depth: 100,
        limit: 50,
        tickSize: 0.1,
        spreadGrouping: 1,

        // Performance settings
        throttleMs: 100,
        debounceMs: 0,

        // Reconnection settings
        reconnect: {
          enabled: true,
          maxAttempts: 5,
          delayMs: 1000
        },

        // History settings
        historyEnabled: false,
        maxHistoryLength: 100,

        // Asset pairs settings
        assetPairs: {
          autoFetch: true,
          topN: 100,
          debug: false
        },

        // Debug logging
        debug: false
      }}
    >
      <Orderbook.Panel />
    </Orderbook.Root>
  )
}
```

## Context Providers

The `Orderbook.Root` component automatically provides the context providers, defined by `@krono/hooks`:

* [Orderbook Context](/docs/hooks/providers/orderbook-provider): Core settings for symbol, depth, limits, and reconnection
* [AssetPairs Context](/docs/hooks/providers/asset-pairs-provider): Manages trading pair metadata via `useAssetPairs()`

All child components can access these contexts through the provided hooks.

<Note>
  The `Orderbook.Root` component must wrap all components that need access to orderbook data. It cannot be nested.
</Note>

## Configuration Sections

* [Orderbook Settings](/docs/kit/configuration/orderbook): Core settings for symbol, depth, limits, and reconnection
* [Performance Settings](/docs/kit/configuration/performance): Throttling and debouncing for optimal performance
* [History Configuration](/docs/kit/configuration/history): Enable snapshot tracking and playback features
* [Asset Pairs](/docs/kit/configuration/asset-pairs): Configure trading pair metadata fetching

## Props

<ParamField path="config" type="OrderbookRootConfig" required>
  Configuration object for the orderbook provider.

  <Expandable title="config properties">
    <ParamField path="symbol" type="string" required>
      Trading pair symbol (e.g., `BTC/USD`)
    </ParamField>

    <ParamField path="depth" type="number">
      Subscription depth: `10`, `25`, `100`, `500`, or `1000`. Default: `1000`
    </ParamField>

    <ParamField path="limit" type="number">
      Maximum price levels per side. Default: `100`
    </ParamField>

    <ParamField path="tickSize" type="number">
      Minimum price increment. Auto-fetched if not provided.
    </ParamField>

    <ParamField path="spreadGrouping" type="number">
      Group price levels by this increment. Default: `0`
    </ParamField>

    <ParamField path="throttleMs" type="number">
      Update frequency in milliseconds. Default: `100`
    </ParamField>

    <ParamField path="debounceMs" type="number">
      Debounce delay in milliseconds. Default: `0`
    </ParamField>

    <ParamField path="reconnect" type="object">
      Reconnection settings.

      <Expandable title="reconnect properties">
        <ParamField path="enabled" type="boolean">
          Enable auto-reconnect. Default: `true`
        </ParamField>

        <ParamField path="maxAttempts" type="number">
          Max reconnection attempts. Default: `Infinity`
        </ParamField>

        <ParamField path="delayMs" type="number">
          Delay between attempts. Default: `1000`
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField path="historyEnabled" type="boolean">
      Enable snapshot history. Default: `false`
    </ParamField>

    <ParamField path="maxHistoryLength" type="number">
      Max snapshots to store. Default: `100`
    </ParamField>

    <ParamField path="assetPairs" type="object">
      Asset pairs configuration.

      <Expandable title="assetPairs properties">
        <ParamField path="autoFetch" type="boolean">
          Auto-fetch on mount. Default: `false`
        </ParamField>

        <ParamField path="topN" type="number">
          Limit to top N pairs. Default: `undefined`
        </ParamField>

        <ParamField path="debug" type="boolean">
          Enable debug logging. Default: `false`
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField path="debug" type="boolean">
      Enable debug logging. Default: `false`
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="children" type="ReactNode" required>
  Child components that will have access to orderbook context.
</ParamField>

<Warning>
  Changes to the `config` prop will reinitialize the orderbook connection. Use stable configuration objects to avoid unnecessary reconnections.
</Warning>

## Related

<CardGroup cols={2}>
  <Card title="Performance" icon="gauge" href="/docs/kit/configuration/performance">
    Fine-tune update frequency with throttling and debouncing options.
  </Card>

  <Card title="History" icon="history" href="/docs/kit/configuration/history">
    Enable snapshot tracking and playback features for historical analysis and debugging.
  </Card>

  <Card title="Asset Pairs" icon="coins" href="/docs/kit/configuration/asset-pairs">
    Configure how trading pair metadata is fetched and cached. Required for auto-populating `tickSize`.
  </Card>

  <Card title="Orderbook" icon="chart-candlestick" href="/docs/kit/configuration/orderbook">
    Configure the core orderbook behavior.
  </Card>
</CardGroup>