React Availability Widget
Can I get it, how many, and when? — the first question every hardware buyer asks and the one most product pages send to a contact form. Putting stock, lead time, and MOQ on the page removes an entire email round-trip from the funnel.
KLV-7000-P-G-D-I
Availability
- Distributor stock
- 16,490
- Factory lead time
- 8–10 wks
| Distributor | Stock | MOQ | Unit | Ships | |
|---|---|---|---|---|---|
| Arrowline ElectronicsGlobal | 12,480 | 1 | $214 | Same day | Buy |
| Mouser-RheinEMEA | 3,150 | 10 | $219 | 1–2 days | Buy |
| Kanto DevicesAPAC | 860 | 100 | $208 | 3–5 days | Buy |
| Vector SupplyAmericas | — | 500 | $201 | On backorder |
Stock updated 21 Jul 2026, 09:15 UTC. Distributor stock changes constantly — confirm before you commit to a build.
Request a quoteInstallation
Props
| Prop | Type | Description |
|---|---|---|
| partNumber | string | The orderable part this applies to |
| leadTime | string | Factory lead time, e.g. "8–10 wks" |
| distributors | DistributorStock[] | Stock rows |
| status | "in-production" \ | "constrained" \ |
| lastOrderDate | string | Last time buy — shown against eol |
| updatedAt | string | When the stock figures were refreshed |
| currency | string | Currency symbol (default "$") |
| — | — | Button in the footer |
DistributorStock is { name, stock, ships?, moq?, unitPrice?, href?, region? }. A zero stock row renders as an em dash rather than a 0, so "none right now" does not read as a data error.
Stale stock is worse than no stock
This component shows numbers that are wrong within hours of being fetched, and a buyer who plans a build around a stale figure will be far angrier than one who was told to check.
So: set updatedAt, keep the standing caveat in the footer, and drive the figures from a real feed — a scheduled revalidation, or a distributor API called server-side. Do not hard-code stock into a static page.
Use status honestly too. constrained on a part you can barely supply is far better received than silence followed by a twenty-week quote, and eol with a lastOrderDate is the single most valuable thing you can tell a customer with a product in the field.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.