---
title: Blocks
description: Ready-made routes built from khotan components. One command installs a working page with all the wiring done for you.
section: Reference
url: /docs/blocks
---

# Blocks

A block is a ready-made route composed from one or more khotan components. Where a component gives you a reusable primitive (a table, a panel, a client), a block wires those primitives into an actual app route you can visit immediately.

Every block installs files into two locations: page routes go into your `app/` directory, and supporting UI components go into `components/khotan/`. If a block depends on a component you haven't installed yet, the CLI will offer to add it first.

## config-page-1

```terminal
$ npx khotan add config-page-1
```

Creates a `/config` page with a Hub-based operational view for plugs and flows. Use when you want a quick operator page with toggles and manual triggers.

### What gets installed

```files
app/config/page.tsx              ← the route

# Required component: hub
components/khotan/hub.tsx        ← dashboard UI
components/khotan/wire.tsx       ← wire panel
components/khotan/var-panel.tsx  ← variable management panel
```

### Dependencies

- Requires the `hub` component
- shadcn: `card`, `badge`, `table`, `switch`, `button`, `input`, `label`
- npm: `drizzle-orm`

## mappings-page-1

```terminal
$ npx khotan add mappings-page-1
```

Creates a `/mappings` page for browsing resources, searching canonical identities, and editing per-plug refs. Use when you want a dedicated mappings operator surface with paginated search, create, edit, and delete flows.

### What gets installed

```files
app/mappings/page.tsx                    ← the route

# Required component: mapping-browser
components/khotan/mapping-browser.tsx   ← searchable mappings browser
```

### Dependencies

- Requires the `mapping-browser` component
- shadcn: `card`, `table`, `button`, `input`, `label`

## graph

```terminal
$ npx khotan add graph
```

Creates a `/graph` page with a topology canvas that visualizes plugs, flows, webhook handlers, and the shared app database. Use when you want a visual architecture and runtime-state overview.

### What gets installed

```files
app/graph/page.tsx                       ← the route
components/khotan/topology-canvas.tsx   ← React Flow canvas
```

### Dependencies

- npm: `@xyflow/react`
- shadcn: `card`, `badge`

## logs-page-1

```terminal
$ npx khotan add logs-page-1
```

Creates a `/logs` page that combines run history and webhook event history into one operational log surface. Use when you want a dedicated page for execution history.

### What gets installed

```files
app/logs/page.tsx                            ← the route

# Required component: logs
components/khotan/logs.tsx                  ← composed log view
components/khotan/runs-table.tsx            ← paginated runs table
components/khotan/webhook-events-table.tsx  ← paginated webhook events table
```

### Dependencies

- Requires the `logs` component
- shadcn: `card`, `table`, `badge`, `button`

## debug-page-1

```terminal
$ npx khotan add debug-page-1
```

Creates a `/debug` index page listing all plugs and a `/debug/[plugName]` detail page with the interactive plug debugger. Use when you want developers and agents to debug plug requests from the app UI.

### What gets installed

```files
app/debug/page.tsx              ← plug list index route
app/debug/[plugName]/page.tsx   ← per-plug debugger route

# Required component: plug-debugger
components/khotan/plug-debugger.tsx  ← interactive debug panel
```

### Dependencies

- Requires the `plug-debugger` component (which requires `plug`)
- shadcn: `card`, `badge`, `button`, `input`, `label`

## How dependencies work

Blocks can depend on components. When you run `npx khotan add <block>`, the CLI checks whether the required components are already installed. If they're missing, it will prompt you to install them first. Component files go into your khotan output directory (default `src/lib/khotan/`) and `components/khotan/`, while block route files go into your `app/` directory.

## Next steps

- [Preview all blocks](/blocks) in the visual gallery.
- Read [Components](/docs/components) for the underlying primitives.
- Read [CLI Reference](/docs/cli) for commands that operate on the runtime once these pages exist.