# Shop app UI for React Selling things: products, orders, returns and the people who buy them. 25 live React screens in [Beamline](https://beamline.io/), in working order, each in nine looks. ## Screens 1. [Product editor](https://beamline.io/components/product-editor.md): A product being made in a shop's back office, every value read as text at rest. The variant grid, grouped by the first option, lists each combination… 2. [Category manager](https://beamline.io/components/category-manager.md): A shop's product categories, nested and ranked. Each category moves up, down or into another from its menu, and every move gets its own receipt (saving… 3. [Inventory item](https://beamline.io/components/inventory-item.md): One stock item in a shop's back office, apart from the variants that sell it (how many each uses per unit). Stock per location as stocked, reserved and… 4. [Plan comparison](https://beamline.io/components/plan-comparison.md) (free): Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in… 5. [Step form](https://beamline.io/components/step-form.md): The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the… 6. [Orders admin](https://beamline.io/components/orders-admin.md): A shop's order desk: today's orders and revenue, quick filters for what needs doing (to fulfil, unpaid, returns), a virtualised orders grid, and the… 7. [Order detail](https://beamline.io/components/order-detail.md): One shop order with payment and fulfilment as two separate lanes. The header says where each stands (paid, partly paid, awaiting, refunded; not… 8. [Order board](https://beamline.io/components/order-board.md): A shop's orders as cards in its columns, on the shared kanban with drag and keyboard moves. Each card: number, estimate or work order, customer, vehicle… 9. [Order composer](https://beamline.io/components/order-composer.md): An order made inside a support ticket: products found by name, each variant with its stock drawn and said (in stock, none, oversold, not known) and the… 10. [Draft orders](https://beamline.io/components/draft-orders.md): A draft order made for a customer in a shop's back office that reads like the order it will become. The lines lead: each with its variant and SKU or… 11. [Order changes](https://beamline.io/components/order-changes.md): What happens to a shop order after it's placed. Edit: the order as it stands beside the requested version, each line marked new, changed (old → new… 12. [Special orders](https://beamline.io/components/special-orders.md): Customers' special orders as demand to buy for, per outlet: To order apart from Ordered; each product's demand, what is reserved, incoming and on order… 13. [Order history and fills](https://beamline.io/components/order-history.md): Every order the account placed and every fill it got, for a period: totals for volume, fees, fill rate and maker share; orders with their status and how… 14. [Order ledger](https://beamline.io/components/order-ledger.md): Purchase orders as money. Each order's spend is drawn against its approved total (paid, billed, pending, what is left, and any overrun past the end… 15. [Ticket orders](https://beamline.io/components/ticket-orders.md): A customer's orders inside a support ticket, each action's effect said before it's done: orders and drafts kept apart, a paid draft shown once as its… 16. [Record search](https://beamline.io/components/record-search.md): One search across connected records (customers, vehicles, orders) by name, phone, plate, VIN or order number. What the words look like is said (info)… 17. [Return queue](https://beamline.io/components/return-queue.md): A queue of return cases. Search by return, order or customer, exactly (the default) or loosely; status tabs with counts, Requires attention first; a date… 18. [Return case](https://beamline.io/components/return-case.md): One return as one place where every act is its own. The return, its order (linked out) and the customer on three cards; the stage said on its tone. Items… 19. [Return request](https://beamline.io/components/return-request.md): Staff start a return from an order, and edit the reasons customers pick. New return: the order's lines as a checklist, each with its variant, price and… 20. [Purchase orders](https://beamline.io/components/purchase-orders.md): A salon's purchase orders, received: the orders down the side, the chosen one beside them. Each line still due reads as a strip of received, this… 21. [Print quote](https://beamline.io/components/print-quote.md): A print shop's quoting in three places. Quote: a group of garments that share one imprint and one quantity break, the group's pieces counted together and… 22. [Service estimate](https://beamline.io/components/service-estimate.md): An estimate for one vehicle. Services added from the catalogue (one not listed for this vehicle said on warning, fit unknown said); each with its lines… 23. [Job card](https://beamline.io/components/job-card.md): A technician's repair order, phone-first. The vehicle, the customer and when it's due in words (due at, due in, overdue by how long); an offline copy… 24. [Parts tracker](https://beamline.io/components/parts-tracker.md): Parts across a shop's work orders: each with its number, the order and vehicle, supplier, quantity and cost (not known said), and where it is: ordered… 25. [Visit board](https://beamline.io/components/visit-board.md): The staff board for a walk-in queue: visits move from waiting through called and serving to done today. Arrival (here or on the way), the place in the… ## The parts they're built from - [Button](https://beamline.io/components/button.md) (free): in 25 of these screens - [Spinner](https://beamline.io/components/spinner.md) (free): in 25 of these screens - [Label](https://beamline.io/components/label.md) (free): in 24 of these screens - [Select](https://beamline.io/components/select.md) (free): in 22 of these screens - [Avatar](https://beamline.io/components/avatar.md) (free): in 20 of these screens - [Tooltip](https://beamline.io/components/tooltip.md) (free): in 20 of these screens - [Number field](https://beamline.io/components/number-field.md) (free): in 17 of these screens - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) (free): in 14 of these screens - [Segmented control](https://beamline.io/components/segmented-control.md) (free): in 14 of these screens - [Text morph](https://beamline.io/components/text-morph.md) (free): in 14 of these screens - [Input](https://beamline.io/components/input.md) (free): in 12 of these screens - [Checkbox](https://beamline.io/components/checkbox.md) (free): in 11 of these screens - [Switch](https://beamline.io/components/switch.md) (free): in 11 of these screens - [Alert](https://beamline.io/components/alert.md) (free): in 9 of these screens - [Bottom sheet](https://beamline.io/components/bottom-sheet.md) (free): in 9 of these screens - [Inline edit](https://beamline.io/components/inline-edit.md) (free): in 9 of these screens - [Badge](https://beamline.io/components/badge.md) (free): in 8 of these screens - [Empty state](https://beamline.io/components/empty-state.md) (free): in 8 of these screens - [Skeleton](https://beamline.io/components/skeleton.md) (free): in 7 of these screens - [Textarea](https://beamline.io/components/textarea.md) (free): in 6 of these screens - [Combobox](https://beamline.io/components/combobox.md) (free): in 5 of these screens - [Sheet](https://beamline.io/components/sheet.md) (free): in 5 of these screens - [Slot text](https://beamline.io/components/slot-text.md) (free): in 5 of these screens - [Alert Dialog](https://beamline.io/components/alert-dialog.md) (free): in 4 of these screens - [Chip group](https://beamline.io/components/chip-group.md) (free): in 4 of these screens - [Glow](https://beamline.io/components/glow.md) (free): in 4 of these screens - [Kbd](https://beamline.io/components/kbd.md) (free): in 4 of these screens - [Pagination](https://beamline.io/components/pagination.md) (free): in 4 of these screens - [Popover](https://beamline.io/components/popover.md) (free): in 4 of these screens - [Radio group](https://beamline.io/components/radio-group.md) (free): in 4 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: [Inventory](https://beamline.io/components/apps/inventory.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).