React Wafer Map
A semiconductor wafer die map: every die on the wafer is colored by its test bin (pass and fail categories), clipped to the wafer circle with a notch. The header shows yield, hovering a die reveals its coordinates and bin, and the legend counts each bin.
Lot 24B · Wafer 07
29×29Pass474Edge64Leakage22Open/Short11Parametric6
Installation
npx shadcn@latest add "https://kelvinui.com/registry/wafer-map.json"
Props
| Prop | Type | Description |
|---|---|---|
| map | (string \ | null)[][] |
| bins | Record<string, WaferBin> | Bin definitions { label, color, pass? } |
| notch | "top"\ | "bottom"\ |
| title | string | Header label |
Yield is the share of dies whose bin has pass: true. Build the map however you like — the demo generates a circular wafer with a defect cluster.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.