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

# Getting Started

> Get up and running with Krono Kit

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](https://krono-storybook.vercel.app).

To get started, install the required packages.

<Warning>
  The Krono packages are not yet published to npm. Follow the [development guide](/docs/development/getting-started) to install and link the packages locally.
</Warning>

<Steps>
  <Step title="Install Dependencies">
    Install the required dependencies:

    <CodeGroup>
      ```bash bun theme={null}
      bun add @krono/kit @krono/ui tailwindcss lucide-react
      ```

      ```bash pnpm theme={null}
      pnpm add @krono/kit @krono/ui tailwindcss lucide-react
      ```

      ```bash npm theme={null}
      npm install @krono/kit @krono/ui tailwindcss lucide-react
      ```

      ```bash yarn theme={null}
      yarn add @krono/kit @krono/ui tailwindcss lucide-react
      ```
    </CodeGroup>
  </Step>

  <Step title="Setup Styles">
    Import the required CSS files in your global stylesheet:

    ```css globals.css theme={null}
    @import "@krono/ui/globals.css";
    @import "@krono/kit/globals.css";
    ```
  </Step>

  <Step title="Configure Path Aliases">
    Add path aliases to your `tsconfig.json`:

    ```json tsconfig.json theme={null}
    {
        "compilerOptions": {
            "baseUrl": ".",
                "paths": {
                    "@/*": ["./src/*"],
                    "@krono/ui/*": ["../../packages/ui/src/*"],
                    "@ui/*": ["../../packages/ui/src/*"]
            }
        }
    }
    ```

    <Info>
      Some bundlers (like Vite) require additional alias configuration in their config files. Next.js resolves these paths automatically from `tsconfig.json`.
    </Info>
  </Step>
</Steps>

## 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](https://github.com/fapiper/krono/blob/main/examples/react/src/App.tsx).

```tsx App.tsx theme={null}
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](https://github.com/fapiper/krono/blob/main/apps/web/src/components/orderbook-card.tsx).

```tsx layout.tsx theme={null}
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>
  );
}
```

<Info>
  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.
</Info>

## Complete Example

Here's a full orderbook implementation with table and playback controls:

```tsx OrderbookCard.tsx theme={null}
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:

<CardGroup cols={2}>
  <Card title="React Example" icon="react" href="https://github.com/fapiper/krono/tree/main/examples/react">
    Vite + React implementation
  </Card>

  <Card title="Next.js Example" icon="https://assets.vercel.com/image/upload/v1662130559/nextjs/Icon_light_background.png" href="https://github.com/fapiper/krono/tree/main/apps/web">
    Production app with advanced features
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Components" icon="puzzle" href="/docs/kit/components/OrderbookTable">
    Explore available components
  </Card>

  <Card title="Configuration" icon="cog" href="/docs/kit/configuration/overview">
    Configure orderbook behavior
  </Card>

  <Card title="Hooks" icon="square-function" href="/docs/hooks/getting-started">
    Learn about the underlying hooks
  </Card>

  <Card title="Providers" icon="layers" href="/docs/hooks/providers/orderbook-provider">
    Understand provider architecture
  </Card>
</CardGroup>