# Manufacturing app UI for React

Making things: the shop floor, production plans and energy jobs. 15 live React screens in [Beamline](https://beamline.io/), in working order, each in nine looks.

## Screens

1. [Shop floor](https://beamline.io/components/shop-floor.md): A workshop's shop floor at one workstation: each job is a card at its work centre with why it isn't ready said in words (parts short, or the previous…
2. [Production plan](https://beamline.io/components/production-plan.md): A production plan by month: each product's starting stock, forecast demand, replenishment and ending stock, every ending rolling into the next month's…
3. [Production and lots](https://beamline.io/components/production-lots.md): Stock made and stored, with every movement traceable. A batch of a recipe, read as a batch sheet: the recipe, batches (in halves) and day as one sentence…
4. [Print scheduler](https://beamline.io/components/print-scheduler.md): A print shop's production schedule. The week by station: each station's day holds its runs, with a load bar and minutes used against the station's…
5. [Plan readiness](https://beamline.io/components/plan-readiness.md): A solar plan on its way to a permit. The design checks (fire setback from the ridge, string voltage in the cold, roof load, eave and rake setbacks, the…
6. [Design inputs](https://beamline.io/components/design-inputs.md): What a solar design is checked against, and what the home really uses. Code standards and site conditions (building, electrical and fire codes, wind…
7. [Solar quote](https://beamline.io/components/solar-quote.md): A residential solar quote. The system's price at its rate per watt with adders, discounts and incentives each switched on or off: discounts come off one…
8. [Roof layout](https://beamline.io/components/roof-layout.md): The roof of a solar design. The roof in plan with every face's panels drawn as they lie under its roof type's rules (projected from the slope), each…
9. [Electrical design](https://beamline.io/components/electrical-design.md): The electrical side of a solar design. The existing service set up from a named way of connecting to it (a load-side breaker or a supply-side tap), the…
10. [Battery sizing](https://beamline.io/components/battery-sizing.md): A home battery sized beside its solar. The model and how many with capacity, power and installed price; how it runs (kept full for an outage, storing…
11. [Field conditions](https://beamline.io/components/field-conditions.md): A farm's fields and what each one's conditions are. The fields as a searchable list (each with its outline, crop, area and the layer's value, or Not…
12. [Grazing plan](https://beamline.io/components/grazing-plan.md): Mobs on a grazing rotation, on the farm's map: with a map base, its parcels are the paddocks, each filled by where it stands in the chosen mob's plan (on…
13. [Run of show](https://beamline.io/components/run-of-show.md): One service or event plan's order, run more than once: sections and items with each occurrence's start time in its own column, each item's length dragged…
14. [Sound library](https://beamline.io/components/sound-library.md): A library of sounds (or any media a person auditions before using): a search by words and #tags with facets as filters, a live "3 filters · 12 results"…
15. [Tag manager](https://beamline.io/components/tag-manager.md): Tags for one or several items at once (sounds, photos, documents). Nested tag groups are edited in place (rename, new tag), and a folded group still says…

## The parts they're built from

- [Spinner](https://beamline.io/components/spinner.md) (free): in 15 of these screens
- [Button](https://beamline.io/components/button.md) (free): in 14 of these screens
- [Label](https://beamline.io/components/label.md) (free): in 14 of these screens
- [Number field](https://beamline.io/components/number-field.md) (free): in 9 of these screens
- [Avatar](https://beamline.io/components/avatar.md) (free): in 8 of these screens
- [Dropdown menu](https://beamline.io/components/dropdown-menu.md) (free): in 8 of these screens
- [Input](https://beamline.io/components/input.md) (free): in 8 of these screens
- [Select](https://beamline.io/components/select.md) (free): in 8 of these screens
- [Tooltip](https://beamline.io/components/tooltip.md) (free): in 8 of these screens
- [Checkbox](https://beamline.io/components/checkbox.md) (free): in 6 of these screens
- [Empty state](https://beamline.io/components/empty-state.md) (free): in 6 of these screens
- [Tabs](https://beamline.io/components/tabs.md) (free): in 6 of these screens
- [Segmented control](https://beamline.io/components/segmented-control.md) (free): in 5 of these screens
- [Text morph](https://beamline.io/components/text-morph.md) (free): in 5 of these screens
- [Bottom sheet](https://beamline.io/components/bottom-sheet.md) (free): in 4 of these screens
- [Popover](https://beamline.io/components/popover.md) (free): in 4 of these screens
- [Skeleton](https://beamline.io/components/skeleton.md) (free): in 4 of these screens
- [Textarea](https://beamline.io/components/textarea.md) (free): in 4 of these screens
- [Badge](https://beamline.io/components/badge.md) (free): in 3 of these screens
- [Calendar](https://beamline.io/components/calendar.md) (free): in 3 of these screens
- [Chip group](https://beamline.io/components/chip-group.md) (free): in 3 of these screens
- [Radio cards](https://beamline.io/components/radio-cards.md) (free): in 3 of these screens
- [Radio group](https://beamline.io/components/radio-group.md) (free): in 3 of these screens
- [Alert](https://beamline.io/components/alert.md) (free): in 2 of these screens
- [Date picker](https://beamline.io/components/date-picker.md) (free): in 2 of these screens
- [Glow](https://beamline.io/components/glow.md) (free): in 2 of these screens
- [Kbd](https://beamline.io/components/kbd.md) (free): in 2 of these screens
- [Lightbox](https://beamline.io/components/lightbox.md) (free): in 2 of these screens
- [Multi-select](https://beamline.io/components/multi-select.md) (free): in 2 of these screens
- [Search field](https://beamline.io/components/search-field.md) (free): in 2 of these screens

Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

Next: [Government & legal](https://beamline.io/components/apps/government-legal.md) · [All apps](https://beamline.io/components/apps.md)

Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).
