shadcn.io is not affiliated with official shadcn/ui
Production Schedule Calendar Block for Ark UI
Four foundry lines by five days of planned runs against each line's capacity, with over or room in words, hatched maintenance windows, an Early and Late shift switch and a 50-unit stepper that re-derives the week.
Installation
Overview
See at a glance which production runs overload a line with this production schedule for React with Ark UI. A hairline frame with a plus mark on each corner holds a table of four lines down the side and Monday to Friday, 12 to 16 October 2026, across the top. Each cell is a planned run in units set against what the line can pour in a shift, with the difference in words ("Over by 120", "Room for 80", "At capacity") and a small shape beside it. Maintenance windows are hatched, locked cells with no run. A Toggle Group switches between the Early and Late shifts, and a Progress bar above the table shows what is planned against the shift's capacity ("Planned 18,000 of 18,500") and how many runs are over. Press a run to pick it and step it by 50 units with the buttons under the table; the cell, the bar and the count change together, and Reset run returns it to the plan. The names stay in place while the days scroll on a phone, and the bands are ruled by Guides. It's built from Toggle Group, Progress, Button and Guides, with a CSS entrance only. For manufacturing planners, kitchens, print shops and any plant that books lines by the shift.
FAQ
How do I load my own runs and capacities?
Edit LINES, EARLY and LATE. Each line has a capacity per shift; EARLY and LATE hold twenty numbers each, five days for each line in order, and -1 marks a maintenance window. The cell words, the totals and the bar are worked out from them.
What do Over and Room mean?
A run is over when the planned units are more than the line's capacity for the shift, and the cell says by how many. When it is under, the cell says how many units of room are left, and when it equals capacity it says so. Each state also has its own shape, so nothing relies on color.
Why a stepper and not a number field?
Pressing a run and stepping it by 50 gives a quick, keyboard-friendly way to move a plan and works the same on every target. For free typing, swap in your own number field and write its value with write.
Why is the week fixed?
Nothing in the block reads the clock. The week is typed, so the table, the viewer and a screenshot are identical on any date, and Wednesday 14 October carries the Today marker.