Skip to main content
The OrderbookSettings component provides a collection of UI controls for adjusting orderbook configuration options like depth limits, update frequency, grouping, and debug settings.

​
Basic Usage

import { OrderbookSettings } from '@krono/kit'

export const SettingsBasic = () => {
  return (
    <div className="space-y-4">
      <OrderbookSettings.Row label="Depth">
        <OrderbookSettings.DepthSelect />
      </OrderbookSettings.Row>
      <OrderbookSettings.Row label="Spread">
        <OrderbookSettings.SpreadSelect />
      </OrderbookSettings.Row>
    </div>
  )
}

​
Anatomy

import { OrderbookSettings } from '@krono/kit'

<div>
  <OrderbookSettings.Row label="...">
    <OrderbookSettings.DepthSelect />
  </OrderbookSettings.Row>
  <OrderbookSettings.Separator />
  <OrderbookSettings.Row label="...">
    <OrderbookSettings.ThrottleInput />
  </OrderbookSettings.Row>
  <OrderbookSettings.Row label="...">
    <OrderbookSettings.DebounceInput />
  </OrderbookSettings.Row>
  <OrderbookSettings.Row label="...">
    <OrderbookSettings.HistorySwitch />
  </OrderbookSettings.Row>
  <OrderbookSettings.Row label="...">
    <OrderbookSettings.MaxHistoryInput />
  </OrderbookSettings.Row>
  <OrderbookSettings.Row label="...">
    <OrderbookSettings.DebugSwitch />
  </OrderbookSettings.Row>
</div>

​
Examples

​
Complete Settings Panel

A full settings panel with all available controls. 
import { OrderbookSettings } from '@krono/kit'

export const SettingsPanel = () => {
  return (
    <div className="space-y-4">
      <OrderbookSettings.Row label="Depth">
        <OrderbookSettings.DepthSelect />
      </OrderbookSettings.Row>

      <OrderbookSettings.Row label="Spread Grouping">
        <OrderbookSettings.SpreadSelect />
      </OrderbookSettings.Row>

      <OrderbookSettings.Separator />

      <OrderbookSettings.Row label="Throttle (ms)">
        <OrderbookSettings.ThrottleInput />
      </OrderbookSettings.Row>

      <OrderbookSettings.Row label="Debounce (ms)">
        <OrderbookSettings.DebounceInput />
      </OrderbookSettings.Row>

      <OrderbookSettings.Separator />

      <OrderbookSettings.Row label="Enable History">
        <OrderbookSettings.HistorySwitch />
      </OrderbookSettings.Row>

      <OrderbookSettings.Row label="Max History">
        <OrderbookSettings.MaxHistoryInput />
      </OrderbookSettings.Row>

      <OrderbookSettings.Separator />

      <OrderbookSettings.Row label="Debug Mode">
        <OrderbookSettings.DebugSwitch />
      </OrderbookSettings.Row>
    </div>
  )
}

​
In a Popover

Display settings in a popover for space-efficient UI. 
import { OrderbookSettings } from '@krono/kit'
import { Button } from '@/components/ui/button'
import { Settings } from 'lucide-react'

export const SettingsPopover = () => {
  return (
    <OrderbookSettings.Popover.Root>
      <OrderbookSettings.Popover.Trigger asChild>
        <Button variant="outline" size="icon">
          <Settings className="h-4 w-4" />
        </Button>
      </OrderbookSettings.Popover.Trigger>
      <OrderbookSettings.Popover.Content className="w-80">
        <div className="space-y-4">
          <OrderbookSettings.Row label="Depth">
            <OrderbookSettings.DepthSelect />
          </OrderbookSettings.Row>
          <OrderbookSettings.Row label="Spread">
            <OrderbookSettings.SpreadSelect />
          </OrderbookSettings.Row>
        </div>
      </OrderbookSettings.Popover.Content>
    </OrderbookSettings.Popover.Root>
  )
}

​
Display Settings Only

A minimal settings panel with just display options. 
import { OrderbookSettings } from '@krono/kit'

