# Order book components for React

> 10 Order book and order entry components for React and Tailwind: bids and asks with depth bars, a depth chart, a time and sales tape and order tickets.

An exchange screen starts at the book. This page has the order book itself, with bids, asks and depth bars that show the size stacked up to each level, and the parts that sit around it: the depth chart, the tape of prints, order flow and the tickets that place an order. Each one is free, MIT licensed and lands in your repo as source through the shadcn CLI.

## Components

### Order Book

A crypto exchange order book with bids, asks and depth bars, reading the cumulative size and value up to any price level.

```bash
npx shadcn@latest add @ssych/order-book
```

Live preview: https://ssych.com/library/order-book · Plain text: https://ssych.com/library/order-book.md

### Depth Chart

A market depth chart for crypto exchanges showing bid and ask liquidity around the mid price, with a readout of size on each side.

```bash
npx shadcn@latest add @ssych/depth-chart
```

Live preview: https://ssych.com/library/depth-chart · Plain text: https://ssych.com/library/depth-chart.md

### Trade Tape

A live time and sales tape for trading terminals, streaming prints coloured by side and sized by volume, with block trades highlighted.

```bash
npx shadcn@latest add @ssych/trade-tape
```

Live preview: https://ssych.com/library/trade-tape · Plain text: https://ssych.com/library/trade-tape.md

### Order Flow

An order flow chart of the last 48 trades as bars sized by volume and coloured by side, for crypto and futures trading terminals.

```bash
npx shadcn@latest add @ssych/tape-flow
```

Live preview: https://ssych.com/library/tape-flow · Plain text: https://ssych.com/library/tape-flow.md

### Volume Profile

A volume profile chart of traded volume by price with the point of control and value area, for futures and crypto traders.

```bash
npx shadcn@latest add @ssych/volume-profile
```

Live preview: https://ssych.com/library/volume-profile · Plain text: https://ssych.com/library/volume-profile.md

### Order Ticket

A buy and sell order form for limit and market orders where price, amount and total stay in sync, for crypto exchanges and broker apps.

```bash
npx shadcn@latest add @ssych/order-ticket
```

Live preview: https://ssych.com/library/order-ticket · Plain text: https://ssych.com/library/order-ticket.md

### Quick Ticket

A watchlist row that expands into a quick order ticket for market and limit orders, for broker and stock trading apps.

```bash
npx shadcn@latest add @ssych/quick-ticket
```

Live preview: https://ssych.com/library/quick-ticket · Plain text: https://ssych.com/library/quick-ticket.md

### Leverage Ticket

A perpetual futures order ticket with margin, long or short and a leverage slider that updates position size, fees and the liquidation price.

```bash
npx shadcn@latest add @ssych/leverage-ticket
```

Live preview: https://ssych.com/library/leverage-ticket · Plain text: https://ssych.com/library/leverage-ticket.md

### Execution Controls

A hold to confirm order button for trading apps that shows the order as working, filled or rejected, with a timed undo.

```bash
npx shadcn@latest add @ssych/execution-controls
```

Live preview: https://ssych.com/library/execution-controls · Plain text: https://ssych.com/library/execution-controls.md

### Fills Blotter

A live order fills blotter for brokers and trading desks, streaming executions that land as working and resolve to filled or rejected.

```bash
npx shadcn@latest add @ssych/fills-blotter
```

Live preview: https://ssych.com/library/fills-blotter · Plain text: https://ssych.com/library/fills-blotter.md


## Questions

### Does the order book connect to an exchange?

No. It runs a demo feed out of the box and takes bids and asks as props, so you feed it from your own WebSocket or REST endpoint and switch the demo feed off. There is no exchange SDK inside.

### Can I group price levels?

Yes. You pass the market tick and the groupings you want, and the ladder regroups by the step a trader picks.

## Links

- This page: https://ssych.com/library/s/order-book
- All components: https://ssych.com/llms-full.txt