The @krono/kit SDK is a React component library built around the @krono/hooks and @krono/core SDK.
It provides components for displaying orderbook data, time travel controls and many more.
You can find the @krono/kit SDK source code on Github.
You can get an interactive demo of the components by visiting the Storybook.
To get started, install the required packages.
The Krono packages are not yet published to npm. Follow the development guide to install and link the packages locally. Install Dependencies
Install the required dependencies:bun add @krono/kit @krono/ui tailwindcss lucide-react
Setup Styles
Import the required CSS files in your global stylesheet:@import "@krono/ui/globals.css";
@import "@krono/kit/globals.css";
Configure Path Aliases
Add path aliases to your tsconfig.json:{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@krono/ui/*": ["../../packages/ui/src/*"],
"@ui/*": ["../../packages/ui/src/*"]
}
}
}
Some bundlers (like Vite) require additional alias configuration in their config files. Next.js resolves these paths automatically from tsconfig.json.
Basic Usage
Krono Kit provides two approaches for integrating orderbook components:
Option 1: Standalone Root Component
Wrap your components with Orderbook.Root for a self-contained orderbook instance:
This pattern is used in the React example.
import { Orderbook } from '@krono/kit';
function App() {
return (
<Orderbook.Root config={{ symbol: 'BTC/USD' }}>
{/* Your orderbook UI */}
</Orderbook.Root>
);
}
Option 2: Provider Pattern
Use Orderbook.RootProvider with Orderbook.Panel when you need to access orderbook state across multiple components:
This pattern is used in the Next.js example.
import { Orderbook } from '@krono/kit';
export default function Layout({ children }) {
return (
<Orderbook.RootProvider config={{ symbol: 'BTC/USD', debug: true }}>
{/* Other components that consume orderbook state */}
<Orderbook.Panel>
{/* Your orderbook UI */}
</Orderbook.Panel>
</Orderbook.RootProvider>
);
}
The provider pattern is useful when you need to split orderbook-related components across your layout. For single-component use cases, Orderbook.Root is simpler.
Complete Example
Here’s a full orderbook implementation with table and playback controls:
import {
formatDigits,
formatPrice,
Orderbook,
OrderbookControls,
OrderbookTable,
} from '@krono/kit';
import { Card, CardContent } from '@krono/ui/components/ui/card';
export function OrderbookCard() {
return (
<Card className="flex flex-1 overflow-hidden">
<CardContent className="flex flex-1 px-0 pb-px pt-2">
<Orderbook.Root
config={{ symbol: 'BTC/USD' }}
renderTable={(props) => (
<OrderbookTable.Root
columns={{
total: {
label: 'Total',
children: ({ value }) => formatDigits(value.total),
},
quantity: {
label: 'Quantity',
children: ({ value }) => formatDigits(value.quantity),
},
price: {
label: 'Price',
className:
props.type === 'bids'
? 'font-semibold text-green-500 dark:text-green-600'
: 'font-semibold text-red-500 dark:text-red-600',
children: ({ value }) => formatPrice(value.price, 4),
},
}}
{...props}
/>
)}
>
<OrderbookControls.Root>
<OrderbookControls.LiveBadge />
<OrderbookControls.Toolbar>
<OrderbookControls.PlaybackButtons />
<OrderbookControls.Timeline />
</OrderbookControls.Toolbar>
</OrderbookControls.Root>
</Orderbook.Root>
</CardContent>
</Card>
);
}
Reference Implementations
Check out these example projects for complete setup references:
Next Steps
