Skip to main content

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.

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

Install Dependencies

Install the required dependencies:
bun add @krono/kit @krono/ui tailwindcss lucide-react
2

Setup Styles

Import the required CSS files in your global stylesheet:
globals.css
@import "@krono/ui/globals.css";
@import "@krono/kit/globals.css";
3

Configure Path Aliases

Add path aliases to your tsconfig.json:
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.
App.tsx
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.
layout.tsx
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:
OrderbookCard.tsx
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:

React Example

Vite + React implementation
https://assets.vercel.com/image/upload/v1662130559/nextjs/Icon_light_background.png

Next.js Example

Production app with advanced features

​
Next Steps

Components

Explore available components

Configuration

Configure orderbook behavior

Hooks

Learn about the underlying hooks

Providers

Understand provider architecture