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 "http://localhost:3000/registry/microplate.json"

Usage

Loading...

Props

PropTypeDefaultDescription
format6 \24 \96 \
wellsWell[]—{ id, category?, value?, label? } (A1 ids)
categoryColorsRecord<string,string>{}Fill per category
legend{ key, label }[]—Category legend
valueRange[string, string]—Colorbar labels for continuous mode
onWellClick(well) => void—Click handler

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.