Getting Started

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

pnpm add @krono/kit @krono/ui tailwindcss lucide-react

npm install @krono/kit @krono/ui tailwindcss lucide-react

yarn add @krono/kit @krono/ui tailwindcss lucide-react

Setup Styles

Import the required CSS files in your global stylesheet:

globals.css

@import "@krono/ui/globals.css";
@import "@krono/kit/globals.css";

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

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

​Basic Usage

​Option 1: Standalone Root Component

​Option 2: Provider Pattern

​Complete Example

​Reference Implementations

React Example

Next.js Example

​Next Steps

Components

Configuration

Hooks

Providers

Basic Usage

Option 1: Standalone Root Component

Option 2: Provider Pattern

Complete Example

Reference Implementations

Next Steps