React Microplate
The plate map that runs every assay, screen, and sample workflow in pharma and biotech. Render a 6 / 24 / 96 / 384-well grid with row letters and column numbers, filling each well by category (sample / control / standard / blank, with a legend) or by continuous value (a sequential blue ramp with a colorbar — for readout heatmaps). Wells are addressed A1-style, hover gives a readout, and clicks are yours to handle. Scales cleanly from a 96-well layout to a 384-well hit map.
96-well plate map — sample layout
1
2
3
4
5
6
7
8
9
10
11
12
A
B
C
D
E
F
G
H
96-well · 96 loaded
SampleControlStandardBlank
384-well plate — assay readout heatmap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
384-well · 384 loaded
0%100% signal
Installation
npx shadcn@latest add microplate.json
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| format | 6 \ | 24 \ | 96 \ |
| wells | Well[] | — | { id, category?, value?, label? } (A1 ids) |
| categoryColors | Record<string,string> | {} | Fill per category |
| legend | { key, label }[] | — | Category legend |
| valueRange | [string, string] | — | Colorbar labels for continuous mode |
| onWellClick | (well) => void | — | Click handler |