export const DisplaySettings = () => {
  return (
    <div className="space-y-4">
      <OrderbookSettings.Row label="Price Levels">
        <OrderbookSettings.DepthSelect />
      </OrderbookSettings.Row>

      <OrderbookSettings.Row label="Price Grouping">
        <OrderbookSettings.SpreadSelect />
      </OrderbookSettings.Row>
    </div>
  )
}

​
Performance Settings

Focus on performance-related controls. 
import { OrderbookSettings } from '@krono/kit'

export const PerformanceSettings = () => {
  return (
    <div className="space-y-4">
      <OrderbookSettings.Row label="Update Throttle (ms)">
        <OrderbookSettings.ThrottleInput />
      </OrderbookSettings.Row>

      <OrderbookSettings.Row label="Input Debounce (ms)">
        <OrderbookSettings.DebounceInput />
      </OrderbookSettings.Row>

      <OrderbookSettings.Separator />

      <OrderbookSettings.Row label="Enable History">
        <OrderbookSettings.HistorySwitch />
      </OrderbookSettings.Row>

      <OrderbookSettings.Row label="Max History Entries">
        <OrderbookSettings.MaxHistoryInput />
      </OrderbookSettings.Row>
    </div>
  )
}

​
In a Sidebar

Use settings in a sidebar layout. 
import { OrderbookSettings } from '@krono/kit'
import { Orderbook, OrderbookTable } from '@krono/kit'

export const SettingsSidebar = () => {
  return (
    <div className="flex h-screen">
      <aside className="w-80 border-r p-4 overflow-y-auto">
        <h2 className="text-lg font-semibold mb-4">Orderbook Settings</h2>
        <div className="space-y-4">
          <OrderbookSettings.Row label="Depth">
            <OrderbookSettings.DepthSelect />
          </OrderbookSettings.Row>
          <OrderbookSettings.Row label="Spread">
            <OrderbookSettings.SpreadSelect />
          </OrderbookSettings.Row>
          <OrderbookSettings.Separator />
          <OrderbookSettings.Row label="Debug">
            <OrderbookSettings.DebugSwitch />
          </OrderbookSettings.Row>
        </div>
      </aside>

      <main className="flex-1">
        <Orderbook.Root config={{ symbol: 'BTC/USD' }}>
          <Orderbook.Panel
            renderTable={(props) => <OrderbookTable.Root {...props} />}
          />
        </Orderbook.Root>
      </main>
    </div>
  )
}

​
Components

​
DepthSelect

Select the number of price levels to display. 
<OrderbookSettings.Row label="Depth">
  <OrderbookSettings.DepthSelect />
</OrderbookSettings.Row>
Props:
​
className
string
Additional CSS classes to apply.

​
SpreadSelect

Configure price level grouping based on spread. 
<OrderbookSettings.Row label="Spread Grouping">
  <OrderbookSettings.SpreadSelect />
</OrderbookSettings.Row>
Props:
​
className
string
Additional CSS classes to apply.

​
ThrottleInput

Control the update throttle interval in milliseconds. 
<OrderbookSettings.Row label="Throttle (ms)">
  <OrderbookSettings.ThrottleInput />
</OrderbookSettings.Row>
Props:
​
className
string
Additional CSS classes to apply.

​
DebounceInput

Set the input debounce delay in milliseconds. 
<OrderbookSettings.Row label="Debounce (ms)">
  <OrderbookSettings.DebounceInput />
</OrderbookSettings.Row>
Props:
​
className
string
Additional CSS classes to apply.

​
HistorySwitch

Toggle historical data tracking. 
<OrderbookSettings.Row label="Enable History">
  <OrderbookSettings.HistorySwitch />
</OrderbookSettings.Row>
Props:
​
className
string
Additional CSS classes to apply.

​
MaxHistoryInput

Set the maximum number of historical entries to retain. 
<OrderbookSettings.Row label="Max History">
  <OrderbookSettings.MaxHistoryInput />
</OrderbookSettings.Row>
Props:
​
className
string
Additional CSS classes to apply.

​
DebugSwitch

