Description
Dashboards that speak the language of the plant floor, as source code in your React or Next.js project: LL/L/H/HH limits, data quality, ISA-18.2 alarms with acknowledgement, OEE, power flows, site fleet map.
Live demo: https://consigne-studio.github.io/blocs-industrie-demo/?lang=en (all 31 blocks and 3 screens, light and dark, English and French, simulated data).
31 blocks in seven families:
- Measurements and setpoints: threshold KPI card with sparkline and normal band, KPI strip, analog gauge, measurement table (frozen-value detection), bounded and confirmed setpoint change.
- Trends: real-time trend with limits and pause, multi-series without dual axes, period comparison.
- Alarms and events: banner, alarm table (ISA-18.2 sort, filters, single or bulk acknowledgement, shelving), summary and rate per 10 minutes, top chattering sources, event log with CSV export.
- Production and OEE: OEE and its three factors, loss waterfall, 7-day OEE, shift counter with projection, hourly production, state timeline, downtime Pareto.
- Equipment: card, filterable list, command (auto / manual / local, permissives, confirmation), maintenance with ISO 10816 vibration zones.
- Energy: PV / grid / battery / load flows, battery, energy origin, load curve against contracted power.
- Site fleet: fleet map, site card, communication status.
3 full screens: fleet view (8 sites), site view (energy, equipment, alarms, log), machine view (measurements, trends, OEE, states, setpoint, maintenance), in a layout with a collapsible sidebar. Each screen reads its data from a single hook: swap the simulation for your API, MQTT or OPC UA, the layout stays put.
Built for the control room. The blocks follow high-performance HMI (ISA-101): grey screen at rest, colour reserved for abnormal situations, state carried by shape, never information by colour alone, animations off when the user reduces motion.
Native shadcn install. npx shadcn@latest add ./registry/r/alarm-table.json copies the block, its dependencies and the light and dark colour tokens. Manual copy works too. Tested in a blank project with shadcn CLI 4 and both Recharts 2.15 and 3.x.
State at delivery, measured on the archive sold: npm ci && npm run check green, 51 unit and component tests, 76 end-to-end tests (every page on desktop and at 390 px wide, theme, language, keyboard acknowledgement, setpoint confirmation), strict typing, lint clean, 0 npm vulnerabilities.
Scope and limits
- You get the full source code (zip archive): blocks, screens, library, shadcn registry, demo app, tests, installation guide in English and French.
- Requirements: React 19, Tailwind CSS 4, shadcn/ui initialised (new-york style, Radix primitives). Next.js 15 or 16, or Vite. For shadcn on Base UI, an adaptation of the sidebar layout is described.
- These are interface components: they display your data and hand the operator's actions back to you. They do not connect to your PLCs themselves and do not replace a control system or your safety analysis.
- Demo data is simulated; sites, equipment and teams are fictitious. The demo fleet map is drawn on a map of France; the fleet map block takes your own coordinates and outline.
- Labels in English and French; another language means translating one dictionary.
- Code comments are in French; the API, props, types, labels and installation guide are in English.
- Updates within major version 1 included.
- Built with the help of an AI (Claude), reviewed and tested. shadcn/ui is an independent project; this product is neither affiliated with nor endorsed by its authors.
Licence
- Developer ($79): one person, unlimited projects, personal, commercial or for clients. Applications you build can be distributed freely.
- Team ($199): the same rights for up to 10 developers in one organisation, with the registry hosted on an internal server.
- Not allowed in either case: reselling or publishing the blocks themselves, or hosting them on a public registry.
- Refund within 14 days if the product does not work as described.
FAQ (on the listing)
Do I need Next.js? No. The blocks are client components with no Next.js dependency; only the screen layout accepts your router's Link component.
My shadcn primitives are customised. The blocks use the standard API (Card, Button, Table…): answer "no" when the CLI offers to overwrite your files, and the blocks take on your style.
How do I connect my data? Each block takes simple props (types included) and hands actions back through functions (onAck, onApply, onCommand). The guide shows a WebSocket example.
Dark theme, my brand colours? Light and dark included; alarm colours are CSS variables you can adjust.
How do I get updates? Through Gumroad, in your purchase library.
Invoice in my company's name? Yes: enter the company name and VAT number at checkout.
Contact: [email protected]
