> ## 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.
# OrderbookSettings
> Configure orderbook display preferences and behavior settings with composable components.
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
```tsx theme={null}
import { OrderbookSettings } from '@krono/kit'
export const SettingsBasic = () => {
return (
)
}
```
### In a Sidebar
Use settings in a sidebar layout.
```tsx theme={null}
import { OrderbookSettings } from '@krono/kit'
import { Orderbook, OrderbookTable } from '@krono/kit'
export const SettingsSidebar = () => {
return (
}
/>
)
}
```
## Components
### DepthSelect
Select the number of price levels to display.
```tsx theme={null}
```
**Props:**
Additional CSS classes to apply.
### SpreadSelect
Configure price level grouping based on spread.
```tsx theme={null}
```
**Props:**
Additional CSS classes to apply.
### ThrottleInput
Control the update throttle interval in milliseconds.
```tsx theme={null}
```
**Props:**
Additional CSS classes to apply.
### DebounceInput
Set the input debounce delay in milliseconds.
```tsx theme={null}
```
**Props:**
Additional CSS classes to apply.
### HistorySwitch
Toggle historical data tracking.
```tsx theme={null}
```
**Props:**
Additional CSS classes to apply.
### MaxHistoryInput
Set the maximum number of historical entries to retain.
```tsx theme={null}
```
**Props:**
Additional CSS classes to apply.
### DebugSwitch
Enable or disable debug mode.
```tsx theme={null}
```
**Props:**
Additional CSS classes to apply.
### Row
Container for a label and control pair.
```tsx theme={null}
{/* Control component */}
```
**Props:**
The label text for the setting.
The control component to display.
Additional CSS classes to apply.
### Separator
Visual separator between setting groups.
```tsx theme={null}
```
**Props:**
Additional CSS classes to apply.
### Popover
Popover components for displaying settings in an overlay.
#### Popover.Root
Root container for the popover.
```tsx theme={null}
{/* Trigger and Content */}
```
#### Popover.Trigger
Trigger element to open the popover.
```tsx theme={null}
```
**Props:**
Merge props with child element instead of wrapping.
The trigger element.
#### Popover.Content
Content container for the popover.
```tsx theme={null}
{/* Settings components */}
```
**Props:**
Settings components to display.
Additional CSS classes to apply.
## Integration Example
Complete example with all settings in a popover.
```tsx theme={null}
import { Orderbook, OrderbookSettings, OrderbookTable } from '@krono/kit'
import { Button } from '@/components/ui/button'
import { Settings } from 'lucide-react'
export const OrderbookWithSettings = () => {
return (
}
/>
Display
Performance
Advanced
)
}
```
## 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.
```
```