# HR & payroll app UI for React People at work: shifts, timesheets, hiring and payroll. 15 live React screens in [Beamline](https://beamline.io/), in working order, each in nine looks. ## Screens 1. [Shift planner](https://beamline.io/components/shift-planner.md): A workplace's week of staff shifts against what it needs: a row per person with their week's hours against their contract, each day a 24-hour track with… 2. [Shift rotations](https://beamline.io/components/shift-rotations.md): Rotating shift patterns from pattern to people: a pattern of one to four weeks painted day by day with a shift template, a rest day or nothing (pick the… 3. [Roster publishing](https://beamline.io/components/roster-publish.md): The week's roster before it goes out: areas down the side and days across, each shift a chip with who works it and its hours, its state its tone (not… 4. [My shift](https://beamline.io/components/my-shift.md): The worker's own shift on their phone: today drawn to scale (the plan's areas as blocks on an hour axis, under them what was worked: on-plan time in… 5. [Timesheet review](https://beamline.io/components/timesheet-review.md): Timesheets for a manager: the day's counts at the head (scheduled, on shift, late, on break, to approve), the ones that filter being buttons, an… 6. [Hours ledger](https://beamline.io/components/hours-ledger.md): One worker's pay cycle of shifts, for the worker or their payroll admin: the wall-clock span and the paid hours as separate columns, a night shift… 7. [Payroll run](https://beamline.io/components/payroll-run.md): A pay period from report to submission, one payroll account at a time (a worker on two accounts is on both runs, never combined): the workers on one… 8. [Payroll cycles](https://beamline.io/components/payroll-cycles.md): The client's side of an outsourced payroll across countries: every entity's current cycle on one board, its stage drawn as steps, the one thing that… 9. [Payroll approvals](https://beamline.io/components/payroll-approvals.md): Payroll approvals for a company paying through a payroll provider. Expenses are split by whose move it is (you, another approver, the employee answering… 10. [Benefit changes](https://beamline.io/components/benefit-changes.md): An employee's benefit changes after a life event. The centre puts their turn first: each task (a proof to upload, with its deadline in the warning tint… 11. [Hiring pipeline](https://beamline.io/components/hiring-pipeline.md): A recruiting team's pipeline across every open job. Stage groups (reviewing, interviewing, closing) are counted across jobs above job sections that fold… 12. [Recruiter home](https://beamline.io/components/recruiter-home.md): A recruiter's own work, in one place. Upcoming interviews with who sits in, today's first; feedback owed, overdue first and on the danger tone, written… 13. [Stage reports](https://beamline.io/components/stage-reports.md): Reports on how applications move through stages, built from each application's stage intervals. By week: applications present in each stage (or from each… 14. [Link booking](https://beamline.io/components/link-booking.md): A candidate's booking link for one stage of one job: a column with the job, the stage's length, who they meet (each with their role), where and what the… 15. [Team & members](https://beamline.io/components/team-members.md) (free): The people page of a workspace: seats used against the plan, members and pending invitations in one list with search and a role filter, role changes that… ## The parts they're built from - [Avatar](https://beamline.io/components/avatar.md) (free): in 15 of these screens - [Button](https://beamline.io/components/button.md) (free): in 15 of these screens - [Label](https://beamline.io/components/label.md) (free): in 15 of these screens - [Spinner](https://beamline.io/components/spinner.md) (free): in 15 of these screens - [Select](https://beamline.io/components/select.md) (free): in 13 of these screens - [Skeleton](https://beamline.io/components/skeleton.md) (free): in 13 of these screens - [Text morph](https://beamline.io/components/text-morph.md) (free): in 12 of these screens - [Tooltip](https://beamline.io/components/tooltip.md) (free): in 12 of these screens - [Segmented control](https://beamline.io/components/segmented-control.md) (free): in 11 of these screens - [Empty state](https://beamline.io/components/empty-state.md) (free): in 10 of these screens - [Checkbox](https://beamline.io/components/checkbox.md) (free): in 8 of these screens - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) (free): in 7 of these screens - [Textarea](https://beamline.io/components/textarea.md) (free): in 7 of these screens - [Number field](https://beamline.io/components/number-field.md) (free): in 6 of these screens - [Switch](https://beamline.io/components/switch.md) (free): in 6 of these screens - [Input](https://beamline.io/components/input.md) (free): in 4 of these screens - [Slot text](https://beamline.io/components/slot-text.md) (free): in 4 of these screens - [Alert](https://beamline.io/components/alert.md) (free): in 3 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 - [Dialog](https://beamline.io/components/dialog.md) (free): in 3 of these screens - [Glow](https://beamline.io/components/glow.md) (free): in 3 of these screens - [Kbd](https://beamline.io/components/kbd.md) (free): in 3 of these screens - [Pagination](https://beamline.io/components/pagination.md) (free): in 3 of these screens - [Radio cards](https://beamline.io/components/radio-cards.md) (free): in 3 of these screens - [Search field](https://beamline.io/components/search-field.md) (free): in 3 of these screens - [Sheet](https://beamline.io/components/sheet.md) (free): in 3 of these screens - [Stepper](https://beamline.io/components/stepper.md) (free): in 3 of these screens - [Time picker](https://beamline.io/components/time-picker.md) (free): in 3 of these screens - [Bottom sheet](https://beamline.io/components/bottom-sheet.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: [Manufacturing](https://beamline.io/components/apps/manufacturing.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).