Enable or disable debug mode. 
<OrderbookSettings.Row label="Debug Mode">
  <OrderbookSettings.DebugSwitch />
</OrderbookSettings.Row>
Props:
​
className
string
Additional CSS classes to apply.

​
Row

Container for a label and control pair. 
<OrderbookSettings.Row label="Setting Name">
  {/* Control component */}
</OrderbookSettings.Row>
Props:
​
label
string
required
The label text for the setting.
​
children
ReactNode
required
The control component to display.
​
className
string
Additional CSS classes to apply.

​
Separator

Visual separator between setting groups. 
<OrderbookSettings.Separator />
Props:
​
className
string
Additional CSS classes to apply.

​
Popover

Popover components for displaying settings in an overlay.

​
Popover.Root

Root container for the popover. 
<OrderbookSettings.Popover.Root>
  {/* Trigger and Content */}
</OrderbookSettings.Popover.Root>

​
Popover.Trigger

Trigger element to open the popover. 
<OrderbookSettings.Popover.Trigger asChild>
  <Button>Settings</Button>
</OrderbookSettings.Popover.Trigger>
Props:
​
asChild
boolean
Merge props with child element instead of wrapping.
​
children
ReactNode
required
The trigger element.

​
Popover.Content

Content container for the popover. 
<OrderbookSettings.Popover.Content className="w-80">
  {/* Settings components */}
</OrderbookSettings.Popover.Content>
Props:
​
children
ReactNode
required
Settings components to display.
​
className
string
Additional CSS classes to apply.

​
Integration Example

Complete example with all settings in a popover. 
import { Orderbook, OrderbookSettings, OrderbookTable } from '@krono/kit'
import { Button } from '@/components/ui/button'
import { Settings } from 'lucide-react'

export const OrderbookWithSettings = () => {
  return (
    <Orderbook.Root config={{ symbol: 'BTC/USD' }}>
      <div className="relative">
        <Orderbook.Panel
          renderTable={(props) => <OrderbookTable.Root {...props} />}
        />

        <div className="absolute top-4 right-4">
          <OrderbookSettings.Popover.Root>
            <OrderbookSettings.Popover.Trigger asChild>
              <Button variant="outline" size="icon">
                <Settings className="h-4 w-4" />
              </Button>
            </OrderbookSettings.Popover.Trigger>
            <OrderbookSettings.Popover.Content className="w-80">
              <div className="space-y-4">
                <h3 className="font-semibold">Display</h3>
                <OrderbookSettings.Row label="Depth">
                  <OrderbookSettings.DepthSelect />
                </OrderbookSettings.Row>
                <OrderbookSettings.Row label="Grouping">
                  <OrderbookSettings.SpreadSelect />
                </OrderbookSettings.Row>

                <OrderbookSettings.Separator />

                <h3 className="font-semibold">Performance</h3>
                <OrderbookSettings.Row label="Throttle (ms)">
                  <OrderbookSettings.ThrottleInput />
                </OrderbookSettings.Row>
                <OrderbookSettings.Row label="Debounce (ms)">
                  <OrderbookSettings.DebounceInput />
                </OrderbookSettings.Row>

                <OrderbookSettings.Separator />

                <h3 className="font-semibold">Advanced</h3>
                <OrderbookSettings.Row label="History">
                  <OrderbookSettings.HistorySwitch />
                </OrderbookSettings.Row>
                <OrderbookSettings.Row label="Max History">
                  <OrderbookSettings.MaxHistoryInput />
                </OrderbookSettings.Row>
                <OrderbookSettings.Row label="Debug">
                  <OrderbookSettings.DebugSwitch />
                </OrderbookSettings.Row>
              </div>
            </OrderbookSettings.Popover.Content>
          </OrderbookSettings.Popover.Root>
        </div>
      </div>
    </Orderbook.Root>
  )
}

​
Notes

All settings components must be used within an Orderbook.Root context to function properly.
Use OrderbookSettings.Row to maintain consistent spacing and alignment between labels and controls.
Enabling debug mode may impact performance. Use only during